We use cookies to enhance your browsing experience, analyze site traffic, and personalize content.
By continuing to use our site, you consent to our use of cookies.
When ready to deploy, move the 'publish' tag forward
# Force move the local 'publish' tag to current HEAD
git tag -f publish
# Force push the updated tag to trigger the pipeline
git push -f origin publish
3. Color Palette
Primary Brand Colors
Memories
#40474F
Headers, main text
Off the Cuff
#CCE2DF
Backgrounds, accents
Cool as a Cucumber
#6AA6AF
Highlights, buttons
Pleased as Punch
#EED5C4
Accents, decorative
Feel at Home
#F2E8E2
Cards, backgrounds
Service-Specific Colors
Drone 1
#9EAE6A
Drone page headers
Drone 2
#d5ebd8
Drone backgrounds
Commercial 1
#757679
Commercial headers
Commercial 2
#D1D3D4
Commercial backgrounds
Button Examples
.bg-cool-as-a-cucumber
.border-cool-as-a-cucumber
.bg-pleased-as-punch
.bg-commercial-1
4. Typography
Font Families
<!-- In head section -->
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;500;600;700&family=Libre+Franklin:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Font Usage
Zilla Slab for Headings
Libre Franklin for body text and readability
"Zilla Slab italic for quotes"
Type Scale Examples
Heading 1 (36px-60px)
Heading 2 (30px-36px)
Heading 3 (24px-30px)
Heading 4 (20px-24px)
Body Large (18px) - Perfect for introductory paragraphs
Body Regular (16px) - Main content text
Body Small (14px) - Captions and footnotes
5. Component Examples
Service Card
💒
Wedding Photography
From your first look to the last dance, I capture every precious moment with care and attention.
This document explains how analytics works on this site, why it's structured this way,
and what needs to be added to pages for tracking to remain consistent over time.
The goal is to keep analytics simple, durable, and meaningful,
focusing on story progression
rather than raw numbers.
9.1 Core Principle
Analytics on this site is section‑first, not page‑first.
Instead of obsessing over individual pages, we track:
Which sections people actually reach
How far through the story they progress
Whether they reach contact and attempt to enquire
If a visitor moves through the sections in order, the page is doing its job.
9.2 Section IDs (This Is the Foundation)
Every meaningful part of a page must be wrapped in a <section>
element with a standardised id.
<section id="portfolio">
...
</section>
Important rules
Section IDs can repeat across different pages — this is expected and correct
Analytics always records section ID together with page path and page type
IDs describe the role in the story, not the visual design
So #portfolio on the wedding page and #portfolio
on the commercial page are treated as: "Portfolio section on this page"
This allows comparison without confusion.
9.3 Canonical Section List
Use these IDs wherever possible. Consistency matters more than perfection.
Global (used across most pages)
hero
introduction
services
portfolio
pricing
trust-signals
testimonials
contact
footer
Optional / contextual
previous-clients
client-examples
business-values
business-narrative
portfolio-preview
cta
If a section exists but does not advance the story, it does not need tracking.
9.4 Page Front Matter (Required)
Each page must define its type in front matter so analytics can group behaviour correctly.
---
page_type: wedding
---
Valid values:
weddingcommercialbloginfo
This allows analytics to answer questions like: "Do wedding visitors behave differently to commercial visitors?"
9.5 What Gets Tracked Automatically
A. Section Viewed (Primary Signal)
An event is recorded once per session when a section enters view:
section_viewed
section ID
page path
page type
section order on the page
This is the main metric used to understand:
Drop‑off points
Story progression
Which sections are rarely seen
B. Portfolio Interaction
Tracked only when someone actively engages:
Image click
Gallery open
This answers: "Do people just scroll past the work, or actually engage with it?"
C. CTA Clicks
Tracked for links that intentionally move someone forward.
Hero CTAs
Mid‑page CTAs
Pre‑contact CTAs
Each records:
Where it was clicked
What it points to
D. Contact
Only the essentials:
Contact section viewed
Form started
Form submitted
This keeps conversion tracking clean and reliable.
9.6 What Is Not Tracked (By Design)
To keep analytics readable months or years from now, we intentionally avoid:
Scroll percentagesMouse movementField‑level form behaviourExcessive timing metricsHeatmaps
If a metric doesn't help decide:
• what to rewrite
• what to reorder
• what to remove
…it isn't tracked.
9.7 Why Repeating Section IDs Is OK
Using the same section ID on multiple pages is a feature, not a problem.
Analytics always evaluates:
Page + Section + Order
This allows questions like:
Do people reach portfolio more often on wedding pages than commercial pages?
Does pricing perform better before or after testimonials?
Without duplicating logic or dashboards.
9.8 Long‑Term Maintenance Checklist
When adding or editing pages:
1
Section ID present
Every story section has a standardised id
2
Page type set
Front matter includes page_type
3
Story progression
Sections follow logical narrative flow
4
Analytics loaded
analytics.html include present
If all four are true, analytics will continue to work without changes.
9.9 The One Thing to Remember
We measure story progression, not vanity metrics.
If analytics tells you how people move through the page and where they stop,
it's doing its job. Everything else is noise.
10. Blog Image Handling
10.1 Reference the Include File blog-image.html
Insert the following code when wanting an image on a blog post.</code>
include blog-image.html
file="image-name"
alt="Alt text"
layout="landscape" // Accepted values landscape | portrait
ext="png" // Default is jpg so not required unless file format is different
Whether you're planning a wedding, need professional business photography,
or want breathtaking aerial shots - I'm here to help bring your vision to life.
Get in Touch
I typically respond within 2 hours during business hours
