PElise Rousseau625β|βPosted 4 months ago
Hi ApplePieGiraffe π !
I'm just a fan of the hover effect you put on the images in the "our creations" section and also of the effect you put on the burger menu ππ
4
Design Comparison
SolutionDesign
Report
0Accessibility
issues0HTML
issues
ApplePieGiraffe's questions for the community
Hello, everyone! π
This is my first challenge with React and as usual, I learned a lot! π
At first, I was pretty confused about how to organize the files in my project and I'm still unsure if my React is very clean in some places (since I just began learning React). My Sass turned out to be, well, kind of messy (and I'll keep in mind to use a better file structure next time because I simply created separate files for my components for this project). π
On the bright side, I created this pretty sweet hover effect for the cards in the "Creations" section from scratch, and I quite like it. π
Any feedback (especially on React) is welcome and appreciated! π
Happy coding! π
Community Feedback
Ah, you beat me to this one! Iβm just about finished, but Iβm glad our effects are a bit different, so I donβt have to change it up, lol. π Although I did have a double take moment where I thought I was accidentally reading my own code because I also used
.header-hero-container. πGreat job, as always! π The hover effect on the creation cards is really fun with the background text and response to cursor movement. The page also responds really well, and I know how much a pain figuring out the medium/transition styles were - at least for me!
I know nothing about React, so Iβll nitpick at the design matching instead:
- The logo is too large on the mobile version, and is also missing from the mobile menu when open. I really like the hover effects on the mobile menu though!
- The
font-weightof the headings should be 300 - slightly too heavy at the moment. - The hover on the social icons should be βunderlinedβ like the other nav links if youβre going for design matching.
- The border overlap in the hero that Em mentioned starts at 340px and happens for about 10px or so.
Speaking of React, how are you liking it? Iβm going over JS in more depth right now, but that was potentially next on my list due to the demand for it.
2- Steven Toben750β|βPosted 4 months ago
For code quality I'd highly recommend code splitting. You're functional components are really large, generally a component should be broken down to the deepest level. It looks like you should break down Nav into it's own component, List, as well as list items. You should also use the mapping feature to map list items to a list so you don't have to repeat lines of code. It looks like you're using anchor elements and images enough to break them into their own component. On your hamburger menu the toggling state is overly complicated, as well as bad practice because state is async, so it could not be updated yet when that function is called. The best way to prevent that is just in your function writing setActive((prevState) => {return !prevState}); I'm pretty sure your useEffect hook is wrecking havoc on your performance, you have no dependency array so it's firing every single render, and useEffect is for managing side effects, so setting up the event listener to observe the window size is fine, but you must write a return statement that removes the event listener to clean up the effects. also add a dependency array to the hook containing window.innerWidth, that way it will only fire if that value changes. You could also consider debouncing since you really only want the value at the end of a resize. Also, you're not using props at all? props is one of the most important features in react and should be heavily incorporated in the app composition, instead of manually writing all of your data. Also one last thing, try to avoid styling like you did in the Creations functions. It looks nice but it hits performance heavy, especially an onMouseMove call, react will reconstruct all of the functions and variables at each render unless memoized or placed in a ref, so grabbing directly from the DOM over and over and repainting will cause some performance issues usually.
Onto the styles.... we've already talked too much about font-size lmao so let's just ignore that. In general your sass is pretty dirty. I'd recommend trying to compile your sass and take a look at the output of the css file, that would probably explain much better than I could. Your nesting is far too deep and often times unnecessary. Try to practice DRY and create a mixin for commonly used styles. If you have sass that's more than 3 levels deep there is something wrong with your method. Also it common practice to put media queries inside of selectors, not the other way around. As well as using em units for the media queries, also line-height should be unit-less, not measured in rem.
React and sass both have an atomic kind of methodology, so break down components as much as possible, use props and refs, it's ok to have hundreds of React components, and is actually quite common and really shows the beauty of React when you atomize everything.
Overall tho it looks good, you could try using css modules if you want to try a different method of styling, they're scoped to each component so you don't need to worry about clashing class names.
2 P
Emmilie Estabillo4,190β|βPosted 4 months agoHey APG! Great work! The nav transition is pure silk lol and the hover on the creations section is really creative wow!
Iβm viewing this on mobile and Iβm getting a small bug where βExperiencesβ in the header is touching the border of the div. It may just be on ios though, checked with Safari and Chrome.
Otherwise, this looks pretty much on point as expected π
1- Tesla_Ambassador455β|βPosted 4 months ago
This is by far the best loopstudios I have see!!! Cheers to Apple Pie Giraffe. I am in love with the hover effect! Take us to mars bro.
1 - Grace13,030β|βPosted 4 months ago
I absolutely love that mobile nav effect! Utterly beautiful
1 
PElie Bissor155β|βPosted 4 months agoAwesome solution !ππ
1P
Aaron Stroud435β|βPosted 4 months agoVery nice ππ₯§π¦!
1
shahab shafie70β|βPosted 4 months agoAWSOME WORK !!!!!π
1
P
Give some feedback to ApplePieGiraffe about their solution...
Join our Slack community
Join over 50,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!