Hi, everyone! 👋 This project ended up being far more complicated and time-consuming than I anticipated, but was a great learning experience.
The desktop bookmark button interaction is a bit different than the design - it toggles. I wanted to experiment and have a bit of fun. 😄 The slider may also be “fuller” than the design, as it’s accurate to the percentage backed. Check out the README for my full list of “additions” and “deviations” if you’re curious!
- How much of a hot mess is my JS? 😅 Up until now I’ve only used it for menu toggling, so this was a challenge. I’m sure there’re a million better and more efficient ways to go about everything I did. Please, let me know!
- The largest challenge was keyboard accessibility, which I’m still having major issues with. The selection modal focus trap works when you open the modal using the “back this project” button, but doesn’t function correctly if you use the “select reward” buttons. It also breaks once one of the radio buttons has been selected, so clearly that's the issue. Does the focus trap have to be reapplied/"refreshed" every time an input is selected? Any insight would be appreciated!
More animation practice! 😄 Hopefully the screenshot will be ok this time, as the animation is a bit faster than the stats card solution. The animations are only for the "desktop" layout. I think a similar but vertical, "slide down" animation for mobile would be lost on most users due to the smaller screen height and would also be too much movement for a small screen. Let me know what you think!
prefers-reduced-motionwas used to prevent the animations from occuring for those who prefer motion reduced. I also added aria labels to the card links to make them a bit more descriptive, but I'm unsure if this is actually helpful for screenreaders or comes off as redundant. Still learning! 😅
What was originally a break from a larger project turned into a fun animation experiment! I spent an ungodly amount of time messing around with cubic-bezier curves. 😅 Hopefully they don’t mess up the screenshot.🤞 (Edit: Yep, they did. But only a little! 😁) The statistics are only animated on the desktop layout, as I felt it was a bit too much on mobile.
First time implementing
prefers-reduced-motionto prevent animations for those who prefer it reduced. It seems to work when I test it, but please let me know if there’s any goofiness.
Also first time using
mix-blend-mode, which seemed to work well in combo with opacity to get close (I hope) to the header image design.
Shoutout to @ApplePieGiraffe for inspiring me to play around more with animations.
As always, any and all feedback is greatly appreciated!
Hi, everyone! 👋 Glad to finally be done with this one(I hope)!
- When I uploaded my solution to Vercel, I noticed that on desktop the background image on the hero was loading slower and showing up halfway through the animation. I used this handy solution from CSS Tricks to pause the animations until the images were loaded. It seems to have worked for me, but let me know if there’s any weirdness. 🤞 Are there better ways to go about delaying animations until all elements are loaded?
- For accessibility, I again made sure to put the mobile menu button inside the nav, added an aria-label, as well as used the aria-expanded attribute as I did in the Loopstudios solution. Is this the correct way to go about this? Could accessibility be improved? Any insight is appreciated.
- The mobile menu will close if clicking outside the menu or header (as well as by using the menu button, of course).
- I played around with CSS animations on the hero section, with different animations for mobile and desktop.
Thanks for taking the time to look at my solution! Feedback is greatly appreciated. 😄
Hi, everyone! 👋 I really enjoyed this one, probably because I like the design so much. Finally getting more comfortable with grid, and might even be starting to prefer it over flexbox!
The Sass architecture is probably a bit overkill for a project this size, but I wanted to practice something more akin to 7-1 architecture. I also didn't implement mix-ins to this project, but plan on doing so in the next.
Also, this solution uses 62.5% font-size. I’m aware of the issues with it and will try out other methods in future projects. 👍
I really tried to stick to just 750px and 1200px for my main media queries. I was very tempted to add a third to switch a little earlier to the vertically-styled cards and the horizontal overlap style for the “interactive VR” section, since neither work at 750px. Ultimately, I figured it was a bit too much. Thoughts?
I added a subtle image zoom on hover to the “Our Creations” cards using
::beforepseudo elements. Is there a better and/or simpler way to go about this?
I’m trying to implement better accessibility practices, so for this project I made sure to put the mobile menu button inside the
navand also added the
aria-expandedattribute. Is this the correct way to go about this? Any suggestions on accessibility and how to improve it are very welcome!
Any and all feedback is greatly appreciated! Thanks for taking the time to look at my solution. 😄
Hi, everyone - it's been a few months! Getting more comfortable with Grid and still working on my Sass architecture. As always, please let me know if you see anything that can be improved upon. Feedback is greatly appreciated! 😄