# vitouwu/website architecture

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

- Interactive diagram: https://gitdiagram.com/vitouwu/website
- Repository: https://github.com/vitouwu/website

## Overview

This is a bilingual personal portfolio site. A visitor requesting the root path gets locale context from the server, then is redirected to the matching English or Portuguese page; a localized route validates the locale and renders the portfolio with translated copy and São Paulo time/date. The portfolio presents selected work, biography, current activities, and contact/social links. The root route also supplies page metadata and loads Google Tag Manager. Relationships reflect the sampled routes and components; unsampled section implementations are represented only by their tree-supported paths.

Main entry points: [`src/components/Portfolio.tsx`](https://github.com/vitouwu/website/blob/master/src/components/Portfolio.tsx) (Portfolio composition), [`src/routes/$locale.tsx`](https://github.com/vitouwu/website/blob/master/src/routes/%24locale.tsx) (Localized page), [`src/routeTree.gen.ts`](https://github.com/vitouwu/website/blob/master/src/routeTree.gen.ts) (Route tree), [`src/routes/index.tsx`](https://github.com/vitouwu/website/blob/master/src/routes/index.tsx) (Root redirect)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and shell"]
  node_router["Router setup<br/>[router.tsx]"]
  node_route_tree["Route tree<br/>[routeTree.gen.ts]"]
  node_root_route["Root route<br/>[__root.tsx]"]
  node_index_route["Root redirect<br/>[index.tsx]"]
  node_locale_route["Localized page<br/>[$locale.tsx]"]
end

subgraph group_visitor["Visitor context"]
  node_visitor_context["Visitor context<br/>[visitor.ts]"]
  node_i18n["Locale and copy<br/>[i18n.ts]"]
end

subgraph group_portfolio["Portfolio content"]
  node_portfolio["Portfolio composition<br/>[Portfolio.tsx]"]
  node_hero["Hero and navigation<br/>[Hero.tsx]"]
  node_selected_work["Selected work<br/>[SelectedWork.tsx]"]
  node_about["About section<br/>[About.tsx]"]
  node_now["Now section<br/>[Now.tsx]"]
  node_footer["Social footer<br/>[Footer.tsx]"]
end

subgraph group_external["External services"]
  node_gtm["Google Tag Manager"]
end

node_visitor_actor(("Site visitor"))
node_portfolio_sites["Project websites"]
node_contact["Email contact"]
node_social_sites["Social platforms"]

node_visitor_actor -->|"requests page"| node_router
node_router -->|"uses routes"| node_route_tree
node_route_tree -->|"dispatches"| node_root_route
node_route_tree -->|"dispatches"| node_index_route
node_route_tree -->|"dispatches"| node_locale_route
node_root_route -->|"loads context"| node_visitor_context
node_index_route -->|"gets locale"| node_visitor_context
node_index_route -->|"maps locale"| node_i18n
node_index_route -->|"redirects"| node_locale_route
node_locale_route -->|"validates locale"| node_i18n
node_locale_route -->|"reads loader data"| node_root_route
node_locale_route -->|"renders"| node_portfolio
node_portfolio -->|"gets translations"| node_i18n
node_portfolio -->|"renders"| node_hero
node_portfolio -->|"renders"| node_selected_work
node_portfolio -->|"renders"| node_about
node_portfolio -->|"renders"| node_now
node_portfolio -->|"renders"| node_footer
node_root_route -.->|"loads script"| node_gtm
node_selected_work -->|"links to"| node_portfolio_sites
node_hero -->|"links to"| node_contact
node_footer -->|"links to"| node_social_sites

click node_router "https://github.com/vitouwu/website/blob/master/src/router.tsx"
click node_route_tree "https://github.com/vitouwu/website/blob/master/src/routeTree.gen.ts"
click node_root_route "https://github.com/vitouwu/website/blob/master/src/routes/__root.tsx"
click node_index_route "https://github.com/vitouwu/website/blob/master/src/routes/index.tsx"
click node_locale_route "https://github.com/vitouwu/website/blob/master/src/routes/%24locale.tsx"
click node_visitor_context "https://github.com/vitouwu/website/blob/master/src/lib/visitor.ts"
click node_i18n "https://github.com/vitouwu/website/blob/master/src/lib/i18n.ts"
click node_portfolio "https://github.com/vitouwu/website/blob/master/src/components/Portfolio.tsx"
click node_hero "https://github.com/vitouwu/website/blob/master/src/components/portfolio/Hero.tsx"
click node_selected_work "https://github.com/vitouwu/website/blob/master/src/components/portfolio/SelectedWork.tsx"
click node_about "https://github.com/vitouwu/website/blob/master/src/components/portfolio/About.tsx"
click node_now "https://github.com/vitouwu/website/blob/master/src/components/portfolio/Now.tsx"
click node_footer "https://github.com/vitouwu/website/blob/master/src/components/portfolio/Footer.tsx"

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_router,node_route_tree,node_root_route,node_index_route,node_locale_route toneBlue
class node_visitor_context,node_i18n toneAmber
class node_portfolio,node_hero,node_selected_work,node_about,node_now,node_footer toneMint
class node_gtm toneRose
class node_visitor_actor,node_portfolio_sites,node_contact,node_social_sites toneIndigo
```

## Components

### Routing and shell

- [Router setup](https://github.com/vitouwu/website/blob/master/src/router.tsx): `src/router.tsx`
- [Route tree](https://github.com/vitouwu/website/blob/master/src/routeTree.gen.ts): `src/routeTree.gen.ts`
- [Root route](https://github.com/vitouwu/website/blob/master/src/routes/__root.tsx): `src/routes/__root.tsx`
- [Root redirect](https://github.com/vitouwu/website/blob/master/src/routes/index.tsx): `src/routes/index.tsx`
- [Localized page](https://github.com/vitouwu/website/blob/master/src/routes/%24locale.tsx): `src/routes/$locale.tsx`

### Visitor context

- [Visitor context](https://github.com/vitouwu/website/blob/master/src/lib/visitor.ts): `src/lib/visitor.ts`
- [Locale and copy](https://github.com/vitouwu/website/blob/master/src/lib/i18n.ts): `src/lib/i18n.ts`

### Portfolio content

- [Portfolio composition](https://github.com/vitouwu/website/blob/master/src/components/Portfolio.tsx): `src/components/Portfolio.tsx`
- [Hero and navigation](https://github.com/vitouwu/website/blob/master/src/components/portfolio/Hero.tsx): `src/components/portfolio/Hero.tsx`
- [Selected work](https://github.com/vitouwu/website/blob/master/src/components/portfolio/SelectedWork.tsx): `src/components/portfolio/SelectedWork.tsx`
- [About section](https://github.com/vitouwu/website/blob/master/src/components/portfolio/About.tsx): `src/components/portfolio/About.tsx`
- [Now section](https://github.com/vitouwu/website/blob/master/src/components/portfolio/Now.tsx): `src/components/portfolio/Now.tsx`
- [Social footer](https://github.com/vitouwu/website/blob/master/src/components/portfolio/Footer.tsx): `src/components/portfolio/Footer.tsx`

### External services

- **Google Tag Manager**

### Other components

- **Site visitor**
- **Project websites**
- **Email contact**
- **Social platforms**

## Connections

- Site visitor → Router setup: requests page
- Router setup → Route tree: uses routes
- Route tree → Root route: dispatches
- Route tree → Root redirect: dispatches
- Route tree → Localized page: dispatches
- Root route → Visitor context: loads context
- Root redirect → Visitor context: gets locale
- Root redirect → Locale and copy: maps locale
- Root redirect → Localized page: redirects
- Localized page → Locale and copy: validates locale
- Localized page → Root route: reads loader data
- Localized page → Portfolio composition: renders
- Portfolio composition → Locale and copy: gets translations
- Portfolio composition → Hero and navigation: renders
- Portfolio composition → Selected work: renders
- Portfolio composition → About section: renders
- Portfolio composition → Now section: renders
- Portfolio composition → Social footer: renders
- Root route → Google Tag Manager: loads script
- Selected work → Project websites: links to
- Hero and navigation → Email contact: links to
- Social footer → Social platforms: links to