Multi-page Space Tourism Website with Next.js & TypeScript

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

I am most proud of taking what was originally designed as a basic HTML/JS multi-page challenge and elevating it into a scalable, modern React application using Next.js (App Router) and TypeScript. Instead of writing repetitive HTML, I broke the user interface down into reusable React components (like the navigation tabs and interactive panels) and managed all the styling cleanly using CSS Modules.

If I were to do this project again, I would likely spend more time experimenting with page transition animations. Adding something like Framer Motion to create smooth, space-like fades between the Destination, Crew, and Technology routes would make the user experience feel even more premium.

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

One of the biggest challenges was handling the complex layout shifts and responsive background images across mobile, tablet, and desktop views without writing messy CSS. The typography also scales drastically depending on the viewport.

To overcome this, I established a strict design system foundation early on using CSS Custom Properties (Variables) for colors and typography. Instead of relying on dozens of rigid media queries to resize text, I utilized modern CSS functions like clamp() to allow the typography to scale fluidly. For the layouts, I heavily utilized CSS Grid, which made repositioning elements between the tablet and desktop states much more predictable and maintainable.

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

I decided to build this using a component-driven architecture with Next.js rather than the provided vanilla HTML files. I would love feedback on my overall project structure:

1. Component Architecture: Does my separation of React components and layout files feel intuitive and scalable for a production app?
2. CSS Approach: I opted for CSS Modules alongside global variables. Are there any areas in my CSS where I could have written cleaner or more efficient layout rules (especially regarding the usage of Flexbox vs. Grid on the main pages)?
3. Accessibility: I aimed to keep the custom interactive tabs and sliders accessible. If anyone spots any ARIA attributes I missed or focus-state improvements, please let me know!