Client Showcase — Photography Portfolio

Joanne Duma
Photography

A bespoke dark-mode photography portfolio with content management system, gallery management, and admin panel — built for a Vancouver, BC fine art photographer.

HTML5 / CSS3 PHP 7.4 Vanilla JS Responsive Custom CMS Image Compression

Visit Live Site ← Our Work

Mobile Design

Fully Mobile
Responsive

Designed mobile-first with hamburger navigation, fluid typography, and touch-friendly interactions. Every section adapts gracefully from 375px to widescreen.

Hamburger nav slides in from right with smooth animation
Single-column gallery on mobile, masonry on desktop
Fluid type sizing using clamp()
Tested on iOS, Android, and iPad
No horizontal scroll — overflow locked on html + body

Content Management

Custom Admin Panel

A password-protected dashboard gives Joanne full control over every section of her website — no code, no FTP, no developer needed.

Photo Gallery

Add Upload new photos to any category — auto-compressed if over 3 MB
Edit Rename captions and reassign photos to a different category
Remove Delete a photo and permanently remove the file from the server
Reorder Drag and drop photos into any display order within a category
Manage Create, rename, and reorder gallery categories

Features / Articles

Add Write a new article with title, body text, and a feature image
Edit Update the title, rewrite body, or swap cover image on any article
Remove Delete an article and remove its image from the server
Reorder Drag and drop articles into any display order

Workshops & Presentations

Add Post a new workshop with title, description, date/location, and cover image
Edit Update workshop details or replace the cover image at any time
Remove Remove a listing and delete its image from the server
Reorder Drag and drop workshops into any display order

About Me

Edit Rewrite the bio text — changes appear on the public site instantly
Upload Replace the profile photo with a new image
Remove Remove the current profile photo and revert to no image

mosestan.com/joannedumaphoto/admin.html — Admin Only

Admin panel — Gallery management showing 52 photos across 5 categories with drag-and-drop reordering

Admin panel — Features / Articles management with edit and delete controls

Admin panel — Workshops & Presentations management listing 4 workshops with venue details

Key Features

What Was Built

Every feature designed around Joanne's workflow — no plugins, no CMS subscriptions, no ongoing licence fees.

Gallery CMS

Drag-and-drop photo reordering, category management, caption editing, and photo deletion — all from a browser, no FTP required.

Auto Compression

Images over 3 MB are automatically compressed server-side via PHP GD at 80% JPEG / level 7 PNG — no manual resizing needed.

Mobile-First Design

Full hamburger navigation, fluid layout, touch-friendly gallery, and zero horizontal scroll on iOS and Android devices.

Secure Admin

Password-protected admin panel with server-side authentication. Gallery paths served through a PHP proxy — real file paths never exposed.

Features & Workshops

Fully editable articles and workshop listings with image upload, rich text, and drag-and-drop reordering — all saved to JSON.

SEO Optimised

Full meta tags, geo-targeting, Open Graph, Twitter Card, and structured data for rich search results in Vancouver photography searches.

Technology

Built With

HTML5 + CSS3

Semantic markup, CSS custom properties, fluid typography with clamp(), Grid & Flexbox

Vanilla JavaScript

No frameworks. Drag-and-drop API, Fetch API, localStorage caching, IntersectionObserver reveals

PHP 7.4

JSON data endpoints, image upload/proxy, GD image compression, password authentication

Google Fonts

Cormorant Garamond (serif), Montserrat (sans), Dancing Script (display) for a luxury editorial feel

Hostinger

Shared hosting with .htaccess security rules blocking direct gallery file access

JSON Data Layer

photos.json, categories.json, features.json, workshops.json, about.json — flat-file CMS, no database

Joanne Duma
Photography

Desktop Experience

Fully Mobile
Responsive