Yosemite Site

Added an image gallery carousel of Yosemite scenery and wildlife to the about section with 10 highly detailed quality photos! It also has a pretty cool animation transition for when you’re browsing the different photos and it feels super nice, like an actual image gallery carousel. Added two colorful widgets about Yosemite Falls and the Grizzly Giant sequoia tree as well. Also added responsive design for the entire page and a warning that only pops up on tiny screens saying bigger screen is recommended, because I’m too lazy to perfect and optimize all the animations, components, and effects. Added a more descriptive and informative README, as well as updated styling and page content. Updated favicon and page metadata and fixed some deployment issues too.

Added an absolutely beautiful (but not performant or realistic if you consider the physics and math behind it, but who cares, it looks nice) waterfall animation using pure vanilla CSS and JavaScript for the hero background! It comes out slowly at first from the top left corner, and gradually accelerates and changes course to simulate the real Yosemite Falls on one of the peaks. I spent a ton of time tweaking different values and formulas to make everything look smooth and as realistic as possible while still keeping the individual water drops for a cool aesthetic. Encountered a weird Tailwind bug after pushing to production so spent some time fixing that as well. This wasted a ton of time but the result was definitely worth it, and the waterfall also fades nicely into the rest of the page. Also added two paragraphs describing Yosemite and its wildlife, as well as a half-finished photo gallery/carousel thing with framer motion. The page actually looks pretty cool right now, and I think I’ll be done with this project after finishing the rest of the widgets.

Added two actual statistics widgets that link to NPS pages to the landing page so now they’re not just placeholders! The first one is the park’s annual visitors and the second is its wilderness land area. Spent a ton of time making my custom odometer simulation/animation engine (because I was too “lazy” to leverage framer motion’s hooks and other stuff that literally would have saved hours) that animates both the widgets’ digits going up at slightly different speeds that makes it look super satisfying and cool when the widget enters the viewport. Also had to do some prop drilling and annoying math to make the changing gradient work with all the digits (and their shadows) smoothly as well. Added a second type of hovering effect for the bottom 2 widgets (coming soon, they will be animated differently) that matches the overall gradient theme. Also updated some styling, effects, and scrolling animation issues. Encountered a pretty weird bug with the intervals because of strict mode and cleanup functions but fixed it with proper math.

Added widgets (with placeholder text for now) under the beautiful scenery section that will display icons, stats, and other info about the national park. Spent some time tweaking the cool random color gradient spinning hover effect/animation of the widgets to make sure Tailwind and everything work properly. The entire section pops out when scrolled into view Also added a paragraph that slides in from the side when in view. Also added a small simple footer at the bottom and updated the fonts used on the page to make everything more aesthetically pleasing and just look nicer. Updated some styling and layout stuff as well to make everything work together better. The amazing animation library Framer Motion was a huge help here with scrolling, hovering, and page load animations as well.

I’m taking a short break to work on this simple webpage about Yosemite National Park meant to be a challenge for CSS animations, effects, and interactivity! In this update, I spent some time setting up the project with React, TypeScript, Tailwind, Vite, and other libraries/dependencies needed. Added the classic text/symbol matrix glitch effect on the page hero title that glitches between characters until it slowly becomes legible. The algorithm was fun to implement and it looks pretty cool too. Added the Yosemite cliffs as the middle ground with a background that transitions between a gradient for moonlight and a gradient for sunrise. You can toggle day/night by clicking on the toggle button, and the sun/moon icon gets animated smoothly and realistically as well. Setting and animating the gradients was kind of annoying since browsers don’t support direct transitions so I had to use some workaround methods, but everything still turned out alright. Because this is a challenge for myself, I did not use AI at all whatsoever and all the ideas and code are completely original, and the result turned out pretty good, actually better than I expected since I thought implementing more complex animations than just CSS transition was going to be harder.