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

Password-protected pages

List the paths in protectedRoutes in src/resources/once-ui.config.ts, then set these environment variables (see .env.example):

Variable
PAGE_ACCESS_PASSWORD	The password visitors enter.
PAGE_ACCESS_SECRET	A long random string (for example openssl rand -base64 32) that signs the access cookie. Recommended; without it a key derived from the password is used, so changing the password signs everyone out.

Protection runs on the server: src/proxy.ts and the blog and work pages check the signed, HttpOnly cookie that /api/authenticate sets (valid for one hour), so a protected page's content is never sent without the password. Password attempts are rate limited per visitor. The page's title, summary and cover still appear in project and post lists.

Magic Portfolio was built with Once UI for Next.js. It requires Node.js 20.9 or later.

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
• RSS feed at /api/rss
• 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
• Write math in posts with LaTeX between $$ signs, rendered with KaTeX

Newsletter

• 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 aveiroEmbedId in src/resources/once-ui.config.ts

Localization

• 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

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

Deploy with Vercel