# ivanmercado0998/v0-portfolio-website architecture

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

## Overview

This is a personal engineering portfolio website: visitors browse the home page’s profile, skills, projects, NAVICOM feature, and contact section, or open the separate companies-and-experience page. The contact form submits messages to FormSubmit. The map follows the sampled route composition and contact submission; project filtering and media presentation are visible in the excerpt, but unsampled component wiring and deployment details are not expanded.

Main entry points: [`app/page.tsx`](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/app/page.tsx) (Home route), [`app/layout.tsx`](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/app/layout.tsx) (Site layout), [`components/projects.tsx`](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/projects.tsx) (Project showcase), [`components/contact.tsx`](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/contact.tsx) (Contact form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["Routes and shell"]
  node_layout["Site layout<br/>[layout.tsx]"]
  node_home["Home route<br/>[page.tsx]"]
  node_companies["Companies route<br/>[page.tsx]"]
  node_analytics["Vercel Analytics"]
end

subgraph group_portfolio["Portfolio content"]
  node_navbar["Navigation<br/>[navbar.tsx]"]
  node_hero["Profile hero<br/>[hero.tsx]"]
  node_skills["Skills showcase<br/>[skills.tsx]"]
  node_projects["Project showcase<br/>[projects.tsx]"]
  node_navicom["NAVICOM feature<br/>[navicom.tsx]"]
  node_footer["Footer links<br/>[footer.tsx]"]
  node_media["Project media"]
end

subgraph group_interactions["Visitor interactions"]
  node_contact["Contact form<br/>[contact.tsx]"]
  node_formsubmit["FormSubmit"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_layout
node_layout -->|"renders route"| node_home
node_layout -->|"renders analytics"| node_analytics
node_visitor -->|"opens route"| node_companies
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_navicom
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_projects -->|"loads media"| node_media
node_contact -.->|"submits message"| node_formsubmit

click node_layout "https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/app/layout.tsx"
click node_home "https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/app/page.tsx"
click node_companies "https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/app/companies/page.tsx"
click node_navbar "https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/navbar.tsx"
click node_hero "https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/hero.tsx"
click node_skills "https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/skills.tsx"
click node_projects "https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/projects.tsx"
click node_navicom "https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/navicom.tsx"
click node_contact "https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/contact.tsx"
click node_footer "https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/footer.tsx"
click node_media "https://github.com/ivanmercado0998/v0-portfolio-website/tree/main/public"

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_layout,node_home,node_companies,node_analytics toneBlue
class node_navbar,node_hero,node_skills,node_projects,node_navicom,node_footer,node_media toneAmber
class node_contact,node_formsubmit toneMint
class node_visitor toneIndigo
```

## Components

### Routes and shell

- [Site layout](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/app/layout.tsx): `app/layout.tsx`
- [Home route](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/app/page.tsx): `app/page.tsx`
- [Companies route](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/app/companies/page.tsx): `app/companies/page.tsx`
- **Vercel Analytics**

### Portfolio content

- [Navigation](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/navbar.tsx): `components/navbar.tsx`
- [Profile hero](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/hero.tsx): `components/hero.tsx`
- [Skills showcase](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/skills.tsx): `components/skills.tsx`
- [Project showcase](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/projects.tsx): `components/projects.tsx`
- [NAVICOM feature](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/navicom.tsx): `components/navicom.tsx`
- [Footer links](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/footer.tsx): `components/footer.tsx`
- [Project media](https://github.com/ivanmercado0998/v0-portfolio-website/tree/main/public): `public`

### Visitor interactions

- [Contact form](https://github.com/ivanmercado0998/v0-portfolio-website/blob/main/components/contact.tsx): `components/contact.tsx`
- **FormSubmit**

### Other components

- **Visitor**

## Connections

- Visitor → Site layout: opens site
- Site layout → Home route: renders route
- Site layout → Vercel Analytics: renders analytics
- Visitor → Companies route: opens route
- Home route → Navigation: renders
- Home route → Profile hero: renders
- Home route → Skills showcase: renders
- Home route → Project showcase: renders
- Home route → NAVICOM feature: renders
- Home route → Contact form: renders
- Home route → Footer links: renders
- Project showcase → Project media: loads media
- Contact form → FormSubmit: submits message