# Magic Portfolio

A full multi-page portfolio - blog, project case studies, gallery, and CV - built on Once UI's design system

https://topboilerplates.com/magic-portfolio

Framework: Next.js | Pricing: freemium | GitHub stars: 1391

## Verdict

Best for: Developers or designers who want a real multi-section portfolio - work samples, a blog, and a CV page - and are fine adopting Once UI's design system instead of Tailwind.

Skip if: You're building anything commercial. The free template is licensed CC BY-NC 4.0 (non-commercial only); a paying freelancer or agency site needs the paid Once UI Pro license to use it legitimately.

## Description

A Next.js portfolio template from Once UI that goes further than a single homepage: it ships toggleable blog, work/case-study, gallery, and CV/about sections, each driven by MDX content files with automatic metadata and schema generation. Open Graph and social-preview images are generated automatically via next/og, and there's an i18n branch for localized sites. It's built entirely on Once UI's own component and theming system rather than Tailwind or a component library like shadcn, so customization happens through Once UI's data-attribute theming rather than utility classes.

## Pros and cons

+ Actually has the sections a portfolio needs - project case studies, a gallery, a CV/about page, and a blog - not just a single landing page

+ Automatic OG-image and schema/metadata generation per page, without hand-writing meta tags for each post

+ Localization support exists on a dedicated i18n branch for multi-language sites

- Free tier is CC BY-NC 4.0 - non-commercial use only, so freelancers or agencies need to buy the Once UI Pro license

- Locked into Once UI's own design system and data-attribute theming; there's no Tailwind or shadcn escape hatch if you'd rather use those

- Fewer GitHub stars and a smaller community than the long-running personal-portfolio templates, so third-party guides/answers are scarcer

## Features

- blog-cms
- seo-optimized
- schema-markup
- i18n
- source-available

## Stack

- TypeScript
- Vercel

## Links

- Website: https://topboilerplates.com/go/magic-portfolio
- GitHub: https://github.com/once-ui-system/magic-portfolio
- Demo: https://demo.magic-portfolio.com

## Alternatives

- [v4 (Brittany Chiang Portfolio Template)](https://topboilerplates.com/v4-brittany-chiang-portfolio-template)
- [Next.js Portfolio Starter Kit](https://topboilerplates.com/next-js-portfolio-starter-kit)