Projects Interface
Relevant source files
The following files were used as context for generating this wiki page:
The Projects Interface serves as the primary showcase for "artifact_nodes" within the pcstyledev portfolio. It is a highly interactive, filtered, and sorted gallery designed to present software projects with a cyberpunk aesthetic. The system integrates static project data with live metrics and sophisticated filtering capabilities to allow users to explore the developer's body of work.
The interface is built using React and utilizes a centralized JSON data store for project metadata, supported by a specialized TypeScript type system. It features real-time search, multi-category filtering, and a visual "bit matrix" for displaying project-specific WakaTime metrics.
Architecture and Data Flow
The Projects Interface follows a modular component architecture where state is managed at the page level and passed down to specialized UI components.
The diagram above illustrates the data flow from the static JSON and API layers through the filtering logic to the UI components.
Sources: pages/Projects.tsx:1-50, api/index.ts:125-145, data/projects/projects.json
Data Models
Projects are defined by a strict interface that includes metadata for categorization and external links.
| Field | Type | Description |
|---|---|---|
id | string | Unique slug for the project. |
name | string | Display name. |
desc | string | One-sentence description. |
stack | string[] | Array of technologies used. |
status | ProjectStatus | One of: active, maintenance, experimental, prototype, disabled. |
pinned | boolean | If true, the project is prioritized in the UI. |
icon | string | Name of the Lucide icon to display. |
Sources: lib/types.ts:3-23
Component Breakdown
ProjectCard
The ProjectCard is the primary visual unit for each project. It includes a 3D hover effect using perspective transforms and handles audio feedback via a custom Synth utility.
- Logic: It detects its own mouse movement to calculate rotation angles for a "3D tilt" effect.
- Disabled State: Projects with a
disabledstatus are rendered with reduced opacity, grayscale filters, and locked interaction. - Actions: Provides links to "access" (live site) and "source" (GitHub), or triggers a modal for additional data.
Sources: components/ui/ProjectCard.tsx:24-90
ProjectMatrix (Bit Matrix)
This component provides a technical visualization of coding activity per project, sourced from WakaTime data.
The ProjectMatrix visualizes project "load values" by mapping WakaTime percentage data to a grid of animated bits.
Sources: components/ui/ProjectMatrix.tsx:7-60
Filtering and Search Logic
The Projects page implements a complex filtering system using React's useMemo to ensure performance.
- Search: Performs a case-insensitive search across project names, descriptions, and technology stacks.
- Stack Filter: Multi-select filtering based on technologies defined in
stack-canonical.json. - Status Filter: Filters projects by their lifecycle stage (e.g., active, experimental).
- URL Synchronization: Filter and search states are synchronized with the browser's URL using
useSearchParams, allowing for deep linking.
Sources: pages/Projects.tsx:55-150, pages/Projects.tsx:192-210
API Implementation
The interface is supported by a Hono-based API deployed on Edge Runtime.
| Endpoint | Method | Description |
|---|---|---|
/api/projects | GET | Returns the full list of project artifacts. |
/api/projects/:id | GET | Returns metadata for a specific project. |
/api/projects/meta | GET | Returns project count and the lastUpdated timestamp. |
The API includes a global logger and CORS middleware to facilitate secure cross-origin requests.
Sources: api/index.ts:125-145, api/index.ts:40-60
Implementation Details
Sorting Algorithm
Projects are sorted based on a priority system defined in the displayProjects memo:
- Featured/Pinned: Pinned projects are moved to the top.
- Recency: Projects are then sorted by their
updatedAttimestamp. - Status Order: Manual sorting follows the sequence:
active,experimental,maintenance,prototype,disabled.
Sources: pages/Projects.tsx:156-180
Visual Effects
The interface utilizes framer-motion for animations and a custom "Scanline" effect in the ProjectMatrix. The theme relies heavily on a neon magenta (#ff00ff) accent color for interactive elements and status indicators.
Sources: components/ui/ProjectMatrix.tsx:32-37, components/ui/ProjectCard.tsx:75-80
Conclusion
The Projects Interface is a sophisticated frontend module that combines static data management with dynamic filtering and external API integration. By utilizing a "bit matrix" for metrics and a 3D-tilting card system, it maintains a cohesive cyberpunk aesthetic while providing functional data exploration for the user's software portfolio.