Pages & Routing

The frontend uses Nuxt’s file-based routing system. Each Vue file in the pages/ directory automatically creates a route.

Page Structure

pages/
├── index.vue              # Homepage (/)
├── about.vue              # About page (/about)
├── contact.vue            # Contact page (/contact)
├── privacy.vue            # Privacy policy (/privacy)
├── resources.vue          # Resources page (/resources)
├── resume.vue             # Resume page (/resume)
├── blog/
│   ├── index.vue          # Blog listing (/blog)
│   └── [slug].vue         # Individual blog posts (/blog/:slug)
└── portfolio/
    ├── index.vue          # Portfolio listing (/portfolio)
    └── [slug].vue         # Individual projects (/portfolio/:slug)

Key Pages

Homepage (index.vue)

The main landing page featuring:

• Hero section with introduction
• Featured portfolio projects
• Recent blog posts
• Testimonials
• Call-to-action sections

About Page (about.vue)

Personal introduction and background information.

Blog Section

• Blog Index (blog/index.vue): Lists all published blog posts with pagination
• Blog Post (blog/[slug].vue): Displays individual blog posts with dynamic routing

Portfolio Section

• Portfolio Index (portfolio/index.vue): Showcases all portfolio projects
• Project Detail (portfolio/[slug].vue): Detailed project pages with galleries

Resume Page (resume.vue)

Comprehensive resume display with sections for:

• Professional summary
• Work experience
• Education
• Skills and certifications
• Achievements

Resources Page (resources.vue)

Curated list of useful resources, tools, and references.

Contact Page (contact.vue)

Contact form for potential clients and collaborators.

Dynamic Routing

The application uses Nuxt’s dynamic routing for blog posts and portfolio projects:

// blog/[slug].vue
const route = useRoute()
const { slug } = route.params

// Fetch post data using the slug
const { data: post } = await useApi(`/blog/posts/${slug}`)

SEO & Meta Tags

Each page implements proper SEO with:

• Dynamic meta titles and descriptions
• Open Graph tags for social sharing
• Structured data for search engines
• Canonical URLs