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.

Getting started

1. Clone the repository

1
git clone https://github.com/once-ui-system/magic-portfolio.git

2. Install dependencies

1
npm install

3. Run dev server

1
npm run dev

4. Edit config

1
src/resources/once-ui.config.js

5. Edit content

1
src/resources/content.js

6. Create blog posts / projects

1
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