Magic Portfolio is a simple, clean, beginner-friendly portfolio template. It supports an MDX-based content system for projects and blog posts, an about / CV page and a gallery.
View the demo here.
Launch your portfolio on Aveiro, our managed publishing platform. Update case studies, blog posts and content through MCP from your favorite AI tools.
1. Clone the repository
git clone https://github.com/once-ui-system/magic-portfolio.git
2. Install dependencies
npm install
3. Run dev server
npm run dev
4. Edit config
src/resources/once-ui.config.ts
5. Edit content
src/resources/content.tsx
6. Create blog posts / projects
Add a new .mdx file to src/app/blog/posts or src/app/work/projects
Magic Portfolio was built with Once UI for Next.js. It requires Node.js 20.9 or later.
Docs available at: docs.once-ui.com
- All tokens, components & features of Once UI
- Automatic open-graph and X image generation with next/og
- RSS feed at
/api/rss - Automatic schema and metadata generation based on the content file
- Responsive layout optimized for all screen sizes
- Timeless design without heavy animations and motion
- Endless customization options through data attributes
- Render sections conditionally based on the content file
- Enable or disable pages for blog, work, gallery and about / CV
- Generate and display social links automatically
- Set up password protection for URLs
- Write math in posts with LaTeX between
$$signs, rendered with KaTeX
- Signups from the home page and blog go straight into your Aveiro audience, where you also write and send the newsletter
- Create an embed form in Aveiro under Audience → Embed and paste its public ID as
aveiroEmbedIdinsrc/resources/once-ui.config.ts
- A localized, earlier version of Magic Portfolio is available with the next-intl library
- To use localization, switch to the
localization-(Once-UI-0.4.2)branch
Lorant One: Threads / LinkedIn
- Join the Design Engineers Club on Discord and share your project with us!
- Deployed your docs? Share it on the Once UI Hub too! We feature our favorite apps on our landing page.
Distributed under the CC BY-NC 4.0 License.
- Attribution is required.
- Commercial usage is not allowed.
- You can extend the license to Dopler CC by purchasing a Once UI Pro license.
See LICENSE for more information.
