Photography Portfolio

Overview

This project is a personal photography portfolio designed to showcase my work in landscape, travel, and portrait photography. Built with Nuxt.js and Tailwind CSS, it focuses on a clean, minimalist aesthetic that lets the images speak for themselves. The gallery features a custom light-box implementation, smooth transitions, and a fully responsive layout optimized for all devices.

Key Features

• Masonry Grid Layout: Dynamically arranges photos of various aspect ratios without awkward gaps.
• Lazy Loading: Images are loaded progressively to ensure fast page load times and reduced bandwidth usage.
• Custom Lightbox: A bespoke lightbox component allowing users to view high-resolution images with gesture support for mobile.
• Category Filtering: Seamless sorting of images by tags (Landscape, Portrait, Urban).

Technical Implementation

The site is a static generated site (SSG) hosted on Vercel.

• State Management: Uses Pinia for managing gallery state and filter preferences.
• Image Optimization: Leverages the @nuxt/image module for automatic resizing and format conversion (WebP/AVIF).
• Animations: Framer Motion (via Vue bindings) is used for page transitions and micro-interactions.

Challenges & Solutions

One of the main challenges was maintaining performance with high-resolution imagery. I implemented a LQIP (Low Quality Image Placeholders) strategy where a tiny, blurred base64 version of the image is loaded first, followed by the full-res version once it's in the viewport. This dramatically improved the Core Web Vitals score.