chore: refresh about page content

frontend/public/content/about-us.html

@@ -9,17 +9,7 @@
     font-size: 2.25rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
-    color: #1f2937;
-  }
-
-  .content-wrapper h2 {
-    font-size: 1.875rem;
-    font-weight: 700;
-    margin-top: 2.5rem;
-    margin-bottom: 1rem;
-    color: #1f2937;
-    border-bottom: 2px solid #e5e7eb;
-    padding-bottom: 0.5rem;
+    color: #111827;
   }
 
   .content-wrapper p {
@@ -36,18 +26,99 @@
     color: #4f46e5;
   }
 
-  .content-wrapper hr {
-    margin: 2.5rem 0;
-    border: 0;
-    border-top: 1px solid #e5e7eb;
-  }
-
   .intro-text {
     font-size: 1.125rem;
     color: #1f2937;
     margin-bottom: 1.5rem;
   }
 
+  .about-layout {
+    display: grid;
+    grid-template-columns: minmax(200px, 280px) 1fr;
+    gap: 2rem;
+    align-items: start;
+  }
+
+  .profile-card {
+    background: #0f172a;
+    color: #e2e8f0;
+    border-radius: 16px;
+    padding: 1.25rem;
+    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .portrait {
+    position: relative;
+    border-radius: 14px;
+    overflow: hidden;
+    width: 100%;
+    min-height: 340px;
+    height: clamp(380px, 62vh, 560px);
+    background: #0b1224;
+  }
+
+  .portrait img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    filter: saturate(1.05);
+    transform: scaleX(-1);
+    transform-origin: center;
+  }
+
+  .portrait::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.45) 100%);
+    pointer-events: none;
+  }
+
+
+  .profile-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .profile-meta .name {
+    font-weight: 700;
+    font-size: 1.125rem;
+    color: #e2e8f0;
+    text-decoration: none;
+  }
+
+  .profile-meta .role {
+    font-size: 0.95rem;
+    color: #cbd5e1;
+  }
+
+  .profile-meta .tagline {
+    font-size: 0.95rem;
+    color: #94a3b8;
+  }
+
+  .home-link {
+    color: #0f172a;
+    text-decoration: underline;
+    font-weight: 600;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: transparent;
+    transition: color 120ms ease;
+  }
+
+  .home-link:hover {
+    color: #111827;
+    transform: none;
+    box-shadow: none;
+  }
+
   .footer-links {
     margin-top: 2rem;
     padding-top: 1.5rem;
@@ -55,54 +126,64 @@
     color: #6b7280;
     font-size: 0.875rem;
   }
+
+  @media (max-width: 900px) {
+    .about-layout {
+      grid-template-columns: 1fr;
+    }
+  }
 </style>
 
 <div class="content-wrapper">
-  <h1>About Us</h1>
+  <div class="about-layout">
+    <div class="profile-card">
+      <div class="portrait" aria-hidden="true">
+        <img src="/images/about/rg-author.jpg" alt="Radek at a dance event">
+      </div>
+      <div class="profile-meta">
+        <a class="name" href="/u/radziel">Radek Gierwiało</a>
+        <div class="role">Founder · Software Engineer · WCS Dancer</div>
+        <div class="tagline">Building tools for dancers who record as much as they dance.</div>
+      </div>
+    </div>
 
-  <p class="intro-text">
-    Hi, I'm Radek – a software engineer, a West Coast Swing dancer and the person behind <strong>spotlight.cam</strong>.
-  </p>
+    <div>
+      <h1>About Us</h1>
 
-  <p>
-    Spotlight.cam is a project built by someone who actually stands in the same registration lines, dances in the same heats and scrolls through the same event pages as you :P
-  </p>
+      <p class="intro-text">
+        Hi, I'm Radek – a software engineer, a West Coast Swing dancer and the person behind <strong>spotlight.cam</strong>.
+      </p>
 
-  <p>
-    If we ever meet at an event, I'll probably be somewhere near the dance floor, probably pressing "record" on someone's spotlight.
-  </p>
+      <p>
+        Despite the very official "About Us" in the menu, at the moment "us" is just... me 😅 One-person team, many hats.
+      </p>
 
-  <p>
-    To be fair, the original idea for this service was actually dropped on me by a friend who was tired of hunting for someone to film her dances – I just did what any backend developer / DevOps / Linux admin would do: said "okay, that shouldn't be that hard… right?", opened my editor, set up a few servers and scripts… and suddenly we had a new project on our hands 😅 I also had a not-so-secret teammate: AI. Without it, this would probably still be stuck in my "one day" folder for about a year 😄
-  </p>
+      <p>
+        Spotlight.cam is a project built by someone who actually stands in the same registration lines, dances in the same heats and scrolls through the same event pages as you :P
+      </p>
 
-  <h2>The Vision</h2>
+      <p>
+        If we ever meet at an event, I'll probably be somewhere near the dance floor, probably pressing "record" on someone's spotlight.
+      </p>
 
-  <p>
-    Our goal is to make it easier for dancers to capture and share their competition moments. No more running around looking for someone with a free hand to record your heat. No more missing your own spotlight because you were recording someone else's.
-  </p>
+      <p>
+        To be fair, the original idea for this service was actually dropped on me by a friend who was tired of hunting for someone to film her dances – I just did what any backend developer / DevOps / Linux admin would do: said "okay, that shouldn't be that hard... right?", opened my editor, set up a few servers and scripts... and suddenly we had a new project on our hands 😅 I also had a not-so-secret teammate: AI. Without it, this would probably still be stuck in my "one day" folder for about a year 😄
+      </p>
 
-  <p>
-    We're building a platform that connects dancers who want to help each other out, making the whole process smoother, fairer, and more organized.
-  </p>
+      <p>
+        If you’re into WCS nerdy stuff, you might also like my open-source <a href="https://github.com/gierwialo/wsdc_event_results_analyzer" target="_blank" rel="noreferrer">WSDC Event Results Analyzer</a> – a tool for exploring and visualizing competition placements – or <a href="https://gdzienawesta.com" target="_blank" rel="noreferrer">gdzienawesta.com</a>, a calendar that collects upcoming West Coast Swing events in Warsaw (and, who knows, maybe one day across all of Poland).
+      </p>
 
-  <h2>Technology</h2>
+      <p>
+        <strong>More about me:</strong> socials, contact options, and CV are at
+        <a class="home-link" href="http://radoslaw.gierwialo.com" target="_blank" rel="noreferrer">radoslaw.gierwialo.com</a>
+      </p>
 
-  <p>
-    Under the hood, spotlight.cam uses modern web technologies to deliver a fast, secure, and reliable experience:
-  </p>
-
-  <ul>
-    <li><strong>WebRTC peer-to-peer transfers</strong> - your videos are sent directly between devices, never stored on our servers</li>
-    <li><strong>Real-time chat</strong> - coordinate with your recording partners instantly</li>
-    <li><strong>Smart auto-matching</strong> - fairness algorithms ensure everyone gets help</li>
-    <li><strong>End-to-end encryption</strong> - your data is protected at every step</li>
-  </ul>
-
-  <div class="footer-links">
-    <p>
-      Have questions? Check out our <a href="/how-it-works">How It Works</a> page,
-      read our <a href="/privacy">Privacy Policy</a>, or <a href="/contact">contact us</a> directly.
-    </p>
+      <div class="footer-links">
+        <p>
+          Have questions? Check out our <a href="/how-it-works">How It Works</a> page – and if you'd like to collaborate or have any UI/UX ideas or feedback, I'd love to hear from you via the <a href="/contact">contact form</a>.
+        </p>
+      </div>
+    </div>
   </div>
 </div>