Planets Fact Site | Next.js App Router, Tailwind CSS & TypeScript

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

I am most proud of my perseverance. Halfway through the development, the Shining Object Syndrome hit me hard, and I had a strong urge to abandon this project to start something new. Gritting my teeth and pushing it to the finish line was a huge personal victory for me. On the technical side, I am proud of keeping the Next.js architecture clean and SSR-safe. Next time, I would spend more time planning the core CSS layout strategy before writing the first line of code to avoid late refactoring.

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

One of my main goals was to create a perfectly stable layout that doesn't jump or shift (preventing Cumulative Layout Shifts) when the user navigates between different planet tabs (Overview, Structure, Surface). To overcome this and keep the UI completely motionless, I resorted to setting hardcoded heights for certain parent containers (especially the image wrappers). It did the job perfectly and stabilized the UI, but I realize it is a somewhat rigid approach.

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

I would greatly appreciate feedback on the layout strategy mentioned above. How can I achieve a perfectly stable, motionless layout without relying on fixed, hardcoded heights? Are there more elegant modern CSS techniques (such as specific CSS Grid setups, min-h tricks, or aspect-ratio) that allow containers to remain fluid while still strictly reserving the necessary space to prevent the content from jumping?