Responsive Planet page using Next.js + React Aria Components

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

Fairly happy with the planning, would probably do even more detailed planning if I aim to tackle an harder challenge next time.

I'm proud over the animation for the "navigation links" using motion. Went into a rabbit hole trying to add an enter and exit animation for the lines, but did not get that to work with the layout animation between the links.

I'm also proud about the nextjs setup, fun to use the generating StaticParams for the static json data. Generating dynamic favicons for every page.

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

First challenge was with the planet image, looking at figma the images are in different sizes (depending on planet size). First I thought to maybe include height/width in the data model for every viewport, but that feelt a little of cheating.

So the other approach (the one I took) was to have a list of all sizes for mobile as base. Then depending on the viewport width I would multiply the base size with a ratio which I based on mercury. I just assumed that every planet would kind of have the same ratio.

Another bug I saw in the end was the tab order got messed, should be:

Links -> Source Link -> Toggle Group

But because I'm using grid template areas (and re-using the toggle group component in mobile, the tab order became:

Links -> Toggle Group -> Source Link

Would probably create a variant instead, and render between two components with different variants for mobile and tablet/desktop. So that the html is in the correct order.

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

Not really looking for particular feedback. But would be fun to hear how other solved e.g the different sizes of the Planet images or If there are any rule of thumbs implementing layouts and keeping the tab order correct.