# hammam36/portofolio-id architecture

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

- Interactive diagram: https://gitdiagram.com/hammam36/portofolio-id
- Repository: https://github.com/hammam36/portofolio-id

## Overview

#### Purpose and Runtime
This is a static personal portfolio/resume SPA built with React and Vite. It presents professional information, projects, writing, awards, skills, and contact content, with English and Indonesian localization. The browser is the primary runtime; no backend, API layer, database, or server-side application is represented.

Entry and build boundaries:
- `src/main.jsx` mounts the React application.
- `src/App.jsx` composes the top-level portfolio experience.
- `vite.config.js` defines the Vite development/build boundary.
- `index.html` is the browser document shell.

#### Application Composition
`App.jsx` is the application orchestrator. It likely owns the page-level layout and composes navigation plus content sections into a single scrolling experience rather than routed pages.

Core UI composition:
- `src/App.jsx`
- `src/components/Sidebar.jsx`
- `src/components/SectionTabs.jsx`

The sidebar and tab controls form the primary navigation/control boundary between the visitor and section content.

#### Content Sections
The portfolio is organized as independently rendered visual sections. Each section owns its presentation CSS and consumes localized content and/or static assets.

Major stages:
- Hero/introduction: `src/sections/Hero.jsx`, `src/sections/Hero.css`
- Career/education timeline: `src/sections/Journey.jsx`, `src/sections/Journey.css`
- Skills and capabilities: `src/sections/Abilities.jsx`, `src/sections/Abilities.css`
- Project portfolio: `src/sections/Projects.jsx`, `src/sections/Projects.css`
- Blog content: `src/sections/Blog.jsx`, `src/sections/Blog.css`
- Awards and certifications: `src/sections/Awards.jsx`, `src/sections/Awards.css`
- Contact presentation: `src/sections/Contact.jsx`, `src/sections/Contact.css`

Control flow is primarily top-down: `main.jsx` → `App.jsx` → navigation/components and section components → localized data/assets.

#### Localization Data Boundary
Localized content is file-based JSON rather than fetched remotely. `src/i18n/index.js` is the localization aggregation/selection boundary; sections should consume translation data through it rather than embedding language-specific copy.

Translation domains align with page sections:
- `src/i18n/hero/en.json`, `src/i18n/hero/id.json`
- `src/i18n/projects/en.json`, `src/i18n/projects/id.json`
- `src/i18n/journey/en.json`, `src/i18n/journey/id.json`
- `src/i18n/blog/en.json`, `src/i18n/blog/id.json`
- `src/i18n/abilities/en.json`, `src/i18n/abilities/id.json`
- `src/i18n/awards/en.json`, `src/i18n/awards/id.json`
- `src/i18n/contact/en.json`, `src/i18n/contact/id.json`

This makes language content a build-time bundled dependency and establishes JSON schemas as an implicit contract with their corresponding sections.

#### Media and Document Presentation
Portfolio media is served as static public content. Project, experience, education, blog, achievement, and certification imagery/documents reside under `public/assets/`; the downloadable résumé is `public/CV_Hammam_Mubarak_Resume.pdf`.

Modal components provide the interaction boundary for rich static content:
- `src/components/ImageModal.jsx`
- `src/components/PdfModal.jsx`

Sections can open these viewers for visual assets or PDF certifications without requiring external document services.

#### Styling and UI Infrastructure
Styling is component/section-scoped through colocated CSS, with global styling in `src/index.css`. Tailwind/PostCSS configuration exists as build styling infrastructure:
- `src/index.css`
- `tailwind.config.js`
- `postcss.config.js`

Reusable icon definitions are centralized in `src/lib/icons.js`, avoiding icon selection logic being duplicated across sections.

#### External Dependencies and Deployment Shape
The repo indicates a client-only Vite deployment: build output can be hosted by any static-file host/CDN. React provides rendering and state behavior; Vite provides local development, HMR, and production bundling. Static PDFs and assets are served directly from the public directory. No external service integrations are evident from the repository tree or README.

Main entry points: [`src/sections/Hero.jsx`](https://github.com/hammam36/portofolio-id/blob/main/src/sections/Hero.jsx) (Portfolio Sections), [`src/App.jsx`](https://github.com/hammam36/portofolio-id/blob/main/src/App.jsx) (Portfolio App), [`vite.config.js`](https://github.com/hammam36/portofolio-id/blob/main/vite.config.js) (Vite Build), [`src/main.jsx`](https://github.com/hammam36/portofolio-id/blob/main/src/main.jsx) (React Mount)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime & Build"]
  node_browser(("Browser<br/>client runtime"))
  node_html["Document Shell<br/>HTML entry<br/>[index.html]"]
  node_vite{{"Vite Build<br/>build tool<br/>[vite.config.js]"}}
  node_main["React Mount<br/>entry module<br/>[main.jsx]"]
  node_static_host["Static Host / CDN<br/>deployment target"]
end

subgraph group_ui["React UI"]
  node_app["Portfolio App<br/>app orchestrator<br/>[App.jsx]"]
  node_navigation["Navigation Controls<br/>UI components<br/>[Sidebar.jsx]"]
  node_sections["Portfolio Sections<br/>section components<br/>[Hero.jsx]"]
  node_modals["Asset Viewers<br/>modal components<br/>[ImageModal.jsx]"]
  node_icons["Icon Library<br/>shared UI library<br/>[icons.js]"]
  node_styles["Styling System<br/>CSS and processing<br/>[index.css]"]
end

subgraph group_content["Localized Content"]
  node_i18n["Localization Selector<br/>i18n aggregation<br/>[index.js]"]
  node_translations["Section Translations<br/>JSON content<br/>[en.json]"]
end

subgraph group_static["Static Media"]
  node_assets["Portfolio Assets<br/>public static files"]
  node_resume["Downloadable Résumé<br/>PDF"]
end

node_browser -->|"loads"| node_html
node_html -->|"starts"| node_main
node_main -->|"mounts"| node_app
node_app -->|"composes"| node_navigation
node_app -->|"renders"| node_sections
node_navigation -->|"selects / navigates"| node_sections
node_sections -->|"reads localized copy"| node_i18n
node_i18n -->|"aggregates"| node_translations
node_sections -->|"opens rich content"| node_modals
node_modals -->|"displays"| node_assets
node_sections -->|"references"| node_assets
node_sections -->|"links"| node_resume
node_app -->|"uses"| node_icons
node_app -->|"styled by"| node_styles
node_vite -->|"bundles"| node_main
node_vite -->|"processes"| node_styles
node_vite -->|"build deploys to"| node_static_host
node_static_host -->|"serves"| node_browser
node_static_host -->|"serves directly"| node_assets
node_static_host -->|"serves directly"| node_resume

click node_html "https://github.com/hammam36/portofolio-id/blob/main/index.html"
click node_vite "https://github.com/hammam36/portofolio-id/blob/main/vite.config.js"
click node_main "https://github.com/hammam36/portofolio-id/blob/main/src/main.jsx"
click node_app "https://github.com/hammam36/portofolio-id/blob/main/src/App.jsx"
click node_navigation "https://github.com/hammam36/portofolio-id/blob/main/src/components/Sidebar.jsx"
click node_sections "https://github.com/hammam36/portofolio-id/blob/main/src/sections/Hero.jsx"
click node_modals "https://github.com/hammam36/portofolio-id/blob/main/src/components/ImageModal.jsx"
click node_icons "https://github.com/hammam36/portofolio-id/blob/main/src/lib/icons.js"
click node_styles "https://github.com/hammam36/portofolio-id/blob/main/src/index.css"
click node_i18n "https://github.com/hammam36/portofolio-id/blob/main/src/i18n/index.js"
click node_translations "https://github.com/hammam36/portofolio-id/blob/main/src/i18n/hero/en.json"
click node_resume "https://github.com/hammam36/portofolio-id/blob/main/public/CV_Hammam_Mubarak_Resume.pdf"

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_browser,node_html,node_vite,node_main,node_static_host toneBlue
class node_app,node_navigation,node_sections,node_modals,node_icons,node_styles toneAmber
class node_i18n,node_translations toneMint
class node_assets,node_resume toneRose
```

## Components

### Runtime & Build

- **Browser**: client runtime
- [Document Shell](https://github.com/hammam36/portofolio-id/blob/main/index.html): HTML entry · `index.html`
- [Vite Build](https://github.com/hammam36/portofolio-id/blob/main/vite.config.js): build tool · `vite.config.js`
- [React Mount](https://github.com/hammam36/portofolio-id/blob/main/src/main.jsx): entry module · `src/main.jsx`
- **Static Host / CDN**: deployment target · Serves the built SPA and public files.

### React UI

- [Portfolio App](https://github.com/hammam36/portofolio-id/blob/main/src/App.jsx): app orchestrator · Composes the single-page scrolling experience. · `src/App.jsx`
- [Navigation Controls](https://github.com/hammam36/portofolio-id/blob/main/src/components/Sidebar.jsx): UI components · `src/components/Sidebar.jsx`
- [Portfolio Sections](https://github.com/hammam36/portofolio-id/blob/main/src/sections/Hero.jsx): section components · Hero, journey, abilities, projects, blog, awards, and contact views. · `src/sections/Hero.jsx`
- [Asset Viewers](https://github.com/hammam36/portofolio-id/blob/main/src/components/ImageModal.jsx): modal components · Image and PDF modal presentation boundary. · `src/components/ImageModal.jsx`
- [Icon Library](https://github.com/hammam36/portofolio-id/blob/main/src/lib/icons.js): shared UI library · `src/lib/icons.js`
- [Styling System](https://github.com/hammam36/portofolio-id/blob/main/src/index.css): CSS and processing · Global CSS plus colocated section styles are processed at build time. · `src/index.css`

### Localized Content

- [Localization Selector](https://github.com/hammam36/portofolio-id/blob/main/src/i18n/index.js): i18n aggregation · Selects bundled English and Indonesian content. · `src/i18n/index.js`
- [Section Translations](https://github.com/hammam36/portofolio-id/blob/main/src/i18n/hero/en.json): JSON content · Per-section English and Indonesian JSON schemas feed matching views. · `src/i18n/hero/en.json`

### Static Media

- **Portfolio Assets**: public static files · Images and documents for projects, career, writing, awards, and certificates.
- [Downloadable Résumé](https://github.com/hammam36/portofolio-id/blob/main/public/CV_Hammam_Mubarak_Resume.pdf): PDF · `public/CV_Hammam_Mubarak_Resume.pdf`

## Connections

- Browser → Document Shell: loads
- Document Shell → React Mount: starts
- React Mount → Portfolio App: mounts
- Portfolio App → Navigation Controls: composes
- Portfolio App → Portfolio Sections: renders
- Navigation Controls → Portfolio Sections: selects / navigates
- Portfolio Sections → Localization Selector: reads localized copy
- Localization Selector → Section Translations: aggregates
- Portfolio Sections → Asset Viewers: opens rich content
- Asset Viewers → Portfolio Assets: displays
- Portfolio Sections → Portfolio Assets: references
- Portfolio Sections → Downloadable Résumé: links
- Portfolio App → Icon Library: uses
- Portfolio App → Styling System: styled by
- Vite Build → React Mount: bundles
- Vite Build → Styling System: processes
- Vite Build → Static Host / CDN: build deploys to
- Static Host / CDN → Browser: serves
- Static Host / CDN → Portfolio Assets: serves directly
- Static Host / CDN → Downloadable Résumé: serves directly