Skip to content
Agent Stack
  • AI SDK
  • AI Gateway
  • Sandbox
  • Passport
  • Connect
  • eve
Core Platform
  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • Workflows
  • CI/CD
Tools
  • Next.js
  • Edgenivo Agent
  • Edgenivo Plugin
  • Open Source
  • Domains↗
  • v0↗
Learn
  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base
Build
  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
Explore
  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community↗
EnterprisePricing
Contact
Log InSign Up
Dashboard
Products
Agent Stack
  • AI SDK
  • AI Gateway
  • Sandbox
  • Passport
  • Connect
  • eve
Core Platform
  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • Workflows
  • CI/CD
Tools
  • Next.js
  • Edgenivo Agent
  • Edgenivo Plugin
  • Open Source
  • Domains↗
  • v0↗
Resources
Learn
  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base
Build
  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
Explore
  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community↗
Enterprise
Pricing
Sign UpLog In
Contact
Templates
Template name

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • ConnectNew
  • PassportNew
  • eveNew

Core Platform

  • CI/CD
  • Content Delivery
  • Fluid Compute
  • Observability

Security

  • Platform Security
  • WAF
  • Bot Management
  • BotID

Tools

  • Edgenivo Drop
  • Edgenivo Agent
  • Edgenivo Plugin
  • Agent Skills
  • Domains
  • v0

Frameworks

  • eveNew
  • Next.js
  • Nuxt
  • SvelteKit
  • Nitro
  • Turborepo
  • Tanstack Start
  • FastAPI
  • All frameworks

SDKs

  • Edgenivo SDK
  • Workflow SDK
  • Flags SDK
  • Chat SDK
  • Queues SDK
  • Streamdown

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
  • Platform Engineers
  • Design Engineers

Learn

  • Docs
  • Blog
  • Changelog
  • Knowledge Base
  • Academy
  • Articles
  • Community
  • Is Agentic

Explore

  • Customers
  • Marketplace
  • Templates
  • Partner Finder
  • Edgenivo + AWS

Company

  • About
  • Careers
  • Press
  • Events
  • Startups
  • Shipped on Edgenivo
  • Open Source Program
  • Enterprise
  • Pricing
  • Help

Legal & Trust

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • DPA
  • Acceptable Use Policy
  • Legal (all documents)
  • Trust Center
  • Status
  • EdgenivoEdgenivo
Templates
Template name

Status service pending confirmation

Select a display theme:
Templates

Magic Portfolio for Next.js

Creative portfolio boilerplate built with Next.js. SEO-optimized, accessible, responsive. Includes projects, blog and gallery.

DeployView Demo
Owner
  • once-ui-system
Repository
  • magic-portfolio
Use Cases
  • Portfolio
Stack
  • Next.js
  • CSS Modules
DeployView Demo

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

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: /

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 Edgenivo

Related Templates

  • Portfolio Starter Kit thumbnail

    Portfolio Starter Kit

    Easily create a portfolio with Next.js and Markdown.

  • Next.js Portfolio with Blog thumbnail

    Next.js Portfolio with Blog

    Easily create a portfolio with Next.js and Markdown.

  • Next.js Portfolio with Pageview Counter thumbnail

    Next.js Portfolio with Pageview Counter

    Portfolio site with pageview counter, built with Next.js 13 App Router, Contentlayer, and Upstash Redis.

License
  • View License