Overview

A personal art portfolio for my own work — original paintings, drawings, tattoo design, and illustration. The site presents five evolving collections (Western, Learning the Line, Salt Life, Wild Things, and Everything Else) and pairs an image-first, gallery-like interface with the practical details behind the work: project stories, artwork credits, an about page, and a contact flow. Rather than adapting a template, the site was built from scratch with a component-driven architecture, data-driven content, and a build pipeline focused on performance, accessibility, and SEO.

Key Features

• Image-first project galleries: Each collection has its own detail page with a full-bleed hero, a responsive image grid, a lightbox with zoom, and hover credits for each piece.
• Data-driven content: Collections live in a single file (src/lib/projectData.js) where titles, descriptions, images, and credits are defined, so the galleries, detail pages, and navigation all stay in sync.
• Bilingual experience (EN/DE): A lightweight i18n layer provides full English and German translations with a language switcher in the header.
• Dark and light theme: A persistent theme toggle with system-preference detection and smooth transitions.
• Responsive, accessible UI: Fluid layouts across mobile, tablet, and desktop, semantic landmarks, keyboard navigation, a skip link, and reduced-motion support.
• Contact & inquiries: A validated contact form (React Hook Form + Zod) with a project-type selector, sending inquiries through Web3Forms.
• Automated image pipeline: A build-time script uses sharp to generate responsive WebP variants and social-share JPEGs, with a manifest that feeds srcset for fast loading.
• SEO & prerendering: Per-route metadata, Open Graph/Twitter tags, JSON-LD structured data, a generated sitemap, and a prerender step that bakes correct head tags into each route.

Technologies Used

• React 19 + Vite: Fast, modern frontend tooling and routing with React Router.
• Tailwind CSS + shadcn/ui: A consistent design system and accessible component primitives.
• Framer Motion & GSAP (ScrollTrigger / ScrollSmoother): Purposeful animation and scroll-driven storytelling.
• React Hook Form + Zod: Typed, validated contact and inquiry forms.
• Node build scripts (sharp): Image optimization, prerendering, and automated SEO verification.

Challenges and Learnings

• Presenting art without competing with it: The interface had to stay quiet so the work remains the focus, which meant careful typography, generous spacing, and restrained motion.
• Keeping content and credits consistent: Centralizing project data made it possible to drive galleries, details, and credits from one source while supporting third-party study credits.
• Balancing motion and accessibility: Scroll-based animation needed a reduced-motion path so the site stays comfortable and usable.
• Making a client-rendered SPA indexable: Prerendering each route with correct metadata and structured data ensured the site is discoverable without giving up the SPA experience.

Outcome

The result is a fast, bilingual, image-first portfolio that presents a growing body of work professionally while staying simple to maintain. Content can be updated by editing a single data file, and the build pipeline keeps performance, accessibility, and SEO in check on every deploy.