# varunhunakunti2-crypto/protfillo architecture

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

- Interactive diagram: https://gitdiagram.com/varunhunakunti2-crypto/protfillo
- Repository: https://github.com/varunhunakunti2-crypto/protfillo

## Overview

This is a bilingual Vue portfolio: visitors navigate an animated, section-based showcase of the owner’s profile, services, skills and projects, with contact options and a separate project-detail route. The shared app shell hosts navigation and the floating chat assistant; the chat flow sends a visitor’s transcript to a server endpoint, where shared logic validates it and calls Groq. Other notable capabilities include localized content, scroll-driven presentation, and an interactive audio keyboard. Relationships for unsampled sections and the contact endpoint are limited to documented or indexed references; no unshown contact submission flow is inferred.

Main entry points: [`src/pages/HomePage.vue`](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/pages/HomePage.vue) (Home composition), [`src/router/index.js`](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/router/index.js) (Route selection), [`src/components/Navbar.vue`](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/Navbar.vue) (Navigation and theme), [`src/App.vue`](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/App.vue) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["App and navigation"]
  node_app["App shell<br/>[App.vue]"]
  node_router["Route selection<br/>[index.js]"]
  node_navbar["Navigation and theme<br/>[Navbar.vue]"]
  node_i18n["English and Japanese<br/>[index.js]"]
end

subgraph group_portfolio["Portfolio content"]
  node_home["Home composition<br/>[HomePage.vue]"]
  node_projectdetail["Project detail<br/>[ProjectDetail.vue]"]
  node_notfound["Not found page<br/>[NotFound.vue]"]
  node_profile["Profile and impact<br/>[About.vue]"]
  node_services["Services<br/>[Services.vue]"]
  node_skills["Skills<br/>[Skills.vue]"]
  node_projects["Projects<br/>[Projects.vue]"]
  node_contact["Contact section<br/>[Contact.vue]"]
  node_footer["Cinematic footer"]
  node_statement["Statement<br/>[Statement.vue]"]
  node_experience["Experience<br/>[Experience.vue]"]
  node_impact["Impact<br/>[Impact.vue]"]
  node_homehero["Home introduction<br/>[Home.vue]"]
end

subgraph group_interaction["Visitor interactions"]
  node_keyboardsection["Keyboard section<br/>[Keyboard.vue]"]
  node_keyboard["Vintage keyboard"]
  node_keylogic["Keyboard logic"]
  node_key["Keyboard key"]
  node_magnetic["Magnetic interaction<br/>[useMagnetic.js]"]
  node_dots["Particle effect<br/>[DotsEffect.jsx]"]
  node_swarm["Particle swarm wrappers<br/>[AtomSwarm.vue]"]
  node_halo["Halo animation<br/>[HaloSwarm.vue]"]
end

subgraph group_assistant["Chat assistant"]
  node_chatwidget["Chat widget<br/>[ChatBot.vue]"]
  node_chatapi["Chat endpoint<br/>[chat.js]"]
  node_chatlogic["Chat validation and logic<br/>[chat.mjs]"]
  node_groq["Groq API"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"guards navigation"| node_router
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_projectdetail
node_router -->|"routes to"| node_notfound
node_home -->|"renders"| node_homehero
node_home -->|"renders"| node_impact
node_home -->|"renders"| node_profile
node_home -->|"renders"| node_services
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_keyboardsection
node_home -->|"renders"| node_statement
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_keyboardsection -->|"renders"| node_keyboard
node_keyboard -->|"renders"| node_key
node_keyboard -->|"uses logic"| node_keylogic
node_navbar -->|"uses interaction"| node_magnetic
node_visitor -->|"asks questions"| node_chatwidget
node_chatwidget -->|"posts transcript"| node_chatapi
node_chatapi -->|"delegates to"| node_chatlogic
node_chatlogic -->|"requests response"| node_groq
node_swarm -->|"renders effect"| node_dots
node_halo -->|"renders effect"| node_dots
node_footer -->|"renders"| node_swarm
node_visitor -->|"switches language"| node_navbar
node_navbar -.->|"selects locale"| node_i18n

click node_app "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/App.vue"
click node_router "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/router/index.js"
click node_home "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/pages/HomePage.vue"
click node_projectdetail "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/pages/ProjectDetail.vue"
click node_notfound "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/pages/NotFound.vue"
click node_profile "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/About.vue"
click node_services "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Services.vue"
click node_skills "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Skills.vue"
click node_projects "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Projects.vue"
click node_contact "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Contact.vue"
click node_keyboardsection "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Keyboard.vue"
click node_keyboard "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/ui/VintageKeyboard.vue"
click node_keylogic "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/ui/vintage-keyboard-logic.js"
click node_key "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/ui/VintageKeyboardKey.vue"
click node_navbar "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/Navbar.vue"
click node_magnetic "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/composables/useMagnetic.js"
click node_i18n "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/i18n/index.js"
click node_chatwidget "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/ChatBot.vue"
click node_chatapi "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/api/chat.js"
click node_chatlogic "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/server/chat.mjs"
click node_dots "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/react/DotsEffect.jsx"
click node_swarm "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/AtomSwarm.vue"
click node_halo "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/HaloSwarm.vue"
click node_footer "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/ui/CinematicFooter.vue"
click node_statement "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Statement.vue"
click node_experience "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Experience.vue"
click node_impact "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Impact.vue"
click node_homehero "https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Home.vue"

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_app,node_router,node_navbar,node_i18n toneBlue
class node_home,node_projectdetail,node_notfound,node_profile,node_services,node_skills,node_projects,node_contact,node_footer,node_statement,node_experience,node_impact,node_homehero toneAmber
class node_keyboardsection,node_keyboard,node_keylogic,node_key,node_magnetic,node_dots,node_swarm,node_halo toneMint
class node_chatwidget,node_chatapi,node_chatlogic,node_groq toneRose
class node_visitor toneIndigo
```

## Components

### App and navigation

- [App shell](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/App.vue): `src/App.vue`
- [Route selection](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/router/index.js): `src/router/index.js`
- [Navigation and theme](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/Navbar.vue): `src/components/Navbar.vue`
- [English and Japanese](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/i18n/index.js): `src/i18n/index.js`

### Portfolio content

- [Home composition](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/pages/HomePage.vue): `src/pages/HomePage.vue`
- [Project detail](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/pages/ProjectDetail.vue): `src/pages/ProjectDetail.vue`
- [Not found page](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/pages/NotFound.vue): `src/pages/NotFound.vue`
- [Profile and impact](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/About.vue): `src/sections/About.vue`
- [Services](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Services.vue): `src/sections/Services.vue`
- [Skills](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Skills.vue): `src/sections/Skills.vue`
- [Projects](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Projects.vue): `src/sections/Projects.vue`
- [Contact section](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Contact.vue): `src/sections/Contact.vue`
- [Cinematic footer](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/ui/CinematicFooter.vue): `src/components/ui/CinematicFooter.vue`
- [Statement](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Statement.vue): `src/sections/Statement.vue`
- [Experience](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Experience.vue): `src/sections/Experience.vue`
- [Impact](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Impact.vue): `src/sections/Impact.vue`
- [Home introduction](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Home.vue): `src/sections/Home.vue`

### Visitor interactions

- [Keyboard section](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/sections/Keyboard.vue): `src/sections/Keyboard.vue`
- [Vintage keyboard](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/ui/VintageKeyboard.vue): `src/components/ui/VintageKeyboard.vue`
- [Keyboard logic](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/ui/vintage-keyboard-logic.js): `src/components/ui/vintage-keyboard-logic.js`
- [Keyboard key](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/ui/VintageKeyboardKey.vue): `src/components/ui/VintageKeyboardKey.vue`
- [Magnetic interaction](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/composables/useMagnetic.js): `src/composables/useMagnetic.js`
- [Particle effect](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/react/DotsEffect.jsx): `src/components/react/DotsEffect.jsx`
- [Particle swarm wrappers](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/AtomSwarm.vue): `src/components/AtomSwarm.vue`
- [Halo animation](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/HaloSwarm.vue): `src/components/HaloSwarm.vue`

### Chat assistant

- [Chat widget](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/src/components/ChatBot.vue): `src/components/ChatBot.vue`
- [Chat endpoint](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/api/chat.js): `api/chat.js`
- [Chat validation and logic](https://github.com/varunhunakunti2-crypto/protfillo/blob/main/server/chat.mjs): `server/chat.mjs`
- **Groq API**

### Other components

- **Visitor**

## Connections

- Visitor → App shell: opens site (evidence: `README.md`)
- App shell → Navigation and theme: renders (evidence: `src/App.vue`)
- App shell → Route selection: guards navigation (evidence: `src/App.vue`)
- Route selection → Home composition: routes to (evidence: `src/router/index.js`)
- Route selection → Project detail: routes to (evidence: `src/router/index.js`)
- Route selection → Not found page: routes to (evidence: `src/router/index.js`)
- Home composition → Home introduction: renders (evidence: `src/pages/HomePage.vue`)
- Home composition → Impact: renders (evidence: `src/pages/HomePage.vue`)
- Home composition → Profile and impact: renders (evidence: `src/pages/HomePage.vue`)
- Home composition → Services: renders (evidence: `src/pages/HomePage.vue`)
- Home composition → Skills: renders (evidence: `src/pages/HomePage.vue`)
- Home composition → Keyboard section: renders (evidence: `src/pages/HomePage.vue`)
- Home composition → Statement: renders (evidence: `src/pages/HomePage.vue`)
- Home composition → Projects: renders (evidence: `src/pages/HomePage.vue`)
- Home composition → Contact section: renders (evidence: `src/pages/HomePage.vue`)
- Home composition → Cinematic footer: renders (evidence: `src/pages/HomePage.vue`)
- Keyboard section → Vintage keyboard: renders (evidence: `src/sections/Keyboard.vue`)
- Vintage keyboard → Keyboard key: renders (evidence: `src/components/ui/VintageKeyboard.vue`)
- Vintage keyboard → Keyboard logic: uses logic (evidence: `src/components/ui/VintageKeyboard.vue`)
- Navigation and theme → Magnetic interaction: uses interaction (evidence: `src/components/Navbar.vue`)
- Visitor → Chat widget: asks questions (evidence: `README.md`)
- Chat widget → Chat endpoint: posts transcript (evidence: `README.md`)
- Chat endpoint → Chat validation and logic: delegates to (evidence: `api/chat.js`)
- Chat validation and logic → Groq API: requests response (evidence: `server/chat.mjs`)
- Particle swarm wrappers → Particle effect: renders effect (evidence: `src/components/AtomSwarm.vue`)
- Halo animation → Particle effect: renders effect (evidence: `src/components/HaloSwarm.vue`)
- Cinematic footer → Particle swarm wrappers: renders (evidence: `src/components/ui/CinematicFooter.vue`)
- Visitor → Navigation and theme: switches language (evidence: `README.md`)
- Navigation and theme → English and Japanese: selects locale