← Back to Home

Portfolio Projects

#Full Stack#Backend#Machine Learning

// Overview

A living portfolio hub that turns scattered past projects into clear, readable case studies with one consistent structure.

Expand detailed explanation

The focus was practical clarity: each project follows the same narrative flow (overview, background, solution, impact, architecture, media, demo) so visitors can understand outcomes in seconds. I kept editing friction low by making content data-driven, so updating a project means editing one typed object instead of touching many components.

Background

I needed one place to showcase past projects, but I had almost no frontend experience and my project notes were spread across many sources.

Solution

Built this page with vibecoded: a reusable project template, bilingual copy blocks, modular sections, and one source-of-truth data file for fast updates.

Impact

Publishing became much faster, project storytelling became more consistent, and each project page now looks like a real product case study instead of raw notes.

// Tech Stack

Next.jsTypeScriptBunFrontendDocker

// Architecture

Content and presentation are separated: project data stays typed in one place, while reusable sections render each case study consistently.

Expand architecture details

The architecture is content-first: typed project data drives reusable UI sections, with dynamic routing and shared rendering logic across all case studies.

// Screenshots

Disclaimer: sample visuals may contain anonymized, simulated, or non-production values for presentation purposes.

// Demo

Demo 1