Tactile Portfolio Website
A Next.js developer portfolio with a custom dark tactile desk-themed visual design system and real Spotify integration.
01. ABOUT THE PROJECT
A custom portfolio codebase modeled after a dark physical workdesk. Originally written in vanilla HTML/CSS/JS, it was completely refactored to Next.js, React, and TypeScript. Includes tactile paper, polaroid photo frame, and embossed tape components, plus a server-side cached Spotify Currently Playing widget.
Why It Exists
Designed to present Ram Singh's work, certifications, and technical capabilities to freelance clients and potential partners, functioning as a tactile digital workspace and case study hub rather than a boilerplate resume.
02. PROBLEM & APPROACH
The Problem
Standard web portfolios look like uniform templates, failing to create a memorable, tactile brand impression or demonstrate advanced web engineering capabilities.
The Approach
Migrated the codebase to Next.js 14 to leverage React components for repetitive layouts. Designed custom CSS-only layout wrappers representing physical desk objects like notebook sheets, Polaroid pictures, tape segments, and Dymo labels.
03. ARCHITECTURE & IMPLEMENTATION
Technologies Utilized
Technical Execution
Developed a server-side route handler that requests Spotify tokens via OAuth refresh flows, caching the token and the API response in server memory to respect rate limits. Built responsive grid systems and media query hooks to shrink and adjust document skew rotations on smaller screens.
04. THE RESULTING SYSTEM & LESSONS
What I Built
A fast, SEO-optimized, highly accessible Next.js portfolio website that compiles statically, loads remote assets efficiently, and presents a distinct, vintage-desk visual layout.
Key Takeaways
Mastered server-side routing and caching in Next.js, next/image optimization techniques, TypeScript interface definitions, ARIA landmark accessibility controls, and CSS transform skews.
LIKE WHAT YOU SEE?
Have something similar in mind? Let's build your next web application or interactive layout together.