# cx18dev/premium-portfolio architecture

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

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

## Overview

#### Purpose and Runtime
This is an Astro-based personal portfolio site. Astro provides file-based routing and builds static pages; TypeScript/TSX components supply interactive UI where configured. The starter README does not document deployment, adapters, or third-party services.

Key runtime/build files:
- `package.json`
- `astro.config.mjs`
- `src/pages/index.astro`

#### Route and Page Entry Points
Astro exposes pages from `src/pages/`:
- `src/pages/index.astro` is the portfolio’s primary single-page entry point.
- `src/pages/404.astro` provides the not-found route.
- `src/pages/api/contact.ts` is the server/API boundary for contact submissions.

The primary page likely composes a shared layout and a sequence of portfolio sections rather than separate content routes.

#### Site Shell and Global Presentation
`src/layouts/Layout.astro` is the shared document/page shell, responsible for wrapping page content and likely centralizing head metadata and global styling. Global CSS lives in `src/styles/global.css`.

Persistent page framing is separated from content:
- `src/components/layout/Navigation.tsx`
- `src/components/layout/Footer.tsx`
- `src/layouts/Layout.astro`

This boundary lets the index page assemble content while layout components own site-wide navigation and footer behavior.

#### Portfolio Content Model
Portfolio content is centralized in `src/data/portfolio.ts`, separating structured personal, project, experience, and testimonial data from rendering components. Section components consume or present that content:
- `src/components/sections/Projects.tsx`
- `src/components/sections/Experience.tsx`
- `src/components/sections/Timeline.tsx`

Additional content stages cover introduction, skills, about, blog, contact, and testimonials under `src/components/sections/`. The likely flow is `index.astro` → layout/navigation → ordered sections → footer.

#### Interaction and Animation Layer
Reusable UI primitives encapsulate client-side visual behavior instead of embedding it across sections:
- `src/components/ui/LoadingScreen.tsx`
- `src/components/ui/SectionReveal.tsx`
- `src/components/ui/CustomCursor.tsx`

Other interaction primitives include animated counters and magnetic buttons. This creates a boundary between portfolio content/layout and browser-dependent effects. Shared low-level formatting or class helpers are located in `src/lib/utils.ts`.

#### Contact Submission Boundary
The contact section is the user-facing producer, while the API route is the backend-facing handler:
- `src/components/sections/Contact.tsx`
- `src/pages/api/contact.ts`

No external email, CRM, database, or anti-spam provider is identifiable from the supplied tree. Any such integration would belong behind `src/pages/api/contact.ts`, keeping credentials and request handling out of client components.

#### Assets and Delivery
Static assets are served from `public/`. Astro’s build pipeline produces the deployable site from source pages, layouts, styles, and components. No dedicated backend service, database schema, worker, or infrastructure-as-code directory is present, so the architecture is primarily a static Astro site with a single contact API endpoint.

Main entry points: [`src/pages/index.astro`](https://github.com/cx18dev/premium-portfolio/blob/master/src/pages/index.astro) (Portfolio page), [`src/layouts/Layout.astro`](https://github.com/cx18dev/premium-portfolio/blob/master/src/layouts/Layout.astro) (Shared layout), [`src/data/portfolio.ts`](https://github.com/cx18dev/premium-portfolio/blob/master/src/data/portfolio.ts) (Portfolio data), [`src/components/sections/Projects.tsx`](https://github.com/cx18dev/premium-portfolio/blob/master/src/components/sections/Projects.tsx) (Projects section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_astro["Astro runtime"]
  node_package["Package manifest<br/>[package.json]"]
  node_astro_config["Astro config<br/>[astro.config.mjs]"]
  node_build{{"Astro build<br/>static build"}}
  node_public_assets["Public assets<br/>static assets"]
  node_contact_api{{"Contact API<br/>API route<br/>[contact.ts]"}}
end

subgraph group_site["Site composition"]
  node_index["Portfolio page<br/>page route<br/>[index.astro]"]
  node_not_found["Not-found page<br/>page route<br/>[404.astro]"]
  node_layout["Shared layout<br/>page shell<br/>[Layout.astro]"]
  node_global_css["Global styles<br/>stylesheet<br/>[global.css]"]
  node_navigation["Navigation<br/>layout component<br/>[Navigation.tsx]"]
  node_footer["Footer<br/>layout component<br/>[Footer.tsx]"]
  node_portfolio_data[("Portfolio data<br/>content model<br/>[portfolio.ts]")]
  node_content_sections["Portfolio sections<br/>section components"]
  node_projects["Projects section<br/>section component<br/>[Projects.tsx]"]
  node_experience["Experience section<br/>section component<br/>[Experience.tsx]"]
  node_timeline["Timeline section<br/>section component<br/>[Timeline.tsx]"]
end

subgraph group_ui["UI behavior"]
  node_loading["Loading screen<br/>UI primitive<br/>[LoadingScreen.tsx]"]
  node_reveal["Section reveal<br/>UI primitive<br/>[SectionReveal.tsx]"]
  node_cursor["Custom cursor<br/>UI primitive<br/>[CustomCursor.tsx]"]
  node_utils["UI utilities<br/>shared utility<br/>[utils.ts]"]
end

node_package -->|"provides dependencies"| node_build
node_astro_config -->|"configures"| node_build
node_build -->|"builds route"| node_index
node_build -->|"builds route"| node_not_found
node_build -->|"exposes endpoint"| node_contact_api
node_public_assets -->|"included in delivery"| node_build
node_index -->|"wraps with"| node_layout
node_layout -->|"applies"| node_global_css
node_layout -->|"renders"| node_navigation
node_layout -->|"renders"| node_footer
node_index -->|"assembles"| node_content_sections
node_index -->|"renders"| node_projects
node_index -->|"renders"| node_experience
node_index -->|"renders"| node_timeline
node_projects -->|"reads"| node_portfolio_data
node_experience -->|"reads"| node_portfolio_data
node_timeline -->|"reads"| node_portfolio_data
node_content_sections -->|"presents"| node_portfolio_data
node_content_sections -->|"submits contact form"| node_contact_api
node_index -->|"uses"| node_loading
node_content_sections -->|"uses"| node_reveal
node_layout -->|"uses"| node_cursor
node_content_sections -->|"uses"| node_utils

click node_package "https://github.com/cx18dev/premium-portfolio/blob/master/package.json"
click node_astro_config "https://github.com/cx18dev/premium-portfolio/blob/master/astro.config.mjs"
click node_index "https://github.com/cx18dev/premium-portfolio/blob/master/src/pages/index.astro"
click node_not_found "https://github.com/cx18dev/premium-portfolio/blob/master/src/pages/404.astro"
click node_contact_api "https://github.com/cx18dev/premium-portfolio/blob/master/src/pages/api/contact.ts"
click node_layout "https://github.com/cx18dev/premium-portfolio/blob/master/src/layouts/Layout.astro"
click node_global_css "https://github.com/cx18dev/premium-portfolio/blob/master/src/styles/global.css"
click node_navigation "https://github.com/cx18dev/premium-portfolio/blob/master/src/components/layout/Navigation.tsx"
click node_footer "https://github.com/cx18dev/premium-portfolio/blob/master/src/components/layout/Footer.tsx"
click node_portfolio_data "https://github.com/cx18dev/premium-portfolio/blob/master/src/data/portfolio.ts"
click node_projects "https://github.com/cx18dev/premium-portfolio/blob/master/src/components/sections/Projects.tsx"
click node_experience "https://github.com/cx18dev/premium-portfolio/blob/master/src/components/sections/Experience.tsx"
click node_timeline "https://github.com/cx18dev/premium-portfolio/blob/master/src/components/sections/Timeline.tsx"
click node_loading "https://github.com/cx18dev/premium-portfolio/blob/master/src/components/ui/LoadingScreen.tsx"
click node_reveal "https://github.com/cx18dev/premium-portfolio/blob/master/src/components/ui/SectionReveal.tsx"
click node_cursor "https://github.com/cx18dev/premium-portfolio/blob/master/src/components/ui/CustomCursor.tsx"
click node_utils "https://github.com/cx18dev/premium-portfolio/blob/master/src/lib/utils.ts"

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_package,node_astro_config,node_build,node_public_assets,node_contact_api toneBlue
class node_index,node_not_found,node_layout,node_global_css,node_navigation,node_footer,node_portfolio_data,node_content_sections,node_projects,node_experience,node_timeline toneAmber
class node_loading,node_reveal,node_cursor,node_utils toneMint
```

## Components

### Astro runtime

- [Package manifest](https://github.com/cx18dev/premium-portfolio/blob/master/package.json): package · Defines Astro and frontend dependencies. · `package.json`
- [Astro config](https://github.com/cx18dev/premium-portfolio/blob/master/astro.config.mjs): config · `astro.config.mjs`
- **Astro build**: static build · Builds routes and static site assets.
- **Public assets**: static assets · Static files served with the site.
- [Contact API](https://github.com/cx18dev/premium-portfolio/blob/master/src/pages/api/contact.ts): API route · Server boundary for contact submissions. · `src/pages/api/contact.ts`

### Site composition

- [Portfolio page](https://github.com/cx18dev/premium-portfolio/blob/master/src/pages/index.astro): page route · Primary single-page portfolio entry point. · `src/pages/index.astro`
- [Not-found page](https://github.com/cx18dev/premium-portfolio/blob/master/src/pages/404.astro): page route · `src/pages/404.astro`
- [Shared layout](https://github.com/cx18dev/premium-portfolio/blob/master/src/layouts/Layout.astro): page shell · Owns document shell and shared presentation. · `src/layouts/Layout.astro`
- [Global styles](https://github.com/cx18dev/premium-portfolio/blob/master/src/styles/global.css): stylesheet · `src/styles/global.css`
- [Navigation](https://github.com/cx18dev/premium-portfolio/blob/master/src/components/layout/Navigation.tsx): layout component · `src/components/layout/Navigation.tsx`
- [Footer](https://github.com/cx18dev/premium-portfolio/blob/master/src/components/layout/Footer.tsx): layout component · `src/components/layout/Footer.tsx`
- [Portfolio data](https://github.com/cx18dev/premium-portfolio/blob/master/src/data/portfolio.ts): content model · Structured personal, project, experience, and testimonial content. · `src/data/portfolio.ts`
- **Portfolio sections**: section components · Introduction, skills, about, blog, contact, and testimonial presentation.
- [Projects section](https://github.com/cx18dev/premium-portfolio/blob/master/src/components/sections/Projects.tsx): section component · `src/components/sections/Projects.tsx`
- [Experience section](https://github.com/cx18dev/premium-portfolio/blob/master/src/components/sections/Experience.tsx): section component · `src/components/sections/Experience.tsx`
- [Timeline section](https://github.com/cx18dev/premium-portfolio/blob/master/src/components/sections/Timeline.tsx): section component · `src/components/sections/Timeline.tsx`

### UI behavior

- [Loading screen](https://github.com/cx18dev/premium-portfolio/blob/master/src/components/ui/LoadingScreen.tsx): UI primitive · `src/components/ui/LoadingScreen.tsx`
- [Section reveal](https://github.com/cx18dev/premium-portfolio/blob/master/src/components/ui/SectionReveal.tsx): UI primitive · Browser-side reveal animation boundary. · `src/components/ui/SectionReveal.tsx`
- [Custom cursor](https://github.com/cx18dev/premium-portfolio/blob/master/src/components/ui/CustomCursor.tsx): UI primitive · Browser-side cursor behavior. · `src/components/ui/CustomCursor.tsx`
- [UI utilities](https://github.com/cx18dev/premium-portfolio/blob/master/src/lib/utils.ts): shared utility · Shared formatting and class helpers. · `src/lib/utils.ts`

## Connections

- Package manifest → Astro build: provides dependencies
- Astro config → Astro build: configures
- Astro build → Portfolio page: builds route
- Astro build → Not-found page: builds route
- Astro build → Contact API: exposes endpoint
- Public assets → Astro build: included in delivery
- Portfolio page → Shared layout: wraps with
- Shared layout → Global styles: applies
- Shared layout → Navigation: renders
- Shared layout → Footer: renders
- Portfolio page → Portfolio sections: assembles
- Portfolio page → Projects section: renders
- Portfolio page → Experience section: renders
- Portfolio page → Timeline section: renders
- Projects section → Portfolio data: reads
- Experience section → Portfolio data: reads
- Timeline section → Portfolio data: reads
- Portfolio sections → Portfolio data: presents
- Portfolio sections → Contact API: submits contact form
- Portfolio page → Loading screen: uses
- Portfolio sections → Section reveal: uses
- Shared layout → Custom cursor: uses
- Portfolio sections → UI utilities: uses