Jhun Portfolio×- +
Jhun Portfolio
jhun-dev-portfolio is a personal developer portfolio built with Next.js (TypeScript) and Tailwind CSS. It showcases projects, skills, and developer activity through live integrations with GitHub, WakaTime, and Spotify — giving visitors a real-time view of what I build and how I spend my time as a developer.
Overview
Type
Solo Project — Design, Development & Deployment
Status
Live — Vercel
Users
Actively used as primary job application portfolio — 2025 to present
The Problem
What problem?
Most developer portfolios are static — they show a list of projects and skills but give no sense of the developer's actual activity, growth, or personality. Recruiters and clients often can't tell if someone is actively building or just listing old projects.
Why build it?
As a fresh graduate actively job hunting, I needed a portfolio that would stand out and reflect who I actually am as a developer — not just what I've done, but how I work, what I'm building now, and what drives me.
The Solution
What was built?
A dynamic, living portfolio that pulls real data from GitHub, WakaTime, and Spotify. Visitors can see my latest commits, coding time stats, top languages, pinned repos, contribution chart, and even what I'm currently listening to.
How it works
Built with Next.js App Router and TypeScript for strong structure and performance. GitHub and WakaTime APIs are integrated server-side, with caching to avoid rate limits on Vercel. Spotify uses OAuth to fetch now-playing and top artists. All sections are composed from reusable components with per-project accent color theming.
My Role
Solo Project — Design, Development & Deployment
- →Designed and built the full UI using Next.js (TypeScript) and Tailwind CSS
- →Integrated GitHub API to display commits, repos, stars, pinned projects, and contribution chart
- →Integrated WakaTime API for live coding time stats and language breakdown
- →Integrated Spotify API with OAuth for Now Playing and Top Artists bento cards
- →Built reusable Documentation_Template component system for all project case studies
- →Implemented HardwareBorder animated gradient borders and LearningJourney timeline with Intersection Observer
- →Deployed on Vercel with environment variable management and caching strategies
Process & Thinking
How I approached it
Started with a clear information architecture — Hero, About, Projects, Skills, Journey, GitHub Activity, WakaTime Stats, Spotify — then built each section as an isolated component before wiring up the live data integrations one by one.
Why this approach?
Chose Next.js over plain React to leverage server components for API calls, avoiding client-side exposure of API keys and getting better initial load performance. TypeScript was a deliberate choice to practice stricter development habits ahead of job interviews.
Key Insight
💡 The hardest part wasn't the integrations themselves — it was handling edge cases: private repos not showing in GitHub API responses, WakaTime returning nulls on days with no activity, and Spotify tokens expiring mid-session. Each integration taught me something real about production-level API handling.
Tech Stack
Key Decisions
·Chose Next.js App Router for server-side API fetching with built-in caching — critical for keeping GitHub and WakaTime data fresh without hitting rate limits.
·TypeScript enforced strict typing across all API response shapes, catching integration bugs early especially on nested GitHub and WakaTime data.
·Tailwind CSS with per-project accent color theming allows each case study page to have a unique visual identity while sharing the same component structure.
·Spotify OAuth was handled via NextAuth-compatible token management, storing refresh tokens server-side to keep the Now Playing widget always live.
·Vercel deployment with ISR (Incremental Static Regeneration) on stat-heavy pages keeps load times fast while data stays reasonably current.
Architecture
No diagram provided
Features
Live GitHub Activity Dashboard
Displays real-time commit count, repo count, stars, recent commits, top languages by repo, pinned repositories, and a paginated contribution chart — all pulled from the GitHub REST API.
WakaTime Coding Stats
Shows today's and yesterday's coding time, language breakdown, and editor stats fetched live from the WakaTime API — giving visitors a transparent view of my development activity.
Spotify Now Playing & Top Artists
Live Spotify integration showing the currently playing track with dominant color theming, plus top artists over the last 4 weeks — a personal touch that reflects who I am beyond the code.
Project Case Study Pages
Each project has a dedicated case study page built with a reusable Documentation_Template component — covering problem, solution, architecture, process, features, challenges, and results.
Learning Journey Timeline
An animated horizontal/vertical timeline with Intersection Observer that maps my growth from elementary school through college, internship, hackathon, and beyond.
Challenges & Learnings
Challenge
GitHub API was not returning private repositories in contribution stats, making my actual activity look lower than it was.
Learning
Learned to use the GitHub GraphQL API alongside the REST API to get full contribution data including private repo activity, then added a toggle on the UI to clarify the distinction for visitors.
Challenge
Vercel caching caused stale GitHub and WakaTime data to persist long after updates, making the stats feel outdated.
Learning
Implemented explicit cache revalidation using Next.js `revalidate` on fetch calls and added timestamp displays so visitors can see how fresh the data is.
Challenge
Spotify OAuth refresh token flow broke silently when deployed to Vercel — tokens expired and the Now Playing widget showed nothing with no error.
Learning
Added proper error boundary handling on the Spotify widget and implemented server-side token refresh logic that logs failures gracefully and falls back to a 'Not Playing' state.
Challenge
Building a reusable Documentation_Template component that could handle both hardware projects (SproutSync) and software-only projects (Lomilindol, Portfolio) without breaking layout.
Learning
Introduced a `type` prop ('software' | 'hardware') that conditionally renders hardware-specific sections, keeping the template flexible without overcomplicating the data shape.
Results & Outcome
Users
Actively used as primary job application portfolio — 2025 to present