Skip to main content

​
Overview

UI components are the building blocks of the portfolio. They’re located in src/components/ui/ and provide consistent styling across the site.

​
Button

A versatile button component with multiple variants and sizes.

​
Props

​
variant
string
default:"primary"
Button style variant:
  • "primary" - Red gradient background
  • "secondary" - White background with border
  • "outline" - Red border with transparent background
  • "ghost" - No background, text only
​
size
string
default:"md"
Button size:
  • "sm" - Small (px-4 py-2)
  • "md" - Medium (px-6 py-3)
  • "lg" - Large (px-8 py-4)
  • "xl" - Extra large (px-10 py-5)
​
href
string
If provided, renders as an <a> tag instead of <button>
​
target
string
default:"_self"
Link target (only used when href is provided)
​
class
string
Additional CSS classes

​
Usage

<Button variant="primary" size="lg">
  Primary Button
</Button>

<Button variant="secondary" size="md">
  Secondary Button
</Button>

<Button variant="outline" size="md">
  Outline Button
</Button>

<Button variant="ghost" size="sm">
  Ghost Button
</Button>

​
Styling

Buttons include:
  • Rounded corners (rounded-full)
  • Scale animation on hover (hover:scale-105)
  • Smooth transitions (300ms)
  • Shadow effects

​
Badge

Small labels for displaying categories, tags, or status.

​
Props

​
variant
string
default:"primary"
Badge color variant:
  • "primary" - Red badge
  • "secondary" - Gray badge
  • "success" - Green badge
  • "warning" - Orange badge
  • "danger" - Red badge
​
size
string
default:"sm"
Badge size:
  • "xs" - Extra small
  • "sm" - Small
  • "md" - Medium
​
class
string
Additional CSS classes

​
Usage

<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>

​
Styling

Badges feature:
  • Rounded pill shape (rounded-full)
  • Medium font weight
  • Compact padding
  • Background and text color coordination

​
Card

A flexible container component with hover effects.

​
Props

​
href
string
If provided, renders as clickable link
​
target
string
default:"_self"
Link target (only used when href is provided)
​
variant
string
default:"default"
Card style variant:
  • "default" - White background with shadow
  • "flat" - White background with border
​
class
string
Additional CSS classes

​
Usage

<Card class="p-6">
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</Card>

​
Features

  • Lift animation on hover (hover:-translate-y-1)
  • Shadow enhancement on hover
  • Smooth transitions (300ms)
  • Rounded corners (rounded-2xl)

​
Icon

Wrapper for Iconify icons with consistent sizing.

​
Props

​
name
string
required
Iconify icon name (e.g., "mdi:github", "mdi:arrow-right")
​
size
number
default:24
Icon size in pixels
​
class
string
Additional CSS classes

​
Usage

<Icon name="mdi:github" size={24} />

​
Icon Libraries

The portfolio uses Material Design Icons (MDI) via Iconify:

​
Section

A full-width section container with consistent spacing.

​
Props

​
background
string
default:"bg-white"
Background color class (e.g., "bg-white", "bg-red-50", "bg-gradient-to-r from-red-500 to-red-700")
​
padding
string
default:"py-20"
Vertical padding class
​
class
string
Additional CSS classes

​
Usage

<Section background="bg-white" id="projects">
  <h2>My Projects</h2>
  <!-- Content -->
</Section>

​
Features

  • Automatic container with max-width
  • Horizontal padding (px-4)
  • Centered content
  • Full-width backgrounds

​
SectionHeader

A centered section title with optional subtitle.

​
Props

​
title
string
required
Section title
​
subtitle
string
Optional subtitle text
​
class
string
Additional CSS classes

​
Usage

<SectionHeader title="My Projects" />

​
Styling

  • Centered text alignment
  • Large title (4xl-5xl responsive)
  • Red color for title (text-red-700)
  • Gray subtitle (text-gray-600)
  • Max-width subtitle (2xl)
  • Bottom margin (mb-16)

​
StatCard

Displays a statistic with an icon, value, and label.

​
Props

​
icon
string
required
Iconify icon name
​
value
string | number
required
The statistic value (e.g., “50+”, “1000”)
​
label
string
required
Description of the statistic

​
Usage

<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
  <StatCard
    icon="mdi:code-braces"
    value="50+"
    label="Projects Completed"
  />
  
  <StatCard
    icon="mdi:github"
    value="1000+"
    label="GitHub Contributions"
  />
  
  <StatCard
    icon="mdi:star"
    value="100+"
    label="Stars Earned"
  />
</div>

​
Features

  • Circular icon background with gradient
  • Large value display
  • Hover shadow effect
  • Centered layout

​
Timeline

Displays items in a vertical timeline with a gradient line.

​
Props

​
items
array
required
Array of timeline items

​
Usage

---
const timelineItems = [
  { date: "2024", title: "Senior Developer", company: "Tech Corp" },
  { date: "2022", title: "Developer", company: "Startup Inc" },
];
---

<Timeline items={timelineItems}>
  <div slot="item" slot-scope="{ item }">
    <div class="rounded-lg bg-white p-6 shadow-lg">
      <div class="mb-2 text-sm text-gray-500">{item.date}</div>
      <h3 class="text-xl font-bold">{item.title}</h3>
      <p class="text-gray-600">{item.company}</p>
    </div>
  </div>
</Timeline>

​
Features

  • Gradient timeline line (blue to pink)
  • Circular markers at each item
  • Named slot for custom item rendering
  • Responsive spacing

​
Common Patterns

​
Combining Components

<Section background="bg-white">
  <SectionHeader
    title="My Work"
    subtitle="Projects and contributions"
  />
  
  <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
    <Card class="p-6">
      <Icon name="mdi:code" size={48} class="mb-4 text-red-600" />
      <h3 class="mb-2 text-xl font-bold">Development</h3>
      <p class="text-gray-600">Building modern web applications</p>
      <Badge variant="primary" class="mt-4">Active</Badge>
    </Card>
  </div>
  
  <div class="mt-12 text-center">
    <Button href="/projects" size="lg" variant="primary">
      View All Projects
      <Icon name="mdi:arrow-right" size={20} class="ml-2" />
    </Button>
  </div>
</Section>

Card Components

Specialized cards using these UI primitives

Sections

Full-page section components

Build docs developers (and LLMs) love

Get started for freeTalk to us