Magic Portfolio

Magic Portfolio is licensed under CC BY-NC 4.0.

Key restrictions and requirements:

• Personal Use Only: You may only use the template for personal purposes.
• Attribution: You must attribute the original work. By default, attribution is included in the footer, but you may move it to any other visible part of your site.

To extend the license to Dopler CC, you must subscribe to the Once UI Pro plan.

Follow these steps to set up the Magic Portfolio template locally. This project requires Node.js v18.17+ and is built with Once UI for Next.js.

1. Clone the repository

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

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

Social sharing images (Open Graph and Twitter) are automatically generated using next/og. By default, the system generates a dynamic image using the page title via an API route.

If you prefer to use a static image instead of a dynamically generated one, replace the ogImage value in your metadata function with a direct path to an image located in the public directory.

export async function generateMetadata() {
  const title = home.title;
  const description = home.description;
  // Dynamic generation using next/og API
  const ogImage = `https:///${api/og/generate?title=${encodeURIComponent(title)}`;
   ...
};

Magic Portfolio is an MDX-based, SEO-friendly, and responsive portfolio template built using Once UI and Next.js. Follow these steps to set up your local development environment:

1. Clone the repository:

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

2. Install dependencies: Navigate to the project directory and run:

   npm install

3. Run the development server: Start the local server to view your portfolio:

   npm run dev

You can write rich, dynamic content in your project files using MDX. While some elements are automatically transformed into Once UI components, you can use additional custom components by registering them in src/components/mdx.tsx.

To use a new component:

1. Import the component into src/components/mdx.tsx.
2. Add the component to the components object exported from that file.

Pre-configured components available for use include Table and CodeBlock.

const components = {
    p: createParagraph as any,
    h1: createHeading(1) as any,
    h2: createHeading(2) as any,
    h3: createHeading(3) as any,
    h4: createHeading(4) as any,
    h5: createHeading(5) as any,
    h6: createHeading(6) as any,
    img: createImage as any,
    a: CustomLink as any,
    Table,
    CodeBlock,
};

You can personalize the newsletter block's text by modifying the newsletter object in src/app/resources/content.js. You can use JSX to include dynamic data like the user's name in the title.

const newsletter = {
    display: true,
    title: <>Subscribe to {person.firstName}'s Newsletter</>,
    description: (
      <>
        I occasionally write about design, technology, and share thoughts on the intersection of creativity and engineering.
      </>
    ),
};

To add a new page to your portfolio, follow these two steps:

1. Register the route: Add the new path to the routes object in src/app/resources/config.js and set its value to true.
2. Update navigation: Add the new page to the navigation menu by editing the components/Header.tsx file.

Example of registering a new /music route in src/app/resources/config.js:

const routes = {
    '/':        true,
    '/about':   true,
    '/work':    true,
    '/blog':    true,
    '/gallery': false,
    '/music': true,
};

The core content of the portfolio is managed in src/app/resources/content.js. Most properties accept ReactNode, allowing you to use custom components (like Link or InlineCode) directly within your content.

Note: If you use components in your content, you must import them at the top of src/app/resources/content.js.

import { InlineCode } from "@once-ui/core";
import Link from "next/link";

const person = {
  ...
};

Blog posts use YAML frontmatter at the top of each .mdx file to define metadata. This metadata is used for the post's page content as well as SEO meta and Open Graph tags.

Supported keys include:

• title: The title of the post.
• publishedAt: The publication date.
• image: Path to the post's cover image.
• summary: A brief description of the post.
• tag: A category or tag for the post.

---
title: "Arriving to a new milestone in my career"
publishedAt: "2024-04-08"
image: "/images/gallery/img-02.jpg"
summary: "Every career is a journey, filled with challenges, growth, and those significant moments that mark a shift in our path."
tag: "Journal"
---

To enable email collection in your Magic Portfolio, you must configure a Mailchimp embed form.

1. Sign up for a Mailchimp account and create a new list.
2. Create a new embed form within Mailchimp.
3. Copy the form URL and add it to the action property of the mailchimp object in your configuration file.

const mailchimp = {
    action: 'https://url/subscribe/post?parameters',
    effects: {
      ...
    }
};

The password used by the RouteGuard component is managed via environment variables.

• For local development, add the password to your .env.local file.
• For production (e.g., Vercel), configure the password as an environment variable in your hosting provider's dashboard.