@vladmee
Posted
I used Next.js for this challenge as well! Great job!
I like how you're adding the user's choice in the URL. That's a nice touch!
I see you're having a loading state. That's nice, is it really needed? (Serious question)
A few things that I realized when exploring your solution:
You are targeting specific images here to fine-tune them:
.crewImage[alt="Douglas Hurley"] {
top: 3rem !important;
height: 71.2rem;
margin-top: -3rem !important;
margin: 0;
}
.crewImage[alt="Mark Shuttleworth"] {
height: 65.4rem;
}
.crewImage[alt="Victor Glover"] {
height: 68.1rem;
}
.crewImage[alt="Victor Glover"] {
height: 60.7rem;
}
I wouldn't do that. You should always think of your style and structure to fit almost any kind of data as it would be served from a server. Yes, it won't be perfect for all types of images, but you have 4 samples to build your abstract solution around.
On another note, your globals reset is pretty thin. That's why you have to do this:
> ul {
list-style: none;
Overall a great adaption. Good folder structure. Following the design assets perfectly. Keep it up!
Marked as helpful
@faisalahmed11
Posted
Thank you @vladmee for your time, I will definitely consider your suggestions in future.