# marcoyimyaem/portfolio architecture

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

## Overview

This is a React portfolio site presenting Marco Yim’s professional profile and work across software development, technical training, and cybersecurity. A visitor reaches the page through the React entry point, then reads profile and credentials, career history, skills, and project or security experience. The main page also uses animated text and terminal-style visuals. The README documents broader career capabilities, while the sampled App.jsx excerpt is incomplete; the graph therefore preserves documented content areas without asserting unsampled component wiring.

Main entry points: [`my-portfolio/src/App.jsx`](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx) (Portfolio page), [`my-portfolio/src/main.jsx`](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/main.jsx) (React entry), [`my-portfolio/src/component/FuzzyText.jsx`](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/component/FuzzyText.jsx) (Fuzzy text effect), [`my-portfolio/src/component/RotatingText.jsx`](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/component/RotatingText.jsx) (Rotating text)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio presentation"]
  node_entry["React entry<br/>[main.jsx]"]
  node_page["Portfolio page<br/>[App.jsx]"]
end

subgraph group_content["Career content"]
  node_profile["Profile and credentials<br/>[App.jsx]"]
  node_career["Career history<br/>[App.jsx]"]
  node_skills["Technical skills<br/>[App.jsx]"]
  node_training["Training and assessment<br/>[App.jsx]"]
  node_security["Cybersecurity work<br/>[App.jsx]"]
  node_projects["Projects and experience<br/>[App copy 2.jsx]"]
end

subgraph group_effects["Visual effects"]
  node_fuzzy["Fuzzy text effect<br/>[FuzzyText.jsx]"]
  node_rotating["Rotating text<br/>[RotatingText.jsx]"]
  node_gradient["Gradient text<br/>[GradientText.tsx]"]
  node_terminal["Terminal effect<br/>[FaultyTerminal.jsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"mounts"| node_page
node_page -->|"presents"| node_profile
node_page -->|"presents"| node_career
node_page -->|"presents"| node_skills
node_page -->|"presents"| node_training
node_page -->|"presents"| node_security
node_page -->|"renders"| node_fuzzy
node_page -->|"renders"| node_rotating
node_page -->|"renders"| node_gradient
node_page -->|"renders"| node_terminal

click node_entry "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/main.jsx"
click node_page "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx"
click node_profile "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx"
click node_career "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx"
click node_skills "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx"
click node_training "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx"
click node_security "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx"
click node_projects "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App%20copy%202.jsx"
click node_fuzzy "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/component/FuzzyText.jsx"
click node_rotating "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/component/RotatingText.jsx"
click node_gradient "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/component/GradientText.tsx"
click node_terminal "https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/component/FaultyTerminal.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_page toneBlue
class node_profile,node_career,node_skills,node_training,node_security,node_projects toneAmber
class node_fuzzy,node_rotating,node_gradient,node_terminal toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio presentation

- [React entry](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/main.jsx): `my-portfolio/src/main.jsx`
- [Portfolio page](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx): `my-portfolio/src/App.jsx`

### Career content

- [Profile and credentials](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx): `my-portfolio/src/App.jsx`
- [Career history](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx): `my-portfolio/src/App.jsx`
- [Technical skills](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx): `my-portfolio/src/App.jsx`
- [Training and assessment](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx): `my-portfolio/src/App.jsx`
- [Cybersecurity work](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App.jsx): `my-portfolio/src/App.jsx`
- [Projects and experience](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/App%20copy%202.jsx): `my-portfolio/src/App copy 2.jsx`

### Visual effects

- [Fuzzy text effect](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/component/FuzzyText.jsx): `my-portfolio/src/component/FuzzyText.jsx`
- [Rotating text](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/component/RotatingText.jsx): `my-portfolio/src/component/RotatingText.jsx`
- [Gradient text](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/component/GradientText.tsx): `my-portfolio/src/component/GradientText.tsx`
- [Terminal effect](https://github.com/marcoyimyaem/portfolio/blob/main/my-portfolio/src/component/FaultyTerminal.jsx): `my-portfolio/src/component/FaultyTerminal.jsx`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens site
- React entry → Portfolio page: mounts
- Portfolio page → Profile and credentials: presents
- Portfolio page → Career history: presents
- Portfolio page → Technical skills: presents
- Portfolio page → Training and assessment: presents
- Portfolio page → Cybersecurity work: presents
- Portfolio page → Fuzzy text effect: renders
- Portfolio page → Rotating text: renders
- Portfolio page → Gradient text: renders
- Portfolio page → Terminal effect: renders