Photography Studio Portfolio
Every gallery tile’s click target was dead — a decorative SVG layer sat on top of the real link with no pointer-events rule, caught by Playwright naming the exact element intercepting the click.
- Bootstrap 5
- HTML
- CSS
- JavaScript
About this project
A five-page site for a fictional studio, "Aperture & Ash Studio." Like the other Bootstrap design templates in this catalogue, this is a pure visual-design product — no backend, no database. The register is minimalist and editorial: a near-black/near-white palette with one sparing "safelight red" accent, Libre Caslon Display paired with Jost, and generous negative space.
This template faces the hardest version of this catalogue’s "no stock photography" rule — a photography studio’s own portfolio, where the gallery pieces are the product. It’s solved with an honest creative direction rather than a workaround: all 20 gallery pieces (plus 6 reused on the homepage) are abstract/conceptual studies — diagonal light-gradient splits, a 9-frame "contact sheet" grid, radial chiaroscuro falloff, an 8-blade aperture-iris motif, overlapping-circle "wedding ring" studies, scattered bokeh, an SVG film-grain filter, lens-flare sunbursts, topographic light studies, mix-blend-mode double exposures and crop-mark "frame" treatments — every one a gradient, shape or hand-authored inline SVG. The About page frames this in-universe as the studio’s actual conceptual practice; the README discloses it honestly out-of-universe as a deliberate constraint-driven choice, with an explicit note that a real buyer swaps in their own photography.
The gallery’s interactivity was genuinely broken on the first pass, not just unstyled: every tile’s click target was dead because a decorative SVG visual layer sat as a sibling (not a child) on top of the real link trigger with no `z-index`/`pointer-events` rule — caught directly by Playwright’s own error naming the exact intercepting element, not by a visual check. A second, related bug sat right next to it: the hover-zoom CSS rule used a descendant combinator where the sibling markup needed a `~` combinator, so it could never have matched. Both are fixed; all 20 lightbox modals now open correctly with real clicks.
What you will learn
- Build a minimalist, editorial five-page photography studio site on Bootstrap 5 without hand-editing the framework itself
- Solve a "no stock photography allowed" constraint in the one niche where that constraint is hardest — a photography portfolio’s own gallery
- Build a CSS Grid masonry gallery with a working filter and a real Bootstrap-modal lightbox, verified with real clicks, not just styled to look interactive
- Diagnose a dead click target caused by a sibling element with no z-index/pointer-events, using the browser’s own "element intercepts pointer events" error
- Run a real WCAG contrast check and a real multi-breakpoint overflow check instead of eyeballing either
Before you start
- HTML and CSS fundamentals — this is a design product, not a framework tutorial
- Any modern browser. No Node, no build step, no server required to use it
- Comfortable editing raw HTML/CSS directly, since there is no CMS or config file
New to Bootstrap 5? The free Bootstrap 5 course covers everything this project assumes.
Academic integrity notice
These projects are provided for learning, experimentation and reference. Understand the code, modify it for your own requirements, and acknowledge external work according to your institution’s academic policies. Priodemy does not supply work to be submitted as your own.
Features
- A 20-piece CSS Grid masonry gallery with 4 working filter tabs and a real Bootstrap-modal lightbox per piece (discipline/medium/year/edition metadata)
- All 20 gallery pieces are abstract/conceptual compositions — gradients, shapes and hand-authored inline SVG — an honest, disclosed solution to the "no stock photography" constraint in the one niche where it’s hardest
- 4 pricing tiers with real deliverables and 4 paid add-ons, a 3-person team with colour-circle initials avatars, and a booking inquiry form with a confirmation state
- A dead-click-target bug (a decorative SVG sibling with no pointer-events rule) caught by Playwright naming the exact intercepting element, not by a visual check — and fixed
- Three separate instances of the same root cause — Bootstrap’s light-theme table/text defaults bleeding into dark sections — found and fixed, including one that required matching `!important` after a first fix silently failed
Technology stack
Track: Web Development · Level: Mini project
What is included
- All 5 HTML pages, fully commented custom.css (~1020 lines), main.js, gallery.js and contact-form.js
- A written contrast-ratio table and a responsive-check writeup in the README, not just a pass/fail claim
- A "Customizing this" map pointing at exactly where to change the studio name, gallery pieces, pricing and copy
Delivered as a 49 KB ZIP. SHA-256 published under Changelog so you can verify it.
System requirements
- Operating system
- Any
- Runtime
- Any modern browser. No server, no build step, no dependencies to install.
Licence
Learn from it, change it, and use it in your own coursework and personal projects. Do not resell it or pass it off as your own original work.
- Personal and educational use
- Modifying the code however you like
- Using it as the basis of your own coursework, with honest acknowledgement
- Putting your modified version in a portfolio or on your own GitHub
- Reselling or redistributing the project, modified or not
- Presenting it as your own original work
- Commercial deployment — see the Commercial licence
Support window: 6 months from download.
Frequently asked
How does a photography portfolio work with no stock photos allowed?
By treating the gallery itself as abstract/conceptual work rather than missing photography. All 20 pieces are gradients, shapes and hand-authored inline SVG — light studies, an aperture-iris motif, double exposures, film grain and similar — framed on the About page as the studio’s own conceptual practice. The README discloses this honestly as a constraint-driven design choice and notes that a real buyer swaps in their own photography.
What was the dead gallery click bug?
Every tile’s decorative SVG visual layer was a sibling of the real link trigger, painted on top of it with no `z-index` or `pointer-events` rule — so clicks landed on the decoration instead of the link. It was caught directly by Playwright’s own error, which names the exact element intercepting a click, and fixed with an explicit z-index on the trigger and `pointer-events: none` on the visual layer. A related hover-zoom rule that used the wrong CSS combinator for the sibling markup was fixed alongside it.
Can I use this for a real photography studio?
Yes — replace the fictional Aperture & Ash branding, gallery pieces, pricing and copy with your own, most importantly swapping the abstract SVG gallery pieces for real photography (the README’s "Customizing this" table lists every spot). The booking form has no backend wired up; connecting it to a real inbox or CRM is left to you. The Educational licence covers learning and coursework; a Commercial licence is available for shipping it as a real studio’s site.
Changelog
- First release
SHA-256bc401b6d882b77b3926335601a9f4a75ce68a183f64e324340eef20d9ffa9b3f
You might also like
Free Personal Portfolio Website
A responsive portfolio in plain HTML and CSS — no framework, no build step.
- HTML
- CSS
Free Snake Game
The classic game in about 180 lines of plain JavaScript and a canvas.
- JavaScript
- Canvas
- HTML
Free Tic-Tac-Toe with AI
An opponent that plays perfectly, using minimax with alpha-beta pruning.
- JavaScript
- Minimax
- HTML
Free Typing Speed Test
A speed test that shows its own arithmetic, because WPM is a definition rather than a measurement.
- JavaScript
- CSS
- HTML