JC_

About This Site

How Jason Chen's portfolio website is built — from raw data to deployed pages.

01

Data Collection

All project data originates from CLAUDE.md files that live inside each of 115+ local project repositories. A custom Claude Code skill (/generate-tech-profile) reads each CLAUDE.md, extracts structured metadata, and outputs bilingual JSON files under tech-profile/. The scan is triggered manually via /scan-projects, which walks ~/project/ and appends new entries to a master projects-list.md index.

02

Data Format

A flat set of bilingual JSON files under tech-profile/:

meta.json

profile summary, years, project count

domains-{en|zh}.json

9 skill domains with proficiency levels

product-groups-{en|zh}.json

23 product groups with project roles

projects/{ID}.json

per-project tags, category, status

tag-index-{en|zh}.json

1,976+ unique technology tags

03

Presentation

Next.js 15 static export deployed to Firebase Hosting. All data loads via static JSON at build time — no server or database. Dark/light mode via Joy UI, language via localStorage.

04

Tech Stack

The tools behind this site.

Next.js 15
TypeScript
Joy UI (MUI)
Firebase Hosting
Claude Code CLI
pnpm

05

SEO & AI Discoverability

Every page exports metadata and OpenGraph tags. Product pages include JSON-LD so search engines and AI crawlers understand context.

/llms.txt · /robots.txt