w3bdesign · w3bdesign · Nov 8, 2024 · Nov 8, 2024 · Nov 8, 2024
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,36 +3,51 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --matrix-green: #00ff62;
+  --matrix-dark: #008529;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+body {
+  background-color: #0a0a0a;
+  color: #e1e1e1;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
+/* Matrix canvas */
+#matrixCanvas {
+  opacity: 0.9;
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+/* Selection */
+::selection {
+  background-color: var(--matrix-dark);
+  color: #ffffff;
 }
 
-html,
-body {
-  height: 100%;
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1a1a1a;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--matrix-dark);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--matrix-green);
+}
+
+/* Remove focus outline */
+:focus {
+  outline: none;
 }
 
-#__next {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+/* Remove focus visible outline */
+:focus-visible {
+  outline: none;
 }
diff --git a/src/components/Index/Hero.component.tsx b/src/components/Index/Hero.component.tsx
@@ -44,35 +44,34 @@ const Hero = ({ content }: IContent) => {
       <div className="hidden md:block absolute inset-0 w-full h-full">
         <ReactMatrixAnimation />
       </div>
-      <FadeDown delay={0.1}>
-        <div className="relative z-10 mt-12 md:mb-4 p-2 md:mt-4 lg:mt-4 xl:mt-4 mb-14 md:mb-6">
-          <div className="rounded">
-            <section>
-              <FadeDown delay={0.5} cssClass="text-center">
-                <h1
-                  data-cy="hei"
-                  className="introtekst inline-block text-5xl text-slate-300"
-                >
-                  {content.length > 0 ? content[0].text : "Hei!"}
-                </h1>
-              </FadeDown>
-              <FadeUp
-                delay={0.9}
-                cssClass="mt-4 px-6 text-lg md:mx-auto md:p-0 md:text-center md:text-xl lg:w-2/3 lg:p-0 lg:text-center lg:text-xl xl:p-0 xl:text-center xl:text-2xl text-slate-300"
-              >
-                <h2>{content.length > 0 && content[1].text}</h2>
-              </FadeUp>
-              <FadeDown
-                delay={1.4}
-                cssClass="mt-4 px-6 text-lg md:mx-auto md:p-0 md:text-center md:text-xl lg:w-2/3 lg:p-0 lg:text-center lg:text-xl xl:p-0 xl:text-center xl:text-2xl text-slate-300"
-              >
-                <p>{content.length > 0 && content[2].text}</p>
-              </FadeDown>
-              <Icons />
-            </section>
+      <div className="relative z-10">
+        <section className="text-center">
+          <FadeDown delay={0.5}>
+            <h1 
+              data-cy="hei"
+              className="text-6xl font-bold text-[#00ff62]"
+            >
+              {content.length > 0 ? content[0].text : "Hei!"}
+            </h1>
+          </FadeDown>
+
+          <FadeUp delay={0.9} cssClass="mt-4">
+            <h2 className="text-2xl text-slate-300">
+              {content.length > 0 && content[1].text}
+            </h2>
+          </FadeUp>
+
+          <FadeDown delay={1.4} cssClass="mt-4">
+            <p className="text-xl text-slate-300">
+              {content.length > 0 && content[2].text}
+            </p>
+          </FadeDown>
+
+          <div className="mt-4">
+            <Icons />
           </div>
-        </div>
-      </FadeDown>
+        </section>
+      </div>
     </article>
   );
 };

diff --git a/src/components/Index/Icons.component.tsx b/src/components/Index/Icons.component.tsx
@@ -8,14 +8,40 @@ interface IAnimateIcons {
   id: number;
   Icon: IconType;
   iconName: string;
+  color: string;
 }
 
 const AnimateIcons: IAnimateIcons[] = [
-  { id: 0, Icon: FaReact, iconName: "React" },
-  { id: 1, Icon: FaVuejs, iconName: "Vue" },
-  { id: 2, Icon: SiTypescript, iconName: "Typescript" },
-  { id: 3, Icon: SiWordpress, iconName: "Wordpress" },
-  { id: 4, Icon: FaPhp, iconName: "PHP" },
+  { 
+    id: 0, 
+    Icon: FaReact, 
+    iconName: "React",
+    color: "#61DAFB"
+  },
+  { 
+    id: 1, 
+    Icon: FaVuejs, 
+    iconName: "Vue",
+    color: "#4FC08D"
+  },
+  { 
+    id: 2, 
+    Icon: SiTypescript, 
+    iconName: "TypeScript",
+    color: "#3178C6"
+  },
+  { 
+    id: 3, 
+    Icon: SiWordpress, 
+    iconName: "WordPress",
+    color: "#21759B"
+  },
+  { 
+    id: 4, 
+    Icon: FaPhp, 
+    iconName: "PHP",
+    color: "#777BB4"
+  },
 ];
 
 /**
@@ -28,15 +54,22 @@ const Icons = () => (
     data-testid="icons"
     className="flex justify-center mt-4 p-2 text-slate-300"
   >
-    {AnimateIcons.map(({ Icon, id, iconName }) => (
+    {AnimateIcons.map(({ Icon, id, iconName, color }) => (
       <span className="p-2" key={id}>
         <Grow delay={1.8 + id * 0.2}>
-          <Icon
-            data-testid={iconName}
-            aria-label={`${Icon.name} ikon}`}
-            title={`${Icon.name} ikon}`}
-            size="3em"
-          />
+          <div className="relative group">
+            <Icon
+              data-testid={iconName}
+              aria-label={`${iconName} ikon}`}
+              title={`${iconName} ikon}`}
+              size="3em"
+              className="transition-transform duration-300 hover:-translate-y-1 hover:text-[#00ff62]"
+              style={{ color }}
+            />
+            <span className="absolute -bottom-4 left-1/2 -translate-x-1/2 text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
+              {iconName}
+            </span>
+          </div>
         </Grow>
       </span>
     ))}

diff --git a/src/components/UI/Button.component.tsx b/src/components/UI/Button.component.tsx
@@ -41,7 +41,7 @@ const Button = ({
     <Component
       type={isLink ? undefined : type}
       data-cy="submit"
-      className="glitch p-3 m-3 text-primaryButtonText transition duration-500 ease-in-out bg-emerald-700 rounded hover:shadow-outline hover:bg-emerald-800 disabled:opacity-50 disabled:pointer-events-none"
+      className="glitch p-3 m-3 text-white font-medium transition duration-300 ease-in-out bg-emerald-700 rounded hover:bg-emerald-800 disabled:opacity-50 disabled:pointer-events-none"
       href={href}
       target={targetLink}
       disabled={disabled}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -10,31 +10,91 @@ const config: Config = {
     extend: {
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
       colors: {
-        // Primary Colors
-        background: "#e5e7eb", // Main background color
-        navbar: "#ffffff", // Navbar background color
-        matrixRain: "#000000", // Matrix rain effect background color
-        footer: "#1f2937", // Footer background color
+        // New Modern Color Scheme
+        primary: "var(--primary)",
+        secondary: "var(--secondary)",
+        accent: "var(--accent)",
+        text: "var(--text)",
+        background: "var(--background)",
 
-        // Accent Colors
-        primaryAccent: "#00ff00", // Primary accent (Matrix Green)
-        secondaryAccent: "#008000", // Secondary accent (Dark Green)
-        highlight: "#00cc00", // Highlight/Link color
+        // Semantic Colors
+        success: "#00cc4e",
+        error: "#ff4e4e",
+        warning: "#ffb74e",
+        info: "#4e9fff",
 
-        // Text Colors
-        primaryText: "#1f2937", // Primary text color
-        secondaryText: "#4b5563", // Secondary text color
-        lightText: "#ffffff", // Light text color
+        // Surface Colors
+        surface: {
+          light: "rgba(255, 255, 255, 0.05)",
+          DEFAULT: "rgba(26, 26, 26, 0.8)",
+          dark: "rgba(0, 0, 0, 0.8)",
+        },
 
-        // Button Colors
-        primaryButtonBg: "#008F11", // Primary button background color
-        primaryButtonText: "#fff", // Primary button text color
-        secondaryButtonBg: "#003B00", // Secondary button background color
-        secondaryButtonText: "#ffffff", // Secondary button text color
+        // Matrix Theme Colors
+        matrix: {
+          light: "#00ff62",
+          DEFAULT: "#00cc4e",
+          dark: "#008529",
+          glow: "rgba(0, 255, 98, 0.6)",
+        },
+      },
+      fontFamily: {
+        sans: [
+          'Inter',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Roboto',
+          'Oxygen',
+          'Ubuntu',
+          'Cantarell',
+          'sans-serif',
+        ],
+        mono: ['JetBrains Mono', 'monospace'],
+      },
+      boxShadow: {
+        glow: '0 0 15px rgba(0, 255, 98, 0.6)',
+        'glow-sm': '0 0 10px rgba(0, 255, 98, 0.4)',
+        'glow-lg': '0 0 20px rgba(0, 255, 98, 0.8)',
+      },
+      backdropBlur: {
+        xs: '2px',
+      },
+      animation: {
+        'matrix-fade': 'matrixFade 2s ease-out',
+        'glow-pulse': 'glowPulse 2s ease-in-out infinite',
+      },
+      keyframes: {
+        matrixFade: {
+          '0%': { opacity: '0', transform: 'translateY(-10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        glowPulse: {
+          '0%, 100%': { boxShadow: '0 0 15px rgba(0, 255, 98, 0.6)' },
+          '50%': { boxShadow: '0 0 25px rgba(0, 255, 98, 0.8)' },
+        },
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            color: 'var(--text)',
+            a: {
+              color: 'var(--secondary)',
+              '&:hover': {
+                color: 'var(--accent)',
+              },
+            },
+            h1: {
+              color: 'var(--accent)',
+            },
+            h2: {
+              color: 'var(--secondary)',
+            },
+          },
+        },
       },
     },
   },