feat: add promo pic and bio

Author: pahund

public/zapperment-rocks_promo-pic_fete26_l.png

@@ -1,7 +1,6 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
 
@@ -16,6 +15,56 @@
   filter: drop-shadow(0 0 2em #ffffff);
 }
 
+.hero {
+  width: 100vw;
+  position: relative;
+  left: calc((100% - 100vw) / 2);
+  box-sizing: border-box;
+  padding: 2rem 1rem;
+  background-color: #1a1a1a;
+  margin-bottom: 1rem;
+}
+
+.hero-inner {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.hero-bio {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.7;
+  text-align: center;
+  max-width: 90%;
+}
+
+.promo-pic {
+  max-height: 50vh;
+  width: auto;
+  display: block;
+  cursor: pointer;
+}
+
+@media (min-width: 900px) {
+  .hero {
+    padding: 0;
+  }
+
+  .hero-inner {
+    flex-direction: row;
+  }
+
+  .hero-bio {
+    width: calc(50vh * 857 / 1200);
+    max-width: none;
+    font-size: 1.7rem;
+    text-align: left;
+  }
+}
+
 .audio-player {
   margin-top: 2rem;
   padding: 0 1.5rem 1.5rem 1.5rem;
@@ -89,25 +138,6 @@
   max-height: 600px;
 }
 
-@media (prefers-color-scheme: light) {
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #6b7280);
-  }
-
-  .audio-player {
-    background: rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.2);
-  }
-
-  .audio-player h2 {
-    color: #213547;
-  }
-
-  .audio-player p {
-    color: #4a5568;
-  }
-}
-
 @media (max-width: 600px) {
   #root {
     padding: 0;

public/zapperment-rocks_promo-pic_fete26_m.png

@@ -16,6 +16,30 @@ function App() {
       </div>
       <h1>zapperment.rocks</h1>
 
+      <div className="hero">
+        <div className="hero-inner">
+          <p className="hero-bio">
+            Patrick Hund a.k.a. <strong>zapperment.rocks</strong> — beat maker, keyboardist and
+            DJ from Wittstock, north-eastern Germany. His sound sits at the
+            intersection of techno, house, rock and EDM. Genre lines exist to be
+            ignored.
+          </p>
+          <a
+            href="/zapperment-rocks_promo-pic_fete26_xl.png"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              className="promo-pic"
+              src="/zapperment-rocks_promo-pic_fete26_s.png"
+              srcSet="/zapperment-rocks_promo-pic_fete26_xs.png 215w, /zapperment-rocks_promo-pic_fete26_s.png 429w, /zapperment-rocks_promo-pic_fete26_m.png 643w, /zapperment-rocks_promo-pic_fete26_l.png 857w"
+              sizes="(max-width: 768px) 300px, 385px"
+              alt="Zapperment.rocks promo photo from Fête 2026"
+            />
+          </a>
+        </div>
+      </div>
+
       <div className="audio-player">
         <h2>Party Girl</h2>
         <p>Live session 3, 18 Mar 2026</p>

public/zapperment-rocks_promo-pic_fete26_s.png

@@ -28,6 +28,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
 h1 {
@@ -53,16 +54,3 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}