Installation & Development

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• projects-cli/src/index.ts
• projects-cli/src/commands/add.ts
• projects-cli/src/commands/update.ts
• projects-cli/src/lib/gemini.ts
• api/index.ts
• README.md

The pcstyledev project is a cyberpunk-themed digital portfolio and management system. It integrates a React-based frontend with a Hono-powered API running on the Vercel Edge Runtime. A core component of the development workflow is the projects-cli, a command-line interface designed to automate the management, analysis, and synchronization of portfolio projects using AI-driven metadata extraction.

Sources: package.json:1-26, README.md:1-12, projects-cli/src/index.ts:1-55

Development Environment Setup

The project utilizes bun as the primary runtime and package manager for development tasks. The frontend is built using Vite and TypeScript, while the backend API leverages the Hono framework for edge-compatible routing.

Prerequisites and Dependencies

Essential project dependencies include:

• Frameworks: React 19, Hono 4
• Styling: Tailwind CSS
• Animation: Framer Motion 12
• Icons: Lucide React
• Runtime: Bun or Node.js (with Vite)

Sources: package.json:11-23, index.html:1-76

Available Scripts

Developers can use the following scripts defined in the root package.json:

Script	Command	Description
dev	vite	Starts the local development server.
build	vite build	Compiles the production-ready frontend bundle.
preview	vite preview	Locally previews the production build.
projects	bun run projects-cli/src/index.ts	Executes the project management CLI.

Sources: package.json:6-10

Project Management CLI

The projects-cli is the primary tool for updating the portfolio's project list. It features an automated analysis pipeline powered by the Gemini AI model to extract metadata from local directories.

CLI Architecture & Commands

The CLI is structured into several commands for managing the project lifecycle.

Command	Usage	Description
add	add <dirname>	Analyzes a directory and adds it to the portfolio.
ls	ls [-s status]	Lists projects, optionally filtered by status.
update	update <name> [-a]	Updates project fields (supports -a for AI auto-update).
delete	delete <name>	Removes a project from the system.
normalize	normalize [-f]	Maps project stack labels to canonical names.

Sources: projects-cli/src/index.ts:12-55, projects-cli/src/commands/add.ts:13-118

AI-Driven Metadata Extraction

The add and update --auto commands utilize the Gemini API to analyze source code and configuration files.

1. File Gathering: The system searches for priority files (e.g., package.json, README.md, Cargo.toml) and secondary source files to build a context.
2. Context Building: It summarizes file trees, counts extensions, and extracts dependency hints (e.g., detecting "React" from package.json).
3. Gemini Analysis: Sends the context to gemini-2.5-flash to generate a structured ProjFile object.

API Development

The API is located in the api/ directory and is designed to run on the Vercel Edge Runtime.

Edge Runtime Configuration

The API explicitly defines the edge runtime and handles environment variables for external integrations like WakaTime and GitHub.

// api/index.ts
export const config = { runtime: 'edge' }

const requiredEnvVars = ['WAKATIME_API_KEY', 'GITHUB_TOKEN', 'GITHUB_USERNAME'] as const

Sources: api/index.ts:17-20

Internal Data Flow

The API serves as a proxy and aggregator for project data and external statistics.

Portfolio Data Schema

Projects are defined by a specific structure within data/projects/projects.json.

Field	Type	Description
id	string	Unique slug (lowercase, hyphens).
name	string	Display name of the project.
desc	string	One sentence description.
stack	string[]	Array of technologies (e.g., "React", "TypeScript").
status	string	One of: active, maintenance, experimental, prototype, disabled.
icon	string	Lucide icon name.
createdAt	string	ISO timestamp of project addition.

Sources: lib/types.ts:3-19, data/projects/projects.json:1-240

Summary

The development of pcstyledev involves a split between high-performance frontend components and a robust CLI for project synchronization. By utilizing Bun for tooling and Gemini for automated project analysis, the system maintains a low-friction update cycle for managing a diverse portfolio of technical artifacts.

Sources: README.md:1-12, package.json:1-10