This is a personal portfolio/linktree-style website built with React, Vite, and Tailwind CSS. It has a swamp/frog theme with an interactive frog profile section, animated fireflies, project cards, and links to my GitHub, LinkedIn, resume, and portfolio projects.
This site acts as a personal landing page where people can view my projects and find ways to contact me. The home page has a frog sitting on a lily pad, a time-based greeting, and buttons styled like lily pads. The portfolio page keeps the same visual style but shows my projects as frog/lily-pad cards.
First, install the project dependencies:
npm install
then start the local dev server
npm run dev
One JavaScript feature I added is the interactive frog behavior. The frog can open and close its mouth, and after the mouth is closed, you can rub the frog to make it blush.
I picked this feature because it makes the portfolio feel more playful and I really like how my frog turned out so he deserves some love.
The trickiest part about this was mistakingly hand drawing the background in 1920x1080, I had to add gradients and making sure it blended well enough to not be obvious. This also messed up the layout of buttons because technically the extra space was a different section, and it took me a while to find a workaround.
React Vite Tailwind CSS JavaScript