Select Page

<style>
@import url(‘https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap’);

/* ==== Take over the page ==== */
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
overflow: hidden !important;
background: #000 !important;
}
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }
body * { box-sizing: border-box; }

/* hide the rest of the theme behind the overlay */
body > *:not(#cs-hero):not(.cs-cursor):not(script):not(style) { display: none !important; }

/* ==== Hero overlay ==== */
#cs-hero{
–bg: #050505;
–bg-deep: #000000;
–ink: #F5F1EB;
–ink-mute: #8a857d;
–gold: #D4A044;
–gold-bright: #F2D585;
–gold-deep: #A47C2C;
–serif: ‘Instrument Serif’, ‘Times New Roman’, serif;
–sans: ‘Inter Tight’, system-ui, -apple-system, sans-serif;
–mono: ‘JetBrains Mono’, ui-monospace, monospace;
–ease: cubic-bezier(.2,.7,.2,1);

position: fixed;
inset: 0;
z-index: 999999;
background: var(–bg-deep);
color: var(–ink);
font-family: var(–sans);
cursor: none;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#cs-hero ::selection{ background: var(–gold); color: #050505; }
#cs-hero a{ color: inherit; text-decoration: none; cursor: none; }
#cs-hero button{ font: inherit; color: inherit; background: none; border: 0; cursor: none; }

/* mesh gradient base */
#cs-hero .bg-mesh{
position: absolute; inset: -10vmax;
background:
radial-gradient(ellipse 60% 40% at 20% 30%, rgba(212,160,68,0.10), transparent 60%),
radial-gradient(ellipse 70% 50% at 80% 70%, rgba(164,124,44,0.10), transparent 60%),
radial-gradient(ellipse 90% 60% at 50% 100%, rgba(212,160,68,0.07), transparent 70%),
var(–bg-deep);
filter: blur(2px);
animation: csMeshShift 28s ease-in-out infinite alternate;
}
@keyframes csMeshShift{
0% { transform: translate(0,0) rotate(0deg) scale(1); }
50% { transform: translate(2%,-1.5%) rotate(.6deg) scale(1.05); }
100%{ transform: translate(-1.5%,2%) rotate(-.6deg) scale(1.02); }
}

/* mouse spotlight */
#cs-hero .spot{
position: absolute; left: 50%; top: 50%;
width: 80vmin; height: 80vmin; border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(212,160,68,0.18) 0%, rgba(212,160,68,0.06) 30%, transparent 60%);
transform: translate(-50%,-50%);
filter: blur(20px);
mix-blend-mode: screen;
}

/* particle canvas */
#cs-hero canvas.fx{
position: absolute; inset: 0;
display: block;
pointer-events: none;
}

/* film grain */
#cs-hero::after{
content:””; position: absolute; inset: 0;
pointer-events: none;
background-image: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 200 200′><filter id=’n’><feTurbulence type=’fractalNoise’ baseFrequency=’0.85′ numOctaves=’2′ stitchTiles=’stitch’/><feColorMatrix values=’0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0’/></filter><rect width=’100%’ height=’100%’ filter=’url(%23n)’/></svg>”);
opacity: .55; mix-blend-mode: overlay;
z-index: 4;
}

/* vignette */
#cs-hero .vignette{
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 90%);
}

/* scanline */
#cs-hero .scan{
position: absolute; inset: 0; pointer-events: none; z-index: 3;
background: repeating-linear-gradient(180deg,
rgba(255,255,255,0) 0, rgba(255,255,255,0) 3px,
rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px);
}

/* stage center */
#cs-hero .stage{
position: absolute; inset: 0;
display: grid; place-items: center;
z-index: 5;
perspective: 1400px;
}

/* content block */
#cs-hero .content{
position: relative; text-align: center;
padding: 0 24px;
transform-style: preserve-3d;
will-change: transform;
}

#cs-hero .eyebrow{
font-family: var(–mono);
font-size: 11px;
letter-spacing: 0.45em;
color: var(–gold);
text-transform: uppercase;
margin-bottom: 38px;
opacity: 0;
animation: csFadeIn 1s var(–ease) 0.4s forwards;
display: inline-flex; align-items: center; gap: 14px;
}
#cs-hero .eyebrow::before, #cs-hero .eyebrow::after{
content:””; width: 28px; height: 1px; background: var(–gold);
}

#cs-hero .name{
font-family: var(–serif);
font-style: italic; font-weight: 400;
font-size: clamp(64px, 14vw, 240px);
line-height: 0.92;
letter-spacing: -0.04em;
background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EB 30%, #D4A044 65%, #A47C2C 100%);
background-size: 100% 200%;
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 0 24px rgba(212,160,68,0.18));
user-select: none;
cursor: default;
display: inline-block;
}

#cs-hero .name .ch{
display: inline-block;
transform: translateY(120%) rotateX(-90deg);
opacity: 0;
transform-origin: 50% 100%;
transition: color .3s ease;
}
#cs-hero .name.in .ch{ animation: csCharIn 1.2s var(–ease) forwards; }
@keyframes csCharIn{ to { transform: translateY(0) rotateX(0); opacity: 1; } }

#cs-hero .subtitle{
margin-top: 28px;
font-family: var(–mono);
font-size: clamp(11px, 1.05vw, 14px);
letter-spacing: 0.6em;
text-transform: uppercase;
color: var(–ink-mute);
opacity: 0;
animation: csFadeIn 1.4s var(–ease) 1.6s forwards;
}
#cs-hero .subtitle .sep{
display: inline-block;
width: 6px; height: 6px;
background: var(–gold);
border-radius: 50%;
margin: 0 18px;
vertical-align: middle;
box-shadow: 0 0 12px var(–gold);
animation: csPulseDot 2.4s ease-in-out infinite;
}
@keyframes csPulseDot{ 50%{ opacity: .5; transform: scale(.85); } }

#cs-hero .cta-row{
margin-top: 56px;
opacity: 0;
animation: csFadeIn 1.4s var(–ease) 2.0s forwards;
}

#cs-hero .cta{
position: relative;
display: inline-flex;
align-items: center; gap: 14px;
padding: 18px 32px 18px 36px;
font-family: var(–sans);
font-size: 14px; font-weight: 500;
letter-spacing: 0.02em;
color: var(–ink);
border: 1px solid rgba(212,160,68,0.4);
border-radius: 100px;
background: rgba(15,15,14,0.4);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
transition: color .35s var(–ease), border-color .35s var(–ease), transform .12s var(–ease);
overflow: hidden;
isolation: isolate;
}
#cs-hero .cta::before{
content: “”; position: absolute; inset: 0; background: var(–gold);
transform: translateY(101%);
transition: transform .45s var(–ease);
z-index: -1;
}
#cs-hero .cta:hover{ color: #050505; border-color: var(–gold); }
#cs-hero .cta:hover::before{ transform: translateY(0); }
#cs-hero .cta .icon{ width: 18px; height: 18px; transition: transform .35s var(–ease); }
#cs-hero .cta:hover .icon{ transform: translate(2px,-2px); }
#cs-hero .cta .pulse{ position: relative; width: 10px; height: 10px; }
#cs-hero .cta .pulse::before, #cs-hero .cta .pulse::after{
content: “”; position: absolute; inset: 0;
background: var(–gold); border-radius: 50%;
}
#cs-hero .cta .pulse::after{ animation: csRingOut 1.8s ease-out infinite; }
@keyframes csRingOut{ 0%{ transform: scale(1); opacity: .8; } 100%{ transform: scale(3.2); opacity: 0; } }
#cs-hero .cta:hover .pulse::before, #cs-hero .cta:hover .pulse::after{ background: #050505; }

@keyframes csFadeIn{ to { opacity: 1; } }

/* corner labels */
#cs-hero .corner{
position: absolute; z-index: 6;
font-family: var(–mono);
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(–ink-mute);
opacity: 0;
animation: csFadeIn 1.6s var(–ease) 2.6s forwards;
}
#cs-hero .corner.tl{ top: 24px; left: 28px; }
#cs-hero .corner.tr{ top: 24px; right: 28px; display: inline-flex; align-items: center; gap: 10px; }
#cs-hero .corner.bl{ bottom: 24px; left: 28px; }
#cs-hero .corner.br{ bottom: 24px; right: 28px; }
#cs-hero .corner.tr .live{
width: 7px; height: 7px; border-radius: 50%;
background: #4ADE80; box-shadow: 0 0 10px #4ADE80;
animation: csPulseDot 1.6s ease-in-out infinite;
}
#cs-hero .corner em{ color: var(–gold); font-style: normal; }

/* custom cursor (lives outside #cs-hero so it can use mix-blend-mode against everything) */
.cs-cur-dot, .cs-cur-ring{
position: fixed; top: 0; left: 0;
pointer-events: none;
z-index: 1000000;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
}
.cs-cur-dot{ width: 6px; height: 6px; background: #F5F1EB; border-radius: 50%; }
.cs-cur-ring{
width: 36px; height: 36px;
border: 1px solid rgba(245,241,235,0.4);
border-radius: 50%;
transition: width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1), border-color .25s cubic-bezier(.2,.7,.2,1);
}
.cs-cur-ring.hover{
width: 80px; height: 80px;
border-color: #D4A044;
background: rgba(212,160,68,0.12);
mix-blend-mode: normal;
}
@media (hover: none){ .cs-cur-dot, .cs-cur-ring{ display: none; } }

/* mobile */
@media (max-width: 640px){
#cs-hero .corner.bl, #cs-hero .corner.br{ display: none; }
#cs-hero .name{ font-size: clamp(48px, 16vw, 110px); }
#cs-hero .eyebrow{ font-size: 10px; letter-spacing: 0.35em; margin-bottom: 26px; }
#cs-hero .subtitle{ letter-spacing: 0.4em; }
}
</style>

<div id=”cs-hero”>
<div class=”bg-mesh”></div>
<div class=”spot” id=”cs-spot”></div>
<canvas class=”fx” id=”cs-fx”></canvas>
<div class=”vignette”></div>
<div class=”scan”></div>

<div class=”corner tl”>CHRISTO &mdash; <em>SWANEPOEL</em></div>
<div class=”corner tr”><span class=”live”></span> Open to founder-led work</div>
<div class=”corner bl”><span id=”cs-clock”>— : —</span> · LDN/AKL</div>
<div class=”corner br”>© 2026 · v2</div>

<div class=”stage”>
<div class=”content” id=”cs-tilt”>

<div class=”eyebrow”>Brand &middot; eCommerce &middot; Tech</div>

<h1 class=”name” id=”cs-name”>Christo Swanepoel</h1>

<div class=”subtitle”>
CMO <span class=”sep”></span> CEO <span class=”sep”></span> Strategist
</div>

<div class=”cta-row”>
<a class=”cta” id=”cs-cta” href=”https://www.linkedin.com/in/christoswanepoels/” target=”_blank” rel=”noopener”>
<span class=”pulse”></span>
Connect on LinkedIn
<svg class=”icon” viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”1.6″ stroke-linecap=”round” stroke-linejoin=”round”>
<path d=”M7 17L17 7″></path>
<path d=”M8 7h9v9″></path>
</svg>
</a>
</div>
</div>
</div>
</div>

<div class=”cs-cur-ring” id=”cs-curRing”></div>
<div class=”cs-cur-dot” id=”cs-curDot”></div>

<script>
(function(){
// particle field
var canvas = document.getElementById(‘cs-fx’);
var ctx = canvas.getContext(‘2d’, { alpha: true });
var dpr = Math.min(window.devicePixelRatio || 1, 2);
var W, H;
var mouse = { x: 0, y: 0, has: false };

function resize(){
dpr = Math.min(window.devicePixelRatio || 1, 2);
W = window.innerWidth; H = window.innerHeight;
canvas.width = W * dpr; canvas.height = H * dpr;
canvas.style.width = W + ‘px’; canvas.style.height = H + ‘px’;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
resize();
window.addEventListener(‘resize’, resize);

function targetCount(){
var area = W * H;
return Math.max(70, Math.min(220, Math.round(area / 9000)));
}
var particles = [];
function makeParticle(){
return {
x: Math.random() * W, y: Math.random() * H,
vx: (Math.random() – 0.5) * 0.18,
vy: (Math.random() – 0.5) * 0.18,
r: Math.random() * 1.4 + 0.4,
a: Math.random() * 0.7 + 0.2,
p: Math.random() * Math.PI * 2
};
}
function reseed(){
particles.length = 0;
var N = targetCount();
for (var i = 0; i < N; i++) particles.push(makeParticle());
}
reseed();
window.addEventListener(‘resize’, reseed);

var LINK_DIST = 130, MOUSE_RADIUS = 220;
var t = 0;

function draw(){
t += 0.016;
ctx.clearRect(0, 0, W, H);

for (var i = 0; i < particles.length; i++){
var p = particles[i];
p.x += p.vx; p.y += p.vy;

if (mouse.has){
var dx = mouse.x – p.x, dy = mouse.y – p.y;
var d2 = dx*dx + dy*dy;
if (d2 < MOUSE_RADIUS*MOUSE_RADIUS && d2 > 1){
var d = Math.sqrt(d2);
var force = (1 – d / MOUSE_RADIUS) * 0.55;
p.vx += (dx / d) * force * 0.04;
p.vy += (dy / d) * force * 0.04;
}
}
p.vx *= 0.985; p.vy *= 0.985;
p.vx += (Math.random() – 0.5) * 0.004;
p.vy += (Math.random() – 0.5) * 0.004;
if (p.x < -10) p.x = W + 10;
if (p.x > W + 10) p.x = -10;
if (p.y < -10) p.y = H + 10;
if (p.y > H + 10) p.y = -10;
}

for (var i = 0; i < particles.length; i++){
var a = particles[i];
for (var j = i + 1; j < particles.length; j++){
var b = particles[j];
var dx = a.x – b.x, dy = a.y – b.y;
var d2 = dx*dx + dy*dy;
if (d2 < LINK_DIST*LINK_DIST){
var d = Math.sqrt(d2);
var o = 1 – d / LINK_DIST;
ctx.strokeStyle = ‘rgba(212, 160, 68, ‘ + (o * 0.32) + ‘)’;
ctx.lineWidth = 0.6;
ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
}
}
if (mouse.has){
var dx = a.x – mouse.x, dy = a.y – mouse.y;
var d2 = dx*dx + dy*dy;
if (d2 < MOUSE_RADIUS*MOUSE_RADIUS){
var d = Math.sqrt(d2);
var o = 1 – d / MOUSE_RADIUS;
ctx.strokeStyle = ‘rgba(242, 213, 133, ‘ + (o * 0.55) + ‘)’;
ctx.lineWidth = 0.8;
ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke();
}
}
}

for (var i = 0; i < particles.length; i++){
var p = particles[i];
var tw = (Math.sin(t * 1.6 + p.p) + 1) * 0.5;
var alpha = p.a * (0.55 + tw * 0.45);
ctx.fillStyle = ‘rgba(242, 213, 133, ‘ + alpha + ‘)’;
ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2); ctx.fill();
ctx.fillStyle = ‘rgba(212, 160, 68, ‘ + (alpha * 0.18) + ‘)’;
ctx.beginPath(); ctx.arc(p.x, p.y, p.r * 4, 0, Math.PI*2); ctx.fill();
}

requestAnimationFrame(draw);
}
draw();

// mouse / tilt / spotlight / cursor
var tilt = document.getElementById(‘cs-tilt’);
var spot = document.getElementById(‘cs-spot’);
var curDot = document.getElementById(‘cs-curDot’);
var curRing = document.getElementById(‘cs-curRing’);
var rx = window.innerWidth/2, ry = window.innerHeight/2;
var cx = rx, cy = ry;

window.addEventListener(‘mousemove’, function(e){
mouse.x = e.clientX; mouse.y = e.clientY; mouse.has = true;
rx = e.clientX; ry = e.clientY;
var nx = (e.clientX / window.innerWidth) – 0.5;
var ny = (e.clientY / window.innerHeight) – 0.5;
tilt.style.transform = ‘rotateY(‘ + (nx * 6) + ‘deg) rotateX(‘ + (-ny * 6) + ‘deg) translateZ(0)’;
spot.style.transform = ‘translate(‘ + e.clientX + ‘px, ‘ + e.clientY + ‘px) translate(-50%,-50%)’;
});
window.addEventListener(‘mouseleave’, function(){ mouse.has = false; tilt.style.transform = ”; });

(function lerp(){
cx += (rx – cx) * 0.18; cy += (ry – cy) * 0.18;
curDot.style.transform = ‘translate(‘ + rx + ‘px, ‘ + ry + ‘px) translate(-50%,-50%)’;
curRing.style.transform = ‘translate(‘ + cx + ‘px, ‘ + cy + ‘px) translate(-50%,-50%)’;
requestAnimationFrame(lerp);
})();

document.querySelectorAll(‘#cs-hero a, #cs-hero button, #cs-hero .name’).forEach(function(el){
el.addEventListener(‘mouseenter’, function(){ curRing.classList.add(‘hover’); });
el.addEventListener(‘mouseleave’, function(){ curRing.classList.remove(‘hover’); });
});

// name letter intro + scramble
var nameEl = document.getElementById(‘cs-name’);
var original = nameEl.textContent;
nameEl.innerHTML = ”;
[].slice.call(original).forEach(function(c, i){
var s = document.createElement(‘span’);
s.className = ‘ch’;
s.textContent = c === ‘ ‘ ? ‘ ‘ : c;
s.style.animationDelay = (0.08 * i) + ‘s’;
nameEl.appendChild(s);
});
requestAnimationFrame(function(){ nameEl.classList.add(‘in’); });

var SCRAMBLE = ‘!<>-_\\/[]{}—=+*^?#________’;
var scrambling = false;
nameEl.addEventListener(‘mouseenter’, function(){
if (scrambling) return;
scrambling = true;
var chars = nameEl.querySelectorAll(‘.ch’);
var targets = [].slice.call(original).map(function(c){ return c === ‘ ‘ ? ‘ ‘ : c; });
var totalSteps = 24, step = 0;
var interval = setInterval(function(){
chars.forEach(function(el, i){
var settleAt = Math.floor((i / chars.length) * (totalSteps * 0.7)) + 4;
if (step >= settleAt){
el.textContent = targets[i];
el.style.color = ”;
} else {
if (targets[i] === ‘ ‘){ el.textContent = ‘ ‘; return; }
el.textContent = SCRAMBLE[Math.floor(Math.random() * SCRAMBLE.length)];
el.style.color = ‘#F2D585’;
}
});
step++;
if (step > totalSteps){ clearInterval(interval); scrambling = false; }
}, 35);
});

// magnetic CTA
var cta = document.getElementById(‘cs-cta’);
cta.addEventListener(‘mousemove’, function(e){
var r = cta.getBoundingClientRect();
var x = e.clientX – r.left – r.width/2;
var y = e.clientY – r.top – r.height/2;
cta.style.transform = ‘translate(‘ + (x*0.18) + ‘px, ‘ + (y*0.28) + ‘px)’;
});
cta.addEventListener(‘mouseleave’, function(){ cta.style.transform = ”; });

// London clock
var clock = document.getElementById(‘cs-clock’);
function tick(){
var d = new Date();
var s = d.toLocaleTimeString(‘en-GB’, { hour: ‘2-digit’, minute: ‘2-digit’, timeZone: ‘Europe/London’ });
clock.textContent = s + ‘ LDN’;
}
tick(); setInterval(tick, 1000);
})();
</script>