✨ Refactor styles and animations across components for improved consistency and performance

Author: AR10Dev

src/components/Contact.astro

@@ -39,7 +39,7 @@ const { homepage } = Astro.props as Props;
         <a
           href={homepage.bookingUrl}
           data-track="cta_booking_link"
-          class="inline-block rounded-lg bg-[var(--accent-strong)] px-6 py-3 font-semibold text-[var(--accent-contrast)] transition-all hover:opacity-90"
+          class="inline-block rounded-lg bg-[var(--accent-strong)] px-6 py-3 font-semibold text-[var(--accent-contrast)] hover:opacity-90"
         >
           Book a Strategy Call
         </a>
@@ -50,14 +50,14 @@ const { homepage } = Astro.props as Props;
       <a
         href={`mailto:${homepage.contactEmail}`}
         data-track="cta_contact_email"
-        class="rounded-lg border border-[var(--border-strong)] bg-[color-mix(in_srgb,var(--surface-panel)_80%,transparent)] px-6 py-3 font-semibold text-[var(--text-strong)] shadow-[0_8px_18px_rgba(0,0,0,0.16)] backdrop-blur-sm transition-all"
+        class="rounded-lg border border-[var(--border-strong)] bg-[color-mix(in_srgb,var(--surface-panel)_80%,transparent)] px-6 py-3 font-semibold text-[var(--text-strong)] shadow-[0_8px_18px_rgba(0,0,0,0.16)] backdrop-blur-sm"
       >
         Email: {homepage.contactEmail}
       </a>
       <a
         href={homepage.githubUrl}
         data-track="open_github_profile"
-        class="rounded-lg border border-[var(--border-strong)] bg-[color-mix(in_srgb,var(--surface-panel)_88%,transparent)] px-6 py-3 font-semibold text-[var(--text-strong)] shadow-[0_8px_18px_rgba(0,0,0,0.16)] backdrop-blur-sm transition-all"
+        class="rounded-lg border border-[var(--border-strong)] bg-[color-mix(in_srgb,var(--surface-panel)_88%,transparent)] px-6 py-3 font-semibold text-[var(--text-strong)] shadow-[0_8px_18px_rgba(0,0,0,0.16)] backdrop-blur-sm"
       >
         GitHub
       </a>

src/components/Footer.astro

@@ -24,7 +24,7 @@ const socialLinks = [
     <SocialLinks links={socialLinks} variant="text" className="justify-center" />
     <p class="text-sm">
       Made by <a
-        class="font-bold text-[var(--accent-strong)] transition-colors duration-200 hover:underline"
+        class="font-bold text-[var(--accent-strong)] hover:underline"
         href="https://github.com/AR10Dev"
         rel="me"
         >Avaab Razzaq (AR10Dev)

src/components/Portfolio.astro

@@ -14,7 +14,7 @@ const sorted = [...items].sort((a, b) => a.data.order - b.data.order);
     <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
       {
         sorted.map((item) => (
-          <article class="rounded-lg border border-[var(--border-strong)] bg-[color-mix(in_srgb,var(--surface-panel)_80%,transparent)] p-4 shadow-[0_12px_30px_rgba(0,0,0,0.22)] backdrop-blur-sm transition-shadow hover:shadow-[0_14px_36px_rgba(0,0,0,0.28)]">
+          <article class="rounded-lg border border-[var(--border-strong)] bg-[color-mix(in_srgb,var(--surface-panel)_80%,transparent)] p-4 shadow-[0_12px_30px_rgba(0,0,0,0.22)] backdrop-blur-sm hover:shadow-[0_14px_36px_rgba(0,0,0,0.28)]">
             <div class="mb-3 flex justify-between items-start">
               <div>
                 <p class="text-xs font-semibold text-[var(--accent-strong)]">{item.data.category}</p>
@@ -49,7 +49,7 @@ const sorted = [...items].sort((a, b) => a.data.order - b.data.order);
 
             <a
               href={item.data.proofUrl}
-              class="inline-block border-b border-[var(--accent-strong)] pb-0.5 text-xs font-semibold text-[var(--accent-strong)] transition-colors"
+              class="inline-block border-b border-[var(--accent-strong)] pb-0.5 text-xs font-semibold text-[var(--accent-strong)]"
             >
               {item.data.proofLabel} →
             </a>

src/components/solid/Navbar.tsx

@@ -183,12 +183,12 @@ const Navbar: Component<NavbarProps> = (props) => {
   });
 
   const baseClass =
-    "inline-flex items-center justify-center rounded-[0.65rem] border border-transparent px-[0.7rem] py-[0.42rem] text-[0.73rem] tracking-[0.06em] text-[var(--text-muted)] transition-[color,border-color,background] duration-200 hover:border-[var(--border-strong)] hover:bg-[color-mix(in_srgb,var(--surface-panel)_76%,transparent)] hover:text-[var(--text-strong)]";
+    "inline-flex items-center justify-center rounded-[0.65rem] border border-transparent px-[0.7rem] py-[0.42rem] text-[0.73rem] tracking-[0.06em] text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:bg-[color-mix(in_srgb,var(--surface-panel)_76%,transparent)] hover:text-[var(--text-strong)]";
   const activeClass =
     "text-[var(--accent-contrast)] border-[color-mix(in_srgb,var(--accent-strong)_70%,var(--border-strong))] bg-[color-mix(in_srgb,var(--accent-strong)_86%,#10243d)] shadow-[0_0_0_1px_color-mix(in_srgb,var(--accent-strong)_55%,transparent)]";
 
   return (
-    <ul class="ml-auto flex h-full items-center justify-end gap-1 rounded-xl border border-[var(--border-strong)] bg-[color-mix(in_srgb,var(--surface-panel)_84%,transparent)] px-1 py-1 font-bold uppercase shadow-[0_10px_24px_rgba(15,23,42,0.08)] transition-colors duration-300">
+    <ul class="ml-auto flex h-full items-center justify-end gap-1 rounded-xl border border-[var(--border-strong)] bg-[color-mix(in_srgb,var(--surface-panel)_84%,transparent)] px-1 py-1 font-bold uppercase shadow-[0_10px_24px_rgba(15,23,42,0.08)]">
       <For each={props.links}>
         {(link) => (
           <li>

src/layouts/Layout.astro

@@ -78,7 +78,7 @@ const {
     </script>
 
   </head>
-  <body class="bg-transparent text-[var(--text-strong)] transition-colors duration-200">
+  <body class="bg-transparent text-[var(--text-strong)]">
     <div aria-hidden="true" class="site-bg"></div>
     <a href="#main-content" class={SKIP_LINK_CLASSES}>
       Skip to main content

src/lib/observe.ts

@@ -1,32 +1,44 @@
 /**
- * Sets up intersection observer for reveal animations.
+ * Sets up intersection observer for reveal - animations removed.
  * Elements with [data-reveal] attribute will have 'is-visible' class added when they come into view.
+ * Elements with [data-reveal-list] will trigger class additions on their children.
  */
 export const setupRevealObserver = (): (() => void) => {
   const revealNodes = document.querySelectorAll<HTMLElement>("[data-reveal]");
+  const revealListNodes = document.querySelectorAll<HTMLElement>("[data-reveal-list]");
   const revealRoot = document.querySelector<HTMLElement>("#main-content");
 
-  if (revealNodes.length === 0) {
+  if (revealNodes.length === 0 && revealListNodes.length === 0) {
     return () => {};
   }
 
+  const observerOptions = {
+    root: revealRoot,
+    rootMargin: "-8% 0px -8% 0px",
+    threshold: 0.15,
+  };
+
   const revealObserver = new IntersectionObserver(
     (entries) => {
       entries.forEach((entry) => {
         entry.target.classList.toggle("is-visible", entry.isIntersecting);
+        
+        if (entry.isIntersecting && entry.target.getAttribute("data-reveal-list")) {
+          entry.target.classList.add("is-visible");
+        }
       });
     },
-    {
-      root: revealRoot,
-      rootMargin: "-8% 0px -8% 0px",
-      threshold: 0.22,
-    },
+    observerOptions,
   );
 
   revealNodes.forEach((node) => {
     revealObserver.observe(node);
   });
 
+  revealListNodes.forEach((node) => {
+    revealObserver.observe(node);
+  });
+
   return () => revealObserver.disconnect();
 };
 

src/scripts/homepage.ts

@@ -46,6 +46,7 @@ if (typeof window !== "undefined" && typeof document !== "undefined") {
 
   if (mainContent && slides.length > 0) {
     let isSlideAnimating = false;
+    let currentSlideIndex = 0;
 
     const findNearestSlideIndex = (): number => {
       const center = mainContent.scrollTop + mainContent.clientHeight / 2;
@@ -80,6 +81,8 @@ if (typeof window !== "undefined" && typeof document !== "undefined") {
       }
 
       isSlideAnimating = true;
+      currentSlideIndex = clampedIndex;
+      
       targetSlide.scrollIntoView({ behavior: "smooth", block: "start" });
 
       window.setTimeout(() => {

src/styles/global.css

@@ -60,19 +60,19 @@
 * {
   scrollbar-width: auto;
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
 
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
+*::-webkit-scrollbar {
+  width: 8px;
+}
 
-  &::-webkit-scrollbar-track {
-    background: var(--scrollbar-track);
-  }
+*::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
 
-  &::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-    border-radius: 4px;
-  }
+*::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 4px;
 }
 
 /* Base styles */
@@ -82,10 +82,10 @@ html {
   width: 100%;
   min-height: 100%;
   scroll-behavior: smooth;
+}
 
-  &.scroll-smooth {
-    scroll-behavior: smooth;
-  }
+html.scroll-smooth {
+  scroll-behavior: smooth;
 }
 
 body {
@@ -115,13 +115,28 @@ button:focus-visible {
     var(--bg-canvas);
   background-attachment: fixed;
   color: var(--text-strong);
-  transition: color 0.25s ease;
+}
+
+.site-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background:
+    radial-gradient(circle at 12% 15%, var(--bg-mesh-a), transparent 40%),
+    radial-gradient(circle at 86% 28%, var(--bg-mesh-b), transparent 42%),
+    var(--bg-canvas);
+  background-attachment: fixed;
+  pointer-events: none;
 }
 
 #main-content {
   height: 100vh;
   overflow-y: auto;
   scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
 }
 
 .slide-section {
@@ -130,10 +145,10 @@ button:focus-visible {
   scroll-snap-stop: always;
   display: flex;
   align-items: center;
+}
 
-  > * {
-    width: 100%;
-  }
+.slide-section > * {
+  width: 100%;
 }
 
 .home-slide {
@@ -158,6 +173,11 @@ button:focus-visible {
   padding-bottom: clamp(3rem, 7vh, 5.5rem);
 }
 
+.section-size-blog {
+  padding-top: clamp(4.2rem, 7.5vh, 6rem);
+  padding-bottom: clamp(3rem, 7vh, 5.2rem);
+}
+
 /* Typography animation */
 .typing-live {
   display: none;
@@ -171,30 +191,57 @@ button:focus-visible {
   display: none;
 }
 
-/* Reveal animations */
-[data-reveal] {
-  opacity: 0;
-  transform: translateY(18px);
-  transition:
-    opacity 0.35s ease,
-    transform 0.35s ease;
-
-  &.is-visible {
-    opacity: 1;
-    transform: translateY(0);
+/* Animation keyframes */
+@keyframes blink {
+  to {
+    visibility: hidden;
   }
 }
 
+/* Reveal animations removed */
+[data-reveal] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+[data-reveal].is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Staggered reveal animations removed */
+[data-reveal-list] > * {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+[data-reveal-list].is-visible > * {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Section entrance animations removed */
+
 .cursor {
   animation: blink 1.1s steps(2, start) infinite;
 }
 
-@keyframes blink {
-  to {
-    visibility: hidden;
-  }
+/* Button transitions and animations */
+button {
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
+}
+
+button:active {
+  transform: scale(0.95);
 }
 
+/* Enhance scroll snap with smooth behavior */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Smooth color and theme transitions removed */
+
 /* Responsive design */
 @media (max-width: 768px) {
   .slide-section {
@@ -208,26 +255,14 @@ button:focus-visible {
   }
 
   .section-size-home,
-  .section-size-work {
+  .section-size-work,
+  .section-size-blog {
     padding-top: 6.2rem;
     padding-bottom: 2.5rem;
   }
 }
 
-/* Accessibility: Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-
-  html,
-  html *,
-  html *::before,
-  html *::after {
-    animation: none;
-    transition: none;
-  }
-}
+/* Accessibility: Animations removed globally */
 
 *::-webkit-scrollbar-track {
   background: var(--scrollbar-track);