I updated my website! The landing page is now a Hero Page (woohoo), which is just a fancy name for a home page that tells you about the site in a punchy, catchy way. And since this is my site, it punchily and catchily tells you about me. It was also an excellent excuse to try creating some fun interactive features. Here’s a list of the ones I implemented and thought were cool:
- Section transitions that move like a wave: I adapted this CodePen into a React component and added wave randomization and configurable colors.
- A div that rotates toward your mouse: Creating this was a bit tricky because that invisible line separating the beginning and end of a circle is weird. I made a short video about it.
- Custom Cursor: I combined this Medium tutorial and this CodePen to make a springy cursor that follows you as you explore the page.
- Hidden Background: I created a cool reveal effect using example 3 from this HTML and CSS flashlight effects list.
- Skill Progress Bars: I used a pre-made Tailwind CSS component by TailGrids.
- Colors: The website got a color palette upgrade! It matches my Hero photo, and purple is cool.
- Logo: I SVG-ified it using Adobe Illustrator. People are still not super what the logo is supposed to be.
The more I build, the more I realize I will never finish adding to this site. Ideas lead to creation, and creation leads to more ideas. Some features at the top of my wishlist right now are:
- Make scrolling through the section transitions on the Hero page smoother.
- Add animations that trigger when specific components enter the view of the page.
- Create a recipes section for myself. I hate dealing with the ad-infested, copy-bloated, painfully slow websites I currently visit. And I keep forgetting how I like to tweak each recipe.
- Make a Better Fitness Pal, which is like My Fitness Pal but better, theoretically.
- Probably remove the Comment Section on Posts (who comments directly anymore anyway?)
- Fix Markdown formatting on Posts. I need to do it, but I keep giving myself more engaging problems.