Portfolio

Category: Web App
Platform: Open Source, Live
Year: 2026; Built
Developer: Jaymark
Stat: 39; React components
Stat: 13; guided tour stops
Stat: 3; live data sources: GitHub, Spotify, Supabase

Preview

Web · Desktop & Mobile

Want a portfolio like this?

It’s open source. Fork it on GitHub, swap in your own projects and make it yours.

This site: an open-source developer portfolio with a 3-column desktop layout, an iOS-style hello splash, a guided cursor tour, App Store-style project pages and live GitHub and Spotify data.

What's Included

Three-column desktop layout where each column scrolls on its own
iOS-style "hello" splash that hands off to the tour
Figma-style guided cursor tour with typing speech bubbles
App Store-style project pages with full case studies
Instagram-style story highlights
Live GitHub graph, Spotify now playing and viewer count
Circular reveal when switching light and dark themes
Animated dot-grid background drawn on a canvas

The Problem

Most developer portfolios are the same template: a hero, a grid of cards and a contact form. They show what you made but nothing about how you build. This one is designed to behave like a product: it greets you, gives you a tour, and its project pages read like App Store listings with real case studies, while staying fast and statically rendered.

By the Numbers

39
React components
13
guided tour stops
3
live data sources: GitHub, Spotify, Supabase
4
API routes

Under the Hood

Highlight 01
Three columns, three scrollers
On desktop the page itself never scrolls. Each column is its own full-height scroller with overscroll-contain, so the wheel only moves the column under the pointer and never spills into the others at the ends.
Highlight 02
A tour bubble that leads the typing
The guided cursor types each message letter by letter. The bubble measures the typed text plus the next couple of characters, so it always grows just ahead of the caret. It flips sides, turns the cursor and slides to fit on small screens.
Highlight 03
A breathing dot field that costs almost nothing
The background grid is drawn once to an offscreen canvas. Only about 6% of the dots are animated, at 30fps, and the loop pauses when the tab is hidden and stops entirely for reduced motion.
Highlight 04
Theme switch as a circular reveal
Switching light and dark uses the View Transitions API: the new theme grows out of the toggle button as a circle, with an instant fallback where the API or motion is not available.
Highlight 05
Live data without giving up static pages
The homepage stays statically generated. Spotify and viewer presence load on the client through API routes, the GitHub graph revalidates hourly, and the profile picture loads straight from GitHub so a new avatar shows up within minutes.
Highlight 06
Music-aware avatar
While Spotify is playing, the avatar swaps to an animated GIF chosen from the artist’s genres (party, rock or normal), with a now-playing bubble above it.

Information