refactor: update color variables for light and dark modes, adjust max-widths in various components

Author: codevoid048

app/globals.css

@@ -5,7 +5,8 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    /* Light mode colors */
+    --background: 0 0% 90%;
     --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
@@ -17,7 +18,7 @@
     --secondary-foreground: 240 5.9% 10%;
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
+    --accent: 240 4.8% 80%;
     --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
@@ -32,25 +33,22 @@
   }
 
   .dark {
-    --background: 240 10% 3.9%;
+    /* Dark mode overrides */
+    --background: 240 10% 6.5%;
     --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
+    --card: 240 10% 6.5%;
     --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
+    --popover: 240 10% 6.5%;
     --popover-foreground: 0 0% 98%;
-    --primary: 262.1 83.3% 57.8%;
-    --primary-foreground: 210 20% 98%;
-    --secondary: 240 3.7% 15.9%;
+    --secondary: 240 3.7% 18%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
+    --muted: 240 3.7% 18%;
     --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
+    --accent: 240 3.7% 18%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 262.1 83.3% 57.8%;
+    --border: 240 3.7% 18%;
+    --input: 240 3.7% 18%;
   }
 }
 

components/sections/contact.tsx

@@ -75,7 +75,7 @@ export default function Contact() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5 }}
-            className="max-w-3xl mx-auto"
+            className="max-w-2xl mx-auto"
           >
             <div className="bg-card/50 backdrop-blur-sm rounded-xl p-8 border border-border">
               <h3 className="text-2xl font-semibold mb-6 text-foreground text-center">Send Me a Message</h3>

components/sections/intro.tsx

@@ -12,7 +12,7 @@ export default function Intro() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-100px" }}
           transition={{ duration: 0.6 }}
-          className="text-center max-w-3xl mx-auto"
+          className="text-center max-w-2xl mx-auto"
         >
           <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight text-foreground">
             William Keri

components/sections/navbar.tsx

@@ -139,7 +139,7 @@ export default function Navbar() {
           >
             <div className="relative">
               {/* Glassmorphism container */}
-              <div className="bg-background/80 backdrop-blur-lg border border-border rounded-full px-6 py-3 shadow-2xl w-[600px] md:w-[700px] lg:w-[850px] xl:w-[1024px]">
+              <div className="bg-background/80 backdrop-blur-lg border border-border rounded-full px-6 py-3 shadow-2xl w-[600px] md:w-[700px]">
                 <div className="flex items-center justify-center px-4 gap-2">
                   {/* Navigation Items + Theme Toggle */}
                   <div className="flex items-center space-x-1">

components/sections/projects.tsx

@@ -224,7 +224,7 @@ function PersonalProjectsContent({ projects }: { projects: any[] }) {
       exit={{ opacity: 0, y: -20 }}
       transition={{ duration: 0.5 }}
     >
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
         {projects.map((project, index) => (
           <ProjectCard key={index} project={project} index={index} type="Personal" />
         ))}
@@ -241,7 +241,7 @@ function FreelanceProjectsContent({ projects }: { projects: any[] }) {
       exit={{ opacity: 0, y: -20 }}
       transition={{ duration: 0.5 }}
     >
-      <div className="grid grid-cols-1 gap-6 max-w-4xl mx-auto">
+      <div className="grid grid-cols-1 gap-6 max-w-2xl mx-auto">
         {projects.map((project, index) => (
           <ProjectCard key={index} project={project} index={index} type="Freelance" />
         ))}

components/sections/skills.tsx

@@ -27,7 +27,7 @@ export default function Skills() {
         >
           <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center text-foreground">My Skills</h2>
 
-          <div className="max-w-4xl mx-auto">
+          <div className="max-w-2xl mx-auto">
             <div className="flex flex-wrap justify-center gap-2 sm:gap-3">
               {allSkills.map((skill, index) => (
                 <SkillPill key={index} skill={skill} delay={index * 0.03} />
@@ -47,7 +47,7 @@ function SkillPill({ skill, delay }: { skill: string; delay: number }) {
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
       transition={{ duration: 0.4, delay }}
-      className="whitespace-nowrap font-bold rounded-full border border-border px-3 py-1 text-xs md:text-sm text-muted-foreground hover:bg-accent/50 hover:border-border transition-colors"
+      className="whitespace-nowrap font-bold rounded-lg border border-border px-3 py-1 text-xs md:text-sm text-muted-foreground hover:bg-accent/50 hover:border-border transition-colors"
     >
       {skill}
     </motion.span>

components/sections/work-experience.tsx

@@ -34,9 +34,9 @@ export default function WorkExperience() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-100px" }}
           transition={{ duration: 0.6 }}
-          className="max-w-4xl mx-auto"
+          className="max-w-2xl mx-auto"
         >
-          <h2 className="text-3xl md:text-4xl font-bold mb-10 text-center text-foreground">Work Experience</h2>
+          <h2 className="text-3xl md:text-4xl font-bold mb-10 text-center text-foreground">Experience</h2>
 
           <div className="space-y-6">
             {experiences.map((exp, idx) => (

components/ui/button.tsx

@@ -22,7 +22,6 @@ const buttonVariants = cva(
       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
       },
     },