Build your portfolio with Once UI's Magic Portfolio

Magic Portfolio was built with Once UI for Next.js. It requires Node.js v18.17+.

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/app/resources/config

5. Edit content

src/app/resources/content

6. Create blog posts / projects

Add a new .mdx file to src/app/blog/posts or src/app/work/projects

Features

Once UI

• All tokens, components & features of Once UI (v0.3.1)

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

TIP: You try pre-built designs by changing the imports for the config and content in src/app/resources/index.ts

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

Authors

Connect with us on X or LinkedIn.

Lorant Toth: X, LinkedIn
Zsofia Komaromi: X, LinkedIn

Get involved

• Join the Once UI Discord server and share your portfolio with designers and developers!
• Report a bug.

License

Distributed under the CC BY-NC 4.0 License.

• Commercial usage is not allowed.
• Attribution is required.

See LICENSE.txt for more information.

Deploy your project