Portfolio Website

The main framework I used was

Next.js

with

React

, styled using

Tailwind CSS

and

Framer Motion

. I also used

Node.js

to connect with REST APIs for real-time updates,

MongoDB

and

Pusher

for persisted and live updated Starflares,

Figma

to prototype the interface,

Illustrator

to create my logo and other assets, and Vercel for deployment.

The main motivation for your “earnings” was to create a simple and satisfying incentive for the user to explore the entire site. I've also always been a big space nerd (Star Wars, Dune, Hitchhiker's Guide to the Galaxy), so that seemed like the perfect setting to transport the users into.

The main component of the site is your “earnings,” which are persisted throughout the app and stored in the browser's local storage. The user can increase their balance by clicking on highlighted words, project links, and external links.

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. Earnings can be spent on new themes or sending Starflares (more on that below).

On the backend side, I read from the 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 a custom widget on my About page.

Additionally, I use a Vercel cron job every month to curate my “Monthly Top 5” playlist using the Spotify API, which is displayed via the Spotify web embed.

The Starflare section is a global, real-time tracker for clicks from anyone visiting the site.

• Initially, the section reads from my MongoDB database where the single source of truth is stored.
• The user is then subscribed to a Pusher channel, which allows the value to update when another user increments the counter.
• On click, my frontend sends a POST request to my backend, and optimistically updates the counter for instant UI feedback.
• The request is then processed by my backend. This involves calling the database to increment, and creating a Pusher message to tell all subscribers to increment the value.

Safeguards are in place, for example the counter will only increment if the incoming value is greater than its current displayed value (reduces flickering), and there is a 25 requests / 10 second limit to my API to prevent overloading.