Feat/liquidglass optimization for iOS

app/globals.css

@@ -41,7 +41,13 @@ body {
 
 @layer components {
   .glass-card {
-    @apply bg-zinc-100/80 dark:bg-zinc-900/40 backdrop-blur-2xl backdrop-saturate-150 border border-zinc-200 dark:border-white/10 rounded-2xl shadow-lg shadow-black/8 dark:shadow-black/25 ring-1 ring-inset ring-zinc-100 dark:ring-white/5;
+    @apply bg-zinc-100/95 dark:bg-zinc-900/85 border border-zinc-200 dark:border-white/10 rounded-2xl shadow-lg shadow-black/8 dark:shadow-black/25 ring-1 ring-inset ring-zinc-100 dark:ring-white/5;
+  }
+
+  @media (min-width: 768px) {
+    .glass-card {
+      @apply bg-zinc-100/80 dark:bg-zinc-900/40 backdrop-blur-2xl backdrop-saturate-150;
+    }
   }
 
   .no-scrollbar {
@@ -53,6 +59,58 @@ body {
   }
 }
 
+/* Scroll-triggered reveal */
+@keyframes revealFadeUp {
+  from { opacity: 0; transform: translateY(30px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.reveal-hidden { opacity: 0; transform: translateY(30px); }
+.reveal-visible { animation: revealFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
+
+/* Skill chip reveal */
+@keyframes skillFadeIn {
+  from { opacity: 0; transform: scale(0.8); }
+  to   { opacity: 1; transform: scale(1); }
+}
+.skill-hidden { opacity: 0; transform: scale(0.8); }
+.skill-visible { animation: skillFadeIn 0.3s ease both; }
+
+/* Stat item reveal */
+@keyframes statFadeUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.stat-hidden { opacity: 0; transform: translateY(10px); }
+.stat-visible { animation: statFadeUp 0.4s ease both; }
+
+/* Hero image float */
+@keyframes heroFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+.hero-float {
+  animation: heroFloat 4s ease-in-out infinite;
+}
+
+/* Skills marquee */
+@keyframes marqueeScroll {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+.marquee-track {
+  animation: marqueeScroll 30s linear infinite;
+}
+
+/* Scroll-driven progress bar (Safari 18 / iOS 18+) */
+@keyframes growX {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+.scroll-progress {
+  animation: growX linear both;
+  animation-timeline: scroll(root);
+}
+
 @keyframes shine {
   100% {
     transform: translateX(200%);
@@ -107,7 +165,15 @@ body {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .fluid-shape {
+  .fluid-shape,
+  .hero-float,
+  .marquee-track {
     animation: none;
   }
+}
+
+@media (hover: none) {
+  .fluid-shape {
+    display: none;
+  }
 }

components/sections/about.tsx

@@ -40,7 +40,7 @@ export async function AboutSection() {
             </div>
 
             {/* Background glow */}
-            <div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-[#7c3aed] opacity-5 blur-[120px] rounded-full pointer-events-none" />
+            <div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-[#7c3aed] opacity-5 blur-[120px] rounded-full pointer-events-none hidden md:block" />
         </section>
     )
 }

components/sections/contact.tsx

@@ -14,7 +14,7 @@ export async function ContactSection() {
                 <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 justify-items-center">
                     {/* Location */}
                     <div className="flex flex-col items-center gap-3 text-center">
-                        <div className="p-4 rounded-full bg-zinc-100/80 dark:bg-zinc-900/50 backdrop-blur-md backdrop-saturate-150 border border-zinc-200 dark:border-white/10 ring-1 ring-inset ring-zinc-100 dark:ring-white/5 text-accent">
+                        <div className="p-4 rounded-full bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 ring-1 ring-inset ring-zinc-100 dark:ring-white/5 text-accent">
                             <MapPin className="w-6 h-6" />
                         </div>
                         <div>
@@ -25,23 +25,23 @@ export async function ContactSection() {
 
                     {/* Email */}
                     <a href={`mailto:${contact.email}`} className="group flex flex-col items-center gap-3 text-center">
-                        <div className="p-4 rounded-full bg-zinc-100/80 dark:bg-zinc-900/50 backdrop-blur-md backdrop-saturate-150 border border-zinc-200 dark:border-white/10 ring-1 ring-inset ring-zinc-100 dark:ring-white/5 text-accent group-hover:border-accent/50 group-hover:bg-accent/10 transition-all duration-300">
+                        <div className="p-4 rounded-full bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 ring-1 ring-inset ring-zinc-100 dark:ring-white/5 text-accent group-hover:border-accent/50 group-hover:bg-accent/10 transition-all duration-300">
                             <Mail className="w-6 h-6" />
                         </div>
                         <span className="text-zinc-700 dark:text-gray-300 group-hover:text-zinc-900 dark:group-hover:text-white transition-colors text-sm">{contact.email}</span>
                     </a>
 
                     {/* LinkedIn */}
                     <a href={contact.linkedinUrl} target="_blank" rel="noopener noreferrer" className="group flex flex-col items-center gap-3 text-center">
-                        <div className="p-4 rounded-full bg-zinc-100/80 dark:bg-zinc-900/50 backdrop-blur-md backdrop-saturate-150 border border-zinc-200 dark:border-white/10 ring-1 ring-inset ring-zinc-100 dark:ring-white/5 text-accent group-hover:border-accent/50 group-hover:bg-accent/10 transition-all duration-300">
+                        <div className="p-4 rounded-full bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 ring-1 ring-inset ring-zinc-100 dark:ring-white/5 text-accent group-hover:border-accent/50 group-hover:bg-accent/10 transition-all duration-300">
                             <LinkedinIcon className="w-6 h-6" />
                         </div>
                         <span className="text-zinc-700 dark:text-gray-300 group-hover:text-zinc-900 dark:group-hover:text-white transition-colors">LinkedIn</span>
                     </a>
 
                     {/* GitHub */}
                     <a href={contact.githubUrl} target="_blank" rel="noopener noreferrer" className="group flex flex-col items-center gap-3 text-center">
-                        <div className="p-4 rounded-full bg-zinc-100/80 dark:bg-zinc-900/50 backdrop-blur-md backdrop-saturate-150 border border-zinc-200 dark:border-white/10 ring-1 ring-inset ring-zinc-100 dark:ring-white/5 text-accent group-hover:border-accent/50 group-hover:bg-accent/10 transition-all duration-300">
+                        <div className="p-4 rounded-full bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 ring-1 ring-inset ring-zinc-100 dark:ring-white/5 text-accent group-hover:border-accent/50 group-hover:bg-accent/10 transition-all duration-300">
                             <GithubIcon className="w-6 h-6" />
                         </div>
                         <span className="text-zinc-700 dark:text-gray-300 group-hover:text-zinc-900 dark:group-hover:text-white transition-colors">GitHub</span>

components/ui/animated-marquee.tsx

@@ -1,29 +1,18 @@
 "use client"
 
-import { motion } from "framer-motion"
-
 interface AnimatedMarqueeProps {
   items: string[]
 }
 
 export function AnimatedMarquee({ items }: AnimatedMarqueeProps) {
-  // Duplicate items to ensure smooth infinite loop
   const marqueeItems = [...items, ...items, ...items, ...items]
 
   return (
-    <div 
+    <div
         className="w-full overflow-hidden flex items-center py-4"
         style={{ WebkitMaskImage: "linear-gradient(to right, transparent, black 10%, black 90%, transparent)", maskImage: "linear-gradient(to right, transparent, black 10%, black 90%, transparent)" }}
     >
-      <motion.div
-        className="flex gap-12 whitespace-nowrap min-w-max"
-        animate={{ x: ["0%", "-50%"] }}
-        transition={{
-          repeat: Infinity,
-          ease: "linear",
-          duration: 30,
-        }}
-      >
+      <div className="flex gap-12 whitespace-nowrap min-w-max marquee-track">
         {marqueeItems.map((item, i) => (
           <div
             key={i}
@@ -32,7 +21,7 @@ export function AnimatedMarquee({ items }: AnimatedMarqueeProps) {
             {item}
           </div>
         ))}
-      </motion.div>
+      </div>
     </div>
   )
 }

components/ui/animated-skills.tsx

@@ -1,39 +1,45 @@
 "use client"
-import { motion } from "framer-motion"
 
-const container = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.05
-    }
-  }
-}
-
-const item = {
-  hidden: { opacity: 0, scale: 0.8 },
-  visible: { opacity: 1, scale: 1 }
-}
+import { useRef, useEffect, useState } from "react"
 
 export function AnimatedSkills({ skills }: { skills: string[] }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => { setMounted(true) }, [])
+
+  useEffect(() => {
+    if (!mounted || !ref.current) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          ref.current!.querySelectorAll("[data-skill]").forEach((el, i) => {
+            ;(el as HTMLElement).style.animationDelay = `${i * 0.05}s`
+            el.classList.remove("skill-hidden")
+            el.classList.add("skill-visible")
+          })
+          observer.disconnect()
+        }
+      },
+      { rootMargin: "-50px" }
+    )
+
+    observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [mounted])
+
   return (
-    <motion.div 
-        className="flex flex-wrap gap-3"
-        variants={container}
-        initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true, margin: "-50px" }}
-    >
+    <div ref={ref} className="flex flex-wrap gap-3">
       {skills.map((skill) => (
-        <motion.span
-            key={skill}
-            variants={item}
-            className="px-4 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-900/50 text-zinc-700 dark:text-gray-300 text-sm font-medium border border-zinc-200 dark:border-zinc-800/50"
+        <span
+          key={skill}
+          data-skill
+          className={`px-4 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-900/50 text-zinc-700 dark:text-gray-300 text-sm font-medium border border-zinc-200 dark:border-zinc-800/50 ${mounted ? "skill-hidden" : ""}`}
         >
-            {skill}
-        </motion.span>
+          {skill}
+        </span>
       ))}
-    </motion.div>
+    </div>
   )
 }

components/ui/animated-stats.tsx

@@ -1,37 +1,47 @@
 "use client"
-import { motion } from "framer-motion"
+
+import { useRef, useEffect, useState } from "react"
 import { AboutStatViewModel } from "@/src/interface-adapters/presenters/about-presenter"
 
-const container = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.1
-    }
-  }
-}
+export function AnimatedStats({ stats }: { stats: AboutStatViewModel[] }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [mounted, setMounted] = useState(false)
 
-const item = {
-  hidden: { opacity: 0, y: 10 },
-  visible: { opacity: 1, y: 0 }
-}
+  useEffect(() => { setMounted(true) }, [])
+
+  useEffect(() => {
+    if (!mounted || !ref.current) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          ref.current!.querySelectorAll("[data-stat]").forEach((el, i) => {
+            ;(el as HTMLElement).style.animationDelay = `${i * 0.1}s`
+            el.classList.remove("stat-hidden")
+            el.classList.add("stat-visible")
+          })
+          observer.disconnect()
+        }
+      },
+      { rootMargin: "-50px" }
+    )
+
+    observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [mounted])
 
-export function AnimatedStats({ stats }: { stats: AboutStatViewModel[] }) {
   return (
-    <motion.div 
-        className="rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6 flex flex-col gap-5 glass-card"
-        variants={container}
-        initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true, margin: "-50px" }}
-    >
+    <div ref={ref} className="rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6 flex flex-col gap-5 glass-card">
       {stats.map((stat) => (
-        <motion.div key={stat.label} variants={item} className="flex flex-col gap-1">
-            <span className="text-xs font-medium text-zinc-400 dark:text-gray-500 uppercase tracking-wider">{stat.label}</span>
-            <span className="text-lg font-bold text-foreground dark:text-white">{stat.value}</span>
-        </motion.div>
+        <div
+          key={stat.label}
+          data-stat
+          className={`flex flex-col gap-1 ${mounted ? "stat-hidden" : ""}`}
+        >
+          <span className="text-xs font-medium text-zinc-400 dark:text-gray-500 uppercase tracking-wider">{stat.label}</span>
+          <span className="text-lg font-bold text-foreground dark:text-white">{stat.value}</span>
+        </div>
       ))}
-    </motion.div>
+    </div>
   )
 }

components/ui/back-to-top.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { useEffect, useState, startTransition } from "react"
-import { motion, AnimatePresence } from "framer-motion"
 import { ArrowUp } from "lucide-react"
 
 export function BackToTop() {
@@ -14,20 +13,13 @@ export function BackToTop() {
     }, [])
 
     return (
-        <AnimatePresence>
-            {visible && (
-                <motion.button
-                    initial={{ opacity: 0, y: 16 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: 16 }}
-                    transition={{ duration: 0.2 }}
-                    onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-                    className="fixed bottom-8 right-8 z-50 p-3 rounded-full glass-card text-zinc-500 dark:text-zinc-400 hover:text-accent dark:hover:text-accent transition-colors"
-                    aria-label="Back to top"
-                >
-                    <ArrowUp size={18} />
-                </motion.button>
-            )}
-        </AnimatePresence>
+        <button
+            onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+            className={`fixed bottom-8 right-8 z-50 p-3 rounded-full glass-card text-zinc-500 dark:text-zinc-400 hover:text-accent dark:hover:text-accent transition-all duration-200 ${visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}`}
+            aria-label="Back to top"
+            aria-hidden={!visible}
+        >
+            <ArrowUp size={18} />
+        </button>
     )
 }