|
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>What kind of life do you want?</title> |
|
<style> |
|
:root { |
|
--bg: #0e0e10; |
|
--bg-2: #18181b; |
|
--ink: #f5efe5; |
|
--ink-soft: #b8b3a8; |
|
--ink-faint: #6b665d; |
|
--amber: #f5a623; |
|
--amber-soft: #f5c977; |
|
--green: #8db580; |
|
--rose: #e07a7a; |
|
--rule: #2a2a2e; |
|
--display: ui-serif, "Iowan Old Style", "Charter", Georgia, serif; |
|
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; |
|
} |
|
* { box-sizing: border-box; margin: 0; padding: 0; } |
|
html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; } |
|
body { font-size: clamp(16px, 1.4vw, 22px); line-height: 1.5; } |
|
|
|
/* progress + chrome */ |
|
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 50; } |
|
.progress > div { height: 100%; background: var(--amber); transition: width 400ms ease; } |
|
.counter { position: fixed; bottom: 24px; right: 32px; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: 0.06em; z-index: 50; } |
|
.hint { position: fixed; bottom: 24px; left: 32px; color: var(--ink-faint); font-size: 13px; letter-spacing: 0.04em; z-index: 50; } |
|
.hint kbd { display: inline-block; padding: 2px 7px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg-2); color: var(--ink-soft); font-family: var(--sans); font-size: 11px; margin: 0 2px; } |
|
|
|
/* slide system */ |
|
.deck { position: relative; width: 100vw; height: 100vh; } |
|
.slide { position: absolute; inset: 0; padding: 6vh 8vw; display: none; flex-direction: column; justify-content: center; opacity: 0; transition: opacity 350ms ease; } |
|
.slide.active { display: flex; opacity: 1; } |
|
.slide.dim { opacity: 0; } |
|
|
|
/* typography */ |
|
h1 { font-family: var(--display); font-weight: 500; font-size: clamp(40px, 6vw, 96px); line-height: 1.02; letter-spacing: -0.02em; } |
|
h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4.4vw, 68px); line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 0.6em; } |
|
h3 { font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.8em; } |
|
p, li { font-size: clamp(18px, 1.5vw, 26px); color: var(--ink-soft); max-width: 60ch; } |
|
p + p { margin-top: 0.7em; } |
|
.lede { font-size: clamp(22px, 2vw, 32px); color: var(--ink); max-width: 28ch; line-height: 1.3; } |
|
.sub { color: var(--ink-faint); margin-top: 1.2em; font-size: clamp(14px, 1.1vw, 18px); } |
|
em.amber { color: var(--amber); font-style: normal; } |
|
em.green { color: var(--green); font-style: normal; } |
|
em.rose { color: var(--rose); font-style: normal; } |
|
strong { color: var(--ink); font-weight: 600; } |
|
|
|
.eyebrow { color: var(--amber); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1.2em; font-weight: 600; } |
|
.footnote { position: absolute; bottom: 5vh; right: 8vw; color: var(--ink-faint); font-size: 12px; max-width: 36ch; text-align: right; } |
|
|
|
/* layouts */ |
|
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; } |
|
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4vw; } |
|
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6vw; } |
|
|
|
.stack > * + * { margin-top: 0.9em; } |
|
|
|
.pill { display: inline-block; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); font-size: 13px; letter-spacing: 0.05em; } |
|
|
|
/* slide 1 — title */ |
|
.title-slide { justify-content: center; align-items: flex-start; } |
|
.title-slide h1 { max-width: 16ch; } |
|
.title-slide .sig { margin-top: 3vh; color: var(--ink-faint); font-style: italic; font-family: var(--display); } |
|
|
|
/* slide 2 — three lives */ |
|
.lives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; margin-top: 4vh; } |
|
.life { padding: 2vh 1.6vw; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-2); } |
|
.life svg { width: 100%; height: 12vh; margin-bottom: 1.2em; display: block; } |
|
.life h4 { font-family: var(--display); font-size: clamp(22px, 2.2vw, 34px); margin-bottom: 0.3em; font-weight: 500; } |
|
.life p { font-size: clamp(15px, 1.2vw, 19px); color: var(--ink-soft); } |
|
|
|
/* slide 3 — money reality numbers */ |
|
.big-num { font-family: var(--display); font-weight: 500; font-size: clamp(64px, 9vw, 160px); line-height: 1; letter-spacing: -0.03em; color: var(--amber); } |
|
.num-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; margin-top: 2vh; } |
|
.num-cell .label { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; margin-bottom: 0.5em; } |
|
.num-cell .val { font-family: var(--display); font-size: clamp(36px, 5vw, 72px); line-height: 1; } |
|
.num-cell .note { color: var(--ink-soft); margin-top: 0.5em; font-size: clamp(14px, 1.1vw, 18px); } |
|
|
|
/* slide 4 — cost grid */ |
|
.costs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4vw 4vw; margin-top: 3vh; } |
|
.cost-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2em; padding: 0.7em 0; border-bottom: 1px solid var(--rule); } |
|
.cost-row .what { color: var(--ink); font-size: clamp(16px, 1.4vw, 22px); display: flex; flex-direction: column; gap: 3px; } |
|
.cost-row .src { color: var(--ink-faint); font-size: clamp(11px, 0.9vw, 14px); font-style: italic; line-height: 1.3; } |
|
.cost-row .amt { font-family: var(--display); color: var(--amber); font-size: clamp(20px, 1.8vw, 28px); font-variant-numeric: tabular-nums; } |
|
|
|
/* slide 5 — slider */ |
|
.slider-stage { display: grid; grid-template-rows: auto 1fr auto; gap: 3vh; height: 100%; } |
|
.slider-top { display: flex; align-items: baseline; gap: 1.2em; flex-wrap: wrap; } |
|
.slider-top .salary { font-family: var(--display); font-size: clamp(56px, 8vw, 120px); color: var(--amber); line-height: 1; letter-spacing: -0.02em; } |
|
.slider-top .takehome { color: var(--ink-soft); font-size: clamp(16px, 1.4vw, 22px); } |
|
.lifeboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6vw; } |
|
.tile { border: 1px solid var(--rule); background: var(--bg-2); border-radius: 12px; padding: 1.6vh 1.4vw; min-height: 22vh; display: flex; flex-direction: column; gap: 0.8em; transition: border-color 250ms ease, background 250ms ease; } |
|
.tile.live { border-color: var(--amber); } |
|
.tile .icon { width: 36px; height: 36px; color: var(--amber); } |
|
.tile .tlabel { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; } |
|
.tile .tval { font-family: var(--display); font-size: clamp(20px, 1.8vw, 30px); color: var(--ink); line-height: 1.15; } |
|
.tile .tnote { color: var(--ink-soft); font-size: clamp(13px, 1.1vw, 17px); margin-top: auto; } |
|
.slider-wrap { display: flex; align-items: center; gap: 1.4em; } |
|
.slider-wrap input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; background: var(--rule); border-radius: 4px; outline: none; } |
|
.slider-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; background: var(--amber); border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 4px rgba(245,166,35,0.18); } |
|
.slider-wrap input[type=range]::-moz-range-thumb { width: 28px; height: 28px; background: var(--amber); border-radius: 50%; border: none; cursor: pointer; box-shadow: 0 0 0 4px rgba(245,166,35,0.18); } |
|
.slider-ticks { display: flex; justify-content: space-between; color: var(--ink-faint); font-size: 12px; letter-spacing: 0.05em; padding: 0 4px; margin-top: 0.4em; } |
|
.slider-quip { color: var(--ink-soft); font-style: italic; font-family: var(--display); margin-top: 1em; min-height: 1.6em; transition: opacity 200ms; } |
|
|
|
/* slide 6/7 — career ladders */ |
|
.ladder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4vw 4vw; margin-top: 3vh; } |
|
.rung { display: flex; align-items: baseline; gap: 1em; padding: 0.6em 0; border-bottom: 1px dashed var(--rule); } |
|
.rung .role { color: var(--ink); font-size: clamp(15px, 1.3vw, 21px); flex: 1; } |
|
.rung .pay { font-family: var(--display); color: var(--amber); font-size: clamp(15px, 1.3vw, 21px); font-variant-numeric: tabular-nums; white-space: nowrap; } |
|
.rung.warn .pay { color: var(--rose); } |
|
.ladder h3 { color: var(--ink); border-bottom: 2px solid var(--amber); padding-bottom: 0.4em; } |
|
|
|
/* slide 8 — passion trap */ |
|
.quote { font-family: var(--display); font-size: clamp(28px, 3.2vw, 48px); line-height: 1.25; max-width: 22ch; } |
|
.quote em { color: var(--amber); font-style: normal; } |
|
.arrow-stack { display: flex; flex-direction: column; gap: 1em; margin-top: 3vh; } |
|
.arrow-row { display: flex; align-items: center; gap: 1em; font-size: clamp(18px, 1.6vw, 26px); } |
|
.arrow-row .step { padding: 0.5em 1em; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg-2); } |
|
.arrow-row .step.bad { border-color: var(--rose); color: var(--rose); } |
|
.arrow-row .step.good { border-color: var(--green); color: var(--green); } |
|
.arrow-row .arrow { color: var(--ink-faint); } |
|
|
|
/* slide 9 — four pillars */ |
|
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6vw; margin-top: 4vh; } |
|
.pillar { padding: 2vh 1.2vw; border-top: 3px solid var(--green); background: var(--bg-2); border-radius: 0 0 8px 8px; } |
|
.pillar h4 { font-family: var(--display); font-size: clamp(22px, 2vw, 32px); margin-bottom: 0.4em; } |
|
.pillar p { font-size: clamp(14px, 1.1vw, 18px); } |
|
|
|
/* slide 10 — homework */ |
|
.checklist li { list-style: none; padding: 0.7em 0 0.7em 2em; position: relative; border-bottom: 1px solid var(--rule); font-size: clamp(18px, 1.6vw, 26px); color: var(--ink); } |
|
.checklist li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 14px; height: 14px; border: 2px solid var(--amber); border-radius: 3px; } |
|
|
|
/* close */ |
|
.close-slide { justify-content: center; align-items: center; text-align: center; } |
|
.close-slide h1 { max-width: 18ch; } |
|
.close-slide .sig { margin-top: 4vh; font-family: var(--display); font-style: italic; color: var(--amber); font-size: clamp(20px, 1.8vw, 28px); } |
|
|
|
/* fullscreen tip */ |
|
.fs-tip { position: fixed; top: 16px; right: 16px; background: var(--bg-2); border: 1px solid var(--rule); padding: 8px 14px; border-radius: 6px; color: var(--ink-soft); font-size: 12px; z-index: 60; opacity: 0.9; } |
|
.fs-tip kbd { font-family: var(--sans); } |
|
</style> |
|
</head> |
|
<body> |
|
<div class="progress"><div id="bar"></div></div> |
|
<div class="counter"><span id="cur">1</span> / <span id="tot">10</span></div> |
|
<div class="hint"><kbd>←</kbd> <kbd>→</kbd> to navigate · <kbd>F</kbd> for fullscreen</div> |
|
|
|
<main class="deck" id="deck"> |
|
|
|
<!-- 1. TITLE --> |
|
<section class="slide title-slide"> |
|
<div class="eyebrow">For James & Chloe · May 2026</div> |
|
<h1>What kind of <em class="amber">life</em> do you want?</h1> |
|
<p class="sub" style="max-width: 36ch;">Not "what job." What life. The job is just how you pay for it.<br>This will take 20 minutes. There will be no quiz.</p> |
|
<div class="sig">— Mum & Dad</div> |
|
</section> |
|
|
|
<!-- 2. THREE LIVES --> |
|
<section class="slide"> |
|
<div class="eyebrow">Three different lives</div> |
|
<h2>Pick one. Be honest.</h2> |
|
<div class="lives"> |
|
<div class="life"> |
|
<svg viewBox="0 0 100 60" fill="none" stroke="currentColor" stroke-width="2"><rect x="20" y="20" width="60" height="35" rx="2"/><rect x="35" y="35" width="12" height="20"/><rect x="55" y="30" width="10" height="10"/><path d="M15 20 L50 5 L85 20"/></svg> |
|
<h4>Cosy</h4> |
|
<p>Shared flat, mates round, takeaway Friday. Holidays once a year if you save. Bus and bike. <em class="amber" style="font-style:normal">Totally fine.</em></p> |
|
</div> |
|
<div class="life"> |
|
<svg viewBox="0 0 100 60" fill="none" stroke="currentColor" stroke-width="2"><rect x="10" y="22" width="80" height="33" rx="2"/><rect x="22" y="36" width="14" height="19"/><rect x="48" y="32" width="14" height="14"/><rect x="68" y="32" width="14" height="14"/><path d="M5 22 L50 4 L95 22"/><rect x="40" y="50" width="6" height="5" fill="currentColor"/></svg> |
|
<h4>Comfortable</h4> |
|
<p>Own home in a nice area, decent car, holiday abroad each year. Kids do clubs. Eat out when you fancy. <em class="amber" style="font-style:normal">The British dream.</em></p> |
|
</div> |
|
<div class="life"> |
|
<svg viewBox="0 0 100 60" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="18" width="90" height="38" rx="2"/><path d="M0 18 L50 0 L100 18"/><rect x="20" y="32" width="14" height="24"/><rect x="44" y="28" width="14" height="14"/><rect x="64" y="28" width="14" height="14"/><circle cx="80" cy="48" r="3" fill="currentColor"/></svg> |
|
<h4>Loaded</h4> |
|
<p>Big house, two cars, ski + summer + half-term abroad. Private school maybe. <em class="amber" style="font-style:normal">Costs more than you think.</em></p> |
|
</div> |
|
</div> |
|
<p class="sub" style="margin-top: 4vh;">There's no "right" answer. But the answer points at the kind of work you'll need to do.</p> |
|
</section> |
|
|
|
<!-- 3. MONEY REALITY --> |
|
<section class="slide"> |
|
<div class="eyebrow">UK 2026 · the boring numbers first</div> |
|
<h2>What people actually earn.</h2> |
|
<div class="num-row"> |
|
<div class="num-cell"> |
|
<div class="label">Median full-time salary</div> |
|
<div class="val">£37,000</div> |
|
<div class="note">Half of working adults earn less than this.</div> |
|
</div> |
|
<div class="num-cell"> |
|
<div class="label">Take-home after tax</div> |
|
<div class="val">£2,510 / mo</div> |
|
<div class="note">After income tax and National Insurance. This is what hits your account.</div> |
|
</div> |
|
<div class="num-cell"> |
|
<div class="label">Top 10% earn over</div> |
|
<div class="val">£75,000</div> |
|
<div class="note">≈ £4,500 / month take-home. Rarer than Instagram suggests.</div> |
|
</div> |
|
</div> |
|
<p class="sub">Source: ONS ASHE, HMRC tables. Figures rounded. Welcome to adulthood.</p> |
|
</section> |
|
|
|
<!-- 4. COST OF LIFE --> |
|
<section class="slide"> |
|
<div class="eyebrow">What life actually costs</div> |
|
<h2>A typical month, outside London.</h2> |
|
<div class="costs"> |
|
<div class="cost-row"><span class="what">1-bed flat (your own)<span class="src">ONS Private Rent Index, Dec 2024 — UK avg 1-bed</span></span><span class="amt">£1,050</span></div> |
|
<div class="cost-row"><span class="what">Energy + water<span class="src">Ofgem price cap 2025 + Water UK 2025/26 avg</span></span><span class="amt">£195</span></div> |
|
<div class="cost-row"><span class="what">Council tax (Band A)<span class="src">GOV.UK Council Tax stats, England 2025/26</span></span><span class="amt">£125</span></div> |
|
<div class="cost-row"><span class="what">Food shop<span class="src">ONS Family Spending Survey 2023/24, single adult</span></span><span class="amt">£200</span></div> |
|
<div class="cost-row"><span class="what">Phone + broadband<span class="src">Ofcom Pricing Trends report 2024</span></span><span class="amt">£50</span></div> |
|
<div class="cost-row"><span class="what">Used car (run + insure)<span class="src">RAC Cost of Motoring + ABI premium tracker, 2025</span></span><span class="amt">£230</span></div> |
|
<div class="cost-row"><span class="what">A pint, a coffee, a Netflix<span class="src">illustrative — varies wildly by lifestyle</span></span><span class="amt">£120</span></div> |
|
<div class="cost-row"><span class="what">A week in Spain (saved monthly)<span class="src">illustrative — ABTA avg holiday spend</span></span><span class="amt">£100</span></div> |
|
</div> |
|
<p class="sub">≈ <strong>£2,070/mo</strong> for a basic-but-decent solo life. That's roughly a £30k salary. Below it, things get tight fast.</p> |
|
</section> |
|
|
|
<!-- 5. FIRST JOB / TESCO --> |
|
<section class="slide"> |
|
<div class="eyebrow">A reality check · your first job</div> |
|
<h2>It will probably be <em class="amber">Tesco</em>.</h2> |
|
<div class="grid-2" style="margin-top: 3vh;"> |
|
<div> |
|
<h3>The maths</h3> |
|
<div class="num-row" style="grid-template-columns: 1fr; gap: 1.6vh;"> |
|
<div class="num-cell"> |
|
<div class="label">Hourly rate (Real Living Wage)</div> |
|
<div class="val">£12.60</div> |
|
<div class="note">Living Wage Foundation, 2024–25 rate. Tesco's national hourly rate is similar.</div> |
|
</div> |
|
<div class="num-cell"> |
|
<div class="label">Full-time take-home</div> |
|
<div class="val">£1,770 / mo</div> |
|
<div class="note">37.5 hours a week, every week, after tax & NI.</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div> |
|
<h3>What that life looks like</h3> |
|
<div class="stack"> |
|
<p>→ Living at home, or sharing with mates.</p> |
|
<p>→ Maybe £200–300 a month that's actually <em class="amber">yours</em> after bills.</p> |
|
<p>→ Shifts on evenings, weekends, Christmas Eve.</p> |
|
<p>→ You'll hate some customers. You'll love some colleagues.</p> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="sub" style="margin-top: 3vh; max-width: 70ch;"><strong>This is completely normal.</strong> We both did jobs like this. You learn something there that school can't teach: how to <em class="amber">show up, do the work, and be useful</em>. Everything good builds on that.</p> |
|
</section> |
|
|
|
<!-- 6. INTERACTIVE SLIDER --> |
|
<section class="slide" id="slider-slide"> |
|
<div class="slider-stage"> |
|
<div> |
|
<div class="eyebrow">Drag the slider · this is the headline event</div> |
|
<div class="slider-top"> |
|
<div class="salary" id="sal-display">£37,000</div> |
|
<div class="takehome">≈ <span id="take-display">£2,470</span> / month take-home</div> |
|
</div> |
|
</div> |
|
<div class="lifeboard"> |
|
<div class="tile" id="t-home"> |
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 12 L12 4 L21 12"/><path d="M5 11 V20 H19 V11"/></svg> |
|
<div class="tlabel">Where you live</div> |
|
<div class="tval" id="v-home">—</div> |
|
<div class="tnote" id="n-home">—</div> |
|
</div> |
|
<div class="tile" id="t-car"> |
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 14 L5 8 H19 L21 14"/><rect x="3" y="14" width="18" height="5" rx="1"/><circle cx="7" cy="19" r="1.5"/><circle cx="17" cy="19" r="1.5"/></svg> |
|
<div class="tlabel">Wheels</div> |
|
<div class="tval" id="v-car">—</div> |
|
<div class="tnote" id="n-car">—</div> |
|
</div> |
|
<div class="tile" id="t-hol"> |
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2 18 H22"/><path d="M5 18 V12 L12 9 L19 12 V18"/><circle cx="6" cy="6" r="2"/></svg> |
|
<div class="tlabel">Holidays / year</div> |
|
<div class="tval" id="v-hol">—</div> |
|
<div class="tnote" id="n-hol">—</div> |
|
</div> |
|
<div class="tile" id="t-fun"> |
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 8 H19 L17 18 H7 Z"/><path d="M9 8 V5 A3 3 0 0 1 15 5 V8"/></svg> |
|
<div class="tlabel">Going out + spare cash</div> |
|
<div class="tval" id="v-fun">—</div> |
|
<div class="tnote" id="n-fun">—</div> |
|
</div> |
|
</div> |
|
<div> |
|
<div class="slider-wrap"> |
|
<input type="range" id="salary" min="0" max="100" step="0.5" value="21.6"> |
|
</div> |
|
<div class="slider-ticks"><span>£18k</span><span>£40k</span><span>£75k</span><span>£120k</span><span>£200k</span></div> |
|
<div class="slider-quip" id="quip">The median UK salary. Half of working adults are below this line.</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<!-- 6. MTB CAREERS --> |
|
<section class="slide"> |
|
<div class="eyebrow">For James · if mountain biking is your world</div> |
|
<h2>Lots of doors lead here.</h2> |
|
<div class="ladder" style="grid-template-columns: 1fr 1fr;"> |
|
<div> |
|
<h3>Hands-on the bike</h3> |
|
<div class="rung"><span class="role">Bike mechanic (shop)</span><span class="pay">£22–30k</span></div> |
|
<div class="rung"><span class="role">MTB coach / instructor</span><span class="pay">£25–40k</span></div> |
|
<div class="rung"><span class="role">Trail builder (BikePark, Forestry)</span><span class="pay">£25–35k</span></div> |
|
<div class="rung warn"><span class="role">Pro racer (Enduro / Downhill)</span><span class="pay">£0–500k+</span></div> |
|
<div class="rung"><span class="role">Bike shop owner</span><span class="pay">£30–80k</span></div> |
|
</div> |
|
<div> |
|
<h3>Around the bike</h3> |
|
<div class="rung"><span class="role">Product designer (frames, kit)</span><span class="pay">£35–70k</span></div> |
|
<div class="rung"><span class="role">Sports physiotherapist</span><span class="pay">£35–60k</span></div> |
|
<div class="rung"><span class="role">Outdoor brand marketer</span><span class="pay">£30–65k</span></div> |
|
<div class="rung"><span class="role">Orthopaedic surgeon (the broken-bones doctor)</span><span class="pay">£90–200k+</span></div> |
|
<div class="rung warn"><span class="role">Outdoor brand founder</span><span class="pay">£0 → ∞</span></div> |
|
</div> |
|
</div> |
|
<p class="sub">Red ones are <em class="rose">long shots</em>. Real, but very hard. Most people who try, fail. That doesn't mean don't try — it means have a plan B you respect.</p> |
|
<p class="sub" style="margin-top: 0.4em; font-size: 12px;">Indicative UK ranges, 2025. Sources: ONS ASHE, NHS Agenda for Change & consultant pay scales, Indeed/Glassdoor UK medians. Treat as ballparks, not quotes.</p> |
|
</section> |
|
|
|
<!-- 7. KIDS / ANIMALS / FASHION / BEAUTY --> |
|
<section class="slide"> |
|
<div class="eyebrow">For Chloe · kids, animals, clothing, beauty</div> |
|
<h2>Way more than the obvious.</h2> |
|
<div class="ladder" style="grid-template-columns: 1fr 1fr;"> |
|
<div> |
|
<h3>Kids & animals</h3> |
|
<div class="rung"><span class="role">Nursery practitioner</span><span class="pay">£18–24k</span></div> |
|
<div class="rung"><span class="role">Primary teacher</span><span class="pay">£32–50k</span></div> |
|
<div class="rung"><span class="role">Child psychologist</span><span class="pay">£40–80k</span></div> |
|
<div class="rung"><span class="role">Paediatrician (children's doctor)</span><span class="pay">£70–130k+</span></div> |
|
<div class="rung"><span class="role">Veterinary nurse</span><span class="pay">£22–30k</span></div> |
|
<div class="rung"><span class="role">Vet (your own surgery)</span><span class="pay">£40–90k</span></div> |
|
</div> |
|
<div> |
|
<h3>Clothing & beauty</h3> |
|
<div class="rung"><span class="role">Retail floor staff</span><span class="pay">£18–24k</span></div> |
|
<div class="rung"><span class="role">Fashion buyer (M&S, ASOS, Next)</span><span class="pay">£30–70k</span></div> |
|
<div class="rung warn"><span class="role">Fashion designer (own label)</span><span class="pay">£0–100k+</span></div> |
|
<div class="rung"><span class="role">Beautician / aesthetician</span><span class="pay">£20–35k</span></div> |
|
<div class="rung"><span class="role">Cosmetic chemist (the science of skincare)</span><span class="pay">£32–60k</span></div> |
|
<div class="rung"><span class="role">Dermatologist (skin doctor)</span><span class="pay">£90–200k+</span></div> |
|
</div> |
|
</div> |
|
<p class="sub">Notice: every interest has a £20k version <em class="amber">and</em> a £100k version. The difference is usually <strong>training, mastery, and time</strong>.</p> |
|
<p class="sub" style="margin-top: 0.4em; font-size: 12px;">Indicative UK ranges, 2025. Sources: ONS ASHE, DfE teacher pay scales, NHS Agenda for Change & consultant pay, RCVS vet salary survey, Indeed/Glassdoor UK medians.</p> |
|
</section> |
|
|
|
<!-- 8. PASSION TRAP --> |
|
<section class="slide"> |
|
<div class="grid-2"> |
|
<div> |
|
<div class="eyebrow">The bit nobody tells you</div> |
|
<h2>"Follow your passion" is half wrong.</h2> |
|
<p>The advice sounds nice. Find the thing you love, do it forever, money follows.</p> |
|
<p>But most people don't <em class="amber">have</em> a clear passion at 14 — and the ones who think they do at 14 usually love something different by 24.</p> |
|
<p>The truth is sneakier and better:</p> |
|
</div> |
|
<div> |
|
<div class="quote">"Passion follows <em>mastery</em>, not the other way around."</div> |
|
<div class="arrow-stack"> |
|
<div class="arrow-row"> |
|
<div class="step bad">Wait for passion</div> |
|
<div class="arrow">→</div> |
|
<div class="step bad">Stay average</div> |
|
<div class="arrow">→</div> |
|
<div class="step bad">Hate it</div> |
|
</div> |
|
<div class="arrow-row"> |
|
<div class="step good">Get good at something</div> |
|
<div class="arrow">→</div> |
|
<div class="step good">Find it interesting</div> |
|
<div class="arrow">→</div> |
|
<div class="step good">Love it</div> |
|
</div> |
|
</div> |
|
<p class="sub" style="margin-top:2.4vh;">Bike mechanics who learn to weld earn more <em class="amber">and</em> enjoy it more. Skill makes things fun.</p> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<!-- 9. FOUR PILLARS --> |
|
<section class="slide"> |
|
<div class="eyebrow">What actually predicts a good life</div> |
|
<h2>Money buys <em class="amber">comfort</em>. These four buy <em class="green">happiness</em>.</h2> |
|
<div class="pillars"> |
|
<div class="pillar"> |
|
<h4>Autonomy</h4> |
|
<p>Choosing how, when, and with whom you work. A self-employed plumber often has more of this than a junior banker on £80k.</p> |
|
</div> |
|
<div class="pillar"> |
|
<h4>Mastery</h4> |
|
<p>Being noticeably good at something. The feeling of "I can do this thing other people can't." Quietly, deeply satisfying.</p> |
|
</div> |
|
<div class="pillar"> |
|
<h4>Purpose</h4> |
|
<p>Your work makes a difference to someone, somewhere. A nursery worker has more of this than most CEOs.</p> |
|
</div> |
|
<div class="pillar"> |
|
<h4>People</h4> |
|
<p>Working with humans you actually like. Most workplace misery is bad bosses and bad colleagues, not the work itself.</p> |
|
</div> |
|
</div> |
|
<p class="sub" style="margin-top: 4vh;">All four are available at £25k <em class="amber">and</em> £125k. Some £200k jobs have none of them. Pick carefully.</p> |
|
</section> |
|
|
|
<!-- 10. HOMEWORK / CLOSE --> |
|
<section class="slide"> |
|
<div class="eyebrow">What to do at 14 and 15</div> |
|
<h2>You don't need to know.<br>But you do need to be <em class="amber">getting good</em> at something.</h2> |
|
<ul class="checklist" style="margin-top: 2.5vh;"> |
|
<li>Keep maths open until you have to drop it. It quietly unlocks half of these careers.</li> |
|
<li>Pick <strong>one thing</strong> for the next month. Try to be measurably better at it by June.</li> |
|
<li>Try things. Quit things. Both are fine. The skill is <em class="amber">noticing</em> what pulls you back.</li> |
|
<li>Find one adult who does something interesting. Ask them how they got there. People love being asked.</li> |
|
<li>Be sceptical of TikTok careers. The visible 1% are not the median.</li> |
|
</ul> |
|
</section> |
|
|
|
<!-- 11. CLOSE --> |
|
<section class="slide close-slide"> |
|
<h1>Whatever you pick,<br>we've got you,<br><em class="amber">James & Chloe</em>.</h1> |
|
<p class="sub" style="text-align:center; max-width: 36ch; margin-top:2vh;">Just don't sleepwalk into it. Choose with your eyes open. The numbers are the floor, not the point.</p> |
|
<div class="sig">— love, Mum & Dad</div> |
|
</section> |
|
|
|
</main> |
|
|
|
<script> |
|
(() => { |
|
const slides = Array.from(document.querySelectorAll('.slide')); |
|
const total = slides.length; |
|
let idx = 0; |
|
const bar = document.getElementById('bar'); |
|
const cur = document.getElementById('cur'); |
|
const tot = document.getElementById('tot'); |
|
tot.textContent = total; |
|
|
|
function show(n) { |
|
idx = Math.max(0, Math.min(total - 1, n)); |
|
slides.forEach((s, i) => s.classList.toggle('active', i === idx)); |
|
cur.textContent = idx + 1; |
|
bar.style.width = ((idx + 1) / total * 100) + '%'; |
|
if (slides[idx].id === 'slider-slide') updateLife(positionToSalary(parseFloat(salary.value))); |
|
} |
|
|
|
document.addEventListener('keydown', (e) => { |
|
if (['ArrowRight', ' ', 'PageDown', 'ArrowDown'].includes(e.key)) { e.preventDefault(); show(idx + 1); } |
|
else if (['ArrowLeft', 'PageUp', 'ArrowUp'].includes(e.key)) { e.preventDefault(); show(idx - 1); } |
|
else if (e.key === 'Home') { show(0); } |
|
else if (e.key === 'End') { show(total - 1); } |
|
else if (e.key === 'f' || e.key === 'F') { |
|
if (!document.fullscreenElement) document.documentElement.requestFullscreen(); |
|
else document.exitFullscreen(); |
|
} |
|
}); |
|
|
|
document.addEventListener('click', (e) => { |
|
if (e.target.closest('input,button,[type=range]')) return; |
|
const x = e.clientX / window.innerWidth; |
|
show(x < 0.3 ? idx - 1 : idx + 1); |
|
}); |
|
|
|
show(0); |
|
|
|
// ─── Lifestyle slider logic ───────────────────────────────────────── |
|
// UK 2026 take-home approximations (after income tax + NI, no student loan) |
|
// Buckets: £18k £25k £32k £40k £55k £75k £100k £150k £200k |
|
function takeHome(gross) { |
|
// Personal allowance: £12,570; tapers above £100k (lose £1 per £2 over) |
|
let pa = 12570; |
|
if (gross > 100000) pa = Math.max(0, 12570 - (gross - 100000) / 2); |
|
const taxable = Math.max(0, gross - pa); |
|
let tax = 0; |
|
// bands above PA: basic 20% to £50,270; higher 40% to £125,140; additional 45% |
|
const basicCap = 50270 - 12570; // £37,700 |
|
const higherCap = 125140 - 12570; // £112,570 |
|
if (taxable <= basicCap) tax = taxable * 0.2; |
|
else if (taxable <= higherCap) tax = basicCap * 0.2 + (taxable - basicCap) * 0.4; |
|
else tax = basicCap * 0.2 + (higherCap - basicCap) * 0.4 + (taxable - higherCap) * 0.45; |
|
// NI 2026: 8% between £12,570 and £50,270, then 2% |
|
let ni = 0; |
|
if (gross > 12570) ni = Math.min(gross, 50270) - 12570; |
|
ni = ni > 0 ? ni * 0.08 : 0; |
|
if (gross > 50270) ni += (gross - 50270) * 0.02; |
|
return Math.round((gross - tax - ni)); |
|
} |
|
|
|
const buckets = [ |
|
{ min: 18000, max: 22999, |
|
home: ["Room in a shared house", "Probably with three people who don't quite empty the dishwasher."], |
|
car: ["No car, mostly", "Bus pass and a bike. Honestly fine. We both did this for years."], |
|
hol: ["Maybe one", "A long weekend in Wales if you save. No flights."], |
|
fun: ["Pub once a week", "About £200/mo left after rent and food. Dating is expensive — be charming instead."], |
|
quip: "Tesco full-time, bike-mechanic, nursery-worker — your starter zone. Tight, but doable." }, |
|
{ min: 23000, max: 32999, |
|
home: ["1-bed flat (regional)", "Your own place. Your own kettle. Your own rules. Worth a lot."], |
|
car: ["Used Corsa / Fiesta", "Reliable but not glamorous. Costs about £250/mo to run."], |
|
hol: ["1 abroad, 1 UK", "Spain in October when it's cheap. Cornwall in August."], |
|
fun: ["Eat out monthly", "About £400/mo spare. Gym, a hobby, occasional treats."], |
|
quip: "Teacher, vet nurse, trail builder, bike-shop manager. A real adult life." }, |
|
{ min: 33000, max: 49999, |
|
home: ["Nice 1-bed or shared 2-bed", "Good area. Maybe saving for a deposit."], |
|
car: ["Decent used car", "Modern hatchback, full insurance, no anxiety at MOT time."], |
|
hol: ["2 abroad", "A proper summer trip and a winter break. Maybe ski once."], |
|
fun: ["Eat out weekly", "£700+/mo spare after essentials. Quietly building savings."], |
|
quip: "Median-plus territory. Most teachers, designers, nurses, marketers." }, |
|
{ min: 50000, max: 79999, |
|
home: ["2-bed flat or starter home", "Mortgage on something modest. The keys are yours."], |
|
car: ["New-ish family car", "Lease or owned. Maybe a Golf, Civic, modest SUV."], |
|
hol: ["3 trips, 2 abroad", "Including one that involves the word 'villa'."], |
|
fun: ["Eat out whenever", "£1,200+/mo spare. Real choices. Pension actually filling up."], |
|
quip: "Senior teacher, vet, fashion buyer, software engineer, doctor in training." }, |
|
{ min: 80000, max: 129999, |
|
home: ["3-bed semi, nice area", "House with a garden. Maybe a spare room you call 'the office'."], |
|
car: ["Premium car", "BMW, Audi, Tesla. Not because you need it, but because you can."], |
|
hol: ["4+ trips, ski included", "Half-term abroad becomes normal. The kids think it's normal."], |
|
fun: ["Eat out without checking", "Significant savings. Investing. The boring rich-people stuff."], |
|
quip: "Top 5–10%. GP, surgeon-in-training, senior engineer, head of department." }, |
|
{ min: 130000, max: 200000, |
|
home: ["Detached house or central flat", "£600k+ mortgage. Or zero, if you bought early enough."], |
|
car: ["Two cars, nice ones", "Plus an older 'fun' car for sunny weekends, probably."], |
|
hol: ["6+ trips, premium", "Long-haul, ski chalet, beach club. The Instagram version."], |
|
fun: ["Money mostly stops mattering", "But your time disappears instead. Nothing comes free."], |
|
quip: "Top 1–2%. Consultant doctor, partner-track lawyer, CEO of a small firm, top tech." } |
|
]; |
|
|
|
function findBucket(s) { return buckets.find(b => s >= b.min && s <= b.max) || buckets[buckets.length - 1]; } |
|
|
|
// Slider position (0–100) maps non-linearly to salary so the tick labels |
|
// (£18k · £40k · £75k · £120k · £200k) sit at 0/25/50/75/100% as drawn. |
|
const tickPos = [0, 25, 50, 75, 100]; |
|
const tickSal = [18000, 40000, 75000, 120000, 200000]; |
|
function positionToSalary(pos) { |
|
for (let i = 0; i < tickPos.length - 1; i++) { |
|
if (pos <= tickPos[i + 1]) { |
|
const t = (pos - tickPos[i]) / (tickPos[i + 1] - tickPos[i]); |
|
const raw = tickSal[i] + t * (tickSal[i + 1] - tickSal[i]); |
|
return Math.round(raw / 1000) * 1000; |
|
} |
|
} |
|
return tickSal[tickSal.length - 1]; |
|
} |
|
|
|
const salary = document.getElementById('salary'); |
|
const sal = document.getElementById('sal-display'); |
|
const take = document.getElementById('take-display'); |
|
const quip = document.getElementById('quip'); |
|
const fields = ['home', 'car', 'hol', 'fun']; |
|
const tiles = Object.fromEntries(fields.map(f => [f, document.getElementById('t-' + f)])); |
|
|
|
function updateLife(value) { |
|
const b = findBucket(value); |
|
sal.textContent = '£' + value.toLocaleString(); |
|
const m = Math.round(takeHome(value) / 12); |
|
take.textContent = '£' + m.toLocaleString(); |
|
fields.forEach(f => { |
|
document.getElementById('v-' + f).textContent = b[f][0]; |
|
document.getElementById('n-' + f).textContent = b[f][1]; |
|
tiles[f].classList.add('live'); |
|
setTimeout(() => tiles[f].classList.remove('live'), 220); |
|
}); |
|
quip.textContent = b.quip; |
|
} |
|
|
|
salary.addEventListener('input', e => updateLife(positionToSalary(parseFloat(e.target.value)))); |
|
updateLife(positionToSalary(parseFloat(salary.value))); |
|
})(); |
|
</script> |
|
</body> |
|
</html> |
