Getting Started with Nextfolio

Aug 13, 2024

Nextfolio includes all the essentials for a stunning portfolio website.

Start by deploying your portfolio with Vercel in minutes, or fork the repository and follow the instructions below to set it up.

Deploy with Vercel

Installation

Nextfolio uses pnpm for dependency management, so ensure it is installed on your system.

Execute create-next-app with pnpm 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 Nextfolio 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: "https://nextfolio-template.vercel.app", // Update with your site base URL
  title: "Nextfolio", // Update with your site title
  name: "Sirius", // Update with your name
  ogImage: "/opengraph-image.png", // Update with your Open Graph image
  description:
    "A clean, fast, and lightweight portfolio template built with Next.js, Vercel, and Tailwind CSS for optimal performance.", // Update with your site description
};

export const socialLinks = {
  twitter: "https://x.com/1tssirius", // Update with your Twitter URL
  github: "https://github.com/1msirius/Nextfolio", // Update with your GitHub URL
  instagram: "https://www.instagram.com/", // Update with your Instagram URL
  linkedin: "https://www.linkedin.com/", // Update with your LinkedIn URL
  email: "mailto:example@gmail.com", // Update with your email address
};

Sitemap

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

let routes = ["", "blog", "projects", "photos"].map((route) => ({ // Update routes according to your navbar
  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

Nextfolio 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. Nextfolio is fully customizable, allowing you to add features as needed.

Hannah Cussen