Mono - Minimal Portfolio Template

Thank you for purchasing Mono! This guide will help you set up and customize your new website.

1. Quick Start

Prerequisites

• Node.js (v18 or higher)
• NPM, Yarn, or Pnpm

Installation

1. Extract the package files.
2. Open your terminal in the project directory.
3. Run npm install to install dependencies.
4. Run npm run dev to start the development server.
5. Visit http://localhost:3000 in your browser.
6. Copy .env.example to .env.local and set your site URL.

2. Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_SITE_URL=https://your-domain.com

This is used for SEO metadata, sitemaps, and robots.txt.

3. Customization

Central Configuration (The easiest way!)

Almost everything can be customized by editing just one file: lib/site-config.ts.

In this file, you can change:

• Personal Info: Name, role, bio, and email.
• Social Links: GitHub, Twitter, LinkedIn.
• Experience: List your work history.
• Projects: Add your best work with tags and slugs for detail pages.
• Writing (Blog): Manage articles by adding Markdown files to the content/writing directory. Each file should have frontmatter for title, date, and description.
• Research/Articles: Showcase your publications in siteConfig.
• Uses: List your daily tools and equipment in siteConfig.

Styling

This template uses Tailwind CSS with Next-Themes.

Changing Colors

You can change the entire color scheme by editing the CSS variables in app/globals.css.

• background / foreground: Main background and text colors.
• muted / muted-foreground: Secondary colors.
• accent / accent-foreground: Highlight colors.

These variables are defined for both :root (Light Mode) and .dark (Dark Mode).

4. Dynamic Pages

Project & Blog Pages

The template automatically generates separate pages for:

1. Projects added to siteConfig.projects (at /projects/[slug])

2. Blog posts added as Markdown files (at /writing/[slug])

3. Ensure each item has a unique slug.

4. The page content works with standard Markdown formatting.

5. Contact Form

The contact form is currently set up with a "success" state simulation. To make it functional, we recommend using a service like:

• Resend
• Formspree
• Web3Forms

Implementation details can be found in app/components/Contact.tsx.

6. Deployment

Vercel (Recommended)

1. Push your code to a GitHub repository.
2. Connect your GitHub account to Vercel.
3. Create a new project and select your repository.
4. Vercel will automatically detect the Next.js settings and deploy.

Build Command

For other platforms, use the following command to generate a static production build:

npm run build

If you have any questions, feel free to reach out via the support email listed on the marketplace.