# villa-mark/vue-personal-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/villa-mark/vue-personal-portfolio
- Repository: https://github.com/villa-mark/vue-personal-portfolio

## Overview

This is a Vue-based personal developer portfolio: a visitor navigates a single-page profile from its hero through skills, work, projects, education, and contact. `HomeView` composes those domain sections; each section presents configurable content from `src/data/`. The projects and skills branches add filtering, related-project exploration, and project details, while the contact form and resume availability check support action-oriented flows. The graph reflects documented capabilities and indexed imports; some section implementations and data modules were not excerpted, so their internal calls are not inferred.

Main entry points: [`src/views/HomeView.vue`](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/views/HomeView.vue) (Portfolio page), [`src/components/ui`](https://github.com/villa-mark/vue-personal-portfolio/tree/master/src/components/ui) (Shared UI primitives), [`src/App.vue`](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/App.vue) (App shell), [`src/components/projects/ProjectsSection.vue`](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/projects/ProjectsSection.vue) (Projects gallery)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_app["App shell<br/>[App.vue]"]
  node_home["Portfolio page<br/>[HomeView.vue]"]
  node_navigation["Navigation<br/>[NavBar.vue]"]
end

subgraph group_profile["Profile and story"]
  node_hero["Hero and stats<br/>[HeroSection.vue]"]
  node_about["About and philosophy<br/>[AboutSection.vue]"]
  node_profiledata["Profile content<br/>[portfolio.ts]"]
end

subgraph group_work["Career and work"]
  node_skills["Skills explorer<br/>[SkillExplorer.vue]"]
  node_skilldata["Skill catalog<br/>[skills.ts]"]
  node_experience["Experience timeline"]
  node_experienceutil["Duration formatter<br/>[experience.ts]"]
  node_projects["Projects gallery"]
  node_projectdata["Project catalog<br/>[projects.ts]"]
  node_projectdetail["Project details"]
end

subgraph group_credentials["Credentials"]
  node_education["Education"]
  node_certifications["Certifications"]
  node_achievements["Achievements"]
  node_github["GitHub profile<br/>[GithubSection.vue]"]
  node_resume["Resume availability<br/>[ResumeSection.vue]"]
end

subgraph group_shared["Shared interactions"]
  node_contact["Contact form<br/>[ContactForm.vue]"]
  node_footer["Footer<br/>[Footer.vue]"]
  node_ui["Shared UI primitives"]
  node_theme["Theme preference<br/>[useTheme.ts]"]
end

node_visitor(("Portfolio visitor"))

node_visitor -->|"opens portfolio"| node_app
node_app -->|"renders"| node_navigation
node_app -->|"routes to"| node_home
node_app -->|"renders"| node_footer
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_experience
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_education
node_home -->|"renders"| node_certifications
node_home -->|"renders"| node_achievements
node_home -->|"renders"| node_github
node_home -->|"renders"| node_resume
node_home -->|"renders"| node_contact
node_navigation -->|"uses"| node_theme
node_hero -->|"reads"| node_profiledata
node_about -->|"reads"| node_profiledata
node_about -->|"formats duration"| node_experienceutil
node_skills -->|"reads"| node_skilldata
node_skills -->|"looks up projects"| node_projectdata
node_experience -.->|"formats duration"| node_experienceutil
node_projects -->|"reads"| node_projectdata
node_projects -->|"opens details"| node_projectdetail
node_contact -->|"reads contact details"| node_profiledata
node_contact -->|"submits via mailto"| node_visitor
node_hero -->|"uses primitives"| node_ui
node_projects -->|"uses primitives"| node_ui
node_github -->|"uses primitives"| node_ui
node_certifications -->|"uses empty state"| node_ui
node_education -->|"uses primitives"| node_ui
node_footer -->|"reads"| node_profiledata

click node_app "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/App.vue"
click node_home "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/views/HomeView.vue"
click node_navigation "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/layout/NavBar.vue"
click node_hero "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/hero/HeroSection.vue"
click node_about "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/about/AboutSection.vue"
click node_profiledata "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/data/portfolio.ts"
click node_skills "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/skills/SkillExplorer.vue"
click node_skilldata "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/data/skills.ts"
click node_experience "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/experience/ExperienceSection.vue"
click node_experienceutil "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/utils/experience.ts"
click node_projects "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/projects/ProjectsSection.vue"
click node_projectdata "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/data/projects.ts"
click node_projectdetail "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/projects/ProjectDetailModal.vue"
click node_education "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/education/EducationSection.vue"
click node_certifications "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/education/CertificationsSection.vue"
click node_achievements "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/education/AchievementsSection.vue"
click node_github "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/education/GithubSection.vue"
click node_resume "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/education/ResumeSection.vue"
click node_contact "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/contact/ContactForm.vue"
click node_footer "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/layout/Footer.vue"
click node_ui "https://github.com/villa-mark/vue-personal-portfolio/tree/master/src/components/ui"
click node_theme "https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/composables/useTheme.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_app,node_home,node_navigation toneBlue
class node_hero,node_about,node_profiledata toneAmber
class node_skills,node_skilldata,node_experience,node_experienceutil,node_projects,node_projectdata,node_projectdetail toneMint
class node_education,node_certifications,node_achievements,node_github,node_resume toneRose
class node_contact,node_footer,node_ui,node_theme,node_visitor toneIndigo
```

## Components

### Application shell

- [App shell](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/App.vue): `src/App.vue`
- [Portfolio page](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/views/HomeView.vue): `src/views/HomeView.vue`
- [Navigation](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/layout/NavBar.vue): `src/components/layout/NavBar.vue`

### Profile and story

- [Hero and stats](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/hero/HeroSection.vue): `src/components/hero/HeroSection.vue`
- [About and philosophy](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/about/AboutSection.vue): `src/components/about/AboutSection.vue`
- [Profile content](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/data/portfolio.ts): `src/data/portfolio.ts`

### Career and work

- [Skills explorer](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/skills/SkillExplorer.vue): `src/components/skills/SkillExplorer.vue`
- [Skill catalog](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/data/skills.ts): `src/data/skills.ts`
- [Experience timeline](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/experience/ExperienceSection.vue): `src/components/experience/ExperienceSection.vue`
- [Duration formatter](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/utils/experience.ts): `src/utils/experience.ts`
- [Projects gallery](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/projects/ProjectsSection.vue): `src/components/projects/ProjectsSection.vue`
- [Project catalog](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/data/projects.ts): `src/data/projects.ts`
- [Project details](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/projects/ProjectDetailModal.vue): `src/components/projects/ProjectDetailModal.vue`

### Credentials

- [Education](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/education/EducationSection.vue): `src/components/education/EducationSection.vue`
- [Certifications](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/education/CertificationsSection.vue): `src/components/education/CertificationsSection.vue`
- [Achievements](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/education/AchievementsSection.vue): `src/components/education/AchievementsSection.vue`
- [GitHub profile](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/education/GithubSection.vue): `src/components/education/GithubSection.vue`
- [Resume availability](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/education/ResumeSection.vue): `src/components/education/ResumeSection.vue`

### Shared interactions

- [Contact form](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/contact/ContactForm.vue): `src/components/contact/ContactForm.vue`
- [Footer](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/components/layout/Footer.vue): `src/components/layout/Footer.vue`
- [Shared UI primitives](https://github.com/villa-mark/vue-personal-portfolio/tree/master/src/components/ui): `src/components/ui`
- [Theme preference](https://github.com/villa-mark/vue-personal-portfolio/blob/master/src/composables/useTheme.ts): `src/composables/useTheme.ts`

### Other components

- **Portfolio visitor**

## Connections

- Portfolio visitor → App shell: opens portfolio (evidence: `README.md`)
- App shell → Navigation: renders (evidence: `src/App.vue`)
- App shell → Portfolio page: routes to (evidence: `src/App.vue`)
- App shell → Footer: renders (evidence: `src/App.vue`)
- Portfolio page → Hero and stats: renders (evidence: `src/views/HomeView.vue`)
- Portfolio page → About and philosophy: renders (evidence: `src/views/HomeView.vue`)
- Portfolio page → Skills explorer: renders (evidence: `src/views/HomeView.vue`)
- Portfolio page → Experience timeline: renders (evidence: `src/views/HomeView.vue`)
- Portfolio page → Projects gallery: renders (evidence: `src/views/HomeView.vue`)
- Portfolio page → Education: renders (evidence: `src/views/HomeView.vue`)
- Portfolio page → Certifications: renders (evidence: `src/views/HomeView.vue`)
- Portfolio page → Achievements: renders (evidence: `src/views/HomeView.vue`)
- Portfolio page → GitHub profile: renders (evidence: `src/views/HomeView.vue`)
- Portfolio page → Resume availability: renders (evidence: `src/views/HomeView.vue`)
- Portfolio page → Contact form: renders (evidence: `src/views/HomeView.vue`)
- Navigation → Theme preference: uses (evidence: `src/components/layout/NavBar.vue`)
- Hero and stats → Profile content: reads (evidence: `src/components/hero/HeroSection.vue`)
- About and philosophy → Profile content: reads (evidence: `src/components/about/AboutSection.vue`)
- About and philosophy → Duration formatter: formats duration (evidence: `src/components/about/AboutSection.vue`)
- Skills explorer → Skill catalog: reads (evidence: `src/components/skills/SkillExplorer.vue`)
- Skills explorer → Project catalog: looks up projects (evidence: `src/components/skills/SkillExplorer.vue`)
- Experience timeline → Duration formatter: formats duration
- Projects gallery → Project catalog: reads (evidence: `src/components/projects/ProjectsSection.vue`)
- Projects gallery → Project details: opens details (evidence: `src/components/projects/ProjectsSection.vue`)
- Contact form → Profile content: reads contact details (evidence: `src/components/contact/ContactForm.vue`)
- Contact form → Portfolio visitor: submits via mailto (evidence: `README.md`)
- Hero and stats → Shared UI primitives: uses primitives (evidence: `src/components/hero/HeroSection.vue`)
- Projects gallery → Shared UI primitives: uses primitives (evidence: `src/components/projects/ProjectsSection.vue`)
- GitHub profile → Shared UI primitives: uses primitives (evidence: `src/components/education/GithubSection.vue`)
- Certifications → Shared UI primitives: uses empty state (evidence: `src/components/education/CertificationsSection.vue`)
- Education → Shared UI primitives: uses primitives (evidence: `src/components/education/EducationSection.vue`)
- Footer → Profile content: reads (evidence: `src/components/layout/Footer.vue`)