# mikatrow/piqzi architecture

> Architecture diagram of the GitHub repository mikatrow/piqzi, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mikatrow/piqzi
- Repository: https://github.com/mikatrow/piqzi

## Overview

This is a Next.js personal portfolio: a browser request renders profile, skills, listening activity, projects, and social links. Activity retrieves the current Spotify track, falling back to recently played. The README gives only brief identity details; some section implementations were not sampled, so their internal data wiring is not asserted.

Main entry points: [`src/app/page.tsx`](https://github.com/mikatrow/piqzi/blob/main/src/app/page.tsx) (Home page), [`src/app/lib/spotify.ts`](https://github.com/mikatrow/piqzi/blob/main/src/app/lib/spotify.ts) (Spotify client), [`src/app/layout.tsx`](https://github.com/mikatrow/piqzi/blob/main/src/app/layout.tsx) (Root layout), [`src/app/components/Profile.tsx`](https://github.com/mikatrow/piqzi/blob/main/src/app/components/Profile.tsx) (Profile section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Page composition"]
  node_home["Home page<br/>[page.tsx]"]
  node_layout["Root layout<br/>[layout.tsx]"]
end

subgraph group_sections["Portfolio sections"]
  node_profile["Profile section<br/>[Profile.tsx]"]
  node_profiledata["Profile data<br/>[profile.ts]"]
  node_tools["Tools section<br/>[Tools.tsx]"]
  node_activity["Activity section<br/>[Activity.tsx]"]
  node_projects["Projects section<br/>[Projects.tsx]"]
  node_projectdata["Project data<br/>[projects.ts]"]
  node_socials["Social links<br/>[Socials.tsx]"]
  node_socialdata["Social data<br/>[socials.ts]"]
end

subgraph group_activity["Spotify activity"]
  node_spotify["Spotify client<br/>[spotify.ts]"]
  node_token["Token refresh<br/>[spotify.ts]"]
  node_recent["Recent-track lookup<br/>[spotify.ts]"]
end

node_visitor(("Visitor"))
node_accounts["Spotify accounts API"]
node_player["Spotify player API"]
node_recentapi["Spotify recent API"]

node_visitor -->|"requests page"| node_layout
node_layout -->|"renders children"| node_home
node_home -->|"renders"| node_profile
node_home -->|"renders"| node_tools
node_home -->|"renders"| node_activity
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_socials
node_profile -->|"reads"| node_profiledata
node_layout -->|"reads metadata"| node_profiledata
node_projects -->|"reads"| node_projectdata
node_activity -->|"calls nowPlaying"| node_spotify
node_spotify -->|"requests token"| node_token
node_token -->|"refreshes token"| node_accounts
node_spotify -->|"checks playback"| node_player
node_spotify -->|"falls back"| node_recent
node_recent -->|"requests token"| node_token
node_recent -->|"fetches recent track"| node_recentapi

click node_home "https://github.com/mikatrow/piqzi/blob/main/src/app/page.tsx"
click node_layout "https://github.com/mikatrow/piqzi/blob/main/src/app/layout.tsx"
click node_profile "https://github.com/mikatrow/piqzi/blob/main/src/app/components/Profile.tsx"
click node_profiledata "https://github.com/mikatrow/piqzi/blob/main/src/data/profile.ts"
click node_tools "https://github.com/mikatrow/piqzi/blob/main/src/app/components/Tools.tsx"
click node_activity "https://github.com/mikatrow/piqzi/blob/main/src/app/components/Activity.tsx"
click node_projects "https://github.com/mikatrow/piqzi/blob/main/src/app/components/Projects.tsx"
click node_projectdata "https://github.com/mikatrow/piqzi/blob/main/src/data/projects.ts"
click node_socials "https://github.com/mikatrow/piqzi/blob/main/src/app/components/Socials.tsx"
click node_socialdata "https://github.com/mikatrow/piqzi/blob/main/src/data/socials.ts"
click node_spotify "https://github.com/mikatrow/piqzi/blob/main/src/app/lib/spotify.ts"
click node_token "https://github.com/mikatrow/piqzi/blob/main/src/app/lib/spotify.ts"
click node_recent "https://github.com/mikatrow/piqzi/blob/main/src/app/lib/spotify.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_layout toneBlue
class node_profile,node_profiledata,node_tools,node_activity,node_projects,node_projectdata,node_socials,node_socialdata toneAmber
class node_spotify,node_token,node_recent,node_accounts,node_player,node_recentapi toneMint
class node_visitor toneIndigo
```

## Components

### Page composition

- [Home page](https://github.com/mikatrow/piqzi/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Root layout](https://github.com/mikatrow/piqzi/blob/main/src/app/layout.tsx): `src/app/layout.tsx`

### Portfolio sections

- [Profile section](https://github.com/mikatrow/piqzi/blob/main/src/app/components/Profile.tsx): `src/app/components/Profile.tsx`
- [Profile data](https://github.com/mikatrow/piqzi/blob/main/src/data/profile.ts): `src/data/profile.ts`
- [Tools section](https://github.com/mikatrow/piqzi/blob/main/src/app/components/Tools.tsx): `src/app/components/Tools.tsx`
- [Activity section](https://github.com/mikatrow/piqzi/blob/main/src/app/components/Activity.tsx): `src/app/components/Activity.tsx`
- [Projects section](https://github.com/mikatrow/piqzi/blob/main/src/app/components/Projects.tsx): `src/app/components/Projects.tsx`
- [Project data](https://github.com/mikatrow/piqzi/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Social links](https://github.com/mikatrow/piqzi/blob/main/src/app/components/Socials.tsx): `src/app/components/Socials.tsx`
- [Social data](https://github.com/mikatrow/piqzi/blob/main/src/data/socials.ts): `src/data/socials.ts`

### Spotify activity

- [Spotify client](https://github.com/mikatrow/piqzi/blob/main/src/app/lib/spotify.ts): `src/app/lib/spotify.ts`
- [Token refresh](https://github.com/mikatrow/piqzi/blob/main/src/app/lib/spotify.ts): `src/app/lib/spotify.ts`
- [Recent-track lookup](https://github.com/mikatrow/piqzi/blob/main/src/app/lib/spotify.ts): `src/app/lib/spotify.ts`

### Other components

- **Visitor**
- **Spotify accounts API**
- **Spotify player API**
- **Spotify recent API**

## Connections

- Visitor → Root layout: requests page
- Root layout → Home page: renders children
- Home page → Profile section: renders
- Home page → Tools section: renders
- Home page → Activity section: renders
- Home page → Projects section: renders
- Home page → Social links: renders
- Profile section → Profile data: reads
- Root layout → Profile data: reads metadata
- Projects section → Project data: reads
- Activity section → Spotify client: calls nowPlaying
- Spotify client → Token refresh: requests token
- Token refresh → Spotify accounts API: refreshes token
- Spotify client → Spotify player API: checks playback
- Spotify client → Recent-track lookup: falls back
- Recent-track lookup → Token refresh: requests token
- Recent-track lookup → Spotify recent API: fetches recent track