How villa-mark/vue-personal-portfolio works
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: HomeView.vue Portfolio page · ui Shared UI primitives · App.vue App shell · ProjectsSection.vue Projects gallery
Components 23
Application shell
- App shell
src/App.vue - Portfolio page
src/views/HomeView.vue - Navigation
src/components/layout/NavBar.vue
Profile and story
- Hero and stats
src/components/hero/HeroSection.vue - About and philosophy
src/components/about/AboutSection.vue - Profile content
src/data/portfolio.ts
Career and work
- Skills explorer
src/components/skills/SkillExplorer.vue - Skill catalog
src/data/skills.ts - Experience timeline
src/components/experience/ExperienceSection.vue - Duration formatter
src/utils/experience.ts - Projects gallery
src/components/projects/ProjectsSection.vue - Project catalog
src/data/projects.ts - Project details
src/components/projects/ProjectDetailModal.vue
Credentials
- Education
src/components/education/EducationSection.vue - Certifications
src/components/education/CertificationsSection.vue - Achievements
src/components/education/AchievementsSection.vue - GitHub profile
src/components/education/GithubSection.vue - Resume availability
src/components/education/ResumeSection.vue
Shared interactions
- Contact form
src/components/contact/ContactForm.vue - Footer
src/components/layout/Footer.vue - Shared UI primitives
src/components/ui - Theme preference
src/composables/useTheme.ts
Other components
- Portfolio visitor
Connections 32
- Portfolio visitor → App shell: opens portfolio
README.md - App shell → Navigation: renders
src/App.vue - App shell → Portfolio page: routes to
src/App.vue - App shell → Footer: renders
src/App.vue - Portfolio page → Hero and stats: renders
src/views/HomeView.vue - Portfolio page → About and philosophy: renders
src/views/HomeView.vue - Portfolio page → Skills explorer: renders
src/views/HomeView.vue - Portfolio page → Experience timeline: renders
src/views/HomeView.vue - Portfolio page → Projects gallery: renders
src/views/HomeView.vue - Portfolio page → Education: renders
src/views/HomeView.vue - Portfolio page → Certifications: renders
src/views/HomeView.vue - Portfolio page → Achievements: renders
src/views/HomeView.vue - Portfolio page → GitHub profile: renders
src/views/HomeView.vue - Portfolio page → Resume availability: renders
src/views/HomeView.vue - Portfolio page → Contact form: renders
src/views/HomeView.vue - Navigation → Theme preference: uses
src/components/layout/NavBar.vue - Hero and stats → Profile content: reads
src/components/hero/HeroSection.vue - About and philosophy → Profile content: reads
src/components/about/AboutSection.vue - About and philosophy → Duration formatter: formats duration
src/components/about/AboutSection.vue - Skills explorer → Skill catalog: reads
src/components/skills/SkillExplorer.vue - Skills explorer → Project catalog: looks up projects
src/components/skills/SkillExplorer.vue - Experience timeline → Duration formatter: formats duration
- Projects gallery → Project catalog: reads
src/components/projects/ProjectsSection.vue - Projects gallery → Project details: opens details
src/components/projects/ProjectsSection.vue - Contact form → Profile content: reads contact details
src/components/contact/ContactForm.vue - Contact form → Portfolio visitor: submits via mailto
README.md - Hero and stats → Shared UI primitives: uses primitives
src/components/hero/HeroSection.vue - Projects gallery → Shared UI primitives: uses primitives
src/components/projects/ProjectsSection.vue - GitHub profile → Shared UI primitives: uses primitives
src/components/education/GithubSection.vue - Certifications → Shared UI primitives: uses empty state
src/components/education/CertificationsSection.vue - Education → Shared UI primitives: uses primitives
src/components/education/EducationSection.vue - Footer → Profile content: reads
src/components/layout/Footer.vue