@ApplePieGiraffe
Posted
Hello, Emmilie Estabillo! 👋
I'm sorry I'm late to this challenge—I only noticed it just now! 😅 That being said, I'm glad I didn't miss because I was looking forward to seeing another solution from you (and my prediction was right—it's pretty awesome)! 😀 The design of your solution looks great and is on point (you're right—it does look fine without a max-width on extra-large screens 😆) and your code looks really nice, as well! 👍
Kudos for trying out Next.js! It's an awesome framework that makes using React to build sites sooo much nicer! About mapping more than one route to the same page in Next.js—I don't remember having done that with only Next.js (yet) but this page from StackOverflow might present a possible solution. 🙂
I agree that working with Next.js's Image component can be a little tricky! I've gotten pretty annoyed before at the weird way the image is wrapped in two divs with their own styles (and they have inline styles, too, I think, which makes changing them super-difficult). For now, I usually just wrap the Image component in a wrapper of my own (yeah, a third wrapper 🤪) and then focus on sizing and positioning that. 🤷♂️
I really like the animation to the stars that you added with Framer Motion! I wish I could help you with your question, but it's been a while since I last used Framer Motion and I've almost forgotten the basic syntax! 🙃 One thing I noticed, however, is that the you're animating the background position property, which generally isn't very performant and is causing a tiny bit of lag on my computer, I believe (but I don't have a great laptop at the moment, anyway, so lots of things make it lag 😅). It might require a bit of extra work, but finding a way to animate the transform property instead to create the animated stars would probably be a good idea, since the transform property is optimized for animations by browsers and animating background-related properties is usually a bit expensive. 🙂
If I understand your question about styled-components correctly, I think you can do something like this in your styled-components (correct me if I misunderstood):
const Wrapper = styled.div`
// styles...
background: ${(props) => props.name || props.planet && 'var(--color-mercury-main)'};
`
Anyways, really great job on this project, once again! 👏 I hope that helps a little! 🙂
And of course—keep coding (and happy coding, too)! 😁
Marked as helpful
@ApplePieGiraffe
Posted
@ApplePieGiraffe
Actually, forget what I said about styled-components—that might not be what you're looking for. Maybe you could store the string for the CSS variable for the color of each planet in the object containing the information for each planet (which is in data.js it looks like), and then import it and use it in your styled-components, like:
// data.js
export const PlanetData = [
{
name: 'Mercury',
// other stuff
color: 'var(--color-mercury)'
},
// etc.
]
And then,
// some component file
import data from '../../somewhere'
const Wrapper = styled.div`
// styles
background: ${({name, planet}) => data[name || planet].color};
You might store those colors in a theme of some sort in a project, I guess, but since you don't already have that set up the above should work fine, I think. 😀
@ApplePieGiraffe
Posted
@ApplePieGiraffe
Actually, I don't even if that's what you're looking for, but maybe—let me know what you think! 😂
@emestabillo
Posted
@ApplePieGiraffe Hey APG!!! Wow thank you as always for taking the time to review my solution! I enjoyed Nextjs, and it seems to be the perfect tool for the design...but it's probably best to learn it with a team or mentor rather than alone to avoid a lot of tears 😅
Yeah I used the same workaround with the images, by using another container. I don't know why the actual image needs to be inside two other wrappers, and the inline styling was impossible to override without using !important. I think I survived this but I really almost used another way to deal with importing images.
I didn't think about including the colors on the data file. That's awesome advice! Probably would've made my life easier.
As for animations...I didn't know what I was doing haha. This is something I'd like to improve but I know it's easier said than done. I have to work on both my technique and creativity 😄
Appreciate all the links you posted here. I'd be reviewing them for the next round of rewrite. Thanks so much and yes, I'll be happily coding! lol
@ApplePieGiraffe
Posted
@emestabillo
Awesome! 👍 So glad to be of a little help! 😀
You're doing really well—already looking forward to your next one! 😆
