The project showcase structures every case study as a four-part narrative
The data/projects.ts file defines every portfolio project with eight fields and a nested detail object containing four prose sections — challenge, approach, outcome, and techDeepDive. The eight top-level fields cover scanning. An id, a title, a subtitle, a description, a techStack array, an optional liveUrl, a metrics array, and a category string. The four nested fields cover reading. A visitor scanning the project cards sees the title, the category label, the metrics badges, and the tech stack pills. A visitor who clicks through sees the full story in four structured paragraphs. The separation from the software page's inline caseStudies array is deliberate. That array stores six-field marketing summaries designed for a three-second scan — title, category, optional URL, description, metrics, and techStack. The projects.ts file stores the deep breakdowns with narrative paragraphs that explain why, not just what. Different files for different audiences at different levels of commitment. Each project tells a story. The challenge section explains the problem — music teachers needed a unified platform, no existing solution combined all these needs. The approach section describes the architectural decisions — multi-tenant Next.js, role-based access, Prisma with PostgreSQL, NextAuth, Stripe Connect for multi-mentor payouts. The outcome section quantifies the result — shipped in eleven days, five milestones, twenty-eight phases, one hundred and thirteen individual plans executed. The techDeepDive section names every integration and every tool choice so a technical reader can assess the stack without asking. The metrics arrays carry the numbers that do not need paragraphs. Idea to launch in eleven days. Sub-second latency. Real-time AI responses. These sit as accent-coloured badges on the project cards so the achievements are visible before anyone reads a word. The techStack arrays list specific libraries — Next.js 14, TypeScript, Prisma, PostgreSQL, Stripe, Resend, Socket.io, Claude API, TikTok Live API — because vague labels like modern frontend framework tell a hiring manager nothing. The category labels position each project — SaaS Platform, Real-Time Streaming Platform, AI Product — so the reader knows the scale before they know the detail. Three projects, four narrative sections each, twelve paragraphs of context. One data file and every portfolio entry reads like a case study because the data structure forces it to be one.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.