React Templates & Themes Logo React Templates & Themes
Portfolio screenshot

Portfolio

Author Avatar Theme by Jpvalery
Updated: 22 Mar 2025
275 Stars

Photo Portfolio w/ Next.js + TailwindCSS + Contentful

Github Live Preview

Categories

Nextjs Tailwind Contentful Headless ui

Overview

The Photo Portfolio V3 is a Next.js + TailwindCSS-based codebase for a photography portfolio, specifically designed for https://jpvalery.photo. It was initially launched in March 2021 and serves as a showcase for the photographer’s work.

Features

  • Next.js: The portfolio is built using Next.js, a popular React framework that provides server-side rendering and other performance optimizations.
  • TailwindCSS: It utilizes TailwindCSS, a utility-first CSS framework, for styling and layout purposes.
  • Contentful: The portfolio pulls content from Contentful, a headless CMS, to dynamically populate the site with photography-related data.
  • Analytics w/ Umami: It integrates analytics functionality using Umami, allowing for tracking and analysis of website visitors.
  • Hosted on Vercel: The portfolio is hosted using Vercel, a serverless deployment platform, for improved scalability and reliability.

Installation

To install the Photo Portfolio V3 codebase and set it up for your own project, follow the guide below:

  1. Ensure that you have Node.js and npm (Node Package Manager) installed on your machine.
  2. Clone the repository to your local machine using the command: git clone <repository-url>
  3. Navigate to the project directory: cd <project-directory>
  4. Install the project dependencies by running: npm install
  5. Set up the required environment variables for Contentful and Umami.
  6. Start the development server with: npm run dev
  7. Access the portfolio on your local machine at http://localhost:3000.

Please note that the codebase can serve as a reference for other projects but requires replicating the Contentful schema to work correctly.

Summary

The Photo Portfolio V3 is a Next.js + TailwindCSS-based codebase for a photography portfolio. It offers key features such as Next.js integration for server-side rendering, TailwindCSS for easy styling, and Contentful for dynamically pulling content. The portfolio also includes analytics functionality using Umami and is hosted on Vercel. It can be useful as a reference for similar projects, but note that the Contentful schema needs to be replicated for it to work properly.