# daanny214/portfolio architecture

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

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

## Overview

#### Purpose and Runtime
This is a personal Web & Mobile Developer portfolio built with Next.js and TypeScript. It renders a single marketing-style portfolio page and exposes a server API endpoint for contact-form submissions. It is intended for Node.js deployment, with the live site hosted on Vercel.

Key entry points:
- `app/layout.tsx` defines the application document shell, global metadata, and shared styling boundary.
- `app/page.tsx` composes the portfolio landing page.
- `app/api/contact/route.ts` is the backend HTTP entry point for contact requests.

#### App Router Composition
The repository uses the Next.js App Router under `app/`. `app/page.tsx` is the root route (`/`) and assembles the primary page sections into one scroll-oriented experience.

The root layout applies site-wide concerns before page rendering:
- `app/layout.tsx`
- `app/globals.css`

This keeps page composition separate from document-level metadata, fonts/styles, and global visual rules.

#### Portfolio Content Sections
The visible portfolio is divided into independently maintainable React section components:
- `app/components/Hero.tsx`
- `app/components/About.tsx`
- `app/components/Skills.tsx`
- `app/components/Projects.tsx`
- `app/components/Contact.tsx`

`app/page.tsx` controls their order and therefore the top-level user journey: introduction, profile/skills, work samples, and contact conversion. Project-related static assets are served from `public/projects`, while the downloadable CV is available at `public/cv.pdf`.

#### Shared Navigation and Presentation Layer
Shared interface components support consistent navigation, section structure, animation, and footer content:
- `app/components/Navbar.tsx`
- `app/components/Footer.tsx`
- `app/components/SectionHeading.tsx`
- `app/components/Reveal.tsx`

The navbar likely anchors navigation to sections of the single page. `Reveal.tsx` forms an animation/presentation boundary that can be reused by content sections without coupling animation behavior to portfolio data.

#### Site Metadata and Centralized Constants
Site-level identity or reusable portfolio constants are centralized rather than embedded throughout components:
- `app/lib/site.ts`
- `app/layout.tsx`

This is the likely source for global branding, social links, URLs, or metadata consumed by the layout and presentation components. Changes to portfolio identity should preferentially flow through this module.

#### Contact Submission Boundary
The client contact UI is separated from server-side request handling:
- `app/components/Contact.tsx`
- `app/api/contact/route.ts`

The browser submits contact data to `/api/contact`; the route handler validates/processes that request and returns an HTTP response. This boundary allows the UI to remain a React component while server-only integration details, such as a messaging or email provider, stay in the API route.

#### Infrastructure and Delivery
Next.js provides rendering, routing, static asset serving, and API route execution. Core deployment/build configuration is in:
- `next.config.ts`
- `package.json`

Vercel is the stated hosting target. Public files under `public/` are served directly, while application routes and the contact endpoint are built and deployed through the Next.js runtime.

Main entry points: [`app/page.tsx`](https://github.com/daanny214/portfolio/blob/main/app/page.tsx) (Portfolio page), [`app/layout.tsx`](https://github.com/daanny214/portfolio/blob/main/app/layout.tsx) (Root layout), [`app/lib/site.ts`](https://github.com/daanny214/portfolio/blob/main/app/lib/site.ts) (Site constants), [`app/components/Contact.tsx`](https://github.com/daanny214/portfolio/blob/main/app/components/Contact.tsx) (Contact form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Next.js App Router"]
  node_layout["Root layout<br/>App shell<br/>[layout.tsx]"]
  node_home["Portfolio page<br/>Root route /<br/>[page.tsx]"]
  node_global_css["Global styles<br/>CSS<br/>[globals.css]"]
  node_contact_api{{"Contact API<br/>Route handler<br/>[route.ts]"}}
end

subgraph group_ui["Portfolio UI"]
  node_hero["Hero<br/>React section<br/>[Hero.tsx]"]
  node_about["About<br/>React section<br/>[About.tsx]"]
  node_skills["Skills<br/>React section<br/>[Skills.tsx]"]
  node_projects["Projects<br/>React section<br/>[Projects.tsx]"]
  node_contact["Contact form<br/>React section<br/>[Contact.tsx]"]
  node_navbar["Navbar<br/>Shared UI<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>Shared UI<br/>[Footer.tsx]"]
  node_section_heading["Section heading<br/>Shared UI<br/>[SectionHeading.tsx]"]
  node_reveal["Reveal<br/>Animation wrapper<br/>[Reveal.tsx]"]
end

subgraph group_content["Site Content"]
  node_site_constants["Site constants<br/>Content module<br/>[site.ts]"]
  node_project_assets["Project assets<br/>Public static files"]
  node_cv["Downloadable CV<br/>Public PDF<br/>[cv.pdf]"]
end

subgraph group_delivery["Build &amp; Hosting"]
  node_next_config["Next.js config<br/>Build configuration<br/>[next.config.ts]"]
  node_package_manifest["Package manifest<br/>Dependencies &amp; scripts<br/>[package.json]"]
  node_vercel{{"Vercel<br/>Hosting platform"}}
end

node_layout -->|"wraps"| node_home
node_layout -->|"imports"| node_global_css
node_layout -->|"uses metadata"| node_site_constants
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_navbar -.->|"section anchors"| node_home
node_projects -->|"serves"| node_project_assets
node_contact -->|"POST /api/contact"| node_contact_api
node_contact -.->|"uses contact links"| node_site_constants
node_hero -.->|"uses identity"| node_site_constants
node_footer -.->|"uses social links"| node_site_constants
node_section_heading -.->|"structures"| node_about
node_reveal -.->|"animates"| node_projects
node_next_config -.->|"configures runtime"| node_layout
node_package_manifest -.->|"provides scripts and dependencies"| node_next_config
node_vercel -->|"hosts routes"| node_layout
node_vercel -->|"executes"| node_contact_api
node_vercel -->|"serves"| node_project_assets
node_vercel -->|"serves"| node_cv

click node_layout "https://github.com/daanny214/portfolio/blob/main/app/layout.tsx"
click node_home "https://github.com/daanny214/portfolio/blob/main/app/page.tsx"
click node_global_css "https://github.com/daanny214/portfolio/blob/main/app/globals.css"
click node_contact_api "https://github.com/daanny214/portfolio/blob/main/app/api/contact/route.ts"
click node_hero "https://github.com/daanny214/portfolio/blob/main/app/components/Hero.tsx"
click node_about "https://github.com/daanny214/portfolio/blob/main/app/components/About.tsx"
click node_skills "https://github.com/daanny214/portfolio/blob/main/app/components/Skills.tsx"
click node_projects "https://github.com/daanny214/portfolio/blob/main/app/components/Projects.tsx"
click node_contact "https://github.com/daanny214/portfolio/blob/main/app/components/Contact.tsx"
click node_navbar "https://github.com/daanny214/portfolio/blob/main/app/components/Navbar.tsx"
click node_footer "https://github.com/daanny214/portfolio/blob/main/app/components/Footer.tsx"
click node_section_heading "https://github.com/daanny214/portfolio/blob/main/app/components/SectionHeading.tsx"
click node_reveal "https://github.com/daanny214/portfolio/blob/main/app/components/Reveal.tsx"
click node_site_constants "https://github.com/daanny214/portfolio/blob/main/app/lib/site.ts"
click node_project_assets "https://github.com/daanny214/portfolio/tree/main/public/projects"
click node_cv "https://github.com/daanny214/portfolio/blob/main/public/cv.pdf"
click node_next_config "https://github.com/daanny214/portfolio/blob/main/next.config.ts"
click node_package_manifest "https://github.com/daanny214/portfolio/blob/main/package.json"

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_global_css,node_contact_api toneBlue
class node_hero,node_about,node_skills,node_projects,node_contact,node_navbar,node_footer,node_section_heading,node_reveal toneAmber
class node_site_constants,node_project_assets,node_cv toneMint
class node_next_config,node_package_manifest,node_vercel toneRose
```

## Components

### Next.js App Router

Routes and shared application shell.

- [Root layout](https://github.com/daanny214/portfolio/blob/main/app/layout.tsx): App shell · Sets document metadata and global styling boundary. · `app/layout.tsx`
- [Portfolio page](https://github.com/daanny214/portfolio/blob/main/app/page.tsx): Root route / · Composes the scroll-oriented portfolio journey. · `app/page.tsx`
- [Global styles](https://github.com/daanny214/portfolio/blob/main/app/globals.css): CSS · `app/globals.css`
- [Contact API](https://github.com/daanny214/portfolio/blob/main/app/api/contact/route.ts): Route handler · Validates and processes contact submissions. · `app/api/contact/route.ts`

### Portfolio UI

Single-page content and reusable presentation.

- [Hero](https://github.com/daanny214/portfolio/blob/main/app/components/Hero.tsx): React section · `app/components/Hero.tsx`
- [About](https://github.com/daanny214/portfolio/blob/main/app/components/About.tsx): React section · `app/components/About.tsx`
- [Skills](https://github.com/daanny214/portfolio/blob/main/app/components/Skills.tsx): React section · `app/components/Skills.tsx`
- [Projects](https://github.com/daanny214/portfolio/blob/main/app/components/Projects.tsx): React section · `app/components/Projects.tsx`
- [Contact form](https://github.com/daanny214/portfolio/blob/main/app/components/Contact.tsx): React section · Browser-side contact submission UI. · `app/components/Contact.tsx`
- [Navbar](https://github.com/daanny214/portfolio/blob/main/app/components/Navbar.tsx): Shared UI · Anchors navigation across page sections. · `app/components/Navbar.tsx`
- [Footer](https://github.com/daanny214/portfolio/blob/main/app/components/Footer.tsx): Shared UI · `app/components/Footer.tsx`
- [Section heading](https://github.com/daanny214/portfolio/blob/main/app/components/SectionHeading.tsx): Shared UI · `app/components/SectionHeading.tsx`
- [Reveal](https://github.com/daanny214/portfolio/blob/main/app/components/Reveal.tsx): Animation wrapper · Separates reusable reveal behavior from section content. · `app/components/Reveal.tsx`

### Site Content

Central identity data and public assets.

- [Site constants](https://github.com/daanny214/portfolio/blob/main/app/lib/site.ts): Content module · Centralizes branding, social links, URLs, and metadata. · `app/lib/site.ts`
- [Project assets](https://github.com/daanny214/portfolio/tree/main/public/projects): Public static files · Images and assets served directly for work samples. · `public/projects`
- [Downloadable CV](https://github.com/daanny214/portfolio/blob/main/public/cv.pdf): Public PDF · `public/cv.pdf`

### Build & Hosting

Node.js build configuration and Vercel deployment.

- [Next.js config](https://github.com/daanny214/portfolio/blob/main/next.config.ts): Build configuration · `next.config.ts`
- [Package manifest](https://github.com/daanny214/portfolio/blob/main/package.json): Dependencies & scripts · `package.json`
- **Vercel**: Hosting platform · Deploys the Next.js site and route handler.

## Connections

- Root layout → Portfolio page: wraps
- Root layout → Global styles: imports
- Root layout → Site constants: uses metadata
- Portfolio page → Navbar: renders
- Portfolio page → Hero: renders
- Portfolio page → About: renders
- Portfolio page → Skills: renders
- Portfolio page → Projects: renders
- Portfolio page → Contact form: renders
- Portfolio page → Footer: renders
- Navbar → Portfolio page: section anchors
- Projects → Project assets: serves
- Contact form → Contact API: POST /api/contact
- Contact form → Site constants: uses contact links
- Hero → Site constants: uses identity
- Footer → Site constants: uses social links
- Section heading → About: structures
- Reveal → Projects: animates
- Next.js config → Root layout: configures runtime
- Package manifest → Next.js config: provides scripts and dependencies
- Vercel → Root layout: hosts routes
- Vercel → Contact API: executes
- Vercel → Project assets: serves
- Vercel → Downloadable CV: serves