Directory Structure
Relevant source files
The following files were used as context for generating this wiki page:
The pcstyledev repository is structured as a full-stack portfolio application that integrates a React frontend, a Hono-based API backend (optimized for Edge runtimes), and a specialized CLI tool for project management. The architecture emphasizes a "cyberpunk" aesthetic with real-time data integration from external sources like WakaTime and GitHub.
The project follows a modular pattern where data is centralized in JSON files, serving both the frontend display and the backend API, while the CLI automates the ingestion of new project data using AI-driven analysis.
Root Directory and Project Configuration
The root directory contains the core configuration files for the development environment and deployment.
package.json: Defines the project dependencies including React 19, Hono, Vite, and Framer Motion. It also specifies scripts for development and the command to run the project CLI.index.html: The entry point for the web application, containing meta tags for Open Graph and the system font (JetBrains Mono) configuration.App.tsx: The main React component that manages global state, routing, and the "cyberpunk" UI wrappers like the CRT overlay and Matrix background.
Sources: package.json:1-30, index.html:1-50, App.tsx:1-50
API Module (api/)
The api/ directory contains the backend logic, implemented using the Hono framework and designed to run on the Vercel Edge Runtime. It acts as a bridge between the static project data and dynamic external metrics.
Architecture and Data Flow
The API provides endpoints for retrieving project metadata and real-time statistics. It implements a caching layer to optimize performance and reduce hits on external APIs.
The API validates environment variables like WAKATIME_API_KEY and GITHUB_TOKEN before processing requests to statistical routes.
Sources: api/index.ts:1-25, api/index.ts:40-70, api/index.ts:110-130
CLI Module (projects-cli/)
The projects-cli/ directory houses a standalone command-line interface built with Bun and Commander. Its primary purpose is to manage the portfolio's project entries.
src/index.ts: The entry point defining commands likeadd,ls,view, andnormalize.src/commands/add.ts: Handles the logic for scanning local directories, using Gemini AI to extract project metadata, and syncing the result to the main database.src/lib/gemini.ts: Contains the logic for building project context and interacting with Google's Generative AI.
Data and Content (data/)
The data/ directory is the single source of truth for the portfolio's content. It is used by the frontend to render the UI and by the API to serve project lists.
Project Schema
Project data is stored in data/projects/projects.json. Each project entry follows a specific structure:
| Field | Type | Description |
|---|---|---|
id | string | Unique slug for the project |
name | string | Display name |
stack | string[] | Array of technology labels |
status | string | Project lifecycle state (e.g., active, experimental) |
icon | string | Lucide-react icon name |
The data/projects/stack-canonical.json file contains a standardized list of technologies to ensure consistency across all entries through aliases and a glossary.
Sources: data/projects/projects.json:1-100, data/projects/stack-canonical.json:1-40
Frontend Components and Pages (pages/, components/)
The application logic is split into visual pages and reusable UI components.
pages/: Contains the main routes:Projects.tsx: Implements the "Artifact Nodes" interface with complex filtering and sorting logic.Terminal.tsx: A virtualized shell environment with a custom file system (~,/etc,/bin).Stats.tsx: Aggregates GitHub and WakaTime metrics into a dashboard.
components/ui/: Contains specialized visual elements likeProjectMatrix,WakaTimeDashboard, andNeuralCursor.
Sources: pages/Projects.tsx:50-150, pages/Terminal.tsx:20-60, components/ui/WakaTimeDashboard.tsx:1-40
Summary of Directory Structure
The repository is organized to separate concerns between the user-facing interface, the data layer, and the developer tooling.
| Path | Primary Function | Key Technology |
|---|---|---|
/api | Serverless backend and external API integration | Hono, Edge Runtime |
/projects-cli | Developer tool for automating project entries | Bun, Gemini AI |
/data | Static database for projects and stack labels | JSON |
/pages | High-level application views and route logic | React, React Router |
/components | Reusable UI elements and "cyberpunk" effects | Framer Motion, Tailwind |
Sources: App.tsx:1-30, package.json:1-20, api/index.ts:1-15