Develop

app/academia/computer-science/page.js

@@ -23,7 +23,7 @@ const PostPreview = props => {
       </Link>
       <div className="flex items-center justify-between">
         <span className="">&rarr; {props.subtitle}</span>
-        <span className="whitespace-nowrap font-press-start text-xs capitalize text-amber-300">
+        <span className="whitespace-nowrap font-press-start text-xs capitalize text-red-300">
           {props.subcategory.replaceAll('-', ' ')}
         </span>
       </div>

app/academia/page.js

@@ -63,7 +63,7 @@ export default function PostsPage() {
         <span className="mx-2">|</span>
         <Link href="/academia/computer-science">
           <span className="font-press-start text-red-300 hover:text-red-500">
-            Computer Science
+            CS
           </span>
         </Link>
         <span className="mx-2">|</span>

app/globals.css

@@ -107,30 +107,50 @@
   }
 }
 
-.btnBorder {
+.blueBtnBorder {
   cursor: pointer;
 }
 
-.btnBorder:hover {
+.blueBtnBorder:hover {
   box-shadow: 2px 2px 0 0 #93c5fd;
   transform: translate(2px, 2px);
 }
 
-.btnBorderFake,
-.btnBorder {
+.blueBtnBorderFake,
+.blueBtnBorder {
   box-shadow: 4px 4px 0 0 #93c5fd;
   border: 2px solid #93c5fd;
   transition-duration: 200ms;
 }
 
 .purpleBtnBorder:hover {
-  box-shadow: 2px 2px 0 0 #6d28d9;
+  box-shadow: 2px 2px 0 0 #d8b4fe;
   transform: translate(2px, 2px);
 }
 
 .purpleBtnBorder {
-  box-shadow: 4px 4px 0 0 #6d28d9;
-  border: 2px solid #6d28d9;
+  box-shadow: 4px 4px 0 0 #d8b4fe;
+  border: 2px solid #d8b4fe;
+}
+
+.orangeBtnBorder:hover {
+  box-shadow: 2px 2px 0 0 #fdba74;
+  transform: translate(2px, 2px);
+}
+
+.orangeBtnBorder {
+  box-shadow: 4px 4px 0 0 #fdba74;
+  border: 2px solid #fdba74;
+}
+
+.slateBtnBorder:hover {
+  box-shadow: 2px 2px 0 0 #cbd5e1;
+  transform: translate(2px, 2px);
+}
+
+.slateBtnBorder {
+  box-shadow: 4px 4px 0 0 #cbd5e1;
+  border: 2px solid #cbd5e1;
 }
 
 header,

app/page.js

@@ -1,69 +1,11 @@
 import Link from 'next/link';
 import React from 'react';
 
+import LinkSection from '@/components/LinkSection';
 import MagicBookButton from '@/components/MagicBookButton';
 import MainWrapper from '@/components/MainWrapper';
 import sections from '@/data/home/sections.json';
 
-function LinkSection(props) {
-  const { title, array, color, children } = props;
-
-  const textColorClass =
-    {
-      purple: 'text-purple-400',
-      pink: 'text-pink-400',
-      blue: 'text-blue-400',
-      amber: 'text-amber-400',
-      orange: 'text-orange-400',
-      red: 'text-red-400',
-    }[color] || 'text-blue-400';
-
-  const hoverTextColorClass =
-    {
-      purple: 'hover:text-purple-300',
-      pink: 'hover:text-pink-300',
-      blue: 'hover:text-blue-300',
-      amber: 'hover:text-amber-300',
-      orange: 'hover:text-orange-300',
-      red: 'hover:text-red-300',
-    }[color] || 'hover:text-blue-300';
-
-  return (
-    <section className="grid grid-cols-1 flex-col gap-4 md:grid-cols-2">
-      <h3 className={`${textColorClass} font-press-start md:col-span-2`}>
-        ✦ {title} ✦
-      </h3>
-      {array &&
-        array.map((link, linkIndex) => {
-          const textSizeClass =
-            link.name.length >= 12 ? 'text-sm' : 'text-base';
-          return (
-            <Link
-              href={link.link}
-              target={link.target}
-              key={linkIndex}
-              className={`btnBorder relative grid place-items-center rounded-lg bg-blue-950 p-4 text-blue-100 ${hoverTextColorClass}`}
-            >
-              <i
-                className={`absolute left-4 top-1/2 -translate-y-1/2 text-xl ${
-                  linkIndex < 4 && title === 'Links' ? 'specialShadow' : ''
-                } ${link.icon}`}
-              ></i>
-              <p
-                className={`${textSizeClass} ${
-                  [].includes(link.name) ? 'specialShadow' : ''
-                } font-press-start`}
-              >
-                {link.name}
-              </p>
-            </Link>
-          );
-        })}
-      {children}
-    </section>
-  );
-}
-
 export default function HomePage() {
   const { profile, academia, personal, socials } = sections;
 
@@ -80,7 +22,7 @@ export default function HomePage() {
               href={link.link}
               target={link.target}
               key={linkIndex}
-              className="btnBorder relative grid place-items-center rounded-lg bg-blue-900 p-3 text-blue-100 hover:text-cyan-300"
+              className="slateBtnBorder relative grid place-items-center rounded-lg bg-slate-100 p-3 text-slate-900 hover:text-slate-700"
             >
               <i className={'text-3xl ' + link.icon}></i>
             </Link>

components/BackLink.js

@@ -11,7 +11,10 @@ export default function BackLink(props) {
       href={backLink}
       className={`${titleColorClasses['after-bg-500']} group relative mr-auto overflow-hidden text-blue-100 after:absolute after:right-full after:top-0 after:z-[-1] after:size-full after:duration-200 hover:after:translate-x-full`}
     >
-      <p className="duration-200 group-hover:text-[#030615]">&larr; Back</p>
+      <p className="font-press-start duration-200 group-hover:text-[#030615]">
+        <i className="fa-solid fa-arrow-left text-xl"></i>
+        <span className="ml-3 text-sm">Back</span>
+      </p>
     </Link>
   );
 }

components/LinkSection.js

@@ -0,0 +1,44 @@
+import Link from 'next/link';
+import React from 'react';
+
+import { colorMappings } from '@/utils/colors';
+
+export default function LinkSection(props) {
+  const { title, array, color, children } = props;
+  const colorClasses = colorMappings[color] || colorMappings.blue;
+
+  return (
+    <section className="grid grid-cols-1 flex-col gap-4 md:grid-cols-2">
+      <h3 className={`${colorClasses[400]} font-press-start md:col-span-2`}>
+        ✦ {title} ✦
+      </h3>
+      {array &&
+        array.map((link, linkIndex) => {
+          const textSizeClass =
+            link.name.length >= 12 ? 'text-sm' : 'text-base';
+          return (
+            <Link
+              href={link.link}
+              target={link.target}
+              key={linkIndex}
+              className={`${color}BtnBorder relative grid place-items-center rounded-lg ${colorClasses['button-bg']} ${colorClasses['hover-bg-950']} p-4 text-blue-100 ${colorClasses['hover-200']}`}
+            >
+              <i
+                className={`absolute left-4 top-1/2 -translate-y-1/2 text-xl ${
+                  linkIndex < 4 && title === 'Links' ? 'specialShadow' : ''
+                } ${link.icon}`}
+              ></i>
+              <p
+                className={`${textSizeClass} ${
+                  [].includes(link.name) ? 'specialShadow' : ''
+                } font-press-start`}
+              >
+                {link.name}
+              </p>
+            </Link>
+          );
+        })}
+      {children}
+    </section>
+  );
+}

tailwind.config.js

@@ -21,14 +21,17 @@ export default {
   },
   plugins: [typography],
   safelist: [
+    'bg-[#090d2a]', // blue
+    'bg-[#2a1b10]', // orange
+    'bg-[#1d1329]', // purple
     {
       pattern:
         /text-(purple|pink|blue|orange)-(50|100|200|300|400|500|600|700)/,
       variants: ['hover'],
     },
     {
-      pattern: /bg-(purple|pink|blue|orange)-500/,
-      variants: ['after'],
+      pattern: /bg-(purple|pink|blue|orange)-(500|950)/,
+      variants: ['after', 'hover'],
     },
     {
       pattern: /border-(purple|pink|blue|orange)-(100|400)/,

utils/colors.js

@@ -5,10 +5,13 @@ const purpleClasses = {
   300: 'text-purple-300',
   400: 'text-purple-400',
   500: 'text-purple-500',
+  'hover-200': 'hover:text-purple-200',
   'hover-700': 'hover:text-purple-700',
   'after-bg-500': 'after:bg-purple-500',
+  'hover-bg-950': 'hover:bg-purple-950',
   'border-100': 'border-purple-100',
   'border-400': 'border-purple-400',
+  'button-bg': 'bg-[#1d1329]',
 };
 
 const pinkClasses = {
@@ -18,10 +21,13 @@ const pinkClasses = {
   300: 'text-pink-300',
   400: 'text-pink-400',
   500: 'text-pink-500',
+  'hover-200': 'hover:text-pink-200',
   'hover-700': 'hover:text-pink-700',
   'after-bg-500': 'after:bg-pink-500',
+  'hover-bg-950': 'hover:bg-pink-950',
   'border-100': 'border-pink-100',
   'border-400': 'border-pink-400',
+  'button-bg': 'bg-pink-950',
 };
 
 const blueClasses = {
@@ -31,10 +37,13 @@ const blueClasses = {
   300: 'text-blue-300',
   400: 'text-blue-400',
   500: 'text-blue-500',
+  'hover-200': 'hover:text-blue-200',
   'hover-700': 'hover:text-blue-700',
   'after-bg-500': 'after:bg-blue-500',
+  'hover-bg-950': 'hover:bg-blue-950',
   'border-100': 'border-blue-100',
   'border-400': 'border-blue-400',
+  'button-bg': 'bg-[#090d2a]',
 };
 
 const orangeClasses = {
@@ -44,10 +53,13 @@ const orangeClasses = {
   300: 'text-orange-300',
   400: 'text-orange-400',
   500: 'text-orange-500',
+  'hover-200': 'hover:text-orange-200',
   'hover-700': 'hover:text-orange-700',
   'after-bg-500': 'after:bg-orange-500',
+  'hover-bg-950': 'hover:bg-orange-950',
   'border-100': 'border-orange-100',
   'border-400': 'border-orange-400',
+  'button-bg': 'bg-[#2a1b10]',
 };
 
 export const colorMappings = {