Blip Website - Full Project Context for Claude Code

Date: 28 March 2026 Purpose: Complete context document for continuing the Blip website build in Claude Code. This contains everything needed to pick up the project with full understanding of the business, the audience, the creative direction, and the current state of the build.

PART 1: THE BUSINESS

What is Blip?

Blip is a boutique premium personal tech support service run by Christian Malcolm from Vancouver, Canada, with his colleague Carrie based in London. They support a close circle of clients - mostly non-technical professionals and retirees - with hands-on, relationship-based tech help. No call centres, no ticket numbers, no strangers. Clients know Christian by name and he knows their setup, their preferences, and their history.

The business has three pillars: tech support (fixing and maintaining devices), online safety (passwords, scams, backups, security), and AI coaching (patient, jargon-free introduction to AI tools).

Some clients have been with Blip for over 24 years. The service model is a personal subscription - one session per month, tailored to whatever the client needs. Includes a toll-free phone number (1-844-995-2547), email, text, and WhatsApp access. Christian describes himself as “a nerd, but a nice nerd.”

The business uses “we” language throughout - Blip is presented as a small team, never a solo operation.

The website we’re building

A new single-page landing site to replace the current multi-page site at blipsupport.com. The site’s job is to convert visitors into “book a free call” consultations via Google Calendar appointment scheduling. The primary traffic source is LinkedIn outreach and ads targeting professional women in America aged 40-60+.

The site is live at blip-site.pages.dev via Cloudflare Pages, connected to the GitHub repo intastella73/blip-site (private). Currently deployed as static HTML prototypes - not yet converted to the planned Astro + Tailwind framework.

Domains owned

• blipsupport.com (current live site being replaced)
• blip.ltd (owned, not yet decided if this becomes primary)
• Domain decision is still open

PART 2: THE AUDIENCE

Who they are

Primary: Busy, successful women aged 40+. Solopreneurs, creatives, professionals, small business owners. Affluent enough to pay for premium support. Not naturally technical. Emotionally frustrated, sometimes embarrassed, sometimes anxious about technology.

Secondary: Retirees with projects, anyone who’s lost their IT department, people newly managing their own tech after life changes (retirement, divorce, career shift).

They value their time. They’re competent at everything except tech. They’ve tried call centres, YouTube, asking family - none of it worked.

What they feel (the emotional triggers from 15 months of research)

These came up repeatedly across all research materials:

• Frustration - “It just doesn’t work and I’m wasting my time”
• Embarrassment - “I feel stupid asking for help again”
• Anxiety - “Am I going to get hacked? Are my passwords OK?”
• Overwhelm - “Everything’s changing too fast, especially AI”
• Dependence - “I hate relying on my kids/partner/nephew”
• Fear of being left behind - “Everyone’s talking about AI and I’m nodding along”

What they want to feel (the emotional destination)

• In control
• Competent
• Safe
• Independent
• Lighter - like a weight has been lifted
• Current and not falling behind

What resonates with this audience (from research)

• Clean, spacious layouts with generous white space
• Large readable fonts
• Authentic photography (not stock)
• Blue as a trust colour
• Apple-inspired minimalism
• Real person photo and identity front and centre

Bounce triggers: slow load times, clutter, technical jargon, dark/techy interfaces, generic stock photos.

Premium service messaging principles (research findings from this build)

• Lead with the visitor’s identity, not the service’s capability
• The “contrast formula”: validate their competence in their domain, then position the service as the counterpart
• Normalise the need without pity - make the struggle universal and situational, not personal
• Reframe hiring help as “delegation intelligence”, not admitting defeat
• “No question too big or small” directly addresses fear of being judged
• Avoid “problem” language - use “questions”, “support”, “help with your devices”
• Real human faces + credential display + warmth = trust balance
• Minimal form friction for anxious audiences

PART 3: THE PROOF STORIES

These three client stories are the emotional core of the site. They come from Christian’s video scripts and are drawn from real client experiences. Each mirrors a different audience pain point.

Frances (emotional transformation)

Before: Trying to run her dad’s furniture shop but nothing worked. The computer, the Wi-Fi, the printer, passwords. She was exhausted and in tears. She looked for help but couldn’t find anybody to make it easy. After: Within a couple of sessions, things started turning around. On the third session, she was crying again - but happy tears. Frances is still a regular client, has created her own business, researches genealogy online, and builds out her family tree. She also overcame her fear of taxis and started multiple online hobbies.

Peter (independence story)

Before: Retired professional who always had assistants and IT departments. Wanted to start a business running yoga hiking retreats in Italy. Just him, no support, didn’t know where to start with websites, domains, email, mailing lists. Thought he was too old to figure it all out. After: Got him up and running. Blip still takes care of all the boring stuff. Peter now spends his retirement going to Italy to do yoga and hiking.

Louisa (safety/peace of mind story)

Before: Someone she knew had their identity stolen. The constant worry made her anxious about doing anything online. It was starting to interfere with her life and making plans. After: Got her passwords in good shape, made her email much more secure, showed her how to stay safe. It’s been a huge weight off her mind. Online transactions don’t make her panic any more.

Long-term client testimonials (authority proof)

Note: The testimonial quotes currently in v2 are placeholder paraphrases, not verified verbatim quotes.

PART 4: CREATIVE DIRECTION

Design principles (locked)

• Single-page architecture
• Warm, premium feel - NOT corporate, NOT masculine, NOT aggressive
• Warm whites and creams as dominant colours. Navy as accent only (headings, footer)
• The hero stays dark (video overlay gradient), but everything below opens into warm white/cream
• Playfair Display for headlines, Inter for body text
• Scroll-down chevron with bounce animation between hero and content
• No parallax, no carousel, no chat widget, no stock photography
• Minimal nav: logo left, 3-4 links right, “Book a call” button always visible
• Apple-inspired minimalism applied to a personal service

Colour palette (locked)

:root {
  --navy: #0A2341;          /* accent only - headings, footer */
  --navy-soft: #1a3554;
  --amber: #D4A843;          /* gold accent */
  --amber-light: #f0deb8;
  --amber-glow: rgba(212, 168, 67, 0.12);
  --cta-blue: #3B82F6;       /* call-to-action buttons */
  --cta-blue-hover: #2563EB;
  --warm-white: #FDFBF7;     /* main background */
  --warm-grey: #F7F4EF;      /* alternate section background */
  --warm-grey-2: #EDE8E0;    /* borders */
  --text-dark: #1a1a1a;
  --text-mid: #4a4a4a;
  --text-light: #7a7a7a;
  --white: #ffffff;
}

Typography

• Headlines: 'Playfair Display', Georgia, serif - weight 500
• Body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif - weight 300 for body, 500/600 for emphasis

Colour pivot history

Google Stitch generated layouts that were too navy-dominant, masculine, and aggressive. Christian rejected them. We pivoted to direct HTML prototyping with warm-white dominant palette. Navy became accent only. This was a significant creative decision - the palette warmth is central to the brand feeling welcoming rather than corporate.

PART 5: PAGE STRUCTURE AND COPY

Current page structure (v2 - currently deployed)

1. Hero - Video background, navy gradient wash on left, headline, subline, CTA button, scroll chevron
2. What We Do - Three pillar cards (Tech Support, Online Safety, AI Coaching)
3. Who We Are - Christian’s headshot, bio text, four testimonial cards with year counts and quotes
4. The Close - Final CTA with reassurance copy
5. Footer - Logo, copyright, phone, email, privacy link

V3 structure (alternative, also deployed at v3.html)

1. Hero - Same video, different headline approach (validation-first)
2. Recognition section - Makes visitor feel seen before any selling happens
3. What We Do - Same three pillars, slightly different copy
4. Proof Stories - Before/after transformation cards (Frances, Peter, Louisa)
5. Who We Are - Headshot, bio, stripped-back year-count display (just numbers, no quotes)
6. The Close - Different CTA framing
7. Footer - Same

The two copy approaches

V2 approach: “We solve your problem” Leads with Blip’s capability. Visitor immediately learns what Blip does and how.

• Hero: “When tech feels overwhelming, we make it simple.”
• Pillars heading: “Someone to handle the tech, so you don’t have to.”
• Pillars subline: “Three ways we help busy people do more of what they love - and stop thinking about the tech.”
• Trust heading: “We’ve been doing this for over 25 years. We still love it.” (amber on its own line)
• Close: “Let’s have a conversation.”

V3 approach: “You’re brilliant, let us handle this part” Leads with visitor’s identity. Visitor first feels validated, then offered relief. Uses the “contrast formula.”

• Hero: “You’re good at what you do. Let us handle the tech.”
• Recognition: “Technology keeps changing. Your time hasn’t got any longer.”
• Pillars heading: “Three ways we take technology off your plate.”
• Trust heading: “A small team. Real relationships. Over 25 years of doing this.”
• Close: “Ready to hand over the tech?”

Recommended hybrid direction (from comparison document)

Take from V3: hero headline approach (validation first), recognition section (tightened), proof stories as primary social proof, year-count display. Take from V2: pillar heading (“Someone to handle the tech…”), “We still love it” moment, closing warmth (“Let’s have a conversation”).

Christian has not yet made a final decision on v2 vs v3 vs hybrid.

Copy lines that are settled

• Pillars subline: “Three ways we help busy people do more of what they love - and stop thinking about the tech.” (updated 28 March)
• CTA button text: “Book a free call”
• Reassurance: “It takes two minutes. We’ll take it from there.”
• Calendar booking blurb: “A relaxed, friendly phone call to talk about your tech and how we might be able to help. No preparation needed - just tell us what’s been frustrating you, what’s worrying you, or what you’d like to get better at. We’ll listen, share a few ideas, and you can decide if we’re the right fit. No obligation, no jargon, no sales pitch.”

Key copy lines from across all research (worth preserving)

• “When tech feels overwhelming, we make it simple.”
• “You’re good at what you do. Let us handle the tech.”
• “Someone to handle the tech, so you don’t have to.”
• “Tech shouldn’t be a second job.” (from Google Stitch - strong line)
• “You know us, we know you.”
• “I’m a nerd, but I’m a nice nerd.”
• “No call centres. No account numbers. No strangers.”
• “We’ve kept the same clients for over 20 years.”
• “You’ve got other things you want to be doing with your life.”
• “We are real humans.” (from text snippets)
• “Do you need a digital butler?” (from text snippets)
• “What would it feel like to get rid of that frustration and have all the tech around you just work?”

PART 6: CONTACT AND CTA STRATEGY

Contact hierarchy (locked)

• Primary CTA: “Book a free call” buttons throughout the page
• Booking URL: https://calendar.app.google/rar953Yq42xFWphp8 (Google Calendar native scheduling, LIVE)
• Secondary: Phone number in footer: 1-844-995-2547 (toll-free, clickable tel: link)
• Secondary: Email in footer: hello@blipsupport.com
• No contact form - decided against to avoid clutter and diluting the primary CTA
• No location shown - “Vancouver, Canada” removed from footer to avoid turning off US LinkedIn prospects
• All CTA buttons open booking in new tab (target=“_blank”)

Email status

hello@blipsupport.com alias needs to be set up by Christian to route to his inbox. Currently a dead link on the page.

PART 7: VIDEO ASSETS

Hero video concept

AI-generated vignettes shot in Kling AI using an “authentic iPhone 16 Pro footage” aesthetic. Organic camera shake, natural light, visible skin textures - designed to feel like a real moment captured on a phone, not a commercial.

The plan is for multiple vignettes to rotate in the hero, paired with different headline text. JavaScript rotation is not yet built. Currently only one video is in use.

Current hero video

v6-family-dinner-clean-web.mp4 - East Asian mother and daughter at a kitchen table, daughter shows surprise/impressed reaction when mum knows about tech. 966KB, H.264 CRF28, 1280x720, no watermark. This is the only clean (no Kling watermark) video.

All video assets

Keepers (5 total):

On hold:

Video compression command

ffmpeg -i INPUT.mp4 -c:v libx264 -crf 28 -preset slow -an -movflags +faststart -vf "scale=1280:-2" OUTPUT.mp4

Image optimisation commands used

# Headshot: 9.7MB/4032x3024 down to 46KB/560px (2x retina for 280px display)
convert "cm headshot vanu a.jpeg" -resize 560x -quality 82 -strip headshot.jpg

# Logo: 63KB down to 8KB/96x96
convert "3.png" -resize 96x96 -strip logo.png

Kling AI prompting lessons

All successful vignettes use this structure:

Authentic, handheld iPhone 16 Pro footage of [scene description]. [Subject description with specific physical imperfections]. [Setting description]. [Action/emotional beat]. [Subject in right two-thirds of frame, left third softer for text overlay.] The camera has a slight organic shake, visible skin textures, stray hair, and natural motion blur. [Lighting]. No cinematic lighting; looks like a real moment someone captured on their phone. Single continuous shot, no camera cuts. 4K, 24fps.

Critical rules:

• NEVER use: “cinematic”, “35mm lens”, “shallow depth of field”, “colour grading”, “documentary style”
• ALWAYS use: “iPhone 16 Pro”, “organic shake”, “visible skin textures”, “natural motion blur”
• Specify physical imperfections to avoid smooth-model default (wrinkles, smile lines, grey hair, freckles)
• Two people max for reliable face rendering
• “Single continuous shot, no camera cuts” (multicam was a problem on early takes)
• Leave left third of frame empty for text overlay
• Turn OFF multicam option in Kling settings before every generation
• Avoid action verbs that imply transitions (e.g. “closes laptop” = worried face). Describe end states instead.
• Kling defaults to athletic/model bodies - specify “normal slender build”
• Kling adds accessories unprompted - explicitly state “no earphones, no headphones, no accessories”
• “Fully buttoned” prevents fashion-shoot styling
• Wide shots prevent intense close-ups
• Overcast/soft light prevents dramatic lighting

Full prompt examples for each keeper video are in web work/Blip/PROJECT-SNAPSHOT-260324-v2.md section 5.

PART 8: DEPLOYMENT AND TECHNICAL STATE

What’s deployed now

• Live URL: https://blip-site.pages.dev
• GitHub repo: intastella73/blip-site (private)
• Hosting: Cloudflare Pages (connected to GitHub, auto-deploys on push)
• Build config: No build command, ”/” as output directory (static HTML)

Deploy folder structure

deploy/
  index.html          (v2 prototype, currently deployed as main page)
  v3.html             (v3 alternative, accessible at /v3)
  privacy.html        (simple privacy policy)
  assets/
    logo.png          (8KB, 96x96)
    headshot.jpg       (46KB, 560px wide)
    hero-video.mp4    (966KB, 1280x720, H.264 CRF28)

Total deploy size: ~1.1MB

GitHub push workflow (needs setup)

In the Cowork sessions, we could not push directly to GitHub via CLI (gh not available, file upload blocked by Chrome extension security). Files were uploaded manually via the GitHub web UI. One of the first things to sort out in Claude Code is a proper git push workflow so changes can be deployed directly.

Tech stack plan (not yet implemented)

• Framework: Astro + Tailwind CSS
• Hosting: Cloudflare Pages (already set up)
• Skill available: The astro-static-site skill should be invoked when starting the Astro conversion
• The HTML prototypes serve as the design reference for converting to Astro components

PART 9: FILE LOCATIONS

Files live in two separate mounted folders:

Blip 26/ (deployable assets and prototypes)

web work/Blip/ (strategy, research, working documents)

PART 10: WHAT’S DONE AND WHAT’S NEXT

Completed

• Full audience research and emotional trigger mapping (15+ months)
• 5 keeper AI video vignettes produced in Kling AI
• v6 (family dinner) re-exported clean and compressed for web (966KB)
• HTML prototype v2 (current deployed version, all feedback incorporated)
• HTML prototype v3 (alternative copy approach)
• Privacy page
• All CTA buttons wired to live Google Calendar booking
• Footer: phone, email, privacy link, no location
• Google Calendar appointment scheduling configured and live
• Images optimised (headshot 9.7MB to 46KB, logo 63KB to 8KB)
• Clean deploy folder created with updated asset paths
• GitHub repo created (intastella73/blip-site, private)
• Cloudflare Pages deployment live at blip-site.pages.dev
• Project snapshot and comparison documents written
• Comprehensive pain-point and premium-service messaging research

Needs doing (immediate)

• Set up git push workflow so changes can be deployed directly from Claude Code
• hello@blipsupport.com alias - Christian needs to configure this to route to his inbox
• V2 vs V3 decision - Christian is still comparing; may want the recommended hybrid
• Mobile testing - site is live, Christian was about to test on mobile

Needs doing (next phase)

• Re-export remaining keeper videos from Kling without watermark (v3, v4, v5, v8)
• Compress remaining keepers for web
• Build hero headline/video rotation JavaScript
• Generate LQIP poster images for new clean videos
• Convert HTML prototypes to Astro + Tailwind (invoke astro-static-site skill)
• Consider adding a second hero video (v8 ambient studio was discussed)
• Domain decision: blipsupport.com vs blip.ltd as primary
• Three Pillar sub-pages (deferred - “Find out more” links commented out)

Things ruled out

• Multi-page site
• Testimonial carousel (show all at once - the year numbers together are the proof)
• Google Stitch for layout (too corporate/masculine)
• Calendly/Cal.com (Google Calendar native scheduling is simpler)
• Contact form (unnecessary friction)
• Displaying location (could turn off US prospects)
• Newsletter signup (not for V1)
• Pricing on the page (not for V1)
• Parallax scrolling (disorients target audience)

Known issues

• All videos except v6-family-dinner-take2-clean still have Kling watermarks
• v9 (hillside serenity) has man facing away from camera - needs take 3 if keeping
• v7 (deep breath) is on hold - not decided whether to keep or reshoot
• hello@blipsupport.com not yet set up - dead link until configured
• Privacy page is minimal - may need expanding for jurisdiction requirements
• Testimonial quotes in v2 are placeholder paraphrases, not verified verbatim

PART 11: CHRISTIAN’S PREFERENCES

• Always writes in UK syntax
• Names: always spell as Carrie, Derrick
• No em dashes - use short hyphens, sparingly
• Tends towards perfectionism - small daily progress is the working approach
• “No one’s at my website anyway, so there’s no harm in putting it up” - prefers shipping over polishing
• Wants the site to feel welcoming and safe for the audience, not techy or corporate
• Values warmth over cleverness in copy
• Married to a therapist - understands and respects the emotional side of the audience’s experience

PART 12: QUICK START FOR A NEW SESSION

1. Read this document fully before doing anything else
2. For deeper context on any section, read the files referenced in Part 9
3. Check with Christian: which version (v2/v3/hybrid) did he choose? Has hello@blipsupport.com been set up?
4. The deployed site is at https://blip-site.pages.dev - check it’s still live
5. The GitHub repo is intastella73/blip-site (private) - set up git push access early
6. For video work, read PROJECT-SNAPSHOT-260324-v2.md for full Kling prompt examples
7. For the Astro build, invoke the astro-static-site skill when ready to initialise
8. For Kling prompts, invoke the prompt-master skill for tool-specific optimisation