Glynnster Photos

My photography portfolio website built with Next.js 16, with a 3D WebGL gallery experience with custom shader effects.

Features

• 3D Infinite Gallery - WebGL-powered image gallery with cloth-like shader effects, smooth scrolling, and depth-based blur/fade transitions
• Animated WebGL Background - Procedural topographic-style animated background using custom GLSL shaders
• Spinner Navigation - Unique scroll-wheel based navigation system with mobile hamburger menu support
• Responsive Design - Optimized for both desktop and mobile with touch gesture support
• Analytics & Security - Integrated PostHog analytics, DataDome bot protection, and Intercom support
• Cookie Consent - It's GDPR compliant yo!

Tech Stack

• Framework: Next.js 16 with Turbopack
• 3D Graphics: Three.js, React Three Fiber, React Three Drei
• Styling: Tailwind CSS 4, Framer Motion
• Fonts: Geist Mono, Instrument Serif
• Deployment: Vercel
• Analytics: PostHog
• Security: DataDome

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended)

Installation

# Clone the repository
git clone https://github.com/odinglyn0/glynnsterphotos
cd glynnsterphotos

# Install dependencies
pnpm install

# Set up environment variables
cp .env.local.example .env.local
# Edit .env.local with your configuration

Environment Variables

Create a .env.local file with the following variables:

# Social Links
NEXT_PUBLIC_SOCIAL_INSTAGRAM_URL=
NEXT_PUBLIC_SOCIAL_INSTAGRAM_ACTIVE=true
NEXT_PUBLIC_SOCIAL_TIKTOK_URL=
NEXT_PUBLIC_SOCIAL_TIKTOK_ACTIVE=true
NEXT_PUBLIC_SOCIAL_GITHUB_URL=
NEXT_PUBLIC_SOCIAL_GITHUB_ACTIVE=true
NEXT_PUBLIC_SOCIAL_LINKEDIN_URL=
NEXT_PUBLIC_SOCIAL_LINKEDIN_ACTIVE=true

# Analytics & Services
NEXT_PUBLIC_POSTHOG_KEY=
NEXT_PUBLIC_POSTHOG_HOST=
NEXT_PUBLIC_DATADOME_CLIENT_KEY=
NEXT_PUBLIC_INTERCOM_APP_ID=

Development

pnpm dev

Open http://localhost:3000 to view the site.

Build

pnpm build
pnpm start

Project Structure

├── app/
│   ├── about/          # About page
│   ├── api/            # API routes
│   ├── cookies/        # Cookie policy page
│   ├── license/        # License page
│   ├── layout.tsx      # Root layout with providers
│   └── page.tsx        # Home page with gallery
├── components/
│   ├── InfiniteGallery.tsx    # 3D WebGL gallery component
│   ├── webgl-bg.tsx           # Animated background shader
│   ├── spinner-nav.tsx        # Scroll-wheel navigation
│   ├── cookie-banner.tsx      # GDPR cookie consent
│   └── ui/                    # Shared UI components
├── hooks/              # Custom React hooks
├── lib/                # Utility functions
├── public/             # Static assets
└── styles/             # Global styles

Pages

• / - Home with infinite 3D photo gallery
• /about - About the photographer
• /license - Image licensing information
• /cookies - Cookie policy

Author

Odin Glynn-Martin - Thats me!

• Website: odinglynn.com

License

All photographs are copyrighted under CC BY-NC-SA 4.0. See the License page for usage terms.

All code in this repo (excl. /images/**) is under MIT