Space tourism website / Nextjs + Ts / React Three Fiber

What are you most proud of, and what would you do differently next time?

I'm most proud of taking the Space Tourism challenge beyond a static multi-page layout and turning it into something that feels closer to a real product. I built the site with Next.js (App Router), organized each page into reusable components, and kept shared concerns like navigation, backgrounds, and page transitions in dedicated modules.

A few things I'm especially happy with:

The Destination page 3D experience — I integrated React Three Fiber with GLB models, dynamic imports (ssr: false), Draco compression, and an error boundary so the page degrades gracefully if WebGL fails. Motion and polish — I used Framer Motion for route transitions, staggered title animations, and content changes on the Crew and Technology pages. Small details like the navbar backdrop blur and mobile slide-in menu made the UI feel much closer to the Figma design. Responsive layout decisions — I spent real time on patterns like asymmetric grids (minmax(0, 1fr) auto), order for mobile vs desktop content flow, and image sizing with min() and dvh so pages adapt without breaking. Problem-solving under constraints — I ran into tricky issues (backdrop blur not rendering, mobile scroll being blocked, 3D models freezing on production mobile). Debugging those taught me a lot about stacking contexts, overflow chains, and how transforms affect WebGL.

What challenges did you encounter, and how did you overcome them?

1. Navbar backdrop blur not showing

The blur looked correct in isolation but invisible on the page. I traced it to stacking contexts and the body background blocking the effect. I fixed it by making the body transparent, moving page backgrounds outside the animated transition wrapper, and using valid Tailwind blur utilities.

2. Hero not filling the viewport

The home hero wouldn't stretch below the navbar despite h-full classes. The issue was a broken flex chain in the root layout — adding flex flex-1 flex-col min-h-0 through the layout hierarchy fixed it.

3. 3D planets frozen on mobile (production)

Models rendered on PC and Vercel desktop but appeared static on iPhone/Android. I narrowed it down to CSS transforms on the page transition parent interfering with WebGL compositing. Switching to opacity-only transitions and tuning canvas settings (dpr, dynamic import with ssr: false) improved reliability.

4. Destination page not scrollable on mobile

Global overflow-hidden and flex clipping cut off content on smaller screens. I moved scrolling to main with overflow-y-auto and let the destination hero grow naturally instead of forcing it into a rigid flex container.

5. Matching Figma layouts (Crew & Technology)

Details like the crew image bottom fade (mask-image), pagination dots without initials, and the technology image aligned to the viewport edge required iterative CSS work. Reading up on minmax(0, 1fr), CSS order, and min() for responsive sizing helped me understand why the layouts behave the way they do, not just copy classes.

What specific areas of your project would you like help with?

What specific areas of your project would you like help with? I'd appreciate feedback on these areas:

3D performance on real mobile devices — The planets work on desktop and in dev tools, but I'd like guidance on making them reliable in production on iOS/Android (DPR limits, lazy loading, when to skip 3D entirely).

Accessibility review — My interactive patterns (destination tabs, crew dots, technology numbered nav, mobile menu) are functional, but I'm not fully confident they're WCAG-friendly. I'd love input on ARIA usage, focus order, and keyboard support.

Pixel-perfect responsive layout — Especially Technology (image flush to the right) and Crew (image fade + alignment). I want to know if my Grid/Flex approach is solid or if there's a cleaner pattern for full-bleed images within a padded layout.

Animation best practices — Are my Framer Motion patterns (remounting navbar on route change, AnimatePresence mode="wait") reasonable for performance and UX, or should I simplify?

Portfolio readiness — General code review feedback: component structure, naming consistency, and anything that would stand out to a hiring manager (good or bad).