Identity Page
Relevant source files
The following files were used as context for generating this wiki page:
The Identity Page serves as the primary biographical and professional profile section within the PCSTYLE portfolio. It provides a high-level overview of the developer's background, current academic status, and core engineering philosophy. The page integrates interactive elements, such as a "decryption" mechanic for contact information, and embeds real-time coding statistics via the WakaTime integration.
In the broader context of the application, the Identity page is one of the four main navigation routes accessible via the global navigation bar defined in App.tsx.
Sources: pages/Identity.tsx:1-100, App.tsx:55-75
Component Architecture
The Identity page is implemented as a functional React component that utilizes local state and external UI components to present personal data. It is structured into a two-column layout on larger screens: the left column contains biographical text and interactive actions, while the right column houses visual profile elements.
Core UI Components
| Component | Description | Source |
|---|---|---|
Identity | The main page container and layout definition. | pages/Identity.tsx:6 |
WakaTimeSummaryCard | A summary view of coding activity from the last 7 days. | components/ui/WakaTimeSummaryCard.tsx:16 |
Unlock / Lock | Lucide-react icons indicating the state of contact information. | pages/Identity.tsx:2 |
Github | Icon linking to the developer's public repositories. | pages/Identity.tsx:2 |
Sources: pages/Identity.tsx:1-103, components/ui/WakaTimeSummaryCard.tsx:16-95
Identity Logic and Interaction
The Identity page features a thematic "decryption" sequence for the developer's email address, maintaining the "cyberpunk" aesthetic found throughout the project.
Contact Decryption Sequence
The decryption process is managed by the handleDecrypt function. When triggered, it initializes a character scrambling animation that gradually reveals the plain-text email address.
Sources: pages/Identity.tsx:10-30
Profile Information
The page exposes the following biographical details:
- Name/Handle: PCStyle (Adam Krupa).
- Academic Status: First-year A.I. student at Politechnika Częstochowska.
- Location: Częstochowa, PL.
- Engineering Focus: High-fidelity tools, procedural generation, aesthetic performance, and privacy-first engineering.
Sources: pages/Identity.tsx:45-55, pages/Identity.tsx:88
Data Integration: WakaTime Statistics
The Identity page utilizes the WakaTimeSummaryCard to display live coding data. This data is fetched from the system's backend API, which interacts with the WakaTime API.
Statistics Data Flow
The data flow involves the frontend component requesting a summary from the Hono-based API, which processes raw WakaTime summaries for the last 7 days.
Statistical Fields
The statistics displayed are defined by the WakaTimeSummary interface:
| Field | Type | Description |
|---|---|---|
totalSeconds | number | Total time spent coding in the last 7 days. |
dailyAverage | number | Average coding time per day. |
languages | WakaTimeLanguage[] | List of top languages with percentage and total time. |
bestDay | object | The date and duration of the highest activity day. |
Sources: lib/types.ts:38-48, components/ui/WakaTimeSummaryCard.tsx:43-85
Thematic Integration
The Identity page shares aesthetic and functional traits with other system modules to ensure a cohesive user experience:
- Terminal Linkage: The student identity mentioned on this page is also represented as a visual component (
StudentIDCard) within the Terminal module, accessible via theid_cardcommand. - Global Navigation: The page is registered in the main
HashRouterwithinApp.tsxand triggers the "ACCESSING_IDENTITY" notification upon entry. - Styling: Utilizes Tailwind CSS for layout and Framer Motion for the
fadeInentry animation.
Sources: pages/Terminal.tsx:94-131, App.tsx:73, pages/Identity.tsx:37
Summary
The Identity Page provides a centralized location for the developer's personal and professional identity. By combining static biographical data with interactive decryption elements and real-time coding metrics, it bridges the gap between a traditional "About Me" page and a functional system dashboard. It relies on the project's custom API for data fetching and adheres to the overarching cyberpunk visual design.