Maria is a free Astro theme for UX designers, product designers, and anyone whose portfolio is built on case studies. It pairs a calm, editorial layout with large type, a serif accent, and project cards framed in soft color, so the work stays the focus. Case studies are MDX files validated by Astro content collections, the copy lives in a few config files, and the output is fully static.
Features
- A homepage with an availability badge, a large headline with a serif accent, key facts, selected case studies, services, and testimonials
- Case studies written in MDX, one folder per project with its images beside it, validated by a content schema
- Case study pages with a project summary, client, year, role, duration, team, and services, a full-width cover, and a Next case study card
- Figure and Stats components for framed screenshots with captions and outcome metrics, available in every case study without imports
- Project cards tinted per project, with a cropped cover and a quiet hover zoom
- A paginated work index with previous and next links
- An About page with a portrait, editorial sections, and principles
- A Resume page with a snapshot, experience, capabilities, education, tools, and an optional PDF download
- A closing Let's talk panel above the footer on every page, with a direct email button
- Privacy, Terms, and Cookie Policy pages written in MDX, and a designed 404 page
- A cookie consent banner and preferences dialog with analytics and marketing categories, a small client API, and a change event
- Light and dark modes that follow the system until a visitor picks one, applied before first paint
- A sticky header, a full-screen mobile menu built on the native dialog element, and a skip link
- Entrance and scroll-reveal motion in CSS only, switched off for reduced-motion users
- Responsive, optimized images through Astro's image pipeline, with social cards cropped from each case study's cover
- Canonical URLs, Open Graph and Twitter/X cards, sitemap, robots.txt, and JSON-LD for the site, profile pages, case studies, and breadcrumbs
- Self-hosted Hanken Grotesk and Instrument Serif, a local Lucide icon set, and design tokens in one stylesheet
- Static output with no framework islands and only a few small scripts
- Landmarks, labelled controls, visible focus states, and keyboard support throughout
Who it's for
- UX and product designers presenting case studies to clients or hiring teams
- UI designers and design leads who want a polished personal site without building one from scratch
- Freelancers and independent consultants who need a portfolio, an about page, and a resume in one place
- Design students and career changers putting together their first serious portfolio
- Developers who build portfolios for designers and want a clean, well-documented starting point
