From 9fa5ae3fb8f8f60265c5c918735e16930286587a Mon Sep 17 00:00:00 2001
From: Ranjeet Singh <ranjeet@modelia.com>
Date: Sun, 10 May 2026 15:01:17 +0530
Subject: [PATCH] redesign ui

---
 public/index.html                      |   4 +-
 src/App.css                            |  99 ++------
 src/App.js                             |  68 ++---
 src/components/About/AboutMe.js        | 153 ++++++-----
 src/components/About/Education.js      | 188 +++++++-------
 src/components/About/Experience.js     | 339 +++++++++----------------
 src/components/Blogs/BlogCard.js       |  85 ++++---
 src/components/Contact/ContactForm.js  | 180 ++++++++-----
 src/components/Contact/ContactInfo.js  | 128 ++++++----
 src/components/Contact/SucessNotice.js |  38 +--
 src/components/Footer.js               |  55 ++--
 src/components/Header.js               | 161 +++++++-----
 src/components/Home/HeroSection.js     | 132 +++++++---
 src/components/Portfolio/Project.js    | 105 +++++---
 src/components/Resume/ResumePDF.js     |  27 +-
 src/index.css                          |  98 ++++++-
 src/pages/404.js                       |  44 ++--
 src/pages/About.js                     |  17 +-
 src/pages/Blogs.js                     |  48 ++--
 src/pages/Contact.js                   |  11 +-
 src/pages/Home.js                      | 124 ++++-----
 src/pages/Portfolio.js                 |  37 ++-
 src/pages/Resume.js                    |  27 +-
 tailwind.config.js                     |  70 ++++-
 24 files changed, 1261 insertions(+), 977 deletions(-)

diff --git a/public/index.html b/public/index.html
index 8242610..afdc4b2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,9 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#0a0a0b" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <meta
       name="description"
       content="Full-stack web developer and open-source enthusiast with a love for clean code and accessible
diff --git a/src/App.css b/src/App.css
index 3716145..5b83315 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,87 +1,30 @@
-/* styles for App */
+/* App-level styles */
 
-.mobile-btns {
-  position: absolute;
-  top: 20px;
-  right: 20px;
+.container-page {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+  padding-inline: 20px;
 }
 
-.pdf {
-  height: 600px;
-}
-
-@media screen and (min-width: 768px) {
-  .inner-body {
-    padding-left: 80px;
-  }
-
-  .contact-info {
-    padding-left: 80px;
-  }
-
-  .pdf {
-    width: 64%;
-  }
-
-  .hr-about {
-    width: 65%;
-  }
-
-  .hr-exprience {
-    width: 64%;
-  }
-
-  .hr-portfolio {
-    width: 66%;
-  }
-
-  .about-hr {
-    width: 30%;
-  }
-
-  .about-text {
-    width: 75%;
-  }
-
-  .project-card {
-    width: 75%;
-  }
-
-  .edu-tmu {
-    gap: 362px;
-  }
-
-  .edu-bhag {
-    gap: 375px;
-  }
-
-  .edu-microverse {
-    gap: 298px;
-  }
-
-  .hr-blog {
-    width: 62%;
-  }
-
-  .card-img {
-    width: 50%;
-  }
-
-  .code-snippet {
-    width: 40%;
-  }
-
-  .post-img {
-    width: 150%;
+@media (min-width: 768px) {
+  .container-page {
+    padding-inline: 32px;
   }
 }
 
-@media screen and (min-width: 1024px) {
-  .inner-body {
-    padding-left: 200px;
+@media (min-width: 1024px) {
+  .container-page {
+    padding-inline: 48px;
   }
+}
 
-  .contact-info {
-    padding-left: 200px;
-  }
+/* Resume PDF viewer preserves intrinsic sizing */
+.pdf {
+  width: 100%;
+  height: 80vh;
+  min-height: 600px;
+  border-radius: 12px;
+  border: 1px solid #26262b;
+  background: #111114;
 }
diff --git a/src/App.js b/src/App.js
index 573b941..bd0fb66 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,62 +17,26 @@ import './App.css';
 
 function App() {
   return (
-    <>
+    <div className="min-h-screen flex flex-col bg-bg text-fg">
       <Header />
-      <div className="inner-body">
+      <main className="container-page flex-1 w-full">
         <Routes>
-          <Route
-            path="*"
-            element={(<NotFound />)}
-          />
-          <Route
-            path="/"
-            element={(<Home />)}
-          />
-          <Route
-            path="/about"
-            element={(<About />)}
-          />
-          <Route
-            path="/portfolio"
-            element={(<Portfolio />)}
-          />
-          <Route
-            path="/contact"
-            element={(<Contact />)}
-          />
-          <Route
-            path="/blog"
-            element={(<Blogs />)}
-          />
-          <Route
-            path="/blog/:id/:title"
-            element={(<Posts />)}
-          />
-          <Route
-            path="/resume"
-            element={(<Resume />)}
-          />
-          <Route
-            path="/messageSent"
-            element={(<SuccessNotice />)}
-          />
-          <Route
-            path="/course-sneakpeak"
-            element={(<OnlineCourseWaitlist />)}
-          />
-          <Route
-            path="/signup-waitlist"
-            element={(<SignUpWaitList />)}
-          />
-          <Route
-            path="/signup-successfull"
-            element={(<SignUpSucessNotice />)}
-          />
+          <Route path="*" element={<NotFound />} />
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/portfolio" element={<Portfolio />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="/blog" element={<Blogs />} />
+          <Route path="/blog/:id/:title" element={<Posts />} />
+          <Route path="/resume" element={<Resume />} />
+          <Route path="/messageSent" element={<SuccessNotice />} />
+          <Route path="/course-sneakpeak" element={<OnlineCourseWaitlist />} />
+          <Route path="/signup-waitlist" element={<SignUpWaitList />} />
+          <Route path="/signup-successfull" element={<SignUpSucessNotice />} />
         </Routes>
-      </div>
+      </main>
       <Footer />
-    </>
+    </div>
   );
 }
 
diff --git a/src/components/About/AboutMe.js b/src/components/About/AboutMe.js
index 88e567b..c566e8a 100644
--- a/src/components/About/AboutMe.js
+++ b/src/components/About/AboutMe.js
@@ -1,84 +1,123 @@
-import { ChevronRightIcon } from '@heroicons/react/solid';
+/* eslint-disable react/prop-types */
 import { motion } from 'framer-motion';
-import personJuggling from '../../assets/images/person_juggling.gif';
 import codeSnipped from '../../assets/images/code-snippet.png';
 
 const stacks = [
   {
-    name: 'Front end development', values: ['React JS', 'Vue JS', 'Next JS', 'JavaScript', 'TypeScript', 'HTML & CSS', 'Tailwind'],
+    name: 'Frontend',
+    values: ['React', 'Vue', 'Next.js', 'TypeScript', 'JavaScript', 'Tailwind', 'HTML & CSS'],
   },
   {
-    name: 'Back end development', values: ['Ruby On Rails', 'Ruby', 'Java', 'Spring', 'SQL', 'ElasticSearch'],
+    name: 'Backend',
+    values: ['Ruby on Rails', 'Ruby', 'Java', 'Spring', 'SQL', 'ElasticSearch'],
   },
   {
-    name: 'Tools', values: ['AWS', 'Netlify', 'Wordpress', 'Github & Git', 'Postman', 'VS Code'],
+    name: 'Tooling',
+    values: ['AWS', 'Netlify', 'Git & GitHub', 'Postman', 'VS Code', 'WordPress'],
   },
 ];
 
+const SectionHeading = ({ label, title, kicker }) => (
+  <div className="flex items-baseline gap-3">
+    {label && (
+      <span className="mono text-xs text-faint">{label}</span>
+    )}
+    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight">{title}</h2>
+    {kicker && (
+      <span className="ml-auto mono text-xs text-faint hidden md:inline">{kicker}</span>
+    )}
+  </div>
+);
+
 const AboutMe = () => (
-  <motion.div
-    initial={{ opacity: 0 }}
-    whileInView={{ opacity: 1 }}
-    transition={{ delay: 0.1, duration: 0.8 }}
-    className="mt-14 md:mt-24"
+  <motion.section
+    initial={{ opacity: 0, y: 8 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    viewport={{ once: true, margin: '-80px' }}
+    transition={{ duration: 0.5 }}
+    className="mt-20 md:mt-28"
   >
-    <div className="flex gap-3 ml-3 md:ml-0">
-      <h2 className="text-2xl md:text-4xl">About Me</h2>
-      <div className="w-3/5 mb-3 border-b-2 border-secondaryColor hr-about" />
-    </div>
-    <div className="flex flex-col gap-5 mt-5 ml-4 mr-5 text-base md:flex-row text-skyColor md:ml-1 about-text">
-      <div className="flex flex-col gap-5 md:mt-3">
+    <SectionHeading label="01 /" title="About" kicker="who, what, why" />
+    <div className="mt-3 h-px bg-hairline" />
+
+    <div className="mt-8 grid md:grid-cols-[1.3fr_1fr] gap-8 md:gap-12 items-start">
+      <div className="space-y-5 text-base text-subtle leading-relaxed">
         <p>
-          Hi there! I&apos;m Ranjeet Singh, but you might know me as
+          Hi — I&apos;m Ranjeet, also known online as
           {' '}
-          <span className="text-secondaryColor">thecodechaser</span>
-          . Right now, I&apos;m a Software Engineer at&nbsp;
-          <a href="https://modelia.ai" target="_blank" className="text-secondaryColor" rel="noreferrer">Modelia AI</a>
-          . I have 3+ years of experience working as Software Developer.
-          I enjoy creating web applications using a mix of technologies like React, Vue,&nbsp;
-          JavaScript, Rails, and Java. Before I got into web development, I spent two years
-          as a freelance developer, where I worked on desktop apps and built websites with
-          Wordpress and Shopify for my clients. I look forward to sharing more about my&nbsp;
-          journey and projects with you!
+          <span className="text-accent">thecodechaser</span>
+          . I&apos;m a Software Engineer at
+          {' '}
+          <a
+            href="https://modelia.ai"
+            target="_blank"
+            rel="noreferrer"
+            className="text-fg underline decoration-accent decoration-2 underline-offset-4 hover:text-accent transition-colors"
+          >
+            Modelia AI
+          </a>
+          {' '}
+          with 3+ years of experience shipping web applications across React,
+          Vue, Rails, and Java. Before that I spent two years freelancing —
+          building desktop apps and crafting WordPress and Shopify sites for
+          clients.
         </p>
         <p>
-          I enjoy tackling challenging coding problems because they keep things interesting,
-          which makes me a pretty good problem solver. When I have some free time, I usually
-          have a hard time deciding between solving algorithms or learning about astronomy—but
-          somehow I manage to do a bit of both.
-          {' '}
-          <img src={personJuggling} alt="person-juggling" className="w-16 mt-4" />
+          I like the kind of problems where the answer isn&apos;t obvious until
+          you&apos;ve sketched it three different ways. When I&apos;m off the
+          clock, I&apos;m usually torn between solving algorithm puzzles and
+          reading about astronomy — somehow I manage to do a bit of both.
         </p>
       </div>
-      <motion.img
+
+      <motion.div
         initial={{ opacity: 0 }}
         whileInView={{ opacity: 1 }}
-        transition={{ delay: 0.1, duration: 0.8 }}
-        src={codeSnipped}
-        alt="code-snippet"
-        className="rounded-md code-snippet"
-      />
+        viewport={{ once: true }}
+        transition={{ duration: 0.6, delay: 0.1 }}
+        className="relative rounded-xl border border-border bg-surface overflow-hidden shadow-card"
+      >
+        <div className="flex items-center gap-1.5 px-4 py-2.5 border-b border-hairline bg-elevated">
+          <span className="w-2.5 h-2.5 rounded-full bg-mute" />
+          <span className="w-2.5 h-2.5 rounded-full bg-mute" />
+          <span className="w-2.5 h-2.5 rounded-full bg-mute" />
+          <span className="ml-2 mono text-[11px] text-faint">~/ranjeet/about.tsx</span>
+        </div>
+        <img src={codeSnipped} alt="code snippet" className="w-full h-auto" />
+      </motion.div>
     </div>
-    <h3 className="mt-5 ml-4 text-lg font-bold text-secondaryColor md:ml-1">Here are few of my stacks I&apos;ve been working with recently:</h3>
-    <motion.div
-      initial={{ opacity: 0 }}
-      whileInView={{ opacity: 1 }}
-      transition={{ delay: 0.1, duration: 0.8 }}
-      className="flex flex-col gap-4 mt-2 ml-4 md:flex-row md:gap-56 md:ml-2"
-    >
-      { stacks.map((stack) => (
-        <div key={stack.name}>
-          <h3 className="text-lg font-medium">{stack.name}</h3>
-          {stack.values.map((value) => (
-            <div key={value} className="flex gap-2 mt-2 text-base text-skyColor">
-              <ChevronRightIcon className="h-6" />
-              <p>{value}</p>
+
+    <div className="mt-12">
+      <h3 className="mono text-sm text-faint uppercase tracking-widest">
+        Stack I&apos;ve been working with lately
+      </h3>
+      <div className="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {stacks.map((stack) => (
+          <div
+            key={stack.name}
+            className="rounded-xl border border-border bg-surface p-5 hover:border-accent-ring transition-colors"
+          >
+            <div className="flex items-center justify-between">
+              <h4 className="text-base font-medium text-fg">{stack.name}</h4>
+              <span className="mono text-[11px] text-faint">
+                {String(stack.values.length).padStart(2, '0')}
+              </span>
             </div>
-          ))}
-        </div>
-      ))}
-    </motion.div>
-  </motion.div>
+            <div className="mt-4 flex flex-wrap gap-1.5">
+              {stack.values.map((value) => (
+                <span
+                  key={value}
+                  className="mono text-xs px-2 py-1 rounded-md border border-hairline bg-elevated text-subtle"
+                >
+                  {value}
+                </span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </motion.section>
 );
 
 export default AboutMe;
diff --git a/src/components/About/Education.js b/src/components/About/Education.js
index 78a147a..aa38b66 100644
--- a/src/components/About/Education.js
+++ b/src/components/About/Education.js
@@ -1,113 +1,109 @@
-import { ChevronRightIcon } from '@heroicons/react/solid';
+/* eslint-disable react/prop-types */
 import { motion } from 'framer-motion';
 import microverseLogo from '../../assets/images/microverse_logo.png';
 import tmuLogo from '../../assets/images/tmu-logo.png';
 import kalingaLogo from '../../assets/images/kalinga-logo.png';
 
-const Education = () => (
-  <motion.div
-    initial={{ opacity: 0 }}
-    whileInView={{ opacity: 1 }}
-    transition={{ delay: 0.2, duration: 0.8 }}
-    className="mt-14 md:mt-24 md:ml-3"
-  >
-    <div className="flex gap-3 ml-3 md:ml-0">
-      <h2 className="text-2xl md:text-4xl">Education</h2>
-      <div className="w-3/5 mb-3 border-b-2 border-secondaryColor hr-exprience" />
-    </div>
+const items = [
+  {
+    title: 'Bachelor of Computer Science',
+    school: 'Kalinga University',
+    period: 'July 2019 – June 2022',
+    location: 'Regular',
+    logo: kalingaLogo,
+    bullets: [
+      'Developed a BloodBank application using Java, JavaScript, and MySQL as a capstone project.',
+      'Gained expertise in software development, database management, and system design.',
+    ],
+  },
+  {
+    title: 'Full-Stack Web Development Program',
+    school: 'Microverse',
+    period: 'October 2021 – May 2022',
+    location: 'Remote',
+    logo: microverseLogo,
+    bullets: [
+      'Completed 1,300+ hours mastering React, Redux, Rails, and JavaScript through hands-on coding.',
+      'Built real-world projects in a remote, collaborative environment using GitHub & Agile.',
+    ],
+  },
+  {
+    title: 'Diploma in Computer Science',
+    school: 'Teerthanker Mahaveer University',
+    period: 'July 2016 – June 2019',
+    location: 'Regular',
+    logo: tmuLogo,
+    bullets: [
+      'Completed a Java-based CMS software during a 3-month university internship.',
+      'Studied computer fundamentals, software development, and algorithms.',
+    ],
+  },
+];
 
-    <div className="mt-8 ml-2 md:ml-2">
-      <div className="flex flex-col gap-5 mt-4 ml-3 text-lg text-secondaryColor edu-bhag md:flex-row md:ml-0">
-        <h3>
-          Bachlor of computer science
-          <span className="block ml-1 text-sm text-skyColor">July 2019 – June 2022</span>
-        </h3>
-        <p>
-          <img src={kalingaLogo} alt="microverse-logo" className="inline w-8" />
-          {' '}
-          Kalinga University
-          <span className="block text-sm text-skyColor">Regular</span>
-        </p>
-      </div>
-      <ul className="ml-4 md:ml-0">
-        <li className="flex gap-2 mt-4 text-base text-skyColor md:w-9/12">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Developed a BloodBank application using Java,
-            JavaScript, and MySQL as a capstone project.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor md:w-9/12">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Gained expertise in software development,
-            database management, and system design.
-          </p>
-        </li>
-      </ul>
-    </div>
+const EduItem = ({ item, isLast }) => (
+  <motion.li
+    initial={{ opacity: 0, y: 8 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    viewport={{ once: true, margin: '-60px' }}
+    transition={{ duration: 0.45 }}
+    className="relative pl-10 md:pl-12"
+  >
+    {!isLast && (
+      <span
+        className="absolute left-[15px] md:left-[19px] top-7 bottom-[-1.5rem] w-px bg-hairline"
+        aria-hidden
+      />
+    )}
+    <span className="absolute left-0 top-1 inline-flex items-center justify-center w-8 h-8 md:w-10 md:h-10 rounded-full border border-border bg-surface overflow-hidden">
+      <img src={item.logo} alt={`${item.school} logo`} className="w-full h-full object-contain p-1" />
+    </span>
 
-    <div className="mt-8 md:ml-2">
-      <div className="flex flex-col gap-5 mt-4 ml-4 text-lg md:flex-row text-secondaryColor edu-microverse md:ml-0">
-        <h3>
-          Full-stack Web Development Program
-          <span className="block ml-1 text-sm text-skyColor">October 2021 – May 2022</span>
+    <div className="rounded-xl border border-border bg-surface p-5 hover:border-accent-ring transition-colors">
+      <div className="flex flex-col md:flex-row md:items-baseline md:justify-between gap-1">
+        <h3 className="text-base md:text-lg font-semibold text-fg">
+          {item.title}
+          <span className="text-subtle font-normal">
+            {' · '}
+            {item.school}
+          </span>
         </h3>
-        <p>
-          <img src={microverseLogo} alt="microverse-logo" className="inline w-8" />
-          {' '}
-          Microverse
-          <span className="block text-sm text-skyColor">Remote</span>
-        </p>
+        <div className="mono text-xs text-faint">
+          {item.period}
+          {' · '}
+          {item.location}
+        </div>
       </div>
-      <ul className="ml-4 md:ml-0">
-        <li className="flex gap-2 mt-4 text-base text-skyColor md:w-9/12">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Completed 1,300+ hours mastering React, Redux, Rails,
-            and JavaScript through hands-on coding.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor md:w-9/12">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Built real-world projects in a remote,
-            collaborative environment using GitHub & Agile.
-          </p>
-        </li>
+      <ul className="mt-4 space-y-2">
+        {item.bullets.map((b) => (
+          <li key={b} className="flex gap-3 text-sm text-subtle leading-relaxed">
+            <span className="mt-2 h-1 w-1 rounded-full bg-accent shrink-0" aria-hidden />
+            <span>{b}</span>
+          </li>
+        ))}
       </ul>
     </div>
+  </motion.li>
+);
 
-    <div className="mt-8 ml-1 md:ml-3">
-      <div className="flex flex-col gap-5 mt-4 ml-3 text-lg md:flex-row text-secondaryColor edu-tmu md:ml-0">
-        <h3>
-          Diploma in Computer Science
-          <span className="block ml-1 text-sm text-skyColor">July 2016 – June 2019</span>
-        </h3>
-        <p>
-          <img src={tmuLogo} alt="microverse-logo" className="inline w-8" />
-          {' '}
-          Teerthanker Mahaveer University
-          <span className="block text-sm text-skyColor">Regular</span>
-        </p>
-      </div>
-      <ul className="ml-4 md:ml-0">
-        <li className="flex gap-2 mt-4 text-base text-skyColor md:w-9/12">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Completed a Java-based CMS software during a 3-month university internship.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor md:w-9/12">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Studied computer fundamentals, software development, and algorithms.
-          </p>
-        </li>
-      </ul>
+const Education = () => (
+  <section className="mt-20 md:mt-28">
+    <div className="flex items-center gap-3">
+      <span className="mono text-xs text-faint">03 /</span>
+      <h2 className="text-2xl md:text-3xl font-semibold tracking-tight">Education</h2>
+      <span className="mono text-xs text-faint hidden md:inline ml-auto">
+        {String(items.length).padStart(2, '0')}
+        {' '}
+        programs
+      </span>
     </div>
+    <div className="mt-3 h-px bg-hairline" />
 
-  </motion.div>
+    <ol className="mt-10 flex flex-col gap-8">
+      {items.map((item, i) => (
+        <EduItem key={`${item.school}-${item.period}`} item={item} isLast={i === items.length - 1} />
+      ))}
+    </ol>
+  </section>
 );
 
 export default Education;
diff --git a/src/components/About/Experience.js b/src/components/About/Experience.js
index 66c55cb..fdeaa08 100644
--- a/src/components/About/Experience.js
+++ b/src/components/About/Experience.js
@@ -1,231 +1,142 @@
-import { ChevronRightIcon } from '@heroicons/react/solid';
+/* eslint-disable react/prop-types */
 import { motion } from 'framer-motion';
 import microverseLogo from '../../assets/images/microverse_logo.png';
 import freelanceLogo from '../../assets/images/freelance-logo.jpg';
 import kwanzooLogo from '../../assets/images/kwanzoo-logo.jpg';
 import modeliaLogo from '../../assets/images/modelia_logo.jpg';
 
-const Experience = () => (
-  <motion.div
-    initial={{ opacity: 0 }}
-    whileInView={{ opacity: 1 }}
-    transition={{ delay: 0.2, duration: 0.8 }}
-    className="mt-14 md:mt-24 md:ml-1"
+const roles = [
+  {
+    title: 'Full-Stack Developer',
+    company: 'Modelia',
+    period: 'October 2025 – Present',
+    location: 'Remote',
+    logo: modeliaLogo,
+    bullets: [
+      'Owned and improved website hero sections, core pages, and marketing landings.',
+      'Maintained Studio’s static frontend pages and blog with design consistency.',
+      'Implemented SEO best practices and optimized site structure for performance.',
+      'Ensured responsiveness and top Lighthouse scores across all web experiences.',
+    ],
+  },
+  {
+    title: 'Full-Stack Developer',
+    company: 'Novel Aquatech',
+    period: 'March 2025 – September 2025',
+    location: 'Remote',
+    logo: freelanceLogo,
+    bullets: [
+      'Enhanced and maintained a client portal, adding features, bug fixes, and testing.',
+      'Built an admin portal from scratch for efficient user, device, and configuration management.',
+      'Collaborated with the team to optimize UI/UX, performance, and deliver features under tight deadlines.',
+    ],
+  },
+  {
+    title: 'Full-Stack Developer',
+    company: 'Kwanzoo INC',
+    period: 'October 2022 – February 2025',
+    location: 'Remote',
+    logo: kwanzooLogo,
+    bullets: [
+      'Revamped the Kwanzoo dashboard with a modern UI, migrating to a new front-end project.',
+      'Optimized API performance by creating ElasticSearch snapshots, improving response times.',
+      'Developed new features and fixed critical issues used by 20+ B2B clients.',
+      'Led end-to-end implementation — from development to testing & AWS deployment.',
+    ],
+  },
+  {
+    title: 'Technical Support Engineer',
+    company: 'Microverse',
+    period: 'January 2022 – March 2024',
+    location: 'Remote',
+    logo: microverseLogo,
+    bullets: [
+      'Reviewed 100+ projects from junior developers, ensuring they met technical requirements.',
+      'Provided code quality improvements and best practices for performance optimization.',
+      'Assisted developers in debugging, refactoring, and writing clean, maintainable code.',
+    ],
+  },
+  {
+    title: 'Freelance Developer',
+    company: 'Freelance',
+    period: 'January 2020 – September 2021',
+    location: 'Remote',
+    logo: freelanceLogo,
+    bullets: [
+      'Built desktop applications using Java, JavaFX, and other frameworks.',
+      'Built websites using WordPress and Shopify for clients.',
+    ],
+  },
+];
+
+const RoleItem = ({ role, isLast }) => (
+  <motion.li
+    initial={{ opacity: 0, y: 8 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    viewport={{ once: true, margin: '-60px' }}
+    transition={{ duration: 0.45 }}
+    className="relative pl-10 md:pl-12"
   >
-    <div className="flex gap-3 ml-3 md:ml-0">
-      <h2 className="text-2xl md:text-4xl">Experience</h2>
-      <div className="w-3/5 mb-3 border-b-2 border-secondaryColor hr-exprience" />
-    </div>
+    {/* timeline rail */}
+    {!isLast && (
+      <span
+        className="absolute left-[15px] md:left-[19px] top-7 bottom-[-1.5rem] w-px bg-hairline"
+        aria-hidden
+      />
+    )}
+    {/* logo dot */}
+    <span className="absolute left-0 top-1 inline-flex items-center justify-center w-8 h-8 md:w-10 md:h-10 rounded-full border border-border bg-surface overflow-hidden">
+      <img src={role.logo} alt={`${role.company} logo`} className="w-full h-full object-cover" />
+    </span>
 
-    <div className="mt-8 md:ml-1">
-      <div className="flex flex-col gap-5 mt-4 ml-4 text-lg md:flex-row text-secondaryColor md:gap-[450px] md:ml-0">
-        <h3>
-          Full-Stack Developer
-          <span className="block ml-1 text-sm text-skyColor">
-            October 2025 – Present
-          </span>
-        </h3>
-        <p className="md:mr-3">
-          <img src={modeliaLogo} alt="microverse-logo" className="inline w-8" />
-          {' '}
-          Modelia
-          <span className="block text-sm text-skyColor">Remote</span>
-        </p>
-      </div>
-      <ul className="ml-4 md:ml-0">
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Owned and improved website hero sections, core pages, and marketing landings.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Maintained Studio’s static frontend pages and blog with design consistency.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Implemented SEO best practices and optimized site structure for performance.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Ensured responsiveness and top Lighthouse scores across all web experiences.
-          </p>
-        </li>
-      </ul>
-    </div>
-    <div className="mt-8 md:ml-1">
-      <div className="flex flex-col gap-5 mt-4 ml-4 text-lg md:flex-row text-secondaryColor md:gap-[418px] md:ml-0">
-        <h3>
-          Full-Stack Developer
-          <span className="block ml-1 text-sm text-skyColor">
-            March 2025 – September 2025
-          </span>
-        </h3>
-        <p className="md:mr-3">
-          <img
-            src={freelanceLogo}
-            alt="microverse-logo"
-            className="inline w-8"
-          />
-          {' '}
-          Novel Aquatech
-          <span className="block text-sm text-skyColor">Remote</span>
-        </p>
-      </div>
-      <ul className="ml-4 md:ml-0">
-        <li className="flex gap-2 mt-4 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Enhanced and maintained a client portal, adding features, bug fixes,
-            and testing.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Built an admin portal from scratch for efficient user, device, and
-            configuration management.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Collaborated with the team to optimize UI/UX, performance, and
-            deliver features under tight deadlines.
-          </p>
-        </li>
-      </ul>
-    </div>
-    <div className="mt-8 md:ml-1">
-      <div className="flex flex-col gap-5 mt-4 ml-4 text-lg md:flex-row text-secondaryColor md:gap-[418px] md:ml-0">
-        <h3>
-          Full-Stack Developer
-          <span className="block ml-1 text-sm text-skyColor">
-            October 2022 – February 2025
-          </span>
-        </h3>
-        <p className="md:mr-3">
-          <img src={kwanzooLogo} alt="microverse-logo" className="inline w-8" />
-          {' '}
-          Kwanzoo INC
-          <span className="block text-sm text-skyColor">Remote</span>
-        </p>
+    <div className="rounded-xl border border-border bg-surface p-5 hover:border-accent-ring transition-colors">
+      <div className="flex flex-col md:flex-row md:items-baseline md:justify-between gap-1">
+        <div>
+          <h3 className="text-base md:text-lg font-semibold text-fg">
+            {role.title}
+            <span className="text-subtle font-normal">
+              {' · '}
+              {role.company}
+            </span>
+          </h3>
+        </div>
+        <div className="mono text-xs text-faint">
+          {role.period}
+          {' · '}
+          {role.location}
+        </div>
       </div>
-      <ul className="ml-4 md:ml-0">
-        <li className="flex gap-2 mt-4 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Revamped the Kwanzoo dashboard with a modern UI, migrating to a new
-            front-end project.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Optimized API performance by creating ElasticSearch snapshots,
-            improving response times.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Developed new features & fixed critical issues used by 20+ B2B
-            clients.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Led end-to-end implementation – from development to testing & AWS
-            deployment.
-          </p>
-        </li>
+      <ul className="mt-4 space-y-2">
+        {role.bullets.map((b) => (
+          <li key={b} className="flex gap-3 text-sm text-subtle leading-relaxed">
+            <span className="mt-2 h-1 w-1 rounded-full bg-accent shrink-0" aria-hidden />
+            <span>{b}</span>
+          </li>
+        ))}
       </ul>
     </div>
+  </motion.li>
+);
 
-    <div className="mt-8 md:ml-1">
-      <div className="flex flex-col gap-5 mt-4 ml-4 text-lg md:flex-row text-secondaryColor md:gap-[390px] md:ml-0">
-        <h3>
-          Technical Support Engineer
-          <span className="block ml-1 text-sm text-skyColor">
-            January 2022 – March 2024
-          </span>
-        </h3>
-        <p className="md:mr-3">
-          <img
-            src={microverseLogo}
-            alt="microverse-logo"
-            className="inline w-8"
-          />
-          {' '}
-          Microverse
-          <span className="block text-sm text-skyColor">Remote</span>
-        </p>
-      </div>
-      <ul className="ml-4 md:ml-0">
-        <li className="flex gap-2 mt-4 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Reviewed 100+ projects from junior developers, ensuring they met
-            technical requirements.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Provided code quality improvements and best practices for
-            performance optimization.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Assisted developers in debugging, refactoring, and writing clean,
-            maintainable code.
-          </p>
-        </li>
-      </ul>
+const Experience = () => (
+  <section className="mt-20 md:mt-28">
+    <div className="flex items-center gap-3">
+      <span className="mono text-xs text-faint">02 /</span>
+      <h2 className="text-2xl md:text-3xl font-semibold tracking-tight">Experience</h2>
+      <span className="mono text-xs text-faint hidden md:inline ml-auto">
+        {String(roles.length).padStart(2, '0')}
+        {' '}
+        roles
+      </span>
     </div>
+    <div className="mt-3 h-px bg-hairline" />
 
-    <div className="mt-8 ml-1 md:ml-0">
-      <div className="flex flex-col gap-5 mt-4 ml-3 text-lg md:flex-row text-secondaryColor md:gap-[395px] md:ml-2">
-        <h3>
-          Freelance Developer
-          <span className="block ml-1 text-sm text-skyColor">
-            January 2020 – September 2021 &#160; &#160;
-          </span>
-        </h3>
-        <p>
-          <img
-            src={freelanceLogo}
-            alt="microverse-logo"
-            className="inline w-8"
-          />
-          {' '}
-          Freelance
-          <span className="block text-sm text-skyColor">Remote</span>
-        </p>
-      </div>
-      <ul className="ml-4 md:ml-2">
-        <li className="flex gap-2 mt-4 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>
-            Built desktop applications using Java, JavaFX, and other frameworks.
-          </p>
-        </li>
-        <li className="flex gap-2 mt-2 text-base text-skyColor">
-          <ChevronRightIcon className="h-6" />
-          <p>Build websiite using Wordpress and Shopify for my clients.</p>
-        </li>
-      </ul>
-    </div>
-  </motion.div>
+    <ol className="mt-10 flex flex-col gap-8">
+      {roles.map((role, i) => (
+        <RoleItem key={`${role.company}-${role.period}`} role={role} isLast={i === roles.length - 1} />
+      ))}
+    </ol>
+  </section>
 );
 
 export default Experience;
diff --git a/src/components/Blogs/BlogCard.js b/src/components/Blogs/BlogCard.js
index 28b37e7..231f6b3 100644
--- a/src/components/Blogs/BlogCard.js
+++ b/src/components/Blogs/BlogCard.js
@@ -1,57 +1,64 @@
 /* eslint-disable eqeqeq */
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { ArrowRightIcon } from '@heroicons/react/solid';
+import { ArrowRightIcon, HeartIcon, ChatAltIcon } from '@heroicons/react/solid';
 import { motion } from 'framer-motion';
 
-const BlogCard = (props) => {
-  const { data } = props;
+const BlogCard = ({ data }) => {
+  const slug = data.title.replace(/\s+/g, '-');
+  const href = `/blog/${data.id}/${slug}`;
 
   return (
-    <motion.section
-      initial={{ opacity: 0 }}
-      whileInView={{ opacity: 1 }}
-      transition={{ delay: 0.1, duration: 0.8 }}
-      className={`md:flex project-card ${data.id == 1 ? 'mt-16' : 'mt-32'} mx-2 ml-4 md:ml-0 md:mx-0 p-3 rounded-md shadow shadow-lightBlueColor md:gap-5`}
+    <motion.article
+      initial={{ opacity: 0, y: 8 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-60px' }}
+      transition={{ duration: 0.5 }}
+      className="group rounded-xl border border-border bg-surface overflow-hidden hover:border-accent-ring transition-colors shadow-card"
     >
-      <div className="w-11/12 post-img">
-        <Link to={`/blog/${data.id}/${data.title.replace(/\s+/g, '-')}`}>
+      <div className="grid md:grid-cols-[1fr_1.4fr] gap-0">
+        <Link to={href} className="block aspect-[16/10] md:aspect-auto md:h-full overflow-hidden bg-elevated">
           <img
             src={data.photo_one}
-            alt="project preview"
-            className="ml-2 rounded-md md:ml-0 "
+            alt={data.title}
+            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
+            loading="lazy"
           />
         </Link>
-      </div>
-      <div>
-        <Link to={`/blog/${data.id}/${data.title.replace(/\s+/g, '-')}`}><h3 className="text-skyColor mt-3 md:mt-0 mb-4 text-xl md:text-2xl ml-2 md:ml-0">{data.title}</h3></Link>
-        <p className="bg-lightBlueColor text-skyColor text-base font-medium p-5 rounded mr-6 ml-2 md:ml-0 md:mr-0">
-          {data.p_one.substring(0, 200)}
-          ....
-        </p>
-        <div className="flex justify-between gap-2 text-skyColor mt-8 ml-2 md:ml-0">
-          <div className="flex gap-3 ml-1 mt-2">
-            <p>
-              {data.likes_counter}
-              {' '}
-              Likes
-            </p>
-            <p>
-              {data.comments_counter}
-              {' '}
-              Comments
-            </p>
-          </div>
-          <Link to={`/blog/${data.id}/${data.title.replace(/\s+/g, '-')}`}>
-            <button type="button" className="bg-lightBlueColor mr-8 md:mr-0 rounded px-3 py-2 text-md text-skyColor font-medium hover:bg-secondaryColor hover:text-primaryColor">
-              Read More
-              <ArrowRightIcon className="h-4 inline ml-1" />
-            </button>
+
+        <div className="flex flex-col p-6 gap-4">
+          <Link to={href} className="block">
+            <h3 className="text-xl md:text-2xl font-semibold tracking-tight text-fg group-hover:text-accent transition-colors">
+              {data.title}
+            </h3>
           </Link>
-        </div>
+          <p className="text-sm text-subtle leading-relaxed line-clamp-4">
+            {data.p_one.substring(0, 220)}
+            …
+          </p>
 
+          <div className="mt-auto flex items-center justify-between pt-3 border-t border-hairline">
+            <div className="flex items-center gap-4 mono text-xs text-faint">
+              <span className="inline-flex items-center gap-1.5">
+                <HeartIcon className="h-3.5 w-3.5" />
+                {data.likes_counter}
+              </span>
+              <span className="inline-flex items-center gap-1.5">
+                <ChatAltIcon className="h-3.5 w-3.5" />
+                {data.comments_counter}
+              </span>
+            </div>
+            <Link
+              to={href}
+              className="inline-flex items-center gap-1.5 text-sm text-fg hover:text-accent transition-colors"
+            >
+              Read more
+              <ArrowRightIcon className="h-3.5 w-3.5" />
+            </Link>
+          </div>
+        </div>
       </div>
-    </motion.section>
+    </motion.article>
   );
 };
 
diff --git a/src/components/Contact/ContactForm.js b/src/components/Contact/ContactForm.js
index cab1df1..d9ffa12 100644
--- a/src/components/Contact/ContactForm.js
+++ b/src/components/Contact/ContactForm.js
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import { motion } from 'framer-motion';
+import { ArrowRightIcon } from '@heroicons/react/solid';
 import emailjs from 'emailjs-com';
 
 const serviceId = process.env.REACT_APP_SERVICE_ID;
@@ -24,89 +25,128 @@ const ContactForm = () => {
       setFieldsNotice(true);
       return;
     }
-
     setFieldsNotice(false);
 
     if (!pattern.test(email)) {
       setEmailNotice(true);
       return;
     }
-
     setEmailNotice(false);
 
-    const templateParams = {
-      name,
-      email,
-      message,
-    };
-
-    emailjs.send(serviceId, templateId, templateParams, userId);
-
+    emailjs.send(serviceId, templateId, { name, email, message }, userId);
     setSuccessNotice(true);
-    setTimeout(() => {
-      navigate('../messageSent');
-    }, 2000);
+    setTimeout(() => navigate('../messageSent'), 2000);
   };
 
+  const inputCls = 'w-full px-4 py-3 rounded-md bg-surface border border-border text-fg placeholder:text-faint focus:outline-none focus:border-accent-ring focus:ring-2 focus:ring-accent-ring/30 transition-colors';
+
   return (
-    <motion.div
-      initial={{ x: '-100vw' }}
-      animate={{ x: -0 }}
-      transition={{ duration: 1 }}
-      className="flex flex-col mt-10 items-center md:mr-52"
-    >
-      <h3 className="text-xl font-bold text-skyColor  mb-4">Let&apos;s Chat</h3>
-      <div className="flex flex-col gap-4">
-        <input
-          type="text"
-          name="user_name"
-          required
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          maxLength="30"
-          placeholder="Name"
-          className="w-72 md:w-80 p-2 rounded text-primaryColor
-      focus:border-2 focus:border-secondaryColor focus:outline-none"
-        />
-        <input
-          type="email"
-          name="user_email"
-          required
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="Email"
-          className="w-72 md:w-80 p-2 rounded text-primaryColor
-        focus:border-2 focus:border-secondaryColor focus:outline-none"
-        />
-        <textarea
-          rows="10"
-          name="user_msg"
-          required
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          maxLength="500"
-          placeholder="Write your message here"
-          className="w-72 md:w-80 p-2 rounded text-primaryColor
-          focus:border-2 focus:border-secondaryColor focus:outline-none"
-        />
-        {
-        fieldsNotice && (
-          <span className="text-skyColor text-center text-base">Please fill all fields</span>
-        )
-      }
-        {
-        emailNotice && (
-          <span className="text-skyColor text-center text-base">Please enter a valid email</span>
-        )
-      }
-        {
-        successNotice && (
-          <span className="text-skyColor text-center text-base">Sending message...</span>
-        )
-      }
-        <button onClick={submission} type="button" className="bg-lightBlueColor ml-24 mt-6 rounded w-28 px-4 py-2 text-base text-skyColor font-medium">Submit</button>
+    <section className="pt-12 md:pt-16">
+      <div className="flex items-center gap-3">
+        <span className="mono text-xs text-faint">/contact</span>
+        <h1 className="text-3xl md:text-4xl font-semibold tracking-tight">Let&apos;s chat</h1>
       </div>
-    </motion.div>
+      <div className="mt-3 h-px bg-hairline" />
+
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="mt-10 grid md:grid-cols-[1fr_1.4fr] gap-10 md:gap-16 items-start"
+      >
+        <div>
+          <p className="text-base text-subtle leading-relaxed">
+            Have a project in mind, a feature that needs building, or just want
+            to talk shop? Drop a note — I read everything and reply quickly.
+          </p>
+          <div className="mt-6 mono text-xs text-faint space-y-1.5">
+            <p>
+              <span className="text-mute">$ </span>
+              email
+              {' → '}
+              <a className="text-fg hover:text-accent" href="mailto:ranjeetbuk96@gmail.com">ranjeetbuk96@gmail.com</a>
+            </p>
+            <p>
+              <span className="text-mute">$ </span>
+              response time
+              {' → '}
+              <span className="text-fg">~24 hours</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-border bg-surface p-6 md:p-8">
+          <div className="flex flex-col gap-4">
+            <label htmlFor="cf-name" className="block">
+              <span className="mono text-xs text-faint block">name</span>
+              <input
+                id="cf-name"
+                type="text"
+                name="user_name"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                maxLength="30"
+                placeholder="Your name"
+                className={`mt-1.5 ${inputCls}`}
+              />
+            </label>
+            <label htmlFor="cf-email" className="block">
+              <span className="mono text-xs text-faint block">email</span>
+              <input
+                id="cf-email"
+                type="email"
+                name="user_email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@example.com"
+                className={`mt-1.5 ${inputCls}`}
+              />
+            </label>
+            <label htmlFor="cf-message" className="block">
+              <span className="mono text-xs text-faint block">message</span>
+              <textarea
+                id="cf-message"
+                rows="6"
+                name="user_msg"
+                required
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                maxLength="500"
+                placeholder="What's on your mind?"
+                className={`mt-1.5 resize-none ${inputCls}`}
+              />
+            </label>
+
+            {fieldsNotice && (
+              <p className="text-sm text-accent">Please fill all fields.</p>
+            )}
+            {emailNotice && (
+              <p className="text-sm text-accent">Please enter a valid email.</p>
+            )}
+            {successNotice && (
+              <p className="text-sm text-accent mono">Sending message…</p>
+            )}
+
+            <div className="flex items-center justify-between gap-3 pt-2">
+              <span className="mono text-xs text-faint">
+                {message.length}
+                /500
+              </span>
+              <button
+                type="button"
+                onClick={submission}
+                className="inline-flex items-center gap-2 h-11 px-5 rounded-md bg-accent text-bg text-sm font-semibold hover:bg-accent-hover transition-colors"
+              >
+                Send message
+                <ArrowRightIcon className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </section>
   );
 };
 
diff --git a/src/components/Contact/ContactInfo.js b/src/components/Contact/ContactInfo.js
index aaa65ba..2ff7c2c 100644
--- a/src/components/Contact/ContactInfo.js
+++ b/src/components/Contact/ContactInfo.js
@@ -1,63 +1,93 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
+import { ArrowRightIcon } from '@heroicons/react/solid';
+
+const socials = [
+  { name: 'GitHub', icon: 'lab la-github', href: 'https://github.com/thecodechaser' },
+  { name: 'LinkedIn', icon: 'lab la-linkedin', href: 'https://www.linkedin.com/in/thecodechaser/' },
+  { name: 'Twitter', icon: 'lab la-twitter', href: 'https://twitter.com/thecodechaser' },
+  { name: 'Medium', icon: 'lab la-medium', href: 'https://medium.com/@thecodechaser' },
+  { name: 'AngelList', icon: 'lab la-angellist', href: 'https://angel.co/u/thecodechaser' },
+  { name: 'Instagram', icon: 'lab la-instagram', href: 'https://www.instagram.com/the_code_chaser/' },
+];
+
+const emails = [
+  'ranjeetbuk96@gmail.com',
+  'contact@thecodechaser.com',
+  'admin@thecodechaser.com',
+];
 
 const ContactInfo = () => (
-  <motion.div
-    initial={{ opacity: 0 }}
-    whileInView={{ opacity: 1 }}
-    transition={{ delay: 0.2, duration: 0.8 }}
-    className="flex flex-col mt-20 md:ml-1 contact-info"
+  <motion.section
+    initial={{ opacity: 0, y: 12 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    viewport={{ once: true, margin: '-80px' }}
+    transition={{ duration: 0.5 }}
+    className="container-page mt-24 md:mt-32"
   >
-    <div className="flex w-full ml-3 md:ml-0">
-      <div className="w-1/4 mb-3 mr-3 border-b-2 about-hr md:mr-5 border-secondaryColor" />
-      <h3 className="text-2xl md:text-4xl">Get in touch</h3>
-      <div className="w-1/4 mb-3 ml-3 border-b-2 about-hr md:ml-5 border-secondaryColor" />
+    <div className="flex items-center gap-3">
+      <span className="mono text-xs text-faint">/get-in-touch</span>
+      <h2 className="text-2xl md:text-3xl font-semibold tracking-tight">
+        Let&apos;s build something
+      </h2>
     </div>
-    <div className="mt-8 ml-4 md:flex md:gap-12 md:ml-1">
-      <p className="text-base md:w-1/3 text-skyColor">
-        {' '}
-        If you have an app idea you&apos;d like to develop, a feature that
-        needs building, or a project that requires coding, I&apos;m here to help.
-        Let&apos;s bring your vision to life!
-        <br />
-        <br />
-        I really enjoy collaborating with other developers. If you&apos;re seeking a
-        project partner, let&apos;s grab a coffee and chat about what we can create together.
-      </p>
-      <div className="mt-4 md:w-1/5 md:mt-0">
-        <h4 className="mb-4 text-2xl">Contacts</h4>
-        <a href="mailto: contact@thecodechaser.com" className="text-base text-skyColor hover:text-secondaryColor">ranjeetbuk96@gmail.com</a>
-        <a href="mailto: contact@thecodechaser.com" className="block mt-3 text-base text-skyColor hover:text-secondaryColor">contact@thecodechaser.com</a>
-        <a href="mailto: contact@thecodechaser.com" className="block mt-3 text-base text-skyColor hover:text-secondaryColor">admin@thecodechaser.com</a>
+    <div className="mt-3 h-px bg-hairline" />
+
+    <div className="mt-8 grid md:grid-cols-3 gap-6 md:gap-8 items-start">
+      <div className="md:col-span-1">
+        <p className="text-base text-subtle leading-relaxed">
+          Got an app idea, a feature to build, or just want to grab a coffee
+          and talk shop? I&apos;m always up for a good conversation about
+          code, architecture, or what to ship next.
+        </p>
+        <Link
+          to="/contact"
+          className="mt-6 inline-flex items-center gap-2 h-11 px-5 rounded-md bg-accent text-bg text-sm font-semibold hover:bg-accent-hover transition-colors"
+        >
+          Send a message
+          <ArrowRightIcon className="h-4 w-4" />
+        </Link>
       </div>
-      <div className="mt-4 md:w-1/5 md:mt-0">
-        <h4 className="mb-4 text-2xl">Social Media</h4>
-        <div className="flex gap-5">
-          <a aria-label="Save" target="_blank" href="https://github.com/thecodechaser" rel="noreferrer"><i className="text-3xl lab la-github text-skyColor hover:text-secondaryColor" /></a>
-          <a aria-label="Save" target="_blank" href="https://twitter.com/thecodechaser" rel="noreferrer"><i className="text-3xl lab la-twitter text-skyColor hover:text-secondaryColor" /></a>
-          <a aria-label="Save" target="_blank" href="https://www.linkedin.com/in/thecodechaser/" rel="noreferrer"><i className="text-3xl lab la-linkedin text-skyColor hover:text-secondaryColor" /></a>
-        </div>
-        <div className="flex gap-5 mt-4">
-          <a aria-label="Save" target="_blank" href="https://medium.com/@thecodechaser" rel="noreferrer"><i className="text-3xl lab la-medium text-skyColor hover:text-secondaryColor" /></a>
-          <a aria-label="Save" target="_blank" href="https://angel.co/u/thecodechaser" rel="noreferrer"><i className="text-3xl lab la-angellist text-skyColor hover:text-secondaryColor" /></a>
-          <a aria-label="Save" target="_blank" href="https://www.instagram.com/the_code_chaser/" rel="noreferrer"><i className="text-3xl lab la-instagram text-skyColor hover:text-secondaryColor" /></a>
-        </div>
+
+      <div className="rounded-xl border border-border bg-surface p-6">
+        <h3 className="mono text-xs text-faint uppercase tracking-widest">Contact</h3>
+        <ul className="mt-4 space-y-3">
+          {emails.map((e) => (
+            <li key={e}>
+              <a
+                href={`mailto:${e}`}
+                className="text-sm text-fg hover:text-accent transition-colors break-all"
+              >
+                {e}
+              </a>
+            </li>
+          ))}
+        </ul>
       </div>
-    </div>
 
-    <div className="flex flex-col items-center md:mr-48">
-      <Link to="/contact">
-        {' '}
-        <button
-          type="button"
-          className="px-6 py-3 mt-10 ml-4 text-lg border-2 rounded border-secondaryColor md:ml-0 text-secondaryColor hover:text-skyColor hover:border-skyColor"
-        >
-          Send Me Message
-        </button>
-      </Link>
+      <div className="rounded-xl border border-border bg-surface p-6">
+        <h3 className="mono text-xs text-faint uppercase tracking-widest">Around the web</h3>
+        <ul className="mt-4 grid grid-cols-3 gap-2">
+          {socials.map((s) => (
+            <li key={s.name}>
+              <a
+                href={s.href}
+                target="_blank"
+                rel="noreferrer"
+                aria-label={s.name}
+                title={s.name}
+                className="flex flex-col items-center justify-center gap-1 py-3 rounded-md border border-hairline bg-elevated text-subtle hover:text-accent hover:border-accent-ring transition-colors"
+              >
+                <i className={`${s.icon} text-xl`} aria-hidden />
+                <span className="mono text-[10px]">{s.name}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
-  </motion.div>
+  </motion.section>
 );
 
 export default ContactInfo;
diff --git a/src/components/Contact/SucessNotice.js b/src/components/Contact/SucessNotice.js
index f46c4eb..a2b926a 100644
--- a/src/components/Contact/SucessNotice.js
+++ b/src/components/Contact/SucessNotice.js
@@ -1,26 +1,32 @@
 import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
+import { CheckIcon, ArrowRightIcon } from '@heroicons/react/solid';
 
 const SuccessNotice = () => (
   <motion.section
-    initial={{ x: '-100vw' }}
-    animate={{ x: -0 }}
-    transition={{ duration: 1 }}
-    className="flex flex-col items-center mt-60 md:mr-52"
+    initial={{ opacity: 0, y: 12 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.5 }}
+    className="min-h-[60vh] flex items-center justify-center pt-16 pb-24"
   >
-    <p className="text-xl md:text-3xl">Thank you for your message!</p>
-    <p className="text-md md:text-lg mt-5">
-      I will get back to you shortly.
-    </p>
-    <Link to="/">
-      <button
-        type="button"
-        className="bg-lightBlueColor mt-10 rounded px-6 py-2 w-50
-      text-lg text-skyColor font-medium"
+    <div className="max-w-md w-full rounded-xl border border-border bg-surface p-8 text-center shadow-card">
+      <span className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-accent-soft text-accent border border-accent-ring">
+        <CheckIcon className="h-6 w-6" />
+      </span>
+      <h1 className="mt-6 text-2xl md:text-3xl font-semibold tracking-tight">
+        Message sent
+      </h1>
+      <p className="mt-3 text-base text-subtle leading-relaxed">
+        Thanks for reaching out — I&apos;ll get back to you shortly.
+      </p>
+      <Link
+        to="/"
+        className="mt-8 inline-flex items-center gap-2 h-11 px-5 rounded-md bg-accent text-bg text-sm font-semibold hover:bg-accent-hover transition-colors"
       >
-        Go Home
-      </button>
-    </Link>
+        Back home
+        <ArrowRightIcon className="h-4 w-4" />
+      </Link>
+    </div>
   </motion.section>
 );
 
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 2f9d395..48a4ee7 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,33 +1,42 @@
 import React from 'react';
+import { ArrowUpIcon } from '@heroicons/react/solid';
 import ContactInfo from './Contact/ContactInfo';
 
-const goToTop = () => {
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth',
-  });
-};
+const goToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
 
 const Footer = () => (
-
   <>
     <ContactInfo />
-    <footer
-      className="flex flex-col items-center my-8"
-    >
-      <button
-        type="button"
-        onClick={goToTop}
-        aria-label="Save"
-        className="px-4 py-2 my-10 font-medium rounded bg-lightBlueColor text-skyColor hover:bg-secondaryColor hover:text-primaryColor"
-      >
-        <i className="las la-angle-up" />
-      </button>
-      <p className="text-md">
-        Copyright © 2025
-        <a href="https://github.com/thecodechaser" className="text-secondaryColor"> Ranjeet Singh </a>
-        All Rights Reserved
-      </p>
+    <footer className="container-page mt-24 mb-10">
+      <div className="border-t border-hairline pt-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+        <p className="text-sm text-subtle">
+          ©
+          {' '}
+          {new Date().getFullYear()}
+          {' '}
+          <a
+            href="https://github.com/thecodechaser"
+            target="_blank"
+            rel="noreferrer"
+            className="text-fg hover:text-accent transition-colors"
+          >
+            Ranjeet Singh
+          </a>
+          {' · '}
+          <span className="mono text-faint">All rights reserved</span>
+        </p>
+        <div className="flex items-center gap-3">
+          <span className="mono text-xs text-faint hidden sm:inline">Built with React + Tailwind</span>
+          <button
+            type="button"
+            onClick={goToTop}
+            aria-label="Back to top"
+            className="inline-flex items-center justify-center w-10 h-10 rounded-md border border-border text-subtle hover:text-fg hover:border-accent-ring transition-colors"
+          >
+            <ArrowUpIcon className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
     </footer>
   </>
 );
diff --git a/src/components/Header.js b/src/components/Header.js
index dd46f22..1f67b75 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,82 +1,121 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { MenuIcon, XIcon } from '@heroicons/react/solid';
 import { Link, useLocation } from 'react-router-dom';
 
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ');
-}
-
 const menuItems = [
-  { name: 'Home', path: '/', current: true },
-  { name: 'About', path: '/about', current: false },
-  { name: 'Portfolio', path: '/portfolio', current: false },
-  { name: 'Contact', path: '/contact', current: false },
-  { name: 'Blog', path: '/blog', current: false },
+  { name: 'Home', path: '/' },
+  { name: 'About', path: '/about' },
+  { name: 'Portfolio', path: '/portfolio' },
+  { name: 'Blog', path: '/blog' },
+  { name: 'Contact', path: '/contact' },
 ];
 
 const Header = () => {
-  const [mobileMenu, setMobileMenu] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
 
-  const location = useLocation();
+  useEffect(() => setOpen(false), [pathname]);
 
   return (
     <header
-      className={`flex flex-col z-10  bg-primaryColor px-8 py-7 ${mobileMenu ? 'h-screen' : 'h-fit'} fixed top-0 w-full shadow-xl md:flex-row md:justify-between md:px-20 md:h-fit`}
+      className={`sticky top-0 z-50 w-full border-b transition-colors ${
+        scrolled
+          ? 'border-hairline bg-bg/75 backdrop-blur-md'
+          : 'border-transparent bg-bg/40 backdrop-blur'
+      }`}
     >
-      <a href="/" className="text-xl">
-        <span className="text-secondaryColor">the</span>
-        <span>code</span>
-        <span className="text-secondaryColor">chaser</span>
-      </a>
-      <nav>
-        <div className="text-secondaryColor md:hidden mobile-btns">
-          <button
-            type="button"
-            className={classNames(!mobileMenu ? 'block' : 'hidden')}
-            onClick={() => setMobileMenu(true)}
+      <div className="container-page flex items-center justify-between h-16">
+        <Link to="/" className="flex items-center gap-2 group" aria-label="thecodechaser home">
+          <span
+            className="inline-flex items-center justify-center w-8 h-8 rounded-md border border-border bg-elevated text-accent font-mono text-sm group-hover:border-accent-ring transition-colors"
+            aria-hidden
           >
-            <MenuIcon className="h-8 mr-2" />
-          </button>
-          <button type="button" className={classNames(mobileMenu ? 'block' : 'hidden')} onClick={() => setMobileMenu(false)}>
-            <XIcon className="h-8 mr-2" />
-          </button>
-        </div>
-        <div className={classNames(mobileMenu ? 'block' : 'hidden', 'md:block')}>
-          <ul className="flex flex-col items-center gap-8 mt-24 md:flex-row md:mt-1">
-            {
-              menuItems.map((item) => (
-                <li key={item.name}>
-                  <Link to={item.path}>
-                    <a
-                      onClick={() => setMobileMenu(false)}
-                      href={item.path}
-                      className={classNames(
-                        item.path === location.pathname
-                          ? 'border-b-2 border-secondaryColor text-secondaryColor'
-                          : 'text-skyColor',
-                        'pb-1 text-lg hover:text-secondaryColor',
-                      )}
-                      aria-current={item.current ? 'page' : undefined}
-                    >
-                      {item.name}
-                    </a>
-                  </Link>
-                </li>
-              ))
-            }
-          </ul>
+            ~/
+          </span>
+          <span className="text-[15px] font-medium tracking-tight">
+            <span className="text-subtle">the</span>
+            <span className="text-fg">code</span>
+            <span className="text-subtle">chaser</span>
+          </span>
+        </Link>
+
+        <nav className="hidden md:flex items-center gap-1">
+          {menuItems.map((item) => {
+            const active = item.path === pathname;
+            return (
+              <Link
+                key={item.name}
+                to={item.path}
+                className={`px-3 py-1.5 rounded-md text-sm transition-colors ${
+                  active
+                    ? 'text-fg bg-muted'
+                    : 'text-subtle hover:text-fg hover:bg-muted/60'
+                }`}
+              >
+                {item.name}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="hidden md:block">
+          <Link
+            to="/resume"
+            className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-accent text-bg text-sm font-medium hover:bg-accent-hover transition-colors"
+          >
+            Resume
+            <span aria-hidden>→</span>
+          </Link>
         </div>
-      </nav>
-      <Link to="/resume" className={`self-center ${mobileMenu ? 'block' : 'hidden'} md:block`}>
+
         <button
-          onClick={() => setMobileMenu(false)}
           type="button"
-          className={`border-2 border-secondaryColor mt-24 rounded px-4 py-1 w-32 
-      text-secondaryColor hover:text-skyColor hover:border-skyColor md:mt-0`}
+          onClick={() => setOpen((v) => !v)}
+          className="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-md border border-border text-fg hover:border-accent-ring transition-colors"
+          aria-label={open ? 'Close menu' : 'Open menu'}
         >
-          Resume
+          {open ? <XIcon className="h-5 w-5" /> : <MenuIcon className="h-5 w-5" />}
         </button>
-      </Link>
+      </div>
+
+      {/* Mobile drawer */}
+      <div
+        className={`md:hidden overflow-hidden border-t border-hairline bg-bg/95 backdrop-blur-md transition-[max-height,opacity] duration-300 ${
+          open ? 'max-h-[480px] opacity-100' : 'max-h-0 opacity-0'
+        }`}
+      >
+        <div className="container-page py-4 flex flex-col gap-1">
+          {menuItems.map((item) => {
+            const active = item.path === pathname;
+            return (
+              <Link
+                key={item.name}
+                to={item.path}
+                className={`px-3 py-2.5 rounded-md text-base transition-colors ${
+                  active ? 'text-fg bg-muted' : 'text-subtle hover:text-fg hover:bg-muted/60'
+                }`}
+              >
+                {item.name}
+              </Link>
+            );
+          })}
+          <Link
+            to="/resume"
+            className="mt-2 inline-flex items-center justify-center gap-2 h-10 rounded-md bg-accent text-bg text-sm font-medium hover:bg-accent-hover"
+          >
+            Resume
+            <span aria-hidden>→</span>
+          </Link>
+        </div>
+      </div>
     </header>
   );
 };
diff --git a/src/components/Home/HeroSection.js b/src/components/Home/HeroSection.js
index 61cb720..ab1fa77 100644
--- a/src/components/Home/HeroSection.js
+++ b/src/components/Home/HeroSection.js
@@ -1,41 +1,113 @@
-import { CheckCircleIcon } from '@heroicons/react/solid';
 import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
+import { ArrowRightIcon } from '@heroicons/react/solid';
 import profilePicture from '../../assets/images/profilePicture2.jpg';
 
-const fields = ['Full Stack web developer', 'Love for clean code', 'Remote work aficionado', 'Amateur astronomer'];
+const traits = [
+  'Full-stack engineer',
+  'Clean-code obsessive',
+  'Remote-first',
+  'Amateur astronomer',
+];
 
 const HeroSection = () => (
-  <motion.div
-    initial={{ x: '-100vw' }}
-    animate={{ x: -0 }}
-    transition={{ duration: 1 }}
-    className="flex flex-col items-center gap-10 md:ml-4 md:flex-row md:gap-96"
-  >
-    <div className="md:order-1">
-      <img src={profilePicture} alt="profile" className="h-64 rounded-full md:h-96" />
-    </div>
-    <div className="text-skyColor">
-      <p className="text-base text-secondaryColor">Hello!</p>
-      <h1 className="text-4xl text-secondaryColor md:text-5xl">I&apos;m Ranjeet Singh</h1>
-      {
-          fields.map((field) => (
-            <div key={field} className="flex gap-4 mt-3">
-              <CheckCircleIcon className="h-7" />
-              <p className="m-px text-base">{field}</p>
-            </div>
-          ))
-        }
-      <Link to="/contact">
-        <button
-          type="button"
-          className="px-6 py-2 mt-10 text-lg font-medium rounded bg-lightBlueColor w-50 text-skyColor hover:bg-secondaryColor hover:text-primaryColor"
+  <section className="relative pt-16 md:pt-24 pb-12 md:pb-20">
+    <div className="absolute inset-0 -z-10 bg-grid pointer-events-none" aria-hidden />
+
+    <div className="grid md:grid-cols-[1.4fr_1fr] gap-12 md:gap-16 items-center">
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, ease: 'easeOut' }}
+      >
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-border bg-elevated">
+          <span className="relative flex h-2 w-2">
+            <span className="absolute inline-flex h-full w-full rounded-full bg-accent opacity-60 animate-ping" />
+            <span className="relative inline-flex h-2 w-2 rounded-full bg-accent" />
+          </span>
+          <span className="mono text-xs text-subtle">
+            Available for new opportunities
+          </span>
+        </div>
+
+        <h1 className="mt-6 text-4xl md:text-6xl font-semibold tracking-tightest leading-[1.05]">
+          Software engineer
+          <br />
+          building thoughtful
+          <br />
+          <span className="text-subtle">web experiences.</span>
+        </h1>
+
+        <p className="mt-6 max-w-xl text-base md:text-lg text-subtle leading-relaxed">
+          I&apos;m
+          {' '}
+          <span className="text-fg">Ranjeet Singh</span>
+          {' '}
+          — currently shipping product at
+          {' '}
+          <a
+            href="https://modelia.ai"
+            target="_blank"
+            rel="noreferrer"
+            className="text-fg underline decoration-accent decoration-2 underline-offset-4 hover:text-accent transition-colors"
+          >
+            Modelia AI
+          </a>
+          . 3+ years writing React, Vue, Rails, and the occasional bit of Java —
+          with a soft spot for performance, type safety, and clean APIs.
+        </p>
+
+        <div className="mt-8 flex flex-wrap items-center gap-3">
+          <Link
+            to="/contact"
+            className="inline-flex items-center gap-2 h-11 px-5 rounded-md bg-accent text-bg text-sm font-semibold hover:bg-accent-hover transition-colors"
+          >
+            Get in touch
+            <ArrowRightIcon className="h-4 w-4" />
+          </Link>
+          <Link
+            to="/portfolio"
+            className="inline-flex items-center gap-2 h-11 px-5 rounded-md border border-border text-fg text-sm font-medium hover:border-accent-ring hover:text-accent transition-colors"
+          >
+            View work
+          </Link>
+        </div>
+
+        <div className="mt-10 flex flex-wrap gap-2">
+          {traits.map((t) => (
+            <span
+              key={t}
+              className="mono text-xs text-subtle px-2.5 py-1 rounded-md border border-hairline bg-surface"
+            >
+              {t}
+            </span>
+          ))}
+        </div>
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0, scale: 0.96 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.6, ease: 'easeOut', delay: 0.1 }}
+        className="relative justify-self-center md:justify-self-end"
+      >
+        <div className="absolute -inset-6 rounded-full bg-accent-soft blur-3xl" aria-hidden />
+        <div className="relative w-56 h-56 md:w-72 md:h-72 rounded-full border border-border bg-elevated overflow-hidden shadow-card">
+          <img
+            src={profilePicture}
+            alt="Ranjeet Singh"
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <div
+          className="absolute -bottom-3 -right-3 mono text-[11px] uppercase tracking-widest text-faint px-2.5 py-1 rounded-md border border-border bg-surface"
+          aria-hidden
         >
-          Get in Touch
-        </button>
-      </Link>
+          @thecodechaser
+        </div>
+      </motion.div>
     </div>
-  </motion.div>
+  </section>
 );
 
 export default HeroSection;
diff --git a/src/components/Portfolio/Project.js b/src/components/Portfolio/Project.js
index a82a129..e3faecd 100644
--- a/src/components/Portfolio/Project.js
+++ b/src/components/Portfolio/Project.js
@@ -1,54 +1,89 @@
 import PropTypes from 'prop-types';
 import { motion } from 'framer-motion';
-import serverLogo from '../../assets/images/server-solid.svg';
+import { ExternalLinkIcon } from '@heroicons/react/solid';
 import githubLogo from '../../assets/images/github-logo.svg';
 
-const Project = (props) => {
+const Project = ({ data }) => {
   const {
-    data: {
-      id, image, title, details, tech, live, github,
-    },
-  } = props;
-  let odd;
-  if (id === 0 || id % 2 === 0) {
-    odd = false;
-  } else {
-    odd = true;
-  }
+    image, title, details, tech, live, github,
+  } = data;
+
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      whileInView={{ opacity: 1 }}
-      transition={{ delay: 0.1, duration: 0.8 }}
-      className={`md:flex project-card ${id === 5 ? 'mt-16' : 'mt-24'} mx-2 ml-4 md:ml-0 md:mx-0 p-3 rounded-md shadow shadow-lightBlueColor md:gap-5`}
+    <motion.article
+      initial={{ opacity: 0, y: 12 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-60px' }}
+      transition={{ duration: 0.5 }}
+      className="group relative flex flex-col rounded-xl border border-border bg-surface overflow-hidden hover:border-accent-ring transition-colors shadow-card"
     >
-      <img
-        src={image}
-        alt="project preview"
-        className={`w-11/12 ml-2 ${odd ? 'md:order-1' : 'md:order-0'} rounded-md card-img md:ml-0 `}
-      />
-      <div>
-        <h3 className={`text-skyColor ${odd ? 'md:text-left' : 'md:text-right'} mt-3 md:mt-0 mb-4 text-2xl ml-2 md:ml-0`}>{title}</h3>
-        <p className="p-5 ml-2 mr-6 text-base font-medium rounded bg-lightBlueColor text-skyColor md:ml-0 md:mr-0">
+      <a
+        href={live}
+        target="_blank"
+        rel="noreferrer"
+        className="block aspect-[16/10] overflow-hidden bg-elevated relative"
+        aria-label={`${title} preview`}
+      >
+        <img
+          src={image}
+          alt={`${title} preview`}
+          className="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-[1.03]"
+          loading="lazy"
+        />
+        <span className="absolute inset-0 bg-gradient-to-t from-bg/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+      </a>
+
+      <div className="flex flex-col flex-1 p-5 gap-4">
+        <div className="flex items-start justify-between gap-3">
+          <h3 className="text-lg font-semibold text-fg leading-snug">{title}</h3>
+          <a
+            href={live}
+            target="_blank"
+            rel="noreferrer"
+            className="text-subtle hover:text-accent transition-colors shrink-0"
+            aria-label={`Open ${title} live site`}
+          >
+            <ExternalLinkIcon className="h-4 w-4" />
+          </a>
+        </div>
+
+        <p className="text-sm text-subtle leading-relaxed line-clamp-4">
           {details}
         </p>
-        <div className={`flex ${odd ? 'md:justify-start' : 'md:justify-end'} gap-2 text-skyColor mt-5 ml-2 md:ml-0`}>
+
+        <div className="flex flex-wrap gap-1.5 mt-auto pt-1">
           {tech.map((item) => (
-            <p key={item} className="px-2 py-1 border rounded border-lightBlueColor text-skyColor">{item}</p>
+            <span
+              key={item}
+              className="mono text-[11px] px-2 py-1 rounded-md border border-hairline bg-elevated text-subtle"
+            >
+              {item}
+            </span>
           ))}
         </div>
-        <div className={`flex ${odd ? 'md:justify-start' : 'md:justify-end'} gap-5 text-skyColor mt-5 ml-2 md:ml-0`}>
-          <a target="_blank" href={live} className="px-5 py-2 font-medium rounded bg-lightBlueColor text-md text-skyColor hover:bg-secondaryColor hover:text-primaryColor" rel="noreferrer">
-            See Live
-            <img src={serverLogo} className="inline w-5 mb-1 ml-2" alt="server-icon" />
+
+        <div className="flex items-center gap-2 pt-3 mt-1 border-t border-hairline">
+          <a
+            href={live}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1.5 text-sm text-fg hover:text-accent transition-colors"
+          >
+            Live
+            <ExternalLinkIcon className="h-3.5 w-3.5" />
           </a>
-          <a target="_blank" href={github} className="px-5 py-2 font-medium rounded bg-lightBlueColor text-md text-skyColor hover:bg-secondaryColor hover:text-primaryColor" rel="noreferrer">
-            See Source
-            <img src={githubLogo} className="inline w-5 mb-1 ml-2" alt="github-icon" />
+          <span className="text-faint" aria-hidden>·</span>
+          <a
+            href={github}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1.5 text-sm text-subtle hover:text-fg transition-colors"
+          >
+            <img src={githubLogo} alt="" className="w-3.5 h-3.5 invert opacity-80" />
+            Source
           </a>
         </div>
       </div>
-    </motion.div>
+    </motion.article>
   );
 };
 
diff --git a/src/components/Resume/ResumePDF.js b/src/components/Resume/ResumePDF.js
index 27d411b..0d3fc03 100644
--- a/src/components/Resume/ResumePDF.js
+++ b/src/components/Resume/ResumePDF.js
@@ -1,15 +1,24 @@
+import { DownloadIcon } from '@heroicons/react/solid';
 import ranjeetPDF from '../../assets/data/Ranjeet-Resume.pdf';
 
 const ResumePDF = () => (
-  <div>
-    <object aria-label="resume-pdF" data={ranjeetPDF} type="application/pdf" className="w-full pdf" />
-    <button
-      onClick={() => window.open('https://drive.google.com/file/d/13Cya4tB72htNZgjOYzz31DTGm37V1TKE/view?usp=sharing', '_blank')}
-      type="submit"
-      className="px-4 py-3 mt-5 ml-2 text-lg font-medium rounded bg-lightBlueColor text-skyColor hover:bg-secondaryColor hover:text-primaryColor"
-    >
-      Download Resume
-    </button>
+  <div className="mt-8">
+    <object
+      aria-label="resume preview"
+      data={ranjeetPDF}
+      type="application/pdf"
+      className="pdf w-full"
+    />
+    <div className="mt-5">
+      <button
+        type="button"
+        onClick={() => window.open('https://drive.google.com/file/d/13Cya4tB72htNZgjOYzz31DTGm37V1TKE/view?usp=sharing', '_blank')}
+        className="inline-flex items-center gap-2 h-11 px-5 rounded-md bg-accent text-bg text-sm font-semibold hover:bg-accent-hover transition-colors"
+      >
+        <DownloadIcon className="h-4 w-4" />
+        Download resume
+      </button>
+    </div>
   </div>
 );
 
diff --git a/src/index.css b/src/index.css
index 18ddc57..e45540f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,15 +4,101 @@
 @tailwind utilities;
 /* stylelint-enable */
 
-@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400&family=Open+Sans:ital,wght@0,300;0,400;1,300&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");
 
+:root {
+  color-scheme: dark;
+}
+
+html,
 body {
   padding: 0;
   margin: 0;
-  box-sizing: border-box;
-  font-size: 14px;
-  background-color: #012a4a;
-  color: #f9f9f9;
-  font-family: 'Open Sans', sans-serif;
+  background-color: #0a0a0b;
+  color: #fafafa;
+  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+}
+
+body {
+  background-image:
+    radial-gradient(1200px 600px at 80% -10%, rgba(163, 230, 53, 0.06), transparent 60%),
+    radial-gradient(900px 500px at -10% 10%, rgba(96, 130, 151, 0.05), transparent 60%);
+  background-attachment: fixed;
+}
+
+/* Selection */
+::selection {
+  background: rgba(163, 230, 53, 0.35);
+  color: #0a0a0b;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #0a0a0b;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #26262b;
+  border-radius: 8px;
+  border: 2px solid #0a0a0b;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #3a3a42;
+}
+
+/* Headings — tight tracking, balanced wrapping */
+h1,
+h2,
+h3,
+h4 {
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+
+h1 {
+  letter-spacing: -0.04em;
+}
+
+/* Mono utility class for inline code-like accents */
+.mono {
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-feature-settings: 'liga' 0;
+}
+
+/* Line clamp utilities — Tailwind 3.0 doesn't ship line-clamp by default */
+.line-clamp-3,
+.line-clamp-4 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  -webkit-line-clamp: 3;
+}
+
+.line-clamp-4 {
+  -webkit-line-clamp: 4;
+}
+
+/* Reusable dotted-grid background for hero / 404 */
+.bg-grid {
+  background-image:
+    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
 }
diff --git a/src/pages/404.js b/src/pages/404.js
index 44a0707..1257d53 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,26 +1,40 @@
 import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
+import { ArrowRightIcon } from '@heroicons/react/solid';
 
 const NotFound = () => (
   <motion.section
-    initial={{ x: '-100vw' }}
-    animate={{ x: -0 }}
-    transition={{ duration: 1 }}
-    className="flex flex-col items-center mt-60 md:mr-52"
+    initial={{ opacity: 0, y: 12 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.5 }}
+    className="relative min-h-[70vh] flex flex-col items-center justify-center text-center pt-16 pb-24"
   >
-    <p className="text-3xl md:text-5xl">Lost your way?</p>
-    <p className="text-lg mt-5">
-      Sorry, we can&apos;t find that page.
+    <div className="absolute inset-0 -z-10 bg-grid pointer-events-none" aria-hidden />
+
+    <p className="mono text-xs uppercase tracking-widest text-faint">Error 404</p>
+    <h1 className="mt-3 text-5xl md:text-7xl font-semibold tracking-tightest">
+      <span className="text-accent">404</span>
+      {' '}
+      — lost your way?
+    </h1>
+    <p className="mt-5 max-w-md text-base text-subtle leading-relaxed">
+      The page you&apos;re looking for doesn&apos;t exist or has been moved.
     </p>
-    <Link to="/">
-      <button
-        type="button"
-        className="bg-lightBlueColor mt-10 rounded px-6 py-2 w-50
-      text-lg text-skyColor font-medium"
+    <div className="mt-8 flex items-center gap-3">
+      <Link
+        to="/"
+        className="inline-flex items-center gap-2 h-11 px-5 rounded-md bg-accent text-bg text-sm font-semibold hover:bg-accent-hover transition-colors"
+      >
+        Go home
+        <ArrowRightIcon className="h-4 w-4" />
+      </Link>
+      <Link
+        to="/contact"
+        className="inline-flex items-center gap-2 h-11 px-5 rounded-md border border-border text-fg text-sm font-medium hover:border-accent-ring hover:text-accent transition-colors"
       >
-        Go Home
-      </button>
-    </Link>
+        Report an issue
+      </Link>
+    </div>
   </motion.section>
 );
 
diff --git a/src/pages/About.js b/src/pages/About.js
index 642e72f..cb9a8e8 100644
--- a/src/pages/About.js
+++ b/src/pages/About.js
@@ -5,18 +5,21 @@ import Education from '../components/About/Education';
 
 const About = () => {
   useEffect(() => {
-    window.scrollTo({
-      top: 0,
-    });
+    window.scrollTo({ top: 0 });
   }, []);
 
   return (
-    <div className="mt-40">
-      {/* about-me-section */}
+    <div className="pt-12 md:pt-16">
+      <div className="flex items-center gap-3">
+        <span className="mono text-xs text-faint">/about</span>
+        <h1 className="text-3xl md:text-4xl font-semibold tracking-tight">
+          Background, in detail
+        </h1>
+      </div>
+      <div className="mt-3 h-px bg-hairline" />
+
       <AboutMe />
-      {/* experience-section */}
       <Experience />
-      {/* education-section */}
       <Education />
     </div>
   );
diff --git a/src/pages/Blogs.js b/src/pages/Blogs.js
index 7abfef2..35d532a 100644
--- a/src/pages/Blogs.js
+++ b/src/pages/Blogs.js
@@ -9,27 +9,41 @@ const Blogs = () => {
 
   useEffect(() => {
     dispatch(fetchPostsApi());
-    window.scrollTo({
-      top: 0,
-    });
+    window.scrollTo({ top: 0 });
   }, []);
 
   return (
-    <div className="mt-32 md:mt-40">
-      <div className="flex gap-3 mb-6 ml-5 md:ml-0">
-        <h2 className="text-2xl md:text-4xl">Latest Blogs</h2>
-        <div className="w-3/6 mb-3 border-b-2 border-secondaryColor hr-blog" />
+    <section className="pt-12 md:pt-16">
+      <div className="flex items-center gap-3">
+        <span className="mono text-xs text-faint">/blog</span>
+        <h1 className="text-3xl md:text-4xl font-semibold tracking-tight">Writing</h1>
+        {posts.length > 0 && (
+          <span className="mono text-xs text-faint hidden md:inline ml-auto">
+            {String(posts.length).padStart(2, '0')}
+            {' '}
+            posts
+          </span>
+        )}
       </div>
-      {/* blog-section */}
-      {posts.length === 0 ? (
-        <div className="ml-5 text-base md:ml-0 text-skyColor">
-          Unable to load posts due to a server issue.
-          Please contact the administrator for assistance.
-          <a href="/contact" className="text-secondaryColor"> Send Message </a>
-        </div>
-      )
-        : posts.map((data) => <BlogCard key={data.id} data={data} />)}
-    </div>
+      <div className="mt-3 h-px bg-hairline" />
+      <p className="mt-6 max-w-2xl text-base text-subtle leading-relaxed">
+        Notes, tutorials, and the occasional rabbit hole on web development.
+      </p>
+
+      <div className="mt-10 flex flex-col gap-5">
+        {posts.length === 0 ? (
+          <div className="rounded-xl border border-border bg-surface p-6 text-subtle text-sm">
+            Unable to load posts due to a server issue. Please contact the
+            administrator for assistance.
+            {' '}
+            <a href="/contact" className="text-accent hover:underline">Send a message</a>
+            .
+          </div>
+        ) : (
+          posts.map((data) => <BlogCard key={data.id} data={data} />)
+        )}
+      </div>
+    </section>
   );
 };
 
diff --git a/src/pages/Contact.js b/src/pages/Contact.js
index c9cbf07..f4aa97f 100644
--- a/src/pages/Contact.js
+++ b/src/pages/Contact.js
@@ -3,17 +3,10 @@ import ContactForm from '../components/Contact/ContactForm';
 
 const Contact = () => {
   useEffect(() => {
-    window.scrollTo({
-      top: 0,
-    });
+    window.scrollTo({ top: 0 });
   }, []);
 
-  return (
-    <div className="mt-32">
-      {/* contact-form */}
-      <ContactForm />
-    </div>
-  );
+  return <ContactForm />;
 };
 
 export default Contact;
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 48e3271..10f53dd 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,87 +1,93 @@
+/* eslint-disable react/prop-types */
 import { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { ArrowRightIcon } from '@heroicons/react/solid';
 import Project from '../components/Portfolio/Project';
 import AboutMe from '../components/About/AboutMe';
 import HeroSection from '../components/Home/HeroSection';
 import { fetchPostsApi } from '../redux/blogs/posts';
 import BlogCard from '../components/Blogs/BlogCard';
 
+const SectionHeading = ({
+  label, title, kicker, href, ctaText,
+}) => (
+  <div className="flex items-center gap-3">
+    {label && <span className="mono text-xs text-faint">{label}</span>}
+    <h2 className="text-2xl md:text-3xl font-semibold tracking-tight">{title}</h2>
+    {kicker && (
+      <span className="mono text-xs text-faint hidden md:inline">{kicker}</span>
+    )}
+    {href && (
+      <Link
+        to={href}
+        className="ml-auto inline-flex items-center gap-1.5 text-sm text-subtle hover:text-accent transition-colors"
+      >
+        {ctaText}
+        <ArrowRightIcon className="h-3.5 w-3.5" />
+      </Link>
+    )}
+  </div>
+);
+
 const Home = () => {
   const blogs = useSelector((state) => state.postsReducer);
   const portfolio = useSelector((state) => state.projectsReducer);
-  const projects = portfolio.slice(0, 5);
+  const projects = portfolio.slice(0, 6);
   const posts = blogs.slice(0, 3);
 
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(fetchPostsApi());
-    window.scrollTo({
-      top: 0,
-    });
+    window.scrollTo({ top: 0 });
   }, []);
 
   return (
     <>
-      <main className="mt-40">
-        {/* hero-section */}
-        <HeroSection />
-        {/* about-section */}
-        <AboutMe />
-        <Link to="/about">
-          <button
-            type="button"
-            className="px-6 py-2 mt-10 ml-4 text-lg font-medium rounded bg-lightBlueColor w-50 text-skyColor md:ml-1 hover:bg-secondaryColor hover:text-primaryColor"
-          >
-            Know more
-          </button>
-        </Link>
-      </main>
+      <HeroSection />
+      <AboutMe />
 
-      {/* project-section */}
-      <div className="mt-14 md:mt-24">
-        <div className="flex gap-3 mb-6 ml-3 md:ml-0">
-          <h2 className="text-2xl md:text-4xl">Portfolio</h2>
-          <div className="w-4/6 mb-3 border-b-2 border-secondaryColor hr-portfolio" />
+      {/* Portfolio */}
+      <section className="mt-20 md:mt-28">
+        <SectionHeading
+          label="02 /"
+          title="Selected work"
+          kicker="recent projects"
+          href="/portfolio"
+          ctaText="See all"
+        />
+        <div className="mt-3 h-px bg-hairline" />
+        <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {projects.map((data) => (
+            <Project key={data.id} data={data} />
+          ))}
         </div>
-        {
-      projects.map((data) => (
-        <Project key={data.id} data={data} />
-      ))
-    }
-        <Link to="/portfolio">
-          <button
-            type="button"
-            className="px-8 py-2 mt-10 ml-4 text-lg font-medium rounded bg-lightBlueColor text-skyColor md:ml-1 hover:bg-secondaryColor hover:text-primaryColor"
-          >
-            See All
-          </button>
-        </Link>
-      </div>
+      </section>
 
-      {/* blogs-section */}
-      <div className="mt-20 md:mt-28">
-        <div className="flex gap-3 mb-6 ml-5 md:ml-0">
-          <h2 className="text-2xl md:text-4xl">Latest Blogs</h2>
-          <div className="w-3/6 mb-3 border-b-2 border-secondaryColor hr-blog" />
+      {/* Blogs */}
+      <section className="mt-20 md:mt-28">
+        <SectionHeading
+          label="03 /"
+          title="Latest writing"
+          kicker="thoughts & notes"
+          href="/blog"
+          ctaText="See all"
+        />
+        <div className="mt-3 h-px bg-hairline" />
+        <div className="mt-8 flex flex-col gap-5">
+          {posts.length === 0 ? (
+            <div className="rounded-xl border border-border bg-surface p-6 text-subtle text-sm">
+              Unable to load posts due to a server issue. Please contact the
+              administrator for assistance.
+              {' '}
+              <a href="/contact" className="text-accent hover:underline">Send a message</a>
+              .
+            </div>
+          ) : (
+            posts.map((data) => <BlogCard key={data.id} data={data} />)
+          )}
         </div>
-        {posts.length === 0 ? (
-          <div className="ml-5 text-base md:ml-0 text-skyColor">
-            Unable to load posts due to a server issue.
-            Please contact the administrator for assistance.
-            <a href="/contact" className="text-secondaryColor"> Send Message </a>
-          </div>
-        )
-          : posts.map((data) => <BlogCard key={data.id} data={data} />)}
-        <Link to="/blog">
-          <button
-            type="button"
-            className="px-8 py-2 mt-10 ml-4 text-lg font-medium rounded bg-lightBlueColor text-skyColor md:ml-1 hover:bg-secondaryColor hover:text-primaryColor"
-          >
-            See All
-          </button>
-        </Link>
-      </div>
+      </section>
     </>
   );
 };
diff --git a/src/pages/Portfolio.js b/src/pages/Portfolio.js
index e341497..c612a60 100644
--- a/src/pages/Portfolio.js
+++ b/src/pages/Portfolio.js
@@ -5,22 +5,33 @@ import Project from '../components/Portfolio/Project';
 const Portfolio = () => {
   const projects = useSelector((state) => state.projectsReducer);
   useEffect(() => {
-    window.scrollTo({
-      top: 0,
-    });
+    window.scrollTo({ top: 0 });
   }, []);
+
   return (
-    <div className="mt-28 md:mt-40">
-      <div className="flex gap-3 mb-6 ml-3 md:ml-0">
-        <h2 className="text-2xl md:text-4xl">Portfolio</h2>
-        <div className="w-4/6 border-b-2 border-secondaryColor hr-portfolio" />
+    <section className="pt-12 md:pt-16">
+      <div className="flex items-center gap-3">
+        <span className="mono text-xs text-faint">/portfolio</span>
+        <h1 className="text-3xl md:text-4xl font-semibold tracking-tight">All work</h1>
+        <span className="mono text-xs text-faint hidden md:inline ml-auto">
+          {String(projects.length).padStart(2, '0')}
+          {' '}
+          projects
+        </span>
+      </div>
+      <div className="mt-3 h-px bg-hairline" />
+      <p className="mt-6 max-w-2xl text-base text-subtle leading-relaxed">
+        A selection of things I&apos;ve shipped — from full apps and dashboards
+        to focused experiments. Click any tile to see it live or peek at the
+        source.
+      </p>
+
+      <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+        {projects.map((data) => (
+          <Project key={data.id ?? data.index} data={data} />
+        ))}
       </div>
-      {
-      projects.map((data) => (
-        <Project key={data.id} data={data} />
-      ))
-    }
-    </div>
+    </section>
   );
 };
 
diff --git a/src/pages/Resume.js b/src/pages/Resume.js
index 48b2d9b..fe1fd18 100644
--- a/src/pages/Resume.js
+++ b/src/pages/Resume.js
@@ -1,16 +1,21 @@
+import { useEffect } from 'react';
 import ResumePDF from '../components/Resume/ResumePDF';
 
-const Resume = () => (
-  <div className="mt-32">
-    <div className="flex gap-3 ml-3 md:ml-0 mb-6">
-      <h2 className="text-2xl md:text-4xl">Resume</h2>
-      <div className="border-b-2 w-4/6 mb-3 border-secondaryColor hr-portfolio" />
-    </div>
+const Resume = () => {
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
+  }, []);
 
-    {/* resume-pdf-section */}
-    <ResumePDF />
-  </div>
-
-);
+  return (
+    <section className="pt-12 md:pt-16">
+      <div className="flex items-center gap-3">
+        <span className="mono text-xs text-faint">/resume</span>
+        <h1 className="text-3xl md:text-4xl font-semibold tracking-tight">Resume</h1>
+      </div>
+      <div className="mt-3 h-px bg-hairline" />
+      <ResumePDF />
+    </section>
+  );
+};
 
 export default Resume;
diff --git a/tailwind.config.js b/tailwind.config.js
index e1262ef..a7a96be 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,16 +1,66 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './src/**/*.{js,jsx,ts,tsx}',
-  ],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI', 'sans-serif'],
+        mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
+      },
+      letterSpacing: {
+        tightest: '-0.04em',
+      },
+      boxShadow: {
+        glow: '0 0 0 1px rgba(163, 230, 53, 0.4), 0 8px 40px -8px rgba(163, 230, 53, 0.25)',
+        card: '0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(0,0,0,0.6)',
+      },
+      keyframes: {
+        'fade-up': {
+          '0%': { opacity: '0', transform: 'translateY(8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'pulse-dot': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.35' },
+        },
+      },
+      animation: {
+        'fade-up': 'fade-up 0.6s ease-out both',
+        'pulse-dot': 'pulse-dot 2s ease-in-out infinite',
+      },
+    },
     colors: {
-      primaryColor: '#012a4a',
-      secondaryColor: '#06C1FF',
-      skyColor: '#addbea',
-      darkSkyColor: '#608297',
-      blueColor: '#013F70',
-      lightBlueColor: '#118AB2',
+      transparent: 'transparent',
+      current: 'currentColor',
+      white: '#ffffff',
+      black: '#000000',
+
+      // Modern minimal palette
+      bg: '#0a0a0b',
+      surface: '#111114',
+      elevated: '#16161a',
+      border: '#26262b',
+      hairline: '#1c1c20',
+      muted: '#1f1f24',
+
+      fg: '#fafafa',
+      subtle: '#a1a1aa',
+      faint: '#71717a',
+      mute: '#52525b',
+
+      accent: '#a3e635',
+      'accent-hover': '#bef264',
+      'accent-soft': 'rgba(163, 230, 53, 0.12)',
+      'accent-ring': 'rgba(163, 230, 53, 0.35)',
+
+      // Legacy aliases — remapped to modern values so any unmodified
+      // markup still renders coherently against the new palette.
+      primaryColor: '#0a0a0b',
+      secondaryColor: '#a3e635',
+      skyColor: '#fafafa',
+      darkSkyColor: '#a1a1aa',
+      blueColor: '#16161a',
+      lightBlueColor: '#1f1f24',
     },
   },
   plugins: [],