# charusui/retro_portfolio architecture

> Architecture diagram of the GitHub repository charusui/retro_portfolio, 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/charusui/retro_portfolio
- Repository: https://github.com/charusui/retro_portfolio

## Overview

This is a static personal developer portfolio. Visitors browse the home, biography, project catalog, Seguri case study, and contact pages; the catalog supports client-side search and category filtering, while the contact form demonstrates local validation and confirmation rather than sending a message to a backend. The README documents the pages’ major content, including credentials and Seguri’s processing flow. The sampled JavaScript confirms the interactive behavior; unsampled page markup and styling details are represented only at the documented level.

Main entry points: [`css/style.css`](https://github.com/charusui/retro_portfolio/blob/main/css/style.css) (Design system), [`about.html`](https://github.com/charusui/retro_portfolio/blob/main/about.html) (About and credentials), [`projects.html`](https://github.com/charusui/retro_portfolio/blob/main/projects.html) (Project catalog), [`contact.html`](https://github.com/charusui/retro_portfolio/blob/main/contact.html) (Contact page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Portfolio pages"]
  node_home["Home<br/>[index.html]"]
  node_about["About and credentials<br/>[about.html]"]
  node_projects["Project catalog<br/>[projects.html]"]
  node_case["Seguri case study<br/>[case-study.html]"]
  node_contact["Contact page<br/>[contact.html]"]
end

subgraph group_interaction["Browser interactions"]
  node_scripts["Portfolio interactions<br/>[main.js]"]
end

subgraph group_resources["Media and styling"]
  node_certificates["Certificate PDFs"]
  node_resume["Résumé PDF"]
  node_project_art["Project artwork"]
  node_styles["Design system<br/>[style.css]"]
end

node_visitor(("Portfolio visitor"))

node_visitor -->|"browses"| node_home
node_visitor -->|"browses"| node_about
node_visitor -->|"browses"| node_projects
node_visitor -->|"browses"| node_case
node_visitor -->|"browses"| node_contact
node_projects -->|"loads interactions"| node_scripts
node_scripts -->|"filters and searches"| node_projects
node_contact -->|"loads interactions"| node_scripts
node_scripts -->|"validates and confirms"| node_contact
node_about -->|"links credentials"| node_certificates
node_about -->|"offers download"| node_resume
node_case -->|"presents case visuals"| node_project_art
node_home -->|"uses styles"| node_styles
node_about -->|"uses styles"| node_styles
node_projects -->|"uses styles"| node_styles
node_case -->|"uses styles"| node_styles
node_contact -->|"uses styles"| node_styles

click node_home "https://github.com/charusui/retro_portfolio/blob/main/index.html"
click node_about "https://github.com/charusui/retro_portfolio/blob/main/about.html"
click node_projects "https://github.com/charusui/retro_portfolio/blob/main/projects.html"
click node_case "https://github.com/charusui/retro_portfolio/blob/main/case-study.html"
click node_contact "https://github.com/charusui/retro_portfolio/blob/main/contact.html"
click node_scripts "https://github.com/charusui/retro_portfolio/blob/main/js/main.js"
click node_certificates "https://github.com/charusui/retro_portfolio/tree/main/assets/certificates"
click node_resume "https://github.com/charusui/retro_portfolio/blob/main/assets/charles-viray-resume.pdf"
click node_project_art "https://github.com/charusui/retro_portfolio/tree/main/images/projects"
click node_styles "https://github.com/charusui/retro_portfolio/blob/main/css/style.css"

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_about,node_projects,node_case,node_contact toneBlue
class node_scripts toneAmber
class node_certificates,node_resume,node_project_art,node_styles toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio pages

- [Home](https://github.com/charusui/retro_portfolio/blob/main/index.html): `index.html`
- [About and credentials](https://github.com/charusui/retro_portfolio/blob/main/about.html): `about.html`
- [Project catalog](https://github.com/charusui/retro_portfolio/blob/main/projects.html): `projects.html`
- [Seguri case study](https://github.com/charusui/retro_portfolio/blob/main/case-study.html): `case-study.html`
- [Contact page](https://github.com/charusui/retro_portfolio/blob/main/contact.html): `contact.html`

### Browser interactions

- [Portfolio interactions](https://github.com/charusui/retro_portfolio/blob/main/js/main.js): `js/main.js`

### Media and styling

- [Certificate PDFs](https://github.com/charusui/retro_portfolio/tree/main/assets/certificates): `assets/certificates`
- [Résumé PDF](https://github.com/charusui/retro_portfolio/blob/main/assets/charles-viray-resume.pdf): `assets/charles-viray-resume.pdf`
- [Project artwork](https://github.com/charusui/retro_portfolio/tree/main/images/projects): `images/projects`
- [Design system](https://github.com/charusui/retro_portfolio/blob/main/css/style.css): `css/style.css`

### Other components

- **Portfolio visitor**

## Connections

- Portfolio visitor → Home: browses
- Portfolio visitor → About and credentials: browses
- Portfolio visitor → Project catalog: browses
- Portfolio visitor → Seguri case study: browses
- Portfolio visitor → Contact page: browses
- Project catalog → Portfolio interactions: loads interactions
- Portfolio interactions → Project catalog: filters and searches
- Contact page → Portfolio interactions: loads interactions
- Portfolio interactions → Contact page: validates and confirms
- About and credentials → Certificate PDFs: links credentials
- About and credentials → Résumé PDF: offers download
- Seguri case study → Project artwork: presents case visuals
- Home → Design system: uses styles
- About and credentials → Design system: uses styles
- Project catalog → Design system: uses styles
- Seguri case study → Design system: uses styles
- Contact page → Design system: uses styles