Introduction & Scope
Relevant source files
The following files were used as context for generating this wiki page:
The pcstyledev project is a personal portfolio system designed to showcase technical projects, real-time coding statistics, and developer identity through a cyberpunk-themed interface. It comprises a React-based frontend, a Hono-powered API deployed on Vercel Edge Runtime, and a dedicated CLI tool for project management.
The scope of the system includes automated project analysis using AI, live integration with external services like WakaTime and GitHub, and a highly interactive UI featuring audio feedback, a CRT aesthetic, and real-time system notifications.
Sources: README.md, App.tsx:1-50, api/index.ts:1-25
System Architecture
The project follows a decoupled architecture consisting of three primary layers: the Frontend User Interface, the Backend API, and the Projects CLI management tool.
Core Architecture Components
| Component | Technology | Description |
|---|---|---|
| Frontend | React, TypeScript, Vite, Tailwind CSS | High-performance SPA with cyberpunk aesthetics and Framer Motion animations. |
| Backend API | Hono, Vercel Edge Runtime | Lightweight API gateway for fetching projects and external developer metrics. |
| CLI Tool | Bun, Commander, Google Gemini AI | Command-line utility for automated project discovery and metadata generation. |
| Data Layer | JSON Files | Static project definitions and canonical technology stack mappings. |
Sources: package.json:7-25, README.md, projects-cli/src/index.ts:1-15
High-Level Data Flow
The following diagram illustrates how project data and external metrics flow from source to the end-user interface.
The system leverages static JSON for local project data while using Edge functions to proxy and cache dynamic metrics from third-party services.
Sources: api/index.ts:50-150, projects-cli/src/index.ts:15-50
Module Overview
1. Frontend & Routing
The frontend is built as a Single Page Application (SPA) using react-router-dom. It utilizes a centralized Layout component in App.tsx that manages global states such as sound preferences, system notifications, and the "Boot Sequence" animation.
- Key Routes:
/: Displays the Project Artifact Nodes./terminal: Interactive terminal emulator./stats: Aggregated metrics from GitHub and WakaTime./identity: Personal developer information.
Sources: App.tsx:60-110, package.json:15-20
2. Backend API (Edge Runtime)
The backend is a Hono application configured for Vercel's Edge Runtime. It serves as a middle tier to protect API keys (GitHub/WakaTime) and provides optimized endpoints for project retrieval.
- Key Endpoints:
GET /api/projects: Returns the full list of projects.GET /api/wakatime/summary: 7-day coding statistics.GET /api/github/stats: Repository, star, and commit counts.
Sources: api/index.ts:13-20, api/index.ts:133-160
3. Projects CLI
A management tool invoked via bun run projects. It enables the developer to "add" a new project by pointing the CLI to a local directory. The tool uses Google Gemini AI to analyze file trees and source code to automatically generate project metadata (id, stack, description, icon).
- Commands:
add,ls,update,rm,normalize.
Sources: projects-cli/src/index.ts:17-60, package.json:13
Technical Specifications
Data Models
The system relies on strong TypeScript interfaces to ensure consistency across the CLI, API, and Frontend.
| Interface | Purpose | Key Fields |
|---|---|---|
Project | Defines a portfolio entry | id, name, desc, stack, status, pinned |
WakaTimeSummary | Coding activity data | totalSeconds, languages, editors, bestDay |
GitHubStats | Social coding metrics | publicRepos, totalStars, totalCommits |
Sources: lib/types.ts:3-90
Environmental Configuration
The system requires specific environment variables for full functionality in production.
{
"WAKATIME_API_KEY": "Required for stats page",
"GITHUB_TOKEN": "Required for contribution metrics",
"GITHUB_USERNAME": "Target account for stats"
}
Sources: api/index.ts:28-35
Conclusion
The pcstyledev system provides a modern, automated approach to portfolio management. By combining AI-driven project analysis with real-time API integrations and a custom interactive UI, it creates a living technical resume that reflects current coding activity and historical project archives.
Sources: README.md, App.tsx:230-245