Magic Portfolio\r

\r 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.\r \r View the demo here.\r \r \r \r

Getting started\r

\r 1. Clone the repository\r

git clone https://github.com/once-ui-system/magic-portfolio.git\r
```\r
\r
**2. Install dependencies**\r
```\r
npm install\r
```\r
\r
**3. Run dev server**\r
```\r
npm run dev\r
```\r
\r
**4. Edit config**\r
```\r
src/resources/once-ui.config.js\r
```\r
\r
**5. Edit content**\r
```\r
src/resources/content.js\r
```\r
\r
**6. Create blog posts / projects**\r
```\r
Add a new .mdx file to src/app/blog/posts or src/app/work/projects\r
```\r
\r
Magic Portfolio was built with [Once UI](https://once-ui.com) for [Next.js](https://nextjs.org). It requires Node.js v18.17+.\r
\r
## Documentation\r
\r
Docs available at: [docs.once-ui.com](https://docs.once-ui.com/docs/magic-portfolio/quick-start)\r
\r
## Features\r
\r
### Once UI\r
- All tokens, components & features of [Once UI](https://once-ui.com)\r
\r
### SEO\r
- Automatic open-graph and X image generation with next/og\r
- Automatic schema and metadata generation based on the content file\r
\r
### Design\r
- Responsive layout optimized for all screen sizes\r
- Timeless design without heavy animations and motion\r
- Endless customization options through [data attributes](https://once-ui.com/docs/theming)\r
\r
### Content\r
- Render sections conditionally based on the content file\r
- Enable or disable pages for blog, work, gallery and about / CV\r
- Generate and display social links automatically\r
- Set up password protection for URLs\r
\r
### Localization\r
- A localized, earlier version of Magic Portfolio is available with the next-intl library\r
- To use localization, switch to the 'i18n' branch\r
\r
## Creators\r
\r
Lorant One: [Threads](https://www.threads.net/@lorant.one) / [LinkedIn](https://www.linkedin.com/in/lorant-one/)\r
\r
## Get involved\r
\r
- Join the Design Engineers Club on [Discord](https://discord.com/invite/5EyAQ4eNdS) and share your project with us!\r
- Deployed your docs? Share it on the [Once UI Hub](https://once-ui.com/hub) too! We feature our favorite apps on our landing page.\r
\r
## License\r
\r
Distributed under the CC BY-NC 4.0 License.\r
- Attribution is required.\r
- Commercial usage is not allowed.\r
- You can extend the license to [Dopler CC](https://dopler.app/license) by purchasing a [Once UI Pro](https://once-ui.com/pricing) license.\r
\r
See `LICENSE.txt` for more information.\r
\r
## Deploy with Vercel\r
\r
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fonce-ui-system%2Fmagic-portfolio&project-name=portfolio&repository-name=portfolio&redirect-url=https%3A%2F%2Fgithub.com%2Fonce-ui-system%2Fmagic-portfolio&demo-title=Magic%20Portfolio&demo-description=Showcase%20your%20designers%20or%20developer%20portfolio&demo-url=https%3A%2F%2Fdemo.magic-portfolio.com&demo-image=%2F%2Fraw.githubusercontent.com%2Fonce-ui-system%2Fmagic-portfolio%2Fmain%2Fpublic%2Fimages%2Fog%2Fhome.jpg)