# tinashejima/my-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/tinashejima/my-portfolio
- Repository: https://github.com/tinashejima/my-portfolio

## Overview

This is a React portfolio site. A visitor opens the page and sees an overview of the owner’s profile, skills, projects, experience, technology stack, and contact options. `src/main.jsx` mounts the portfolio; `src/portfolio.jsx` defines its sections and interactive presentation. The README describes only a starter template, so capabilities here are based on the sampled application source; omitted excerpts limit certainty about some component wiring.

Main entry points: [`src/portfolio.jsx`](https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx) (Portfolio page), [`src/main.jsx`](https://github.com/tinashejima/my-portfolio/blob/master/src/main.jsx) (React mount)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application entry"]
  node_mount["React mount<br/>[main.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_portfolio["Portfolio page<br/>[portfolio.jsx]"]
  node_nav["Navigation<br/>[portfolio.jsx]"]
  node_about["About and skills<br/>[portfolio.jsx]"]
  node_projects["Projects<br/>[portfolio.jsx]"]
  node_experience["Experience<br/>[portfolio.jsx]"]
  node_stack["Tech stack<br/>[portfolio.jsx]"]
  node_contact["Contact footer<br/>[portfolio.jsx]"]
end

subgraph group_presentation["Presentation behavior"]
  node_fade["Fade-in behavior<br/>[portfolio.jsx]"]
  node_profile["Profile image"]
end

node_visitor(("Visitor"))
node_linkedin(("LinkedIn"))
node_email(("Email recipient"))

node_visitor -->|"opens page"| node_mount
node_mount -->|"renders"| node_portfolio
node_portfolio -->|"renders"| node_nav
node_portfolio -->|"renders"| node_about
node_portfolio -->|"renders"| node_projects
node_portfolio -->|"renders"| node_experience
node_portfolio -->|"renders"| node_stack
node_portfolio -->|"renders"| node_contact
node_about -->|"uses"| node_fade
node_projects -->|"uses"| node_fade
node_experience -->|"uses"| node_fade
node_about -->|"displays"| node_profile
node_contact -->|"links to"| node_linkedin
node_contact -->|"links to"| node_email

click node_mount "https://github.com/tinashejima/my-portfolio/blob/master/src/main.jsx"
click node_portfolio "https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx"
click node_nav "https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx"
click node_about "https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx"
click node_projects "https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx"
click node_experience "https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx"
click node_stack "https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx"
click node_contact "https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx"
click node_fade "https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.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_mount toneBlue
class node_portfolio,node_nav,node_about,node_projects,node_experience,node_stack,node_contact toneAmber
class node_fade,node_profile toneMint
class node_visitor,node_linkedin,node_email toneIndigo
```

## Components

### Application entry

- [React mount](https://github.com/tinashejima/my-portfolio/blob/master/src/main.jsx): `src/main.jsx`

### Portfolio content

- [Portfolio page](https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx): `src/portfolio.jsx`
- [Navigation](https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx): `src/portfolio.jsx`
- [About and skills](https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx): `src/portfolio.jsx`
- [Projects](https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx): `src/portfolio.jsx`
- [Experience](https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx): `src/portfolio.jsx`
- [Tech stack](https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx): `src/portfolio.jsx`
- [Contact footer](https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx): `src/portfolio.jsx`

### Presentation behavior

- [Fade-in behavior](https://github.com/tinashejima/my-portfolio/blob/master/src/portfolio.jsx): `src/portfolio.jsx`
- **Profile image**

### Other components

- **Visitor**
- **LinkedIn**
- **Email recipient**

## Connections

- Visitor → React mount: opens page
- React mount → Portfolio page: renders
- Portfolio page → Navigation: renders
- Portfolio page → About and skills: renders
- Portfolio page → Projects: renders
- Portfolio page → Experience: renders
- Portfolio page → Tech stack: renders
- Portfolio page → Contact footer: renders
- About and skills → Fade-in behavior: uses
- Projects → Fade-in behavior: uses
- Experience → Fade-in behavior: uses
- About and skills → Profile image: displays
- Contact footer → LinkedIn: links to
- Contact footer → Email recipient: links to