Mobile Evolution Section Issue

the mobile version of danielkliewer.com/projects has a section starting with Evolution which does not load, I do not know why and would like to fix it

Based on what you've described—and knowing your site is a Next.js app—the fact that **desktop works but mobile stops at the "Evolution" section** strongly suggests this is **not a CSS issue** but a JavaScript rendering issue that only occurs when that section enters the viewport. The first things I would investigate are: 1. **Check the browser console on mobile** - Open Chrome DevTools. - Connect your phone (or use Device Mode). - Look for errors when scrolling to Evolution. - Common errors: - `Cannot read properties of undefined` - `Maximum call stack exceeded` - hydration mismatch - image loading errors 2. **Inspect the Evolution component** Ask yourself: - Is it loaded with `dynamic()`? - Does it use `window` or `document` during rendering? - Does it use `IntersectionObserver`? - Does it start an animation when visible? - Does it recursively render children? 3. **Look for lazy loading** Something like ```tsx const Evolution = dynamic(() => import("./Evolution")); ``` or ```tsx <Suspense fallback={...}> <Evolution /> </Suspense> ``` Sometimes a rejected Promise never renders on mobile. --- ### My biggest suspects #### 1. Infinite animation If Evolution contains something like ```tsx useEffect(() => { setState(computeTree(state)); }, [state]); ``` it may continuously rerender. --- #### 2. Framer Motion If you're using ```tsx whileInView ``` or ```tsx viewport={{ once: false }} ``` there are known cases where mobile Safari behaves differently. Try temporarily replacing ```tsx <motion.div ...> ``` with ```tsx <div> ``` and see whether the rest of the page appears. --- #### 3. Huge SVG or Canvas If Evolution draws a graph or timeline, mobile may simply run out of memory. --- #### 4. Bad image A broken image can stall layout if dimensions aren't specified. Check whether Evolution begins with ```tsx <Image src={...} fill /> ``` without a parent height. --- #### 5. Hydration mismatch If Evolution contains ```tsx const isMobile = window.innerWidth < 768; ``` during render, desktop may work while mobile hydration fails. Instead use ```tsx const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) return null; ``` --- ## The quickest debugging method I would binary-search the component: Comment out half of Evolution. ```tsx <Evolution> {/* comment this half */} </Evolution> ``` If it now loads: Split the remaining half again. Repeat. Within about five iterations you'll isolate the exact component. --- ## If I were debugging your project I'd specifically inspect: - `ProjectsPage.tsx` - the `Evolution` component - every child rendered after Evolution - any `AnimatePresence` - any `useEffect` - any recursive timeline/tree renderer - any markdown parser - any D3/visx/network graph Those are where I'd expect the issue to be. If you can paste either: - the `Evolution.tsx` component, **or** - the `/projects` page source, I can usually identify the exact bug within a few minutes.