Skip to content

Next.js Portfolio with Blog

Easily create a portfolio with Next.js and Markdown.

Framework Next.js
Use Case Portfolio
CSS Tailwind
Database PlanetScale
Auth NextAuth.js
Publisher Lee Robinson

leerob.io

Learn More

I've recorded two live streams walking through this repository and answering questions.

Overview

  • layouts/* - The different page layouts each MDX category (blog, snippets) uses.
  • lib/* - Short for "library", a collection of helpful utilities or code for external services.
  • pages/api/* - API Routes powering /dashboard, newsletter subscription, guestbook, and post views.
  • pages/blog/* - Static pre-rendered blog pages using MDX.
  • pages/dashboard - Personal dashboard tracking metrics.
  • pages/sitemap.xml.tsx - Automatically generated sitemap.
  • pages/feed.xml.tsx - Automatically generated RSS feed.
  • pages/* - All other static pages.
  • prisma/* - My Prisma schema, which uses a PlanetScale MySQL database.
  • public/* - Static assets including fonts and images.
  • styles/* - A small amount of global styles. I'm mostly using vanilla Tailwind CSS.

Running Locally

This application requires Node.js v16.13+.

git clone https://github.com/leerob/leerob.io.git
cd leerob.io
pnpm install
pnpm dev

Create a .env file similar to .env.example.

Cloning / Forking

Please review the license and remove all of my personal information (resume, blog posts, images, etc.).

Next.js Portfolio with Blog

Easily create a portfolio with Next.js and Markdown.

Framework Next.js
Use Case Portfolio
CSS Tailwind
Database PlanetScale
Auth NextAuth.js
Publisher Lee Robinson

leerob.io

Learn More

I've recorded two live streams walking through this repository and answering questions.

Overview

  • layouts/* - The different page layouts each MDX category (blog, snippets) uses.
  • lib/* - Short for "library", a collection of helpful utilities or code for external services.
  • pages/api/* - API Routes powering /dashboard, newsletter subscription, guestbook, and post views.
  • pages/blog/* - Static pre-rendered blog pages using MDX.
  • pages/dashboard - Personal dashboard tracking metrics.
  • pages/sitemap.xml.tsx - Automatically generated sitemap.
  • pages/feed.xml.tsx - Automatically generated RSS feed.
  • pages/* - All other static pages.
  • prisma/* - My Prisma schema, which uses a PlanetScale MySQL database.
  • public/* - Static assets including fonts and images.
  • styles/* - A small amount of global styles. I'm mostly using vanilla Tailwind CSS.

Running Locally

This application requires Node.js v16.13+.

git clone https://github.com/leerob/leerob.io.git
cd leerob.io
pnpm install
pnpm dev

Create a .env file similar to .env.example.

Cloning / Forking

Please review the license and remove all of my personal information (resume, blog posts, images, etc.).

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential