A plain resume displaying my projects is boring and, frankly, too easy to make. Find out how I built the very website you're on from scratch!
Pictured: Phone, tablet, and desktop views of the website
What Tools?
The main framework I used was with , styled using and . I also used to connect with REST APIs for real-time updates, to prototype the interface, to create my logo and other assets, and for deployment.
Next.js
React
Tailwind CSS
Framer Motion
Node.js
Figma
Illustrator
AWS Amplify
Why This Project?
The main motivation for the site was to create an interactive and fun user experience, encouraging users to explore every aspect of the site and learn more about me in the process. The slot machine concept was something that I came up with a long time ago, and I rolled with it, creating an overarching theme for the site.
What is it?
The main component of the site is your “balance,” which is persisted throughout the app and stored in the browser's local storage. The user can increase their balance by clicking on red words, project links, and external links, as well as gambling with the home-page slot machine. All the states for whether or not a link has been clicked are also stored in local storage, and the user's progress can be tracked in the expanded header. Completing all of the quests allows the user to access a dark-mode toggle that applies throughout the app.
On the backend side, I read from the Chess.com REST API and Clash Royale REST API daily using my Node.js backend, and cache the values for a week to create fallback values in case of failure. These values are displayed with custom widgets on my About page. Additionally, I use an AWS Lambda plus EventBridge cron job every month to update my “Monthly Top 5” playlist using the Spotify API, which is displayed via the Spotify web embed.
The slot machine component was created using SVGs and Framer Motion, and is set to show an “inquiry animation” when it hasn't been pulled yet (state stored in the browser's local storage). The payout is calculated using a statistical mixture model made up of a triangularly distributed base and a power-law tail distribution. I designed it so that 10% of spins are jackpots (drawn from the tail). The remaining 90% come from the “base” of the model, which has an expected payout of $4.50 to balance things out. This gives the users an incentive to continue trying their chances while being an unrealistic machine, since the user can actually profit.
What did I learn?
I improved my UI/UX (accessibility, motion design, etc.) skills, as I think the main motivation for the creator of a project like this is for the user to effectively understand who I am as a professional, as well as a glimpse of my personality through creative design choices. Working through the large scale architecture and the tiny details forced me to build bulletproof code that balanced performance, an adaptive layout, and future scalability considerations. Lastly I learned a lot about myself when trying to create the “About” section, as it turns out I'm not as interesting as I thought before.