# igoogiigo/shibghotul-portofolio architecture

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

- Interactive diagram: https://gitdiagram.com/igoogiigo/shibghotul-portofolio
- Repository: https://github.com/igoogiigo/shibghotul-portofolio

## Overview

This is a React portfolio site: visitors browse a profile, experience, project work, credentials, and contact details through one rendered page. The visible workflow is browser entry → React app → portfolio sections, with navigation, theme/menu state, scroll animation, project tabs, and a contact form in the app. The README identifies a Gemini API key for local setup, but the sampled runtime shows no Gemini call or backend; the omitted App.tsx sections prevent confirming form submission behavior or other wiring.

Main entry points: [`src/App.tsx`](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx) (Portfolio App), [`src/main.tsx`](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/main.tsx) (React Mount), [`src/index.css`](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/index.css) (Global Styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Page Entry"]
  node_entrypoint["React Mount<br/>[main.tsx]"]
end

subgraph group_portfolio["Portfolio Experience"]
  node_app["Portfolio App<br/>[App.tsx]"]
  node_profile["Profile &amp; Intro<br/>[App.tsx]"]
  node_experience["Experience<br/>[App.tsx]"]
  node_projects["Projects<br/>[App.tsx]"]
  node_skills["Skills<br/>[App.tsx]"]
  node_credentials["Credentials<br/>[App.tsx]"]
  node_contact["Contact Form<br/>[App.tsx]"]
end

subgraph group_presentation["UI Presentation"]
  node_navigation["Navigation &amp; Theme<br/>[App.tsx]"]
  node_scrollmotion["Scroll &amp; Motion<br/>[App.tsx]"]
  node_styles["Global Styles<br/>[index.css]"]
end

node_visitor(("Visitor"))
node_browser(("Web Browser"))

node_visitor -->|"opens page"| node_browser
node_browser -->|"loads app"| node_entrypoint
node_entrypoint -->|"renders"| node_app
node_app -->|"renders"| node_profile
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_credentials
node_app -->|"renders"| node_contact
node_app -->|"manages"| node_navigation
node_app -->|"uses"| node_scrollmotion
node_entrypoint -->|"imports"| node_styles

click node_entrypoint "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/main.tsx"
click node_app "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx"
click node_profile "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx"
click node_experience "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx"
click node_projects "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx"
click node_skills "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx"
click node_credentials "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx"
click node_contact "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx"
click node_navigation "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx"
click node_scrollmotion "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx"
click node_styles "https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/index.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_entrypoint,node_browser toneBlue
class node_app,node_profile,node_experience,node_projects,node_skills,node_credentials,node_contact toneAmber
class node_navigation,node_scrollmotion,node_styles toneMint
class node_visitor toneIndigo
```

## Components

### Page Entry

- [React Mount](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/main.tsx): `src/main.tsx`

### Portfolio Experience

- [Portfolio App](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx): `src/App.tsx`
- [Profile & Intro](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx): `src/App.tsx`
- [Experience](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx): `src/App.tsx`
- [Projects](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx): `src/App.tsx`
- [Skills](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx): `src/App.tsx`
- [Credentials](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx): `src/App.tsx`
- [Contact Form](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx): `src/App.tsx`

### UI Presentation

- [Navigation & Theme](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx): `src/App.tsx`
- [Scroll & Motion](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/App.tsx): `src/App.tsx`
- [Global Styles](https://github.com/igoogiigo/shibghotul-portofolio/blob/main/src/index.css): `src/index.css`

### Other components

- **Visitor**
- **Web Browser**

## Connections

- Visitor → Web Browser: opens page
- Web Browser → React Mount: loads app
- React Mount → Portfolio App: renders
- Portfolio App → Profile & Intro: renders
- Portfolio App → Experience: renders
- Portfolio App → Projects: renders
- Portfolio App → Skills: renders
- Portfolio App → Credentials: renders
- Portfolio App → Contact Form: renders
- Portfolio App → Navigation & Theme: manages
- Portfolio App → Scroll & Motion: uses
- React Mount → Global Styles: imports