spotlightcam/frontend/public/content/about-us.html

<style>
  .content-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
  }

  .content-wrapper h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #111827;
  }

  .content-wrapper p {
    margin-bottom: 1.25rem;
    color: #4b5563;
  }

  .content-wrapper a {
    color: #6366f1;
    text-decoration: underline;
  }

  .content-wrapper a:hover {
    color: #4f46e5;
  }

  .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;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.875rem;
  }

  @media (max-width: 900px) {
    .about-layout {
      grid-template-columns: 1fr;
    }
  }
</style>

<div class="content-wrapper">
  <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>

    <div>
      <h1>About Us</h1>

      <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>
        Despite the very official "About Us" in the menu, at the moment "us" is just... me 😅 One-person team, many hats.
      </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>

      <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>
        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>
        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>

      <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>

      <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>