Technology Stack
Relevant source files
The following files were used as context for generating this wiki page:
The PCSTYLE portfolio is a modern, cyberpunk-themed web application built on a full-stack TypeScript architecture. It leverages a high-performance frontend coupled with an Edge-runtime backend and integrated AI-driven CLI tools for project management. The stack is designed for low latency, real-time data fetching (WakaTime and GitHub), and high visual fidelity using utility-first CSS and motion libraries.
Sources: package.json, README.md, api/index.ts:18
Frontend Architecture
The frontend is a Single Page Application (SPA) powered by React 19 and Vite. It utilizes TypeScript for type safety and Tailwind CSS for styling, adhering to a "cyberpunk" aesthetic with custom neon palettes and monospace fonts.
Core UI Frameworks
| Technology | Usage | Source |
|---|---|---|
| React 19 | Core UI library for component-based architecture | package.json:14 |
| Vite | Build tool and development server | package.json:24 |
| Tailwind CSS | Utility-first styling framework | index.html:36, package.json |
| Framer Motion | Declarative animations and transition effects | package.json:12 |
| Lucide React | Icon suite for UI elements | package.json:14 |
| React Router | Client-side routing for multi-page navigation | package.json:17 |
UI Layout and Styling
The application uses a custom styling configuration defined in the root HTML, implementing a global dark theme with a JetBrains Mono font stack. The scrollbar and cursor are customized to match the terminal-like aesthetic.
Sources: index.html:37-70
The diagram above shows the relationship between the core frontend libraries and the application structure.
Sources: package.json, pages/Projects.tsx
Backend and API Layer
The backend is implemented as an API using Hono, a lightweight web framework, deployed on the Vercel Edge Runtime. This ensures low latency by running code geographically close to users.
API Capabilities
The API acts as a proxy and aggregator for external data sources, specifically WakaTime and GitHub, to provide live coding statistics and repository information.
| Endpoint | Description | Cache TTL |
|---|---|---|
/api/projects | Returns the list of portfolio projects | 1 hour |
/api/wakatime/summary | Aggregates last 7 days of coding activity | 1 minute |
/api/github/stats | Fetches repo counts, stars, and last commits | 5 minutes |
/api/health | System status and environment validation | N/A |
Sources: api/index.ts:114-121, api/index.ts:145-151, api/index.ts:269-280
Real-time Data Flow
The API utilizes an in-memory cache and an "inflight" request tracker to prevent redundant upstream calls to external APIs.
The sequence diagram illustrates the caching logic implemented in the Edge API layer.
Sources: api/index.ts:46-80
Project Automation (CLI & AI)
A dedicated Command Line Interface (CLI) is used to manage the portfolio's project data. This tool integrates Google Gemini AI to automatically analyze local project directories and generate metadata.
Automation Stack
- Bun: Used as the runtime for the projects-cli.
- Google Generative AI (Gemini 1.5 Flash): Analyzes project structure,
package.json, and source code to infer tech stacks and descriptions. - Inquirer: Provides an interactive terminal interface for editing AI-generated metadata.
- Glob: Used for project file discovery and context building.
Sources: package.json:10, projects-cli/src/lib/gemini.ts:160-170, projects-cli/src/commands/add.ts:31-45
AI Context Generation
The CLI builds a project "signal" summary to provide Gemini with relevant context without exceeding token limits. It gathers:
- File tree samples and top extensions.
- JavaScript dependencies from
package.json. - Rust dependencies from
Cargo.toml. - Python dependencies from
requirements.txt. - Git remote origins.
Sources: projects-cli/src/lib/gemini.ts:125-220
Data Management and Schemas
Project information is stored in a structured JSON format, categorized by a canonical stack configuration to ensure consistency across the UI.
Stack Canonicalization
The system uses a stack-canonical.json file to map various technology aliases (e.g., "ReactJS", "Nextjs") to a single canonical label (e.g., "React", "Next.js"). This facilitates efficient filtering on the Projects page.
Sources: data/projects/stack-canonical.json, projects-cli/src/lib/stack.ts:51-80
Project Schema
Each project entry follows a strict interface defined in the system types:
export interface Project {
id: string
name: string
desc: string
stack: string[]
link?: string
github?: string
status: ProjectStatus // 'active' | 'maintenance' | etc.
icon: string
createdAt: string
updatedAt: string
}
Sources: lib/types.ts:3-19
Summary
The PCSTYLE technology stack represents a highly optimized, TypeScript-driven ecosystem. By combining React 19 for the frontend, Hono for the Edge API, and Google Gemini for data automation, the project achieves a balance between high-performance user experience and low-overhead content management. The integration of live WakaTime and GitHub metrics further enhances the "living portfolio" concept, providing real-time evidence of technical activity.
Sources: README.md, api/index.ts:18, projects-cli/src/lib/gemini.ts:165