# zakymaizi2031/portofolio architecture

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

## Overview

This React portfolio lets visitors explore a profile, edit semester grades and skill percentages, and build a printable CV. App.jsx owns the shared state, calculates cumulative GPA and skill summaries, and persists editable data in browser localStorage. Home presents the profile and project showcase; the calculator and CV builder update shared state. Source excerpts support these main interactions, but README describes only a Vite template, so product capabilities are inferred from the sampled components.

Main entry points: [`src/App.jsx`](https://github.com/zakymaizi2031/portofolio/blob/main/src/App.jsx) (App State & Calculations), [`src/components/Navbar.jsx`](https://github.com/zakymaizi2031/portofolio/blob/main/src/components/Navbar.jsx) (Tab Navigation), [`src/components/CvBuilder.jsx`](https://github.com/zakymaizi2031/portofolio/blob/main/src/components/CvBuilder.jsx) (CV Editor & Preview), [`src/main.jsx`](https://github.com/zakymaizi2031/portofolio/blob/main/src/main.jsx) (React Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_appstate["App State &amp; Calculations<br/>[App.jsx]"]
  node_storage[("Browser Local Storage")]
  node_navbar["Tab Navigation<br/>[Navbar.jsx]"]
end

subgraph group_profile["Portfolio Profile"]
  node_home["Profile &amp; Projects<br/>[Home.jsx]"]
end

subgraph group_grades["Academic Calculator"]
  node_calculator["Grade &amp; Skills Editor"]
end

subgraph group_cv["CV Builder"]
  node_cvbuilder["CV Editor &amp; Preview<br/>[CvBuilder.jsx]"]
end

node_visitor(("Visitor"))
node_print["Browser Print"]
node_github["GitHub"]

node_visitor -->|"opens app"| node_entry
node_entry -->|"renders"| node_appstate
node_appstate -->|"reads and writes"| node_storage
node_appstate -->|"renders"| node_navbar
node_appstate -->|"renders with profile data"| node_home
node_appstate -->|"renders with grade state"| node_calculator
node_appstate -->|"renders with CV data"| node_cvbuilder
node_navbar -->|"selects tab"| node_appstate
node_home -->|"selects tab"| node_appstate
node_calculator -->|"updates grades and skills"| node_appstate
node_cvbuilder -->|"updates CV data"| node_appstate
node_cvbuilder -->|"opens print dialog"| node_print
node_navbar -.->|"links to"| node_github

click node_entry "https://github.com/zakymaizi2031/portofolio/blob/main/src/main.jsx"
click node_appstate "https://github.com/zakymaizi2031/portofolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/zakymaizi2031/portofolio/blob/main/src/components/Navbar.jsx"
click node_home "https://github.com/zakymaizi2031/portofolio/blob/main/src/components/Home.jsx"
click node_calculator "https://github.com/zakymaizi2031/portofolio/blob/main/src/components/GradeCalculator.jsx"
click node_cvbuilder "https://github.com/zakymaizi2031/portofolio/blob/main/src/components/CvBuilder.jsx"

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_appstate,node_storage,node_navbar,node_print toneBlue
class node_home toneAmber
class node_calculator toneMint
class node_cvbuilder toneRose
class node_visitor,node_github toneIndigo
```

## Components

### Application Shell

- [React Entry](https://github.com/zakymaizi2031/portofolio/blob/main/src/main.jsx): `src/main.jsx`
- [App State & Calculations](https://github.com/zakymaizi2031/portofolio/blob/main/src/App.jsx): `src/App.jsx`
- **Browser Local Storage**
- [Tab Navigation](https://github.com/zakymaizi2031/portofolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`

### Portfolio Profile

- [Profile & Projects](https://github.com/zakymaizi2031/portofolio/blob/main/src/components/Home.jsx): `src/components/Home.jsx`

### Academic Calculator

- [Grade & Skills Editor](https://github.com/zakymaizi2031/portofolio/blob/main/src/components/GradeCalculator.jsx): `src/components/GradeCalculator.jsx`

### CV Builder

- [CV Editor & Preview](https://github.com/zakymaizi2031/portofolio/blob/main/src/components/CvBuilder.jsx): `src/components/CvBuilder.jsx`

### Other components

- **Visitor**
- **Browser Print**
- **GitHub**

## Connections

- Visitor → React Entry: opens app
- React Entry → App State & Calculations: renders
- App State & Calculations → Browser Local Storage: reads and writes
- App State & Calculations → Tab Navigation: renders
- App State & Calculations → Profile & Projects: renders with profile data
- App State & Calculations → Grade & Skills Editor: renders with grade state
- App State & Calculations → CV Editor & Preview: renders with CV data
- Tab Navigation → App State & Calculations: selects tab
- Profile & Projects → App State & Calculations: selects tab
- Grade & Skills Editor → App State & Calculations: updates grades and skills
- CV Editor & Preview → App State & Calculations: updates CV data
- CV Editor & Preview → Browser Print: opens print dialog
- Tab Navigation → GitHub: links to