Skip to main content

Build your portfolio in minutes

A modern Astro template with bento-grid layout, content collections, and Shadcn UI components. Perfect for developers who want to showcase their work beautifully.

Quick start

Get your portfolio live in three simple steps

1

Clone the repository

Clone the template and install dependencies with your preferred package manager.
git clone https://github.com/Vaibhav227/portfolio
cd portfolio
pnpm install
2

Configure your profile

Edit src/content/profileData.ts to add your personal information, skills, and social links.
export const PROFILE = {
  firstName: "Your Name",
  name: "Your Full Name",
  headLine: "Your Headline",
  website: "https://yoursite.com",
  links: {
    github: "https://github.com/yourusername",
    linkedin: "https://linkedin.com/in/yourusername"
  }
}
3

Start developing

Run the development server and start customizing your portfolio.
pnpm run dev
Your site will be available at http://localhost:4312

Key features

Everything you need to create a stunning developer portfolio

Bento-grid layout

Beautiful responsive card-based layout that adapts to any screen size

Content Collections

Organize your projects, blog posts, experiences, and books with type-safe schemas

Shadcn UI components

Pre-built accessible components with beautiful dark/light mode support

Tag system

Categorize and filter your content with a built-in tagging system

SEO optimized

Built-in SEO best practices with customizable meta tags

TypeScript ready

Full TypeScript support with type-safe content schemas

Explore components

Discover all the components available in this template

Layout

Card and Container components for structure

Sections

Pre-built sections for portfolio content

Utilities

Navigation, footer, and helper components

Ready to build your portfolio?

Follow our quickstart guide to get your portfolio live in minutes, or dive into the documentation to learn more about customization options.

Build docs developers (and LLMs) love