Skip to main content
The home components create the main landing page experience, including hero sections, about section, blog listings, project showcase, and work experience timeline.

​
HeroText

The main hero text component displays your introduction, tagline, and call-to-action buttons.
​
siteConfig
object
required
Reads from @/config to display name, tagline, and description
​
socials
Collection
required
Fetches social links from the socials content collection

​
Usage

---
import { HeroText } from '@/components/home';
---

<HeroText />

​
Features

  • Animated slide-in effect
  • Dynamic social links from content collection
  • Two CTAs: “Explore My Work” and “Read the Newsletter”
  • Responsive typography with gradient effects

​
HeroImage

Displays an animated profile image with glow effects and a pulsing border animation.
​
siteConfig.avatar
string
required
Path to the avatar image from site config

​
Usage

---
import { HeroImage } from '@/components/home';
---

<HeroImage />

​
Features

  • Optimized images using Astro’s Image component
  • AVIF format with multiple widths
  • Gradient glow effect on hover
  • Animated pulsing border
  • Responsive sizing (320px mobile, 640px desktop)

​
About

Renders the about section with markdown content from the content collection.
​
aboutContent
ContentEntry
required
Fetches content from content/about/about-content.md

​
Usage

---
import { About } from '@/components/home';
---

<About />

​
Features

  • Fetches and renders markdown content
  • Includes SideNav component for quick navigation
  • Custom typography styling with first-letter effects
  • Two CTAs: “Get In Touch” and “View Projects”
  • Sticky sidebar navigation on desktop
  • Gradient background overlay

​
Content Structure

The component expects content at src/content/about/about-content.md with: 
---
subtitle: "Your subtitle here"
---

Your markdown content here...

​
Blogs

Displays the 6 most recent blog posts in a grid layout.

​
Usage

---
import { Blogs } from '@/components/home';
---

<Blogs />

​
Features

  • Automatically fetches latest 6 posts from the blog collection
  • Sorted by date (newest first)
  • Uses ArticleCard component for each post
  • Responsive grid: 1 column mobile, 2 tablet, 3 desktop
  • “View All Articles” CTA button

​
Content Requirements

Expects blog posts in src/content/blog/ with frontmatter: 
title: string
description: string
dateCreated: Date
tags: string[]
cover_image: string (optional)

​
Projects

Showcases featured projects in a masonry grid layout with modal details.

​
Usage

---
import { Projects } from '@/components/home';
---

<Projects />

​
Features

  • Masonry grid with varying card sizes
  • Filters only featured projects (featured: true)
  • Sorted by year (descending)
  • Interactive modal with full project details
  • Tech stack badges (shows first 3, with “+X more”)
  • Smooth animations with staggered delays
  • Custom patterns for grid layout

​
Grid Patterns

The component cycles through these grid span patterns: 
md:col-span-2 md:row-span-2  // Large featured
  • Full project description (markdown rendered)
  • Complete tech stack display
  • External links (website, GitHub, App Store, Play Store)
  • Cover image display
  • Click backdrop to close
  • Escape key support

​
Content Requirements

Projects in src/content/projects/ with frontmatter: 
title: string
featured: boolean
year: number
tech: string[]
cover_image: string (optional)
made_at: string (optional)
external_link: string (optional)
github_link: string (optional)
app_store: string (optional)
google_play: string (optional)

​
WorkExperience

Displays work history in a tabbed interface with markdown content.

​
Usage

---
import { WorkExperience } from '@/components/home';
---

<WorkExperience />

​
Features

  • Tab-based interface (vertical tabs on desktop)
  • Sorted by order field in frontmatter
  • Smooth transitions between tabs
  • Company website links with external icon
  • Markdown content rendering for responsibilities
  • Custom list styling with arrow bullets
  • Horizontal scroll on mobile tabs

​
Content Requirements

Experience entries in src/content/experience/ with frontmatter: 
company: string
role: string
period: string
website: string
order: number

​
Styling Features

The component applies custom styling to markdown lists:
  • Arrow bullets (›) in secondary color
  • Increased spacing between items
  • Bold text for emphasis
  • Indented list items

​
JavaScript Functionality

The component includes client-side JavaScript for tab interaction:
  • Click tabs to switch content
  • Active tab highlighted with border and background
  • Content fades in/out with slide animation
  • Initializes on page load and after Astro page transitions

​
Layout Example

Here’s how these components work together on the homepage: 
---
import { 
  HeroText, 
  HeroImage, 
  About, 
  Blogs, 
  Projects, 
  WorkExperience 
} from '@/components/home';
---

<Layout>
  <!-- Hero Section -->
  <section class="grid md:grid-cols-2 gap-12">
    <HeroText />
    <HeroImage />
  </section>

  <!-- About Section -->
  <About />

  <!-- Work Experience -->
  <WorkExperience />

  <!-- Projects -->
  <Projects />

  <!-- Blog Posts -->
  <Blogs />
</Layout>

​
Animations

All home components include built-in animations:
  • HeroText: Slide in from left
  • HeroImage: Slide in from right, hover scale
  • Projects: Blur fade with staggered delays
  • WorkExperience: Tab transitions with opacity/transform
Animation classes are defined in the global CSS and triggered automatically.

Build docs developers (and LLMs) love

Get started for freeTalk to us