Blip Website Build - Project Transfer Document

Transfer date: 6 April 2026 From: Cowork (Claude desktop, session “magical-awesome-noether”) To: Barry (Claude Code environment)

1. What This Project Does

This project is building a new single-page landing website for Blip, Christian Malcolm’s boutique premium personal tech support business. The site replaces the current multi-page site at blipsupport.com. Its sole job is to convert visitors - primarily busy professional women aged 40-60+ reached via LinkedIn outreach and ads - into booking a free introductory call via Google Calendar. The site has been built as self-contained HTML prototypes with inline CSS and Google Fonts (Playfair Display + Inter), deployed as static files to Cloudflare Pages via a private GitHub repo. The eventual plan is to convert to Astro + Tailwind CSS, but for now it’s shipping as hand-crafted HTML and working well. There are two prototype versions (v2 and v3) representing different copy approaches, with a recommended hybrid direction documented. The site is live at blip-site.pages.dev and receiving active iteration on design, copy, and imagery.

2. Trigger

On demand. Christian works on this in sessions whenever he has time and creative energy. There is no schedule. He’ll open a session and say things like “let’s work on the site”, “I want to iterate on the landing page”, “let’s do some video work”, or he’ll have a specific idea to implement. Sessions range from quick copy tweaks to multi-hour design and build sprints.

What kicks it off: Christian’s instructions. He’ll typically arrive with either a specific change he wants to make, a reaction to the current state of the site, a new creative direction to explore, or assets he’s generated elsewhere (AI images, re-exported videos). He often thinks out loud and refines his direction through conversation before committing to a build task.

3. Inputs

Each session may involve any combination of:

• Verbal instructions - Christian describes what he wants, often thinking aloud. He refines through conversation before committing.
• Visual reactions - He’ll look at the live site or local HTML files and describe what works and what doesn’t.
• New image assets - AI-generated images from Nano Banana 2 (Google’s Gemini 3.1 Flash Image, free, no watermark) or Kling AI (for video). He drops these into folders in the Blip 26 directory.
• New video assets - Kling AI video exports. Raw files go in Blip 26/blip videos/, compressed web-ready versions go in Blip 26/blip videos/web-ready/.
• Reference URLs - Websites he likes the feel of, competitor examples, his own live site at blipsupport.com.
• Copy ideas - Phrases, headlines, section text. He’ll often give a rough direction and want options back.
• Screenshots - Of his current site, competitor sites, Google Calendar settings, etc.

4. Steps - The Workflow

For a typical iteration session:

1. Understand what Christian wants to change. He’ll describe it conversationally. Ask clarifying questions if needed, but don’t over-question - he appreciates momentum.

2. Review the current state. The deployed site is at https://blip-site.pages.dev. The source files are in Blip 26/deploy/. Read the relevant HTML file before making changes.

3. Make the changes to the local HTML prototype(s). The working prototypes in Blip 26/ use local relative paths to assets. The deploy versions in Blip 26/deploy/ use assets/ paths. If editing for deploy, work in the deploy folder. If prototyping, work in the main Blip 26 folder.

4. If new assets are needed (images, video): Optimise them for web before deploying. Image commands use ImageMagick convert. Video commands use FFmpeg. Specific commands documented in section 5.

5. Deploy changes. Push to the GitHub repo intastella73/blip-site (private). Cloudflare Pages auto-deploys on push. NOTE: In the Cowork environment, we could NOT push to GitHub via CLI (gh was unavailable, file_upload was blocked by Chrome extension). Files were uploaded via the GitHub web UI manually by Christian. Setting up a proper git push workflow in Claude Code is a priority.

6. Test. Christian tests on mobile. Note any issues for next session.

For a creative/design discussion:

1. Listen to Christian’s direction.
2. Offer 2-3 concrete options (not just descriptions - build visual mockups if possible, as HTML files he can open locally).
3. Let him react and refine.
4. Build the chosen direction.

For video work:

1. Write prompts using the Kling AI formula (documented in section 6).
2. Christian generates in Kling and provides the raw export.
3. Rename the file descriptively.
4. Compress for web using FFmpeg.
5. Generate poster image and LQIP placeholder if needed.
6. Integrate into the HTML prototype.

5. Tools and APIs Used

Services and platforms

Command-line tools

File locations (two mounted folders)

Blip 26/ - Deployable assets and prototypes

deploy/                              ← Clean deployment folder (this is what's on GitHub)
  index.html                         ← V2 prototype, currently the live site
  v3.html                            ← V3 alternative copy approach
  privacy.html                       ← Privacy policy page
  layout-options.html                ← Three layout options for new image section (WIP)
  assets/
    logo.png                         ← 8KB, 96x96
    headshot.jpg                     ← 46KB, 560px wide (Christian's photo)
    hero-video.mp4                   ← 966KB, 1280x720, H.264 CRF28 (v6 family dinner, no watermark)
    woman-tea.png                    ← ~8.6MB, needs optimisation before deploy (new "after" image)

blip-landing-prototype-v2.html       ← Working v2 (local asset paths)
blip-landing-prototype-v3.html       ← Working v3 (local asset paths)
privacy.html                         ← Working privacy page (local asset paths)

blip videos/                         ← All raw Kling AI video exports
  v3-shop-owners-morning-take3-keeper.mp4    ← KEEPER, has watermark
  v4-late-night-worry-keeper.mp4             ← KEEPER, has watermark
  v5-curious-learner-take1-keeper.mp4        ← KEEPER, has watermark
  v6-family-dinner-take2-clean.mp4           ← KEEPER, NO watermark (19MB raw)
  v6-family-dinner-take2-keeper.mp4          ← Same scene, WITH watermark (old export)
  v8-ambient-studio-keeper.mp4               ← KEEPER, has watermark
  v7-deep-breath-take2-hold.mp4              ← ON HOLD
  v9-hillside-serenity-take2-hold.mp4        ← ON HOLD (man faces away from camera)
  v3-shop-owners-morning-take1.mp4           ← Discarded
  v3-shop-owners-morning-take2.mp4           ← Discarded
  v6-family-dinner-take1.mp4                 ← Discarded
  v7-deep-breath-take1.mp4                   ← Discarded
  v8-ambient-take1-hold.mp4                  ← Discarded

blip videos/web-ready/               ← Compressed web-ready videos
  v6-family-dinner-clean-web.mp4     ← 966KB, THE one in use (no watermark)
  v5-curious-learner-web.mp4         ← 1.4MB (has watermark)
  v6-family-dinner-web.mp4           ← Old version (has watermark)
  v5-poster.jpg, v5-placeholder-blur.jpg
  v6-poster.jpg, v6-placeholder-blur.jpg

previous blip assets/                ← Logo, headshots, old assets
  blip 241206/3.png                  ← THE Blip circle logo (source file)
  logo play/blip.svg                 ← SVG logo source
  cm headshot vanu a.jpeg            ← Christian's headshot (9.7MB source)
  cm headshot vanu b.jpeg            ← Alternative wider crop
  2025 site images/                  ← Images from the current live site
    Three-people-working-in-a-small-office.jpg  ← Christian's favourite, natural feel
    342-woman-working-with-ai.jpg               ← Christian's other favourite
    small-office-workb.png
    man-at-work.png
    woman-working-at-desk-e1747092089202.png
  images new/                        ← AI-generated images from this session
    woman-tea-window-after.png       ← GOOD - woman with tea looking out window, to be used
    woman-kitchen-laptop-before.png  ← REJECTED - too staged/manipulative
  facebook ads/                      ← Old Facebook ad images
    FB2412-00019.jpg                 ← B&W yoga man - best-performing ad image ever
  Blip 2025 hero/                    ← AI collages (DO NOT USE - discarded)

web work/Blip/ - Strategy, research, and working documents

CLAUDE-CODE-CONTEXT.md               ← Comprehensive context doc (467 lines, 12 sections)
BARRY-TRANSFER-DOCUMENT.md           ← THIS document
260318 - Landing Page Brief - Ready for Review.md  ← MASTER BRIEF - read first
260326 - V2 vs V3 Copy Comparison.md              ← Section-by-section comparison
260326 - Project Update Log.md                     ← Session update from 25-26 March
PROJECT-SNAPSHOT-260328.md                          ← Comprehensive snapshot from 28 March
PROJECT-SNAPSHOT-260324-v2.md                       ← Detailed snapshot with ALL Kling prompts
PROJECT-SNAPSHOT-260324.md                          ← Earlier snapshot
260321 - Hero Video Vignettes - Brainstorm.md       ← All 7 original vignette concepts
260321 - Hero Video Loading Strategy.md             ← Progressive video buffering strategy
260321-16-32-blip-hero-headline-copy.md             ← Hero headline methodology
260325 - Landing Page Section Map.md                ← 4-section structure with strategy notes
260325 - Google Stitch Prompt v2.md                 ← Layout generation prompt (results rejected)
260322 - Google Stitch Prompt.md                    ← Earlier Stitch prompt
260322 - Session Recap and Next Steps.md            ← End-of-session summary
260316-10-15-blip-website-build.md                  ← Christian's original voice note brief
260318 dynamic-content-research new websites.md     ← Dynamic content research
Blip ideas.md                                       ← Miscellaneous ideas + audience avatars

Reference/                            ← Original research and scripts (15+ months of work)
  Tyson - Bridge Script A.md          ← CRITICAL - full video script, all proof stories
  Tyson - The Offer.md                ← Subscription offer structure
  Tyson - Promised Land Story.md      ← Before/after stories (Ian, Frances)
  Tyson - Script B.md                 ← Alternative video script
  Tyson - Bridge Script C.md          ← Alternative bridge script
  Tyson - Facebook Ad prompts - long thread - big summary.md  ← Extensive audience research
  Tyson - Facebook ad ideas.md
  Tyson - Facebook ads general.md
  Tyson - Facebook ads 241224.md
  Tyson - Facebook ads A.md
  Tyson - Facebook ads B.md
  Text Snippets.md                    ← Key copy lines + "digital butler" framing
  Pain Points.md                      ← Visual pain-point module concepts
  ChatGPT-Top Tech Pain Points.md     ← Top 5 pain points with copy (2 versions)
  ChatGPT-Wes McDowell webpage.md     ← Competitor reference
  AI Coaching.md                      ← AI coaching service description
  Password and online security page.md ← Security service description + Google Doc link
  Mission Statements.md               ← Mission statement drafts (under old name "Megatron1")
  Domains.md                          ← Domain name options
  Brutal Business Reality Check.md    ← Business scaling reality check
  Website micro-landing pages - Passwords & AI Discovery.md

External links and resources

6. Templates and Formats

Kling AI video prompt template

All successful vignettes use this structure:

Authentic, handheld iPhone 16 Pro footage of [scene description]. [Subject description with specific physical imperfections - natural wrinkles, grey hair, reading glasses, etc.]. [Setting description - specific domestic details]. [Action/emotional beat description - be specific about facial expressions and body movement]. [Subject positioned in right two-thirds of frame, left third softer and out of focus for text overlay.] The camera has a slight organic shake, visible skin textures, stray hair, and natural motion blur. [Lighting - warm morning/evening light from window, no dramatic lighting]. No cinematic lighting; looks like a real moment someone captured on their phone. Single continuous shot, no camera cuts. 4K, 24fps.

Critical Kling 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
• Two people max for reliable face rendering
• “Single continuous shot, no camera cuts”
• Leave left third of frame empty for text overlay
• Turn OFF multicam option in Kling settings before every generation
• Avoid action verbs implying transitions (describe end states instead)
• Specify “normal slender build” (Kling defaults to athletic/model bodies)
• State “no earphones, no headphones, no accessories” explicitly
• “Fully buttoned” prevents fashion-shoot open collars
• Wide shots prevent intense close-ups
• Overcast/soft light prevents dramatic lighting
• Describe positive emotions with more words than negative to bias Kling’s weighting

Full prompt examples for every keeper video are in PROJECT-SNAPSHOT-260324-v2.md section 5.

Nano Banana 2 image prompt approach

Use detailed photographic language - camera type, lighting setup, skin textures. Treat prompts like briefing a cinematographer. Include negative prompts: “Avoid: blurry, oversaturated, artificial lighting, model-like appearance, stock photo composition.” Reference “iPhone 16 Pro” aesthetic for consistency with the video style.

Deploy folder path remapping

When copying prototypes from Blip 26/ to Blip 26/deploy/, asset paths need remapping:

sed -e "s|previous blip assets/blip 241206/3.png|assets/logo.png|g" \
    -e "s|previous blip assets/cm headshot vanu a.jpeg|assets/headshot.jpg|g" \
    -e "s|blip videos/web-ready/v6-family-dinner-clean-web.mp4|assets/hero-video.mp4|g"

HTML structure

Both prototypes are self-contained single HTML files with all CSS inline in a <style> block. Google Fonts loaded via CDN link. No JavaScript currently (rotation not yet built). No build step needed - they work as-is.

CSS custom properties

The colour system uses CSS variables defined in :root. See the full palette in the colour palette section of CLAUDE-CODE-CONTEXT.md or in any of the HTML prototypes.

7. Rules and Edge Cases

Christian’s personal preferences

• UK spelling always (colour, favourite, organisation, etc.)
• Names: Always spell as Carrie (not Carey), always Derrick (not Derek)
• No em dashes - use short hyphens, sparingly
• No emojis in copy or documents unless specifically requested

Working style preferences

• Momentum over perfection. Christian has a self-identified perfectionism pattern. The working approach is small daily progress. “No one’s at my website anyway, so there’s no harm in putting it up.”
• Think out loud, then build. He refines direction through conversation. Don’t jump straight to building - let the idea crystallise first. But don’t over-discuss either.
• Show, don’t describe. When presenting options, build visual mockups (HTML files he can open locally) rather than just describing layouts.
• Respect his reactions. If he says something feels “too much” or “too on the nose” or “a bit AI”, take that seriously and pivot. His instinct for what feels authentic to his audience is strong.
• One quiet line beats three loud ones. He consistently prefers understated, warm copy over anything that feels like marketing. The copy should feel like something a kind person would say, not a sales funnel.
• The site is for his audience, not for him. Every creative decision should be filtered through: “How would a 55-year-old woman who’s frustrated with her tech and a bit embarrassed about it feel looking at this?”

Design rules (locked)

• Warm whites and creams dominant. Navy is accent only (headings, footer).
• The hero section is dark (video with navy gradient overlay). Everything below opens into warm white/cream.
• No parallax, no carousel, no chat widget, no stock photography.
• No pricing on the landing page.
• “We” language throughout - Blip is a team, not a solo operation.
• Primary CTA is always “Book a free call” linking to Google Calendar.
• No location shown (removed Vancouver to avoid turning off US prospects).

Copy rules

• Lead with the visitor’s identity, not the service’s capability (the “contrast formula”).
• Normalise the need without pity.
• Avoid “problem” language - use “questions”, “support”, “help with your devices”.
• The word “stop” in “stop thinking about the tech” was a deliberate choice - it acknowledges they’ve been thinking about it.
• Testimonial quotes in v2 are placeholder paraphrases, NOT verified verbatim quotes. Flag this if they need to go live prominently.

Image quality bar

• Christian’s gold standard: images that don’t look like AI. Specifically, his two favourites from the 2025 site are Three-people-working-in-a-small-office.jpg (messy, warm, real environment) and 342-woman-working-with-ai.jpg (natural moment, unforced).
• What passes: warm natural light, real-feeling environments with texture and clutter, people mid-moment rather than posing, relaxed not composed.
• What fails: smooth AI skin, over-golden lighting, staged compositions, stock photo energy, anything that feels manipulative or “trying too hard”.
• The woman-tea-window-after.png image was approved as good quality.
• The woman-kitchen-laptop-before.png was rejected as “too staged and depressing” with “AI giveaways”.

Video quality bar

• The v6 family dinner video is Christian’s gold standard: “so good; it doesn’t seem like AI at all.”
• The iPhone-authentic aesthetic (organic shake, natural light, visible skin texture) is what makes it work.
• All videos except v6-family-dinner-take2-clean still have Kling watermarks and cannot be used in production.

Things NOT to do

• Don’t use a before/after image comparison - Christian rejected this as “too manipulative and on the nose” and “too much like a weight loss ad”. The visitor provides their own “before” - they’re already living it.
• Don’t show frustration or sadness in imagery. Show the outcome/feeling, not the problem.
• Don’t use images from the Blip 2025 hero/ folder - these AI collages were discarded.
• Don’t use cm headshot circle name.png or blip christian.jpg - earlier AI composites, do not use.
• Don’t initialise Astro until Christian is ready. The HTML prototypes are working fine for now.

8. Outputs

Each session produces some combination of:

• Updated HTML files in Blip 26/deploy/ - pushed to GitHub for auto-deploy to Cloudflare Pages
• New or optimised assets in Blip 26/deploy/assets/ (images, video)
• Working documents in web work/Blip/ (session logs, snapshots, comparison docs)
• AI prompts for Kling or Nano Banana 2 (given to Christian to generate externally)
• Layout mockups as standalone HTML files Christian can preview locally

Where final outputs go:

• Deployable site files: Blip 26/deploy/ then GitHub then Cloudflare Pages
• Working documents and strategy: web work/Blip/
• Raw video assets: Blip 26/blip videos/
• Web-ready video assets: Blip 26/blip videos/web-ready/
• Source brand assets: Blip 26/previous blip assets/
• New AI-generated images: Blip 26/previous blip assets/images new/

9. Example Run - Most Recent Session (6 April 2026)

What Christian wanted: To iterate on the site by adding a visual/emotional section after the three pillars to show what life feels like when someone else handles the tech.

How the session went:

1. Christian shared his reaction to the live site - praised the hero video as gold standard, identified that something was missing between the pillars and the trust section.

2. We discussed the concept: he wanted a before/after visualisation showing where people are now vs how they’ll feel with Blip. He referenced v3’s proof story cards as inspiration.

3. I suggested two AI-generated images - one “before” (woman frustrated at laptop) and one “after” (woman at ease with tea). Wrote Nano Banana 2 prompts for both.

4. Christian generated the images and dropped them in previous blip assets/images new/. I renamed them from Gemini hashes to descriptive names (woman-tea-window-after.png, woman-kitchen-laptop-before.png).

5. Christian reacted: the “after” image was lovely and natural. The “before” image was rejected as “too staged, too depressing, too on the nose - some AI giveaways.”

6. I pivoted: suggested dropping the before/after contrast entirely. Instead, use just the one “after” image with a single line of text. The visitor provides their own “before” - they’re already living it. Christian agreed: “Let’s not do a contrast.”

7. Christian then asked how to integrate this image into the page. I proposed three layout options: (A) breathing strip between pillars and trust section, (B) image woven into the pillars heading, (C) full-width background image with text overlay.

8. Christian asked to see all three. I built layout-options.html with all three options rendered as full HTML mockups, using the actual tea image. Saved to the deploy folder so he could open it locally.

9. Status at end of session: Christian was about to review the three layout options locally. No decision yet on which option. The tea image (woman-tea-window-after.png) is approved but needs web optimisation before deploy (~8.6MB, should be compressed to ~50-100KB).

10. Current State and Immediate Next Steps

What’s live now

• https://blip-site.pages.dev - V2 prototype with the pillars subline updated to “Three ways we help busy people do more of what they love - and stop thinking about the tech.”
• V3 accessible at /v3
• Privacy page at /privacy

What’s in progress

• Layout decision for the image section - Three options built in layout-options.html, waiting for Christian’s choice
• V2 vs V3 decision - Christian has been comparing both for weeks. May want the recommended hybrid. Ask him.
• The tea image needs web optimisation - Currently 8.6MB PNG. Needs compression to ~50-100KB JPG for deploy.

Immediate priorities

1. Set up git push workflow so changes deploy without manual GitHub upload
2. Get Christian’s layout choice (A, B, or C) and build it into the live site
3. Optimise and deploy the tea image
4. hello@blipsupport.com - Christian needs to set up this email alias

Medium-term priorities

• Re-export remaining keeper videos from Kling without watermark (v3, v4, v5, v8)
• Build hero headline/video rotation JavaScript
• Convert HTML prototypes to Astro + Tailwind (invoke astro-static-site skill when ready)
• Domain decision: blipsupport.com vs blip.ltd as primary

Key documents to read first

1. This document (you’re reading it)
2. CLAUDE-CODE-CONTEXT.md in the same folder - 467-line comprehensive context
3. 260318 - Landing Page Brief - Ready for Review.md - the master brief with full audience research
4. 260326 - V2 vs V3 Copy Comparison.md - the two copy approaches and hybrid recommendation
5. PROJECT-SNAPSHOT-260324-v2.md - all Kling prompts and video work detail

11. The Emotional Core (Why This Matters)

This isn’t just a website build. Christian has 15 months of research, copywriting experiments, video scripts, Facebook ad testing, and audience understanding behind this project. He’s a perfectionist who has historically struggled to ship, and this build represents him finally pushing through that.

The audience he serves - mostly older women who feel embarrassed, frustrated, and anxious about technology - are real people he’s had relationships with for decades. The site needs to feel like him: warm, patient, kind, competent, and absolutely not trying to be clever or impressive. The copy should read like a reassuring conversation, not a landing page.

His video hero is his proudest creative achievement on this project. The family dinner clip genuinely doesn’t look like AI, and that’s the bar for everything visual.

The single most important design principle: the visitor should feel understood and safe within three seconds of arriving. Everything on the page serves that goal.