diff --git a/public/img/operator.jpg b/public/img/operator.jpg
deleted file mode 100644
index 23b995f..0000000
Binary files a/public/img/operator.jpg and /dev/null differ
diff --git a/public/img/operator.webp b/public/img/operator.webp
new file mode 100644
index 0000000..badbb5a
Binary files /dev/null and b/public/img/operator.webp differ
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index 2e98646..2f61e54 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -4,118 +4,118 @@ import { HeroTitle } from './HeroTitle';
 import './prism/styles.css';
 
 type HeroSectionProps = {
-    activeThemeName: string;
-    hasClickedThemePill: boolean;
-    showThemePillTooltip: boolean;
-    onThemePillClick: () => void;
-    cpuModeEnabled: boolean;
+  activeThemeName: string;
+  hasClickedThemePill: boolean;
+  showThemePillTooltip: boolean;
+  onThemePillClick: () => void;
+  cpuModeEnabled: boolean;
 };
 
 export function HeroSection({
-    activeThemeName,
-    hasClickedThemePill,
-    showThemePillTooltip,
-    onThemePillClick,
-    cpuModeEnabled,
+  activeThemeName,
+  hasClickedThemePill,
+  showThemePillTooltip,
+  onThemePillClick,
+  cpuModeEnabled,
 }: HeroSectionProps) {
-    return (
-        <header className="flex flex-col md:flex-row gap-12 items-center justify-between relative">
-            <div className="relative space-y-6 max-w-2xl">
-                <div className="absolute inset-x-0 -top-10 flex justify-end md:hidden -z-10">
-                    <div className="relative w-48 h-56 sketch-border bg-(--bg-panel) transform rotate-3 opacity-70">
-                        <div
-                            className="absolute inset-2 border-2 border-dashed border-(--border-main) overflow-hidden"
-                            style={{
-                                WebkitMaskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 1) 85%)',
-                                maskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 1) 85%)',
-                            }}
-                        >
-                            <img
-                                src="/img/operator.jpg"
-                                alt="Operator portrait"
-                                className="h-full w-full object-cover filter grayscale contrast-125 brightness-90"
-                                loading="lazy"
-                            />
-                            <div
-                                className="absolute inset-0 opacity-70"
-                                style={{
-                                    background: 'linear-gradient(135deg, transparent 10%, var(--color-accent) 100%)',
-                                    mixBlendMode: 'multiply',
-                                }}
-                            />
-                            <div
-                                className="absolute inset-0 opacity-55"
-                                style={{
-                                    background: 'var(--color-accent)',
-                                    mixBlendMode: 'color',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </div>
-                <div className={`relative inline-flex mb-4 ${hasClickedThemePill ? '' : 'animate-bounce'}`}>
-                    <button
-                        type="button"
-                        onClick={onThemePillClick}
-                        className={`inline-flex items-center gap-2 px-4 py-1.5 sketch-border bg-(--bg-surface) text-xs transform -rotate-1 cursor-pointer select-none ${hasClickedThemePill ? '' : 'animate-[pill-glow_2s_ease-in-out_infinite]'}`}
-                        aria-label="Theme pill"
-                    >
-                        <TriangleAlert className="w-3 h-3 accent-text" />
-                        <span className="font-sketch text-sm">YOU GET: <span className="text-(--text-main)">{activeThemeName}</span></span>
-                    </button>
-
-                    {showThemePillTooltip}
-                </div>
-                <div className="md:hidden">
-                    <HeroTitle />
-                </div>
-
-                <div className="hidden md:block">
-                    {cpuModeEnabled ? <HeroTitle /> : <RevolvingPrism />}
-                </div>
-                <p className="text-md text-(--text-muted) leading-relaxed max-w-xl font-mono">
-                    Systems engineer in the making. From window managers and game engines to self-hosted infrastructure.
-                </p>
-                <div className="md:hidden">
-                    <div className="sketch-border bg-(--bg-panel) px-4 py-3 text-sm text-(--text-muted) font-mono max-w-sm flex items-start gap-2">
-                        <LaptopMinimalCheck className="h-4 w-4 mt-0.5 text-(--color-accent) animate-pulse" />
-                        <span>This looks a lot cooler on bigger screens.</span>
-                    </div>
-                </div>
+  return (
+    <header className="flex flex-col md:flex-row gap-12 items-center justify-between relative">
+      <div className="relative space-y-6 max-w-2xl">
+        <div className="absolute inset-x-0 -top-10 flex justify-end md:hidden -z-10">
+          <div className="relative w-48 h-56 sketch-border bg-(--bg-panel) transform rotate-3 opacity-70">
+            <div
+              className="absolute inset-2 border-2 border-dashed border-(--border-main) overflow-hidden"
+              style={{
+                WebkitMaskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 1) 85%)',
+                maskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 1) 85%)',
+              }}
+            >
+              <img
+                src="/img/operator.webp"
+                alt="Operator portrait"
+                className="h-full w-full object-cover filter grayscale contrast-125 brightness-90"
+                loading="lazy"
+              />
+              <div
+                className="absolute inset-0 opacity-70"
+                style={{
+                  background: 'linear-gradient(135deg, transparent 10%, var(--color-accent) 100%)',
+                  mixBlendMode: 'multiply',
+                }}
+              />
+              <div
+                className="absolute inset-0 opacity-55"
+                style={{
+                  background: 'var(--color-accent)',
+                  mixBlendMode: 'color',
+                }}
+              />
             </div>
+          </div>
+        </div>
+        <div className={`relative inline-flex mb-4 ${hasClickedThemePill ? '' : 'animate-bounce'}`}>
+          <button
+            type="button"
+            onClick={onThemePillClick}
+            className={`inline-flex items-center gap-2 px-4 py-1.5 sketch-border bg-(--bg-surface) text-xs transform -rotate-1 cursor-pointer select-none ${hasClickedThemePill ? '' : 'animate-[pill-glow_2s_ease-in-out_infinite]'}`}
+            aria-label="Theme pill"
+          >
+            <TriangleAlert className="w-3 h-3 accent-text" />
+            <span className="font-sketch text-sm">YOU GET: <span className="text-(--text-main)">{activeThemeName}</span></span>
+          </button>
 
-            <div className="hidden md:flex relative w-48 h-56 sm:w-64 sm:h-72 shrink-0 sketch-border bg-(--bg-panel) transform rotate-3 hover:rotate-0 transition-transform duration-500 group flex-col items-center justify-center mt-8 md:mt-0">
-                <div className="absolute -top-3 -right-4 w-12 h-6 bg-(--color-accent-muted) transform rotate-45 opacity-60 backdrop-blur-sm sketch-border-subtle border-none" />
-                <div className="absolute -bottom-3 -left-4 w-12 h-6 bg-(--color-accent-muted) transform rotate-45 opacity-60 backdrop-blur-sm sketch-border-subtle border-none" />
+          {showThemePillTooltip}
+        </div>
+        <div className="md:hidden">
+          <HeroTitle />
+        </div>
 
-                <div className="absolute inset-2 border-2 border-dashed border-(--border-main) overflow-hidden">
-                    <img
-                        src="/img/operator.jpg"
-                        alt="Operator portrait"
-                        className="h-full w-full object-cover filter grayscale contrast-125 brightness-90"
-                        loading="lazy"
-                    />
-                    <div
-                        className="absolute inset-0 opacity-70"
-                        style={{
-                            background: 'linear-gradient(135deg, transparent 10%, var(--color-accent) 100%)',
-                            mixBlendMode: 'multiply',
-                        }}
-                    />
-                    <div
-                        className="absolute inset-0 opacity-55"
-                        style={{
-                            background: 'var(--color-accent)',
-                            mixBlendMode: 'color',
-                        }}
-                    />
-                </div>
+        <div className="hidden md:block">
+          {cpuModeEnabled ? <HeroTitle /> : <RevolvingPrism />}
+        </div>
+        <p className="text-md text-(--text-muted) leading-relaxed max-w-xl font-mono">
+          Systems engineer in the making. From window managers and game engines to self-hosted infrastructure.
+        </p>
+        <div className="md:hidden">
+          <div className="sketch-border bg-(--bg-panel) px-4 py-3 text-sm text-(--text-muted) font-mono max-w-sm flex items-start gap-2">
+            <LaptopMinimalCheck className="h-4 w-4 mt-0.5 text-(--color-accent) animate-pulse" />
+            <span>This looks a lot cooler on bigger screens.</span>
+          </div>
+        </div>
+      </div>
 
-                <div className="absolute -bottom-8 -left-12 font-sketch text-xs accent-text -rotate-15 hidden md:flex items-center gap-2 opacity-80">
-                    <span className="whitespace-nowrap">the operator</span>
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transform -scale-y-100 rotate-45"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
-                </div>
-            </div>
-        </header>
-    );
+      <div className="hidden md:flex relative w-48 h-56 sm:w-64 sm:h-72 shrink-0 sketch-border bg-(--bg-panel) transform rotate-3 hover:rotate-0 transition-transform duration-500 group flex-col items-center justify-center mt-8 md:mt-0">
+        <div className="absolute -top-3 -right-4 w-12 h-6 bg-(--color-accent-muted) transform rotate-45 opacity-60 backdrop-blur-sm sketch-border-subtle border-none" />
+        <div className="absolute -bottom-3 -left-4 w-12 h-6 bg-(--color-accent-muted) transform rotate-45 opacity-60 backdrop-blur-sm sketch-border-subtle border-none" />
+
+        <div className="absolute inset-2 border-2 border-dashed border-(--border-main) overflow-hidden">
+          <img
+            src="/img/operator.webp"
+            alt="Operator portrait"
+            className="h-full w-full object-cover filter grayscale contrast-125 brightness-90"
+            loading="lazy"
+          />
+          <div
+            className="absolute inset-0 opacity-70"
+            style={{
+              background: 'linear-gradient(135deg, transparent 10%, var(--color-accent) 100%)',
+              mixBlendMode: 'multiply',
+            }}
+          />
+          <div
+            className="absolute inset-0 opacity-55"
+            style={{
+              background: 'var(--color-accent)',
+              mixBlendMode: 'color',
+            }}
+          />
+        </div>
+
+        <div className="absolute -bottom-8 -left-12 font-sketch text-xs accent-text -rotate-15 hidden md:flex items-center gap-2 opacity-80">
+          <span className="whitespace-nowrap">the operator</span>
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transform -scale-y-100 rotate-45"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
+        </div>
+      </div>
+    </header>
+  );
 }