@vladmee
Posted
Wow, you came up with your own version inspired by Interstellar! That definitely caught my eye
I like the way you are handling React. Your project has a good structure. You are making good use of NavLink to navigate between routes. And you manage to put together everything with very little CSS (really, I'm impressed!) All thanks to Tailwind, of course, which you seem to have good knowledge of. Well done!
The only feedback I have for you is regarding the responsiveness of your pages. While it's following the design on desktop and mobile, you skipped one step: tablet view :)
This can be quickly fixed with media queries but I want to give you a bigger challenge. Lately I'm reading about the "Fluid design" where, instead of targeting specific resolutions and not caring about anything in between, in this new approach you structure ALL your CSS with dynamic units so it adapts to ANY type of screen.
This can be achieved using only dynamic units (rem, vw, vh, %) and, the thing that actually changed my perspective a lot: clamp() where you can set a min and max value along with a recommended dynamic value so you have adaptive sizing from mobile (min) to desktop (max) and everything in between (recommended). Here's an example:
Instead of:
.technology .navLink {
width: 40px;
height: 40px;
}
@media screen and (min-width: 640px) {
.technology .navLink {
width: 60px;
height: 60px;
}
}
You can use clamp() and ditch the media queries:
.technology .navLink {
width: clamp(40px, 5vw, 60px);
height: clamp(40px, 5vw, 60px);
}
Hope my feedback helps! As a I already mentioned your solution is already great, it's just the small details to make it perfect for any type of screen. Keep it up!
Marked as helpful
