From 5fc323677574fde2f224c9d3a2597fe1bf3170a8 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Wed, 4 Mar 2026 23:05:51 +0100
Subject: [PATCH] fix: remove Framer Motion scroll animations that caused
 invisible sections

Framer Motion's initial={{ opacity: 0 }} was rendered as inline
style='opacity:0' in SSR HTML. If client-side JS failed to hydrate
properly, sections stayed permanently invisible.

Removed whileInView scroll animations from About, Projects, Contact.
Modal animations (AnimatePresence) kept as they only render on interaction.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 app/components/About.tsx    | 24 ------------------------
 app/components/Contact.tsx  |  9 ---------
 app/components/Projects.tsx |  3 ---
 3 files changed, 36 deletions(-)

diff --git a/app/components/About.tsx b/app/components/About.tsx
index 11eeba4..520d059 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -80,9 +80,6 @@ const About = () => {
           
           {/* 1. Large Bio Text */}
           <motion.div 
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
             className="md:col-span-8 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
           >
             <div className="space-y-5 sm:space-y-6 md:space-y-8">
@@ -113,9 +110,6 @@ const About = () => {
 
           {/* 2. Activity / Status Box */}
           <motion.div 
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
             transition={{ delay: 0.1 }}
             className="md:col-span-4 bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white overflow-hidden relative flex flex-col"
           >
@@ -130,9 +124,6 @@ const About = () => {
 
           {/* 3. AI Chat Box */}
           <motion.div 
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
             transition={{ delay: 0.2 }}
             className="md:col-span-12 lg:col-span-4 bg-stone-50 dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 flex flex-col shadow-sm"
           >
@@ -147,9 +138,6 @@ const About = () => {
 
           {/* 4. Tech Stack */}
           <motion.div 
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
             transition={{ delay: 0.3 }}
             className="md:col-span-12 lg:col-span-8 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
           >
@@ -186,9 +174,6 @@ const About = () => {
           <div className="md:col-span-12 grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 md:gap-8">
             {/* Library - Larger Span */}
             <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
               transition={{ delay: 0.4 }}
               className="lg:col-span-7 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col group overflow-hidden relative min-h-[350px] sm:min-h-[400px] md:min-h-[500px]"
             >
@@ -211,9 +196,6 @@ const About = () => {
             <div className="lg:col-span-5 flex flex-col gap-4 sm:gap-6 md:gap-8">
               {/* My Gear (Uses) */}
               <motion.div
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
                 transition={{ delay: 0.5 }}
                 className="bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex-1"
               >
@@ -244,9 +226,6 @@ const About = () => {
               </motion.div>
 
               <motion.div
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
                 transition={{ delay: 0.6 }}
                 className="bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between group overflow-hidden relative flex-1"
               >
@@ -282,9 +261,6 @@ const About = () => {
 
           {/* 6. Hobbies */}
           <motion.div 
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
             transition={{ delay: 0.5 }}
             className="md:col-span-12"
           >
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index 80af0af..35202b0 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -163,9 +163,6 @@ const Contact = () => {
 
           {/* Header Card */}
           <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
             className="md:col-span-12 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
           >
             <div className="max-w-3xl">
@@ -184,9 +181,6 @@ const Contact = () => {
 
           {/* Info Side (Unified Connect Box) */}
           <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
             transition={{ delay: 0.1 }}
             className="md:col-span-12 lg:col-span-4 flex flex-col gap-4 sm:gap-6"
           >
@@ -252,9 +246,6 @@ const Contact = () => {
 
           {/* Form Side */}
           <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
             transition={{ delay: 0.2 }}
             className="md:col-span-12 lg:col-span-8 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-12 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
           >
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index 1149366..5d04ecd 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -78,9 +78,6 @@ const Projects = () => {
             projects.map((project) => (
             <motion.div
               key={project.id}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
               className="group relative"
             >
               <Link href={`/${locale}/projects/${project.slug}`} className="block">