How to bootstrap your own portfolio website

Apr 13, 2025

If you'd like to clone this site for your own use case, follow the steps below.

Installation

This site uses pnpm for dependency management, so make sure it is installed on your system.

Execute create-next-app to bootstrap the example:

pnpm create next-app --example https://github.com/1msirius/Nextfolio my-portfolio

Start the development server:

pnpm dev

The server will be running at http://localhost:3000.

Configuration

Customize your setup by updating your information to ensure proper SEO, feed generation, Open Graph integration, and other settings.

Config.ts

Update the site metadata and social links in the app/config.ts file. These constants are utilized across the site for SEO, feeds, social links, and Open Graph integration.

export const metaData = {
  baseUrl: "...", // Update with your site base URL
  title: "...", // Update with your site title
  name: "...", // Update with your name
  ogImage: "...", // Update with your Open Graph image
  description: "...", // Update with your site description
};

export const socialLinks = {
  twitter: "...", // Update with your Twitter URL
  github: "...", // Update with your GitHub URL
  instagram: "...", // Update with your Instagram URL
  linkedin: "...", // Update with your LinkedIn URL
  email: "...", // Update with your email address
};

Sitemap

Adjust the routes to match your portfolio’s navigation in app/sitemap.ts file for SEO optimization:

// Update routes according to your navbar
let routes = ["", "blog", "projects", "photos"].map((route) => ({
  url: `${BaseUrl}${route}`,
  lastModified: new Date().toISOString().split("T")[0],
}));

Profile Photo

Update your profile photo by replacing the public/profile.png file with your image.

Favicon

Update your favicon by replacing the public/favicon.ico file with your custom icon.

Analytics

This site uses Vercel Web Analytics and Speed Insights to monitor user interactions and website's performance. Simply deploy your site on Vercel and enable both features through the Vercel dashboard.

Ready!

You're all set! Update your blog posts in the /content folder, add your project data in app/project/projectdata.tsx, and update your images in app/photos/page.tsx.

Your portfolio is equipped with SEO, RSS, Atom, and JSON feeds, as well as analytics. This template is fully customizable, allowing you to add features as needed.

← Leck Tang