<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brian Sloane</title>
  <meta name="description" content="Brian Sloane — Product leader based in Philadelphia.">
  <meta name="author" content="Brian Sloane">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:       #F9F9F8;
      --card:     #FFFFFF;
      --border:   #E4E4E7;
      --border-h: #A1A1AA;
      --accent:   #B45309;
      --text:     #18181B;
      --muted:    #71717A;

      --gap:      10px;
      --radius:   14px;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg:       #18181B;
        --card:     #27272A;
        --border:   #3F3F46;
        --border-h: #71717A;
        --accent:   #D97706;
        --text:     #FAFAFA;
        --muted:    #A1A1AA;

      }
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      padding: 40px 20px 60px;
    }

    .container {
      max-width: 820px;
      margin: 0 auto;
    }

    /* ── Header ── */
    header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 32px;
    }

    header .name {
      font-size: 0.9375rem;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    header .domain {
      font-size: 0.8125rem;
      color: var(--muted);
    }

    /* ── Grid ── */
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 155px;
      gap: var(--gap);
    }

    /* ── Tiles ── */
    .tile {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      text-decoration: none;
      color: var(--text);
      transition: border-color 0.12s ease;
      position: relative;
      overflow: hidden;
    }

    a.tile:hover { border-color: var(--accent); }

    .tile.span-2 { grid-column: span 2; }
    .tile.tall   { grid-row: span 2; }

    .tile-label {
      font-size: 0.6875rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--accent);
      margin-bottom: 6px;
    }

    .tile-value {
      font-size: 0.9375rem;
      font-weight: 500;
      line-height: 1.3;
    }

    .tile-sub {
      font-size: 0.8125rem;
      color: var(--muted);
      margin-top: 3px;
    }

    .tile-icon {
      margin-bottom: auto;
      color: var(--text);
    }

    /* ── Bio tile ── */
    .bio-tile {
      justify-content: flex-start;
      padding: 24px 26px;
    }

    .bio-tile .headline {
      font-size: 1.4375rem;
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.25;
      margin-bottom: 14px;
    }

    .bio-tile p {
      font-size: 0.875rem;
      line-height: 1.65;
      color: #3F3F46;
    }

    @media (prefers-color-scheme: dark) {
      .bio-tile p { color: #A1A1AA; }
    }

    .bio-tile p + p {
      margin-top: 10px;
    }

    /* ── Projects ── */
    .projects-section {
      margin-top: 32px;
    }

    .section-label {
      font-size: 0.6875rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--muted);
      margin-bottom: 12px;
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--gap);
    }

    .project-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      color: var(--text);
      text-decoration: none;
      transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }

    a.project-card:hover {
      border-color: var(--project-color, var(--accent));
      transform: translateY(-3px);
      box-shadow: 0 8px 24px -6px rgba(0,0,0,0.12);
    }

    .project-preview {
      height: 190px;
      background-color: var(--project-color, var(--border));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      overflow: hidden;
      flex-shrink: 0;
    }

    .project-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }

    .project-body {
      padding: 18px 22px 20px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .project-category {
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--project-color, var(--accent));
      margin-bottom: 6px;
    }

    .project-name {
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: 10px;
    }

    .project-desc {
      font-size: 0.8125rem;
      color: var(--muted);
      line-height: 1.65;
      flex: 1;
    }

    .project-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 16px;
    }

    .tag {
      font-size: 0.6875rem;
      font-weight: 500;
      padding: 3px 8px;
      border-radius: 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--muted);
    }

    /* ── Responsive ── */
    @media (max-width: 580px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
      .projects-grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <div class="container">

    <header>
      <span class="name">Brian Sloane</span>
      <span class="domain">briansloane.com</span>
    </header>

    <main>
      <div class="grid">

        <!-- Bio — 2 cols × 2 rows -->
        <div class="tile bio-tile span-2 tall">
          <div class="headline">Product leader<br>&amp; technologist.</div>
          <p>Previously Director of Product Management at Stitch, Talend, and Qlik, with deep experience in data integration and product-led growth.</p>
          <p>Based in Philadelphia. Interested in travel, photography, and all things technology.</p>
        </div>

        <!-- Location -->
        <div class="tile">
          <svg class="tile-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
            <circle cx="12" cy="10" r="3"/>
          </svg>
          <div class="tile-label">Location</div>
          <div class="tile-value">Philadelphia</div>
          <div class="tile-sub">Pennsylvania</div>
        </div>

        <!-- LinkedIn -->
        <a href="https://www.linkedin.com/in/briansloane" class="tile" target="_blank" rel="noopener noreferrer">
          <svg class="tile-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
            <rect x="2" y="9" width="4" height="12"/>
            <circle cx="4" cy="4" r="2"/>
          </svg>
          <div class="tile-label">Connect</div>
          <div class="tile-value">LinkedIn</div>
          <div class="tile-sub">/in/briansloane</div>
        </a>

        <!-- GitHub -->
        <a href="https://github.com/briansloane" class="tile" target="_blank" rel="noopener noreferrer">
          <svg class="tile-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
          </svg>
          <div class="tile-label">Code</div>
          <div class="tile-value">GitHub</div>
          <div class="tile-sub">@briansloane</div>
        </a>

        <!-- Email — assembled by JS to avoid scrapers -->
        <a href="#" class="tile" id="email-tile">
          <svg class="tile-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
            <polyline points="22,6 12,13 2,6"/>
          </svg>
          <div class="tile-label">Get in touch</div>
          <div class="tile-value">Email</div>
          <div class="tile-sub" id="email-display"></div>
        </a>

      </div><!-- /.grid -->

    </main>

    <section class="projects-section">
      <div class="section-label">Projects</div>
      <div class="projects-grid">

        <div class="project-card" style="--project-color: #B45309">
          <div class="project-preview">
            <img src="images/singer-me-preview.jpg" alt="Singer.me">
          </div>
          <div class="project-body">
            <div class="project-category">Data Platform</div>
            <div class="project-name">Singer.me</div>
            <div class="project-desc">A personal data platform built on the Singer.io open-source connector architecture. Pulls from Foursquare Swarm, GitHub, and more through Meltano, transforms with dbt, and stores in DuckDB. 5,400+ checkins across 16 countries, unified and queryable. Working toward automated personal annual reports.</div>
            <div class="project-tags">
              <span class="tag">Meltano</span>
              <span class="tag">dbt</span>
              <span class="tag">DuckDB</span>
              <span class="tag">Python</span>
              <span class="tag">React</span>
              <span class="tag">Singer.io</span>
            </div>
          </div>
        </div>

        <a href="https://codetrails.app" class="project-card" style="--project-color: #1B3966" target="_blank" rel="noopener noreferrer">
          <div class="project-preview">
            <img src="images/code-trails-preview.jpg" alt="Code Trails">
          </div>
          <div class="project-body">
            <div class="project-category">Game</div>
            <div class="project-name">Code Trails</div>
            <div class="project-desc">A browser-based coding game for kids built using Claude Code for rapid prototyping. Teaches programming fundamentals through visual block-based programming—sequencing, direction, and loops.</div>
            <div class="project-tags">
              <span class="tag">React 19</span>
              <span class="tag">TypeScript</span>
              <span class="tag">Blockly</span>
              <span class="tag">Desktop + Mobile</span>
            </div>
          </div>
        </a>

        <div class="project-card" style="--project-color: #0284C7">
          <div class="project-preview">
            <img src="images/flip-turn-preview.jpg" alt="Flip Turn">
          </div>
          <div class="project-body">
            <div class="project-category">iOS + Web</div>
            <div class="project-name">Flip Turn</div>
            <div class="project-desc">A native iOS app and companion web app for tracking competitive swim meet results. Log times across strokes and distances, visualize progress over time, and compare results against qualifying standards.</div>
            <div class="project-tags">
              <span class="tag">iOS</span>
              <span class="tag">Next.js</span>
              <span class="tag">Supabase</span>
            </div>
          </div>
        </div>

        <div class="project-card" style="--project-color: #7C3AED">
          <div class="project-preview">
            <img src="images/music-concierge-preview.jpg" alt="Music Concierge">
          </div>
          <div class="project-body">
            <div class="project-category">Web App</div>
            <div class="project-name">Music Concierge</div>
            <div class="project-desc">A context-aware music app that uses AI-generated playlists to match the moment. Quickly find the right soundtrack based on signals like season, time of day, and local weather.</div>
            <div class="project-tags">
              <span class="tag">Next.js</span>
              <span class="tag">OpenWeather API</span>
            </div>
          </div>
        </div>

      </div>
    </section>

  </div><!-- /.container -->

  <script>
    // Assemble email address at runtime so it doesn't appear as plain text for scrapers
    (function () {
      var u = 'bsloane', d = 'gmail' + '.' + 'com';
      var tile = document.getElementById('email-tile');
      var display = document.getElementById('email-display');
      if (tile && display) {
        tile.href = 'mailto:' + u + '@' + d;
        display.textContent = u + '\u0040' + d;
      }
    }());
  </script>

</body>
</html>
