Photo Portfolio V3 is a photography portfolio website codebase by jpvalery, built on Next.js and TailwindCSS, that pulls images and content from Contentful, integrates Umami analytics, and is deployed on Vercel.
What is Photo Portfolio V3?
Photo Portfolio V3 is the source code behind the photography portfolio at jpvalery.photo, launched in March 2021. It is a Next.js application that statically generates a photo gallery, styled with TailwindCSS, with all images and captions stored as entries in Contentful, a headless CMS. The site is hosted on Vercel and includes Umami analytics for privacy-friendly visitor tracking. The repository is shared as a reference for developers combining these tools.
Key Features
- Next.js — the React framework that generates the static pages and handles routing for the portfolio.
- TailwindCSS — utility-first CSS for styling the layout directly in markup.
- Contentful — headless CMS that supplies the portfolio content; the site pulls from it at build time.
- Umami — privacy-friendly web analytics, a self-hostable alternative to Google Analytics.
- Vercel — hosting and deployment platform tied to the GitHub repository.
- Reference code — the author notes it is intended as a learning resource; it requires replicating the Contentful schema to run.
Who is it for?
Photographers — those who want a fast, visually clean portfolio site using a headless CMS, and are comfortable setting up Contentful. Next.js developers — anyone learning how to integrate Next.js with Contentful and deploy on Vercel can study this codebase. Contentful users — developers who want to see a real-world content model and how it maps to a static site.
What can you do with it?
Photographers: set up a portfolio by recreating the Contentful schema, adding images and descriptions, and deploying the Next.js app to Vercel. Developers: fork the repository and use it as a reference for building JAMstack sites with Next.js and Contentful. Designers: use the TailwindCSS setup as a starting point for a clean, image-focused layout.
How does Photo Portfolio V3 work?
The site pulls content from Contentful at build time, so every portfolio entry is a content model in the CMS. Next.js statically generates HTML pages from that content, and the result is deployed to Vercel. Umami analytics is loaded client-side to measure page views.
Pros and cons
- Pros: Modern stack with Next.js and TailwindCSS; headless CMS allows easy content updates; privacy-friendly analytics via Umami; simple deployment through Vercel; open reference code.
- Cons: Does not run out of the box — you must recreate the Contentful schema to see the site populated; the author requests attribution and discourages direct copy-paste.
FAQ
Can I run Photo Portfolio V3 as-is?
No. The repository provides the codebase, but the content lives in a private Contentful space. To make the site work, you need to replicate the Contentful schema and populate it with your own images.
What tech stack does Photo Portfolio V3 use?
It uses Next.js with TailwindCSS for the frontend, Contentful as the headless CMS, Umami for analytics, and Vercel for hosting and deployment.
Who built Photo Portfolio V3?
The project was created by jpvalery, the author of the portfolio at jpvalery.photo. It is based on an earlier iteration by Matthias (iammatthias/.com) from which the first version was adapted.
What was the previous version like?
The previous iteration, launched in January 2019, used Contentful, Netlify, and Gatsby V2. It was based on the work of @iammatthias/.com.
Is Photo Portfolio V3 free to use?
The code is shared publicly on GitHub for reference and learning. The author asks you to give credit and to avoid a mindless copy-paste; there is no mention of a formal license.
