# fmcambim/changelog architecture

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

- Interactive diagram: https://gitdiagram.com/fmcambim/changelog
- Repository: https://github.com/fmcambim/changelog

## Overview

This is a personal portfolio site. Visitors enter through the React Router route, then use the shared layout to open Projects, About, or Tech Stack panels; project selection reveals previews and links, while the About panel exposes career details and a CV. The layout also coordinates decorative Three.js backgrounds and panel effects. The README documents the sections, and sampled source confirms routing, project data/rendering, and visual components; unsampled page content is represented only where documented.

Main entry points: [`src/components/Layout.tsx`](https://github.com/fmcambim/changelog/blob/main/src/components/Layout.tsx) (Portfolio layout), [`src/router.tsx`](https://github.com/fmcambim/changelog/blob/main/src/router.tsx) (Route map), [`src/components/ProjectsPanel.tsx`](https://github.com/fmcambim/changelog/blob/main/src/components/ProjectsPanel.tsx) (Projects panel), [`src/main.tsx`](https://github.com/fmcambim/changelog/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App router host<br/>[App.tsx]"]
  node_routes["Route map<br/>[router.tsx]"]
  node_layout["Portfolio layout<br/>[Layout.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_home["Home page<br/>[Home.tsx]"]
  node_error["Error page<br/>[ErrorPage.tsx]"]
  node_projects_panel["Projects panel<br/>[ProjectsPanel.tsx]"]
  node_projects_data["Project records<br/>[projects.ts]"]
  node_project_types["Content types<br/>[index.ts]"]
  node_about["About section<br/>[Layout.tsx]"]
  node_cv["CV document<br/>[cv.pdf]"]
  node_tech["Tech Stack section<br/>[Layout.tsx]"]
  node_tech_data["Technology categories<br/>[techStack.ts]"]
end

subgraph group_visuals["Visual effects"]
  node_background["Animated background"]
  node_panel_canvas["Panel mesh<br/>[PanelCanvas.tsx]"]
end

node_visitor(("Visitor"))
node_browser(("Browser"))
node_portfolio_sites(("Linked project sites"))

node_visitor -->|"visits"| node_browser
node_browser -->|"loads"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"provides router"| node_routes
node_routes -->|"selects route"| node_layout
node_routes -->|"renders index"| node_home
node_routes -->|"renders on error"| node_error
node_layout -->|"opens Projects"| node_projects_panel
node_layout -->|"shows About"| node_about
node_layout -->|"shows Tech Stack"| node_tech
node_layout -->|"renders"| node_background
node_layout -->|"renders when active"| node_panel_canvas
node_projects_panel -->|"reads"| node_projects_data
node_projects_panel -->|"uses types"| node_project_types
node_tech -->|"reads"| node_tech_data
node_about -->|"links to"| node_cv
node_projects_panel -.->|"links to"| node_portfolio_sites

click node_entry "https://github.com/fmcambim/changelog/blob/main/src/main.tsx"
click node_app "https://github.com/fmcambim/changelog/blob/main/src/App.tsx"
click node_routes "https://github.com/fmcambim/changelog/blob/main/src/router.tsx"
click node_layout "https://github.com/fmcambim/changelog/blob/main/src/components/Layout.tsx"
click node_home "https://github.com/fmcambim/changelog/blob/main/src/pages/Home.tsx"
click node_error "https://github.com/fmcambim/changelog/blob/main/src/pages/ErrorPage.tsx"
click node_projects_panel "https://github.com/fmcambim/changelog/blob/main/src/components/ProjectsPanel.tsx"
click node_projects_data "https://github.com/fmcambim/changelog/blob/main/src/data/projects.ts"
click node_project_types "https://github.com/fmcambim/changelog/blob/main/src/types/index.ts"
click node_about "https://github.com/fmcambim/changelog/blob/main/src/components/Layout.tsx"
click node_cv "https://github.com/fmcambim/changelog/blob/main/public/cv.pdf"
click node_tech "https://github.com/fmcambim/changelog/blob/main/src/components/Layout.tsx"
click node_tech_data "https://github.com/fmcambim/changelog/blob/main/src/data/techStack.ts"
click node_background "https://github.com/fmcambim/changelog/blob/main/src/components/ThreeBackground.tsx"
click node_panel_canvas "https://github.com/fmcambim/changelog/blob/main/src/components/PanelCanvas.tsx"

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_entry,node_app,node_routes,node_layout,node_browser toneBlue
class node_home,node_error,node_projects_panel,node_projects_data,node_project_types,node_about,node_cv,node_tech,node_tech_data toneAmber
class node_background,node_panel_canvas toneMint
class node_visitor,node_portfolio_sites toneIndigo
```

## Components

### App shell

- [React entry](https://github.com/fmcambim/changelog/blob/main/src/main.tsx): `src/main.tsx`
- [App router host](https://github.com/fmcambim/changelog/blob/main/src/App.tsx): `src/App.tsx`
- [Route map](https://github.com/fmcambim/changelog/blob/main/src/router.tsx): `src/router.tsx`
- [Portfolio layout](https://github.com/fmcambim/changelog/blob/main/src/components/Layout.tsx): `src/components/Layout.tsx`

### Portfolio content

- [Home page](https://github.com/fmcambim/changelog/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Error page](https://github.com/fmcambim/changelog/blob/main/src/pages/ErrorPage.tsx): `src/pages/ErrorPage.tsx`
- [Projects panel](https://github.com/fmcambim/changelog/blob/main/src/components/ProjectsPanel.tsx): `src/components/ProjectsPanel.tsx`
- [Project records](https://github.com/fmcambim/changelog/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Content types](https://github.com/fmcambim/changelog/blob/main/src/types/index.ts): `src/types/index.ts`
- [About section](https://github.com/fmcambim/changelog/blob/main/src/components/Layout.tsx): `src/components/Layout.tsx`
- [CV document](https://github.com/fmcambim/changelog/blob/main/public/cv.pdf): `public/cv.pdf`
- [Tech Stack section](https://github.com/fmcambim/changelog/blob/main/src/components/Layout.tsx): `src/components/Layout.tsx`
- [Technology categories](https://github.com/fmcambim/changelog/blob/main/src/data/techStack.ts): `src/data/techStack.ts`

### Visual effects

- [Animated background](https://github.com/fmcambim/changelog/blob/main/src/components/ThreeBackground.tsx): `src/components/ThreeBackground.tsx`
- [Panel mesh](https://github.com/fmcambim/changelog/blob/main/src/components/PanelCanvas.tsx): `src/components/PanelCanvas.tsx`

### Other components

- **Visitor**
- **Browser**
- **Linked project sites**

## Connections

- Visitor → Browser: visits
- Browser → React entry: loads
- React entry → App router host: renders
- App router host → Route map: provides router
- Route map → Portfolio layout: selects route
- Route map → Home page: renders index
- Route map → Error page: renders on error
- Portfolio layout → Projects panel: opens Projects
- Portfolio layout → About section: shows About
- Portfolio layout → Tech Stack section: shows Tech Stack
- Portfolio layout → Animated background: renders
- Portfolio layout → Panel mesh: renders when active
- Projects panel → Project records: reads
- Projects panel → Content types: uses types
- Tech Stack section → Technology categories: reads
- About section → CV document: links to
- Projects panel → Linked project sites: links to