Case study

Pleno

A fast Astro + React portfolio template with MDX content and built-in components.

astroastroreactreactmarkdownmarkdown
Pleno preview

Overview

Pleno is a portfolio and planning template built with Astro and MDX, combining static speed with React interactivity.

Astro handles the static rendering for performance, while React powers isolated components like GitHub contributions, activity graphs, and dynamic widgets.

Everything can be written in Markdown or MDX, giving you full control over layout and content.

Highlights

Hybrid foundation

  • Built on Astro for fast, static output
  • Supports React islands for interactive components
  • Zero client-side overhead for static pages

MDX content and components

  • Content written in MDX (Markdown + React)
  • Includes prebuilt sections such as GitHub contribution graph and summary blocks
  • Perfect for portfolios, developer journals, and daily planning

Performance

  • Extremely fast build and load times thanks to Astro's static architecture
  • Minimal dependencies and small bundle size
  • Easy deployment on Vercel, Netlify, or any static host

Learnings

  • Astro's partial hydration offers great flexibility for hybrid setups
  • MDX allows simple content management while keeping React available when needed
  • Keeping component boundaries small improves build performance

Next steps

  • Add more ready-to-use sections for timeline and retrospectives
  • Improve theming options and typography defaults
  • Streamline MDX layout imports for faster setup

Pleno is a clean starting point for anyone who wants a fast, MDX-driven portfolio or planning space that merges Astro's performance with React's flexibility.