thecodechaser · thecodechaser · Aug 8, 2026 · Aug 8, 2026
diff --git a/src/App.css b/src/App.css
@@ -30,7 +30,6 @@
   width: 100%;
   height: 80vh;
   min-height: 600px;
-  border-radius: 12px;
   border: 1px solid #26262b;
   background: #111114;
 }
diff --git a/src/components/About/AboutMe.js b/src/components/About/AboutMe.js
@@ -82,7 +82,7 @@ const AboutMe = () => (
         whileInView={{ opacity: 1 }}
         viewport={{ once: true }}
         transition={{ duration: 0.6, delay: 0.1 }}
-        className="relative rounded-xl border border-border bg-surface overflow-hidden shadow-card"
+        className="relative 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" />
@@ -124,7 +124,7 @@ const AboutMe = () => (
         {stacks.map((stack) => (
           <div
             key={stack.name}
-            className="rounded-xl border border-border bg-surface p-5 hover:border-accent-ring transition-colors"
+            className="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>
@@ -136,7 +136,7 @@ const AboutMe = () => (
               {stack.values.map((value) => (
                 <span
                   key={value}
-                  className="mono text-xs px-2 py-1 rounded-md border border-hairline bg-elevated text-subtle"
+                  className="mono text-xs px-2 py-1 border border-hairline bg-elevated text-subtle"
                 >
                   {value}
                 </span>

diff --git a/src/components/About/Education.js b/src/components/About/Education.js
@@ -58,7 +58,7 @@ const EduItem = ({ item, isLast }) => (
       <img src={item.logo} alt={`${item.school} logo`} className="w-full h-full object-contain p-1" />
     </span>
 
-    <div className="rounded-xl border border-border bg-surface p-5 hover:border-accent-ring transition-colors">
+    <div className="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}

diff --git a/src/components/About/Experience.js b/src/components/About/Experience.js
@@ -89,7 +89,7 @@ const RoleItem = ({ role, isLast }) => (
       <img src={role.logo} alt={`${role.company} logo`} className="w-full h-full object-cover" />
     </span>
 
-    <div className="rounded-xl border border-border bg-surface p-5 hover:border-accent-ring transition-colors">
+    <div className="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">

diff --git a/src/components/Blogs/BlogCard.js b/src/components/Blogs/BlogCard.js
@@ -14,7 +14,7 @@ const BlogCard = ({ data }) => {
       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"
+      className="group border border-border bg-surface overflow-hidden hover:border-accent-ring transition-colors shadow-card"
     >
       <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">

diff --git a/src/components/Contact/ContactForm.js b/src/components/Contact/ContactForm.js
@@ -38,7 +38,7 @@ const ContactForm = () => {
     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';
+  const inputCls = 'w-full px-4 py-3 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 (
     <section className="pt-12 md:pt-16">
@@ -75,7 +75,7 @@ const ContactForm = () => {
           </div>
         </div>
 
-        <div className="rounded-xl border border-border bg-surface p-6 md:p-8">
+        <div className="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>
@@ -137,7 +137,7 @@ const ContactForm = () => {
               <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"
+                className="inline-flex items-center gap-2 h-11 px-5 bg-accent text-bg text-sm font-semibold hover:bg-accent-hover transition-colors"
               >
                 Send message
                 <ArrowRightIcon className="h-4 w-4" />

diff --git a/src/components/Contact/ContactInfo.js b/src/components/Contact/ContactInfo.js
@@ -43,14 +43,14 @@ const ContactInfo = () => (
         </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"
+          className="mt-6 inline-flex items-center gap-2 h-11 px-5 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="rounded-xl border border-border bg-surface p-6">
+      <div className="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) => (
@@ -66,7 +66,7 @@ const ContactInfo = () => (
         </ul>
       </div>
 
-      <div className="rounded-xl border border-border bg-surface p-6">
+      <div className="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) => (
@@ -77,7 +77,7 @@ const ContactInfo = () => (
                 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"
+                className="flex flex-col items-center justify-center gap-1 py-3 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>

diff --git a/src/components/Contact/SucessNotice.js b/src/components/Contact/SucessNotice.js
@@ -9,8 +9,8 @@ const SuccessNotice = () => (
     transition={{ duration: 0.5 }}
     className="min-h-[60vh] flex items-center justify-center pt-16 pb-24"
   >
-    <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">
+    <div className="max-w-md w-full border border-border bg-surface p-8 text-center shadow-card">
+      <span className="inline-flex items-center justify-center w-12 h-12 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">
@@ -21,7 +21,7 @@ const SuccessNotice = () => (
       </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"
+        className="mt-8 inline-flex items-center gap-2 h-11 px-5 bg-accent text-bg text-sm font-semibold hover:bg-accent-hover transition-colors"
       >
         Back home
         <ArrowRightIcon className="h-4 w-4" />

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -7,7 +7,7 @@ const goToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
 const Footer = () => (
   <>
     <ContactInfo />
-    <footer className="container-page mt-24 mb-10">
+    <footer className="container-page mt-24 pb-4 overflow-hidden">
       <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">
           ©
@@ -30,12 +30,38 @@ const Footer = () => (
             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"
+            className="inline-flex items-center justify-center w-10 h-10 border border-border text-subtle hover:text-fg hover:border-accent-ring transition-colors"
           >
             <ArrowUpIcon className="h-4 w-4" />
           </button>
         </div>
       </div>
+
+      {/* oversized wordmark — sized by viewBox so it always spans the
+          container exactly, whatever the viewport */}
+      <div className="mt-12 md:mt-16 select-none pointer-events-none" aria-hidden>
+        <svg viewBox="0 0 1000 122" className="w-full h-auto block" focusable="false">
+          <defs>
+            <linearGradient id="wordmark-fade" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#fafafa" stopOpacity="0.15" />
+              <stop offset="60%" stopColor="#fafafa" stopOpacity="0.07" />
+              <stop offset="100%" stopColor="#fafafa" stopOpacity="0.015" />
+            </linearGradient>
+          </defs>
+          <text
+            x="0"
+            y="116"
+            textLength="1000"
+            lengthAdjust="spacing"
+            fill="url(#wordmark-fade)"
+            fontFamily="Inter, ui-sans-serif, system-ui, sans-serif"
+            fontWeight="600"
+            fontSize="152"
+          >
+            thecodechaser
+          </text>
+        </svg>
+      </div>
     </footer>
   </>
 );

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -35,7 +35,7 @@ const Header = () => {
       <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"
+            className="inline-flex items-center justify-center w-8 h-8 border border-border bg-elevated text-accent font-mono text-sm group-hover:border-accent-ring transition-colors"
             aria-hidden
           >
             ~/
@@ -54,7 +54,7 @@ const Header = () => {
               <Link
                 key={item.name}
                 to={item.path}
-                className={`px-3 py-1.5 rounded-md text-sm transition-colors ${
+                className={`px-3 py-1.5 text-sm transition-colors ${
                   active
                     ? 'text-fg bg-muted'
                     : 'text-subtle hover:text-fg hover:bg-muted/60'
@@ -69,7 +69,7 @@ const Header = () => {
         <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"
+            className="inline-flex items-center gap-2 h-9 px-4 bg-accent text-bg text-sm font-medium hover:bg-accent-hover transition-colors"
           >
             Resume
             <span aria-hidden>→</span>
@@ -79,7 +79,7 @@ const Header = () => {
         <button
           type="button"
           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"
+          className="md:hidden inline-flex items-center justify-center w-10 h-10 border border-border text-fg hover:border-accent-ring transition-colors"
           aria-label={open ? 'Close menu' : 'Open menu'}
         >
           {open ? <XIcon className="h-5 w-5" /> : <MenuIcon className="h-5 w-5" />}
@@ -99,7 +99,7 @@ const Header = () => {
               <Link
                 key={item.name}
                 to={item.path}
-                className={`px-3 py-2.5 rounded-md text-base transition-colors ${
+                className={`px-3 py-2.5 text-base transition-colors ${
                   active ? 'text-fg bg-muted' : 'text-subtle hover:text-fg hover:bg-muted/60'
                 }`}
               >
@@ -109,7 +109,7 @@ const Header = () => {
           })}
           <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"
+            className="mt-2 inline-flex items-center justify-center gap-2 h-10 bg-accent text-bg text-sm font-medium hover:bg-accent-hover"
           >
             Resume
             <span aria-hidden>→</span>

diff --git a/src/components/Home/HeroSection.js b/src/components/Home/HeroSection.js
@@ -2,7 +2,6 @@ import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { ArrowRightIcon } from '@heroicons/react/solid';
 import profilePicture from '../../assets/images/profilePicture2.jpg';
-import ParticleField from '../common/ParticleField';
 import OrbitRings from './OrbitRings';
 
 const traits = [
@@ -17,15 +16,6 @@ const HeroSection = () => (
   <section className="relative isolate pt-16 md:pt-24 pb-12 md:pb-20">
     <div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none" aria-hidden>
       <div className="absolute inset-0 bg-grid" />
-      <ParticleField
-        className="absolute inset-0 w-full h-full opacity-60 mask-hero"
-        density={0.00012}
-        maxNodes={72}
-        linkDistance={165}
-        speed={0.1}
-        accentEvery={7}
-        interactive={false}
-      />
     </div>
 
     <div className="grid md:grid-cols-[1.25fr_1fr] xl:grid-cols-[1.15fr_1fr] gap-12 md:gap-16 xl:gap-20 items-center">
@@ -34,7 +24,7 @@ const HeroSection = () => (
         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">
+        <div className="inline-flex items-center gap-2 px-3 py-1 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" />
@@ -75,14 +65,14 @@ const HeroSection = () => (
         <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"
+            className="inline-flex items-center gap-2 h-11 px-5 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"
+            className="inline-flex items-center gap-2 h-11 px-5 border border-border text-fg text-sm font-medium hover:border-accent-ring hover:text-accent transition-colors"
           >
             View work
           </Link>
@@ -92,7 +82,7 @@ const HeroSection = () => (
           {traits.map((t) => (
             <span
               key={t}
-              className="mono text-xs text-subtle px-2.5 py-1 rounded-md border border-hairline bg-surface"
+              className="mono text-xs text-subtle px-2.5 py-1 border border-hairline bg-surface"
             >
               {t}
             </span>
@@ -120,7 +110,7 @@ const HeroSection = () => (
             />
           </div>
           <div
-            className="absolute bottom-[7%] right-[1%] mono text-[11px] uppercase tracking-widest text-faint px-2.5 py-1 rounded-md border border-border bg-surface"
+            className="absolute bottom-[7%] right-[1%] mono text-[11px] uppercase tracking-widest text-faint px-2.5 py-1 border border-border bg-surface"
             aria-hidden
           >
             @thecodechaser

diff --git a/src/components/OnlineCourseWaitlist/CourseDetails.js b/src/components/OnlineCourseWaitlist/CourseDetails.js
@@ -179,7 +179,7 @@ const CourseDetails = () => (
       <Link to="/signup-waitlist">
         <button
           type="button"
-          className="border-2 border-secondaryColor mt-2 ml-4 md:ml-0 rounded px-6 py-3
+          className="border-2 border-secondaryColor mt-2 ml-4 md:ml-0 px-6 py-3
       text-lg text-secondaryColor hover:text-skyColor hover:border-skyColor"
         >
           Sign Up

diff --git a/src/components/OnlineCourseWaitlist/SignUpForm.js b/src/components/OnlineCourseWaitlist/SignUpForm.js
@@ -57,7 +57,7 @@ const SignUpForm = () => {
       transition={{ duration: 1 }}
       className="flex flex-col mt-10 items-center md:mr-52"
     >
-      <h3 className="text-lg font-bold text-skyColor  mb-4">Sign Up now and secure your place today!</h3>
+      <h3 className="text-lg font-bold text-skyColor mb-4">Sign Up now and secure your place today!</h3>
       <div className="flex flex-col gap-4">
         <input
           type="text"
@@ -67,7 +67,7 @@ const SignUpForm = () => {
           onChange={(e) => setName(e.target.value)}
           maxLength="30"
           placeholder="Name *"
-          className="w-72 md:w-80 p-2 rounded text-primaryColor
+          className="w-72 md:w-80 p-2 text-primaryColor
       focus:border-2 focus:border-secondaryColor focus:outline-none"
         />
         <input
@@ -77,7 +77,7 @@ const SignUpForm = () => {
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           placeholder="Email *"
-          className="w-72 md:w-80 p-2 rounded text-primaryColor
+          className="w-72 md:w-80 p-2 text-primaryColor
         focus:border-2 focus:border-secondaryColor focus:outline-none"
         />
         <input
@@ -87,7 +87,7 @@ const SignUpForm = () => {
           value={mobile}
           onChange={(e) => setMobile(e.target.value)}
           placeholder="Mobile *"
-          className="w-72 md:w-80 p-2 rounded text-primaryColor
+          className="w-72 md:w-80 p-2 text-primaryColor
         focus:border-2 focus:border-secondaryColor focus:outline-none"
         />
         <textarea
@@ -98,7 +98,7 @@ const SignUpForm = () => {
           onChange={(e) => setMessage(e.target.value)}
           maxLength="500"
           placeholder="Have any thoughts ? you can share here!"
-          className="w-72 md:w-80 p-2 rounded text-primaryColor
+          className="w-72 md:w-80 p-2 text-primaryColor
           focus:border-2 focus:border-secondaryColor focus:outline-none"
         />
         {
@@ -116,7 +116,7 @@ const SignUpForm = () => {
           <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>
+        <button onClick={submission} type="button" className="bg-lightBlueColor ml-24 mt-6 w-28 px-4 py-2 text-base text-skyColor font-medium">Submit</button>
       </div>
     </motion.div>
   );

diff --git a/src/components/OnlineCourseWaitlist/SignUpSucessNotice.js b/src/components/OnlineCourseWaitlist/SignUpSucessNotice.js
@@ -18,7 +18,7 @@ const SignUpSucessNotice = () => (
     <Link to="/">
       <button
         type="button"
-        className="bg-lightBlueColor mt-10 rounded px-6 py-2 w-50
+        className="bg-lightBlueColor mt-10 px-6 py-2 w-50
       text-lg text-skyColor font-medium"
       >
         Go Home