#Concept
A personal portfolio site designed around a Bloomberg Terminal aesthetic — monospace typography, data-table layouts, green/amber accents on deep blue-black. The goal was to create something that feels authored and distinctive rather than templated, reflecting the intersection of quantitative finance and engineering.
#Design Principles
- ▸Terminal-inspired UI with scanline overlays and monospace-dominant type
- ▸Information-dense layouts borrowing from financial data terminals
- ▸Keyboard navigation support with shortcut hints
- ▸Minimal color palette — green for active/positive, amber for highlights
- ▸No light mode — dark environments only, like a real trading desk
#Technical Details
- ▸Built with Next.js 15 App Router and React 18
- ▸Tailwind CSS 4 for styling with custom theme tokens
- ▸Framer Motion for subtle entrance animations
- ▸Deployed on Vercel with automatic GitHub-triggered deploys
- ▸GitHub API integration for live 'last updated' timestamps
#Music Profile
One of the more involved pages on the site — a full Spotify data dashboard built from scratch using the Spotify Web API. It goes well beyond "here are your top tracks" and actually tries to paint a picture of how you listen to music over time.
- ▸Full OAuth 2.0 flow — login, callback, and token refresh all handled server-side via Next.js API routes
- ▸Audio features pulled for every top track: energy, valence, danceability, acousticness, instrumentalness, speechiness, liveness, and tempo
- ▸Taste profile with 8 slider axes derived from averaged audio features — shows where your library sits on spectrums like Slow ↔ Fast, Acoustic ↔ Electric, Relaxing ↔ Energetic
- ▸Popularity, decade, and duration breakdowns — bar charts bucketing tracks by how mainstream they are, what era they're from, and how long they run
- ▸Era timeline — an SVG bar chart of release years across your top tracks, with the peak year highlighted in amber
- ▸Top albums inferred from top tracks, displayed with fanned cover art and a ranked list with album art
- ▸Bump chart timeline — an interactive SVG showing rank movement across short-term (~4 weeks), medium-term (~6 months), and all-time windows for artists, tracks, and genres separately. Lines are color-coded green for rising, amber for falling
- ▸Mood breakdown — classifies top tracks into mood buckets using combinations of audio features and renders a percentage bar for each
- ▸Listening behavior panel — recent play count, repeat listen ratio, peak listening hour, weekday vs. weekend split, and recently heavy artists
- ▸Music Receipt — a styled thermal-receipt printout of your top 10 tracks with a 5-dot popularity indicator, mainstream index, artist diversity count, and median era
- ▸Full top tracks grid with album art, scrollable and paginated across all three time ranges
The whole page is stateless on the server — all data is fetched fresh on load from the Spotify API using a stored access token. If the token is expired or missing, the page gracefully degrades with a locked state rather than breaking.