Magic Portfolio

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.

Getting started

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.js

5. Edit content

src/resources/content.js

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 v18.17+.

Documentation

Docs available at: docs.once-ui.com

Features

Once UI

• All tokens, components & features of Once UI

SEO

• Automatic open-graph and X image generation with next/og
• Automatic schema and metadata generation based on the content file

Design

• Responsive layout optimized for all screen sizes
• Timeless design without heavy animations and motion
• Endless customization options through data attributes

Content

• 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

Localization

• A localized, earlier version of Magic Portfolio is available with the next-intl library
• To use localization, switch to the 'i18n' branch

Creators

Lorant One: Threads / LinkedIn

Get involved

• 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.

License

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.txt for more information.

Deploy with Vercel