# xclusivkhodes/portfolio architecture

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

## Overview

This is a personal portfolio website: visitors explore the creator’s work, skills, background, and writing, with an interactive animated landing page and a contact path for sending messages. A separate real-time layer supports chat, online users, cursors, and shared menu-triggered effects. The graph preserves those documented capabilities and the email flow evidenced in source. Several pages and the Socket.IO context were not sampled, so their internal wiring is represented only where the tree or excerpts support it.

Main entry points: [`src/app/page.tsx`](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/page.tsx) (Landing page), [`src/app/api/send/route.ts`](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/api/send/route.ts) (Email API), [`src/contexts/socketio.tsx`](https://github.com/xclusivkhodes/portfolio/blob/main/src/contexts/socketio.tsx) (Socket context), [`src/app/layout.tsx`](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/layout.tsx) (Application shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Portfolio experience"]
  node_home["Landing page<br/>[page.tsx]"]
  node_keyboard["3D skill keyboard"]
  node_keyboard_config["Keyboard behavior"]
  node_skills["Skills section<br/>[skills.tsx]"]
  node_projects_section["Projects section<br/>[projects.tsx]"]
  node_experience_section["Experience section<br/>[experience.tsx]"]
  node_particles["Space particles<br/>[Particles.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_projects_page["Projects page<br/>[page.tsx]"]
  node_project_data["Project catalog<br/>[projects.tsx]"]
  node_about_page["About page<br/>[page.tsx]"]
  node_blogs_page["Blog index<br/>[page.tsx]"]
  node_blog_post["Blog article<br/>[page.tsx]"]
  node_mdx["MDX content<br/>[mdx.ts]"]
end

subgraph group_realtime["Live interactions"]
  node_socket_context["Socket context<br/>[socketio.tsx]"]
  node_chat["Chat and users<br/>[online-users.tsx]"]
  node_cursors["Remote cursors<br/>[remote-cursors.tsx]"]
  node_radial["Radial menu effects<br/>[index.tsx]"]
end

subgraph group_contact["Contact delivery"]
  node_contact_page["Contact page<br/>[page.tsx]"]
  node_contact_form["Contact form<br/>[ContactForm.tsx]"]
  node_send_route["Email API<br/>[route.ts]"]
  node_email_template["Email template<br/>[email-template.tsx]"]
end

subgraph group_shared["Shared presentation"]
  node_site_config["Site configuration<br/>[config.ts]"]
  node_app_shell["Application shell<br/>[layout.tsx]"]
  node_providers["Shared providers<br/>[providers.tsx]"]
  node_header["Navigation header<br/>[header.tsx]"]
  node_footer["Site footer<br/>[footer.tsx]"]
end

node_visitor(("Visitor"))
node_socket_service(("Socket.IO service"))
node_resend(("Resend email"))

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_projects_page
node_visitor -->|"opens"| node_about_page
node_visitor -->|"opens"| node_blogs_page
node_visitor -->|"opens"| node_contact_page
node_home -->|"renders"| node_keyboard
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects_section
node_home -->|"renders"| node_experience_section
node_home -->|"renders"| node_particles
node_keyboard -->|"reads behavior"| node_keyboard_config
node_projects_page -->|"renders projects"| node_project_data
node_projects_section -->|"renders projects"| node_project_data
node_blogs_page -->|"links articles"| node_blog_post
node_blog_post -->|"loads content"| node_mdx
node_app_shell -->|"wraps routes"| node_providers
node_app_shell -->|"renders"| node_header
node_app_shell -->|"renders"| node_footer
node_contact_page -->|"renders"| node_contact_form
node_contact_form -->|"submits message"| node_send_route
node_send_route -->|"reads recipient"| node_site_config
node_send_route -->|"builds email"| node_email_template
node_send_route -->|"sends email"| node_resend
node_chat -->|"uses context"| node_socket_context
node_cursors -->|"uses context"| node_socket_context
node_radial -->|"uses context"| node_socket_context
node_socket_context -.->|"connects"| node_socket_service

click node_home "https://github.com/xclusivkhodes/portfolio/blob/main/src/app/page.tsx"
click node_keyboard "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/animated-background.tsx"
click node_keyboard_config "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/animated-background-config.ts"
click node_skills "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/sections/skills.tsx"
click node_projects_section "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/sections/projects.tsx"
click node_experience_section "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/sections/experience.tsx"
click node_particles "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/Particles.tsx"
click node_projects_page "https://github.com/xclusivkhodes/portfolio/blob/main/src/app/projects/page.tsx"
click node_project_data "https://github.com/xclusivkhodes/portfolio/blob/main/src/data/projects.tsx"
click node_about_page "https://github.com/xclusivkhodes/portfolio/blob/main/src/app/about/page.tsx"
click node_blogs_page "https://github.com/xclusivkhodes/portfolio/blob/main/src/app/blogs/page.tsx"
click node_blog_post "https://github.com/xclusivkhodes/portfolio/blob/main/src/app/blogs/%5Bslug%5D/page.tsx"
click node_mdx "https://github.com/xclusivkhodes/portfolio/blob/main/src/lib/mdx.ts"
click node_socket_context "https://github.com/xclusivkhodes/portfolio/blob/main/src/contexts/socketio.tsx"
click node_chat "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/realtime/online-users.tsx"
click node_cursors "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/realtime/remote-cursors.tsx"
click node_radial "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/radial-menu/index.tsx"
click node_contact_page "https://github.com/xclusivkhodes/portfolio/blob/main/src/app/contact/page.tsx"
click node_contact_form "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/ContactForm.tsx"
click node_send_route "https://github.com/xclusivkhodes/portfolio/blob/main/src/app/api/send/route.ts"
click node_email_template "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/email-template.tsx"
click node_site_config "https://github.com/xclusivkhodes/portfolio/blob/main/src/data/config.ts"
click node_app_shell "https://github.com/xclusivkhodes/portfolio/blob/main/src/app/layout.tsx"
click node_providers "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/providers.tsx"
click node_header "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/header/header.tsx"
click node_footer "https://github.com/xclusivkhodes/portfolio/blob/main/src/components/footer/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_home,node_keyboard,node_keyboard_config,node_skills,node_projects_section,node_experience_section,node_particles toneBlue
class node_projects_page,node_project_data,node_about_page,node_blogs_page,node_blog_post,node_mdx toneAmber
class node_socket_context,node_chat,node_cursors,node_radial toneMint
class node_contact_page,node_contact_form,node_send_route,node_email_template toneRose
class node_site_config,node_app_shell,node_providers,node_header,node_footer,node_visitor,node_socket_service,node_resend toneIndigo
```

## Components

### Portfolio experience

- [Landing page](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [3D skill keyboard](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/animated-background.tsx): `src/components/animated-background.tsx`
- [Keyboard behavior](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/animated-background-config.ts): `src/components/animated-background-config.ts`
- [Skills section](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/sections/skills.tsx): `src/components/sections/skills.tsx`
- [Projects section](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/sections/projects.tsx): `src/components/sections/projects.tsx`
- [Experience section](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/sections/experience.tsx): `src/components/sections/experience.tsx`
- [Space particles](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/Particles.tsx): `src/components/Particles.tsx`

### Portfolio content

- [Projects page](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/projects/page.tsx): `src/app/projects/page.tsx`
- [Project catalog](https://github.com/xclusivkhodes/portfolio/blob/main/src/data/projects.tsx): `src/data/projects.tsx`
- [About page](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/about/page.tsx): `src/app/about/page.tsx`
- [Blog index](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/blogs/page.tsx): `src/app/blogs/page.tsx`
- [Blog article](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/blogs/%5Bslug%5D/page.tsx): `src/app/blogs/[slug]/page.tsx`
- [MDX content](https://github.com/xclusivkhodes/portfolio/blob/main/src/lib/mdx.ts): `src/lib/mdx.ts`

### Live interactions

- [Socket context](https://github.com/xclusivkhodes/portfolio/blob/main/src/contexts/socketio.tsx): `src/contexts/socketio.tsx`
- [Chat and users](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/realtime/online-users.tsx): `src/components/realtime/online-users.tsx`
- [Remote cursors](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/realtime/remote-cursors.tsx): `src/components/realtime/remote-cursors.tsx`
- [Radial menu effects](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/radial-menu/index.tsx): `src/components/radial-menu/index.tsx`

### Contact delivery

- [Contact page](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/contact/page.tsx): `src/app/contact/page.tsx`
- [Contact form](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/ContactForm.tsx): `src/components/ContactForm.tsx`
- [Email API](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/api/send/route.ts): `src/app/api/send/route.ts`
- [Email template](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/email-template.tsx): `src/components/email-template.tsx`

### Shared presentation

- [Site configuration](https://github.com/xclusivkhodes/portfolio/blob/main/src/data/config.ts): `src/data/config.ts`
- [Application shell](https://github.com/xclusivkhodes/portfolio/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Shared providers](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/providers.tsx): `src/components/providers.tsx`
- [Navigation header](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/header/header.tsx): `src/components/header/header.tsx`
- [Site footer](https://github.com/xclusivkhodes/portfolio/blob/main/src/components/footer/footer.tsx): `src/components/footer/footer.tsx`

### Other components

- **Visitor**
- **Socket.IO service**
- **Resend email**

## Connections

- Visitor → Landing page: opens
- Visitor → Projects page: opens
- Visitor → About page: opens
- Visitor → Blog index: opens
- Visitor → Contact page: opens
- Landing page → 3D skill keyboard: renders
- Landing page → Skills section: renders
- Landing page → Projects section: renders
- Landing page → Experience section: renders
- Landing page → Space particles: renders
- 3D skill keyboard → Keyboard behavior: reads behavior
- Projects page → Project catalog: renders projects
- Projects section → Project catalog: renders projects
- Blog index → Blog article: links articles
- Blog article → MDX content: loads content
- Application shell → Shared providers: wraps routes
- Application shell → Navigation header: renders
- Application shell → Site footer: renders
- Contact page → Contact form: renders
- Contact form → Email API: submits message
- Email API → Site configuration: reads recipient
- Email API → Email template: builds email
- Email API → Resend email: sends email
- Chat and users → Socket context: uses context
- Remote cursors → Socket context: uses context
- Radial menu effects → Socket context: uses context
- Socket context → Socket.IO service: connects