Post by Syed Faisal Haque

I gave my portfolio site a 3D hero this weekend, and the interesting part wasn't the 3D. The site pulls my Medium articles into a magazine-style layout. It looked clean but flat, so I added floating geometric shapes behind the masthead with React Three Fiber - soft solids in the site's warm palette that drift with your cursor and reshuffle to fit whatever screen you're on. Two things that actually taught me something: The shapes kept landing on top of the text. Fixed positions look fine on a 27" monitor and cover your face on a phone. The fix was to stop hardcoding coordinates and place everything relative to the live viewport, so the shapes hug the corners no matter the screen size. And a bug I didn't expect: the dev toolchain was injecting attributes onto every element, which the 3D renderer choked on a wall of console errors on an otherwise working page. Turned out to be dev-only and invisible in production, but chasing it down was a good reminder that "it renders" and "it's clean" are different bars. Shipped to Vercel, verified it live before calling it done. Small project. But the reduced-motion support, the mobile layout, the console being actually empty  that stuff is the difference between a demo and something you'd put your name on. Live link in the comments  #WebDevelopment #ReactThreeFiber #FrontendDevelopment #BuildInPublic

Video Content