My photography portfolio with galleries, tags, folders, and a globe 🌎
The prerequisites are Node >= 20 and pnpm >= 8.
First, install the dependencies:
pnpm installRun the development server:
pnpm devOpen http://localhost:3000 to see the app!
The project is written in TypeScript, using Zod, Tailwind, and Next.js.
Globe.GL for the homepage globe and cobe for the about page globe
d3-geo for globe data
three for scene creation
PhotoSwipe for image lightboxes
Masonic for masonry layouts
Pig for image grid layouts
cwebp for compressing .jpg to .webp images. See scripts/webp.sh for details regarding image optimization.
The Next site is statically exported and hosted on a GitHub Pages site using GitHub Actions.
All assets are stored on Contentful and fetched from their GraphQL endpoint.
This model refers to the albums featured on the front page, titled by their region.
Special albums on the front page like Music can exist without coordinate data if using type: custom.
| Field | Contentful Type |
|---|---|
| title | Short text |
| photos | Media |
| color | Short text |
| type | Short text: Enum<[location, custom]> |
| description | Long text |
| date | Short text |
| lat | Decimal |
| lng | Decimal |
| locations | JSON: Array<{ lat, lng, description }> |
| order | Decimal |
For more information, see the album types. Note this field originally had ID photoGallery.
This model refers to the optional folders feature available at the /folders route.
| Field | Contentful Type |
|---|---|
| title | Short text |
| parent_title | Short text |
| photos | Media |
| description | Long text |
| date | Short text |
| order | Decimal |