# trisharaj06/portfolio architecture

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

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

## Overview

This is a single-page personal portfolio built with Next.js. A visitor opens the page, scans the introduction, biography, skills and featured projects, then follows a project link or uses the contact links. The content and section rendering are implemented together in the page component, while the root layout wraps that page and applies metadata and font styling. The README describes only the standard Next.js starter workflow; no backend or data-store behavior is evidenced. Source excerpts support the page/layout relationship, but not internal server-rendering mechanics.

Main entry points: [`app/page.tsx`](https://github.com/trisharaj06/portfolio/blob/main/app/page.tsx) (Portfolio page), [`app/layout.tsx`](https://github.com/trisharaj06/portfolio/blob/main/app/layout.tsx) (Root layout), [`app/globals.css`](https://github.com/trisharaj06/portfolio/blob/main/app/globals.css) (Global styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio experience"]
  node_page["Portfolio page<br/>[page.tsx]"]
  node_profile["Profile and skills<br/>[page.tsx]"]
  node_projects["Featured projects<br/>[page.tsx]"]
  node_contact["Contact links<br/>[page.tsx]"]
end

subgraph group_presentation["Page presentation"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_styles["Global styles<br/>[globals.css]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens page"| node_layout
node_layout -->|"renders children"| node_page
node_page -->|"renders sections"| node_profile
node_page -->|"renders cards"| node_projects
node_page -->|"renders links"| node_contact
node_layout -->|"imports styles"| node_styles
node_visitor -->|"follows project links"| node_projects
node_visitor -->|"uses contact links"| node_contact

click node_page "https://github.com/trisharaj06/portfolio/blob/main/app/page.tsx"
click node_profile "https://github.com/trisharaj06/portfolio/blob/main/app/page.tsx"
click node_projects "https://github.com/trisharaj06/portfolio/blob/main/app/page.tsx"
click node_contact "https://github.com/trisharaj06/portfolio/blob/main/app/page.tsx"
click node_layout "https://github.com/trisharaj06/portfolio/blob/main/app/layout.tsx"
click node_styles "https://github.com/trisharaj06/portfolio/blob/main/app/globals.css"

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_page,node_profile,node_projects,node_contact toneBlue
class node_layout,node_styles toneAmber
class node_visitor toneIndigo
```

## Components

### Portfolio experience

- [Portfolio page](https://github.com/trisharaj06/portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Profile and skills](https://github.com/trisharaj06/portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Featured projects](https://github.com/trisharaj06/portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Contact links](https://github.com/trisharaj06/portfolio/blob/main/app/page.tsx): `app/page.tsx`

### Page presentation

- [Root layout](https://github.com/trisharaj06/portfolio/blob/main/app/layout.tsx): `app/layout.tsx`
- [Global styles](https://github.com/trisharaj06/portfolio/blob/main/app/globals.css): `app/globals.css`

### Other components

- **Visitor**

## Connections

- Visitor → Root layout: opens page
- Root layout → Portfolio page: renders children (evidence: `app/layout.tsx`)
- Portfolio page → Profile and skills: renders sections (evidence: `app/page.tsx`)
- Portfolio page → Featured projects: renders cards (evidence: `app/page.tsx`)
- Portfolio page → Contact links: renders links (evidence: `app/page.tsx`)
- Root layout → Global styles: imports styles (evidence: `app/layout.tsx`)
- Visitor → Featured projects: follows project links (evidence: `app/page.tsx`)
- Visitor → Contact links: uses contact links (evidence: `app/page.tsx`)