Components

The frontend uses a set of reusable components to ensure consistency and speed up development.

UI Components

These are base components used throughout the application.

Button

A versatile button component with different variants and sizes.

<Button variant="primary" size="md" @click="handleClick">
  Click Me
</Button>

Props:

• variant: primary | secondary | outline | ghost
• size: sm | md | lg
• to: String (for NuxtLink)
• href: String (for external links)
• icon: String (icon name)

Card

A container component with consistent padding and styling.

<Card class="hover:scale-105 transition-transform">
  <h3 class="text-xl font-bold">Card Title</h3>
  <p>Card content goes here.</p>
</Card>

Badge

Used to display status, tags, or categories.

<Badge variant="success">Published</Badge>

Layout Components

Components that define the structure of the page.

Wrapper

Centers content and applies max-width.

<Wrapper>
  <!-- Content centered with max-width -->
</Wrapper>

Section

Defines a semantic section with standard vertical spacing.

<Section id="about" title="About Me">
  <!-- Section content -->
</Section>

Content Components

Components specific to the portfolio content.

ProjectCard

Displays a portfolio project.

<ProjectCard :project="projectData" />

BlogPostCard

Displays a blog post summary.

<BlogPostCard :post="postData" />