Best Boilerplates for Portfolio and Personal Sites 2026

Portfolio Sites: Simplicity Wins

Portfolio sites have the opposite priorities from enterprise SaaS: simplicity, fast loads, easy updates, and great design out of the box. The feature set is small — about you, projects, blog, contact. The quality of execution matters more than the feature count.

In 2026, Astro is the consensus best framework for portfolios. Zero JavaScript default, excellent Markdown support, and a growing template ecosystem.

Quick Comparison

Starter	Framework	Speed	Update UX	Design Quality	Best For
Astro Nano	Astro	⭐⭐⭐⭐⭐	MDX files	Minimal, elegant	Developer minimalists
Hugo PaperMod	Hugo	⭐⭐⭐⭐⭐	Markdown files	Clean blog	Blogger-first portfolio
Next.js Portfolio	Next.js	⭐⭐⭐⭐	MDX files	Highly customizable	Devs who know Next.js
Hugo Blox	Hugo	⭐⭐⭐⭐⭐	Markdown	Academic	Researchers, academics
Framer	No-code	⭐⭐⭐⭐⭐	Visual editor	Excellent	Design-forward portfolios

The Starters

Astro Nano — Best Minimal Developer Portfolio

Price: Free | Creator: Mark Horn

~10KB total JavaScript. About page, projects, blog with MDX, dark mode, RSS, and clean typography. The fastest portfolio starter available.

npm create astro@latest my-portfolio -- --template nano

Content structure:

src/content/
├── blog/
│   ├── first-post.md
│   └── second-post.mdx  # MDX for interactive examples
└── projects/
    ├── project-1.md
    └── project-2.md

Choose if: You want a fast, minimal developer portfolio that you'll customize.

Astro Sphere — Best Design-Forward

Price: Free | Creator: Mark Horn

More design-forward than Nano. Smooth animations, project showcase, skills section, and work timeline. Still fast (Astro), but more visually impressive.

Choose if: Your work is design or UI-heavy and you want a portfolio that shows it.

Next.js Portfolio — Best Customizable

Price: Free | Creator: Various (Lee Robinson's is popular)

Next.js with App Router, MDX blog, syntax highlighting, and shadcn/ui components. Less blazing-fast than Astro (React hydration) but more customizable for developers who know React.

// Dynamic MDX blog with Next.js
import { getBlogPosts } from '@/app/blog/utils';

export default async function BlogPage() {
  const posts = await getBlogPosts();

  return posts
    .sort((a, b) => b.metadata.date.localeCompare(a.metadata.date))
    .map(post => (
      <BlogPostCard key={post.slug} post={post} />
    ));
}

Choose if: You're comfortable with Next.js and want maximum flexibility for future features.

What Makes a Great Developer Portfolio

The Essential Sections

1. Hero — Name, one-line description, quick links (GitHub, LinkedIn, Email)
2. Projects — 3-5 best projects with screenshots, tech stack, and results
3. Blog — Even 3-5 posts show you can communicate (huge for job searches)
4. Contact — Simple contact form or email link

What to Skip

• "Skills" section with HTML/CSS/JavaScript listed — everyone has these
• Animated skill bars — they look dated
• Long "about me" — nobody reads past 3 sentences
• More than 8 projects — curate, don't dump

SEO for Portfolios

Portfolios need to rank for your name + developer:

<!-- Essential meta tags -->
<title>Your Name — Frontend Developer</title>
<meta name="description" content="Frontend developer specializing in React and TypeScript. Building fast, accessible web experiences.">
<meta property="og:image" content="https://yoursite.com/og.png">

<!-- JSON-LD for search engines -->
<script type="application/ld+json">
{
  "@type": "Person",
  "name": "Your Name",
  "jobTitle": "Frontend Developer",
  "url": "https://yourname.dev",
  "sameAs": ["https://github.com/yourname", "https://linkedin.com/in/yourname"]
}
</script>

All Astro and Next.js portfolio templates include these — Hugo usually does too.

---

Compare portfolio and SaaS boilerplates on StarterPick.