<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Creative AI for Filmmaking & Media Production">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Sounds & Colors | Creative AI for Filmmaking & Media Production">
  <meta property="og:description" content="Creative AI for Filmmaking & Media Production">
  <meta property="og:image" content="https://soundsandcolors.com/images/SoundsAndColorsShare.jpg">
  <meta property="og:url" content="https://soundsandcolors.com/">
  <meta property="og:site_name" content="Sounds & Colors">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Sounds & Colors | Creative AI for Filmmaking & Media Production">
  <meta name="twitter:description" content="Creative AI for Filmmaking & Media Production">
  <meta name="twitter:image" content="https://soundsandcolors.com/images/SoundsAndColorsShare.jpg">
  <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=Outfit:wght@400;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/styles.css">
  <title>Sounds & Colors | Creative AI for Filmmaking & Media Production</title>
</head>
<body class="page-home">

  <a href="#main-content" class="skip-link">Skip to content</a>

  <!-- Nav -->
  <nav class="nav" aria-label="Main navigation">
    <div class="nav-inner">
      <a href="/" class="nav-home active">Sounds & Colors</a>
      <ul class="nav-links">
        <li><a href="/ruff-cutter" class="nav-link">Ruff Cutter</a></li>
        <li><a href="/b-roller" class="nav-link">B-Roller</a></li>
        <li><a href="/b-roller-studio" class="nav-link">B-Roller Studio</a></li>
        <li><a href="/audiodesc" class="nav-link">AudioDesc</a></li>
        <li><a href="/projects" class="nav-link">Projects</a></li>
        <li><a href="https://ko-fi.com/brianparis" target="_blank" rel="noopener noreferrer" class="nav-coffee" aria-label="Buy me a coffee"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 8h1.5a2.5 2.5 0 0 1 0 5H17"/><path d="M3 8h14v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8z"/><path d="M6 1v3M10 1v3M14 1v3"/></svg></a></li>
      </ul>
      <button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Toggle menu" aria-expanded="false" aria-controls="mobile-menu">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
      </button>
    </div>
    <div id="mobile-menu" class="mobile-menu">
      <ul>
        <li><a href="/" class="active">Sounds & Colors</a></li>
        <li><a href="/ruff-cutter">Ruff Cutter</a></li>
        <li><a href="/b-roller">B-Roller</a></li>
        <li><a href="/b-roller-studio">B-Roller Studio</a></li>
        <li><a href="/audiodesc">AudioDesc</a></li>
        <li><a href="/projects">Projects</a></li>
        <li><a href="https://ko-fi.com/brianparis" target="_blank" rel="noopener noreferrer">Buy Me a Coffee</a></li>
      </ul>
    </div>
  </nav>

  <main id="main-content" class="main">

    <!-- Hero + About -->
    <section class="hero-about">
      <div class="hero-about-inner">
        <div class="hero-logo">
          <img src="/images/SoundsandColorsLogo.png" alt="Sounds and Colors">
        </div>
        <div class="bio">
          <p>I'm Brian Paris. Built things with video and audio for about 25 years. Produced, directed, shot, edited. Currently running a government access TV channel in Champaign, Illinois.</p>
          <p>For the last couple of years, I've been using AI to actually make things. Short films. Websites. Apps. Chatbots. A full tarot card deck. (Apple rejected the app. That's a whole post.)</p>
          <p>Some of it works. Some of it doesn't. I write about it all in my newsletter, <a href="https://www.linkedin.com/newsletters/7433378871594475520/" target="_blank" rel="noopener noreferrer">AI, Actually!</a></p>
          <p class="bio-strong">Sounds & Colors is where the builds live.</p>
        </div>
      </div>
    </section>

    <!-- Featured Apps -->
    <section class="featured-apps">
      <div class="featured-apps-inner">
        <div class="featured-grid">
          <a href="/b-roller" class="product-card" style="background-color: #0D2530;">
            <div class="product-card-img">
              <img src="/images/BRollerLogo.jpg" alt="B-Roller">
            </div>
            <div class="product-card-body">
              <h3 class="product-card-title" style="color: #22B8CF;">B-Roller</h3>
              <p class="product-card-desc">Cull a card dump in the time it takes to watch it. Free app for Mac. Keyboard-driven culling, subclip marking, and selects export, all on your machine.</p>
              <span class="product-card-link" style="color: #22B8CF;">Learn More &rarr;</span>
            </div>
          </a>
          <a href="/b-roller-studio" class="product-card" style="background-color: #2A1538;">
            <div class="product-card-img">
              <img src="/images/BRollerStudioLogo.jpg" alt="B-Roller Studio">
            </div>
            <div class="product-card-body">
              <h3 class="product-card-title" style="color: #EC7D99;">B-Roller Studio</h3>
              <p class="product-card-desc">Make soundbites by highlighting the words you want. Reframe for social. Fix log footage. No NLE required. Free. macOS only.</p>
              <span class="product-card-link" style="color: #EC7D99;">Learn More &rarr;</span>
            </div>
          </a>
          <a href="/ruff-cutter" class="product-card" style="background-color: #141414;">
            <div class="product-card-img">
              <img src="/images/RuffCutterLogo.jpg" alt="Ruff Cutter">
            </div>
            <div class="product-card-body">
              <h3 class="product-card-title" style="color: #C8871E;">Ruff Cutter</h3>
              <p class="product-card-desc">Turn interview transcripts into a documentary rough cut. Free app for Mac. Your API keys, your footage, your machine.</p>
              <span class="product-card-link" style="color: #C8871E;">Learn More &rarr;</span>
            </div>
          </a>
          <a href="/audiodesc" class="product-card" style="background-color: #0F2244;">
            <div class="product-card-img">
              <img src="/images/AudioDescLogo.jpg" alt="AudioDesc">
            </div>
            <div class="product-card-body">
              <h3 class="product-card-title" style="color: #2DD4BF;">AudioDesc</h3>
              <p class="product-card-desc">Automatic audio descriptions for video. Built for government channels and community media. Free app, M-series Mac, under a dollar an hour to run.</p>
              <span class="product-card-link" style="color: #2DD4BF;">Learn More &rarr;</span>
            </div>
          </a>
        </div>
      </div>
    </section>

    <!-- More Projects -->
    <section class="more-projects">
      <div class="more-projects-inner">
        <h2>More Projects</h2>
        <p>Apps, websites, chatbots, word search books. Some are public. Some just run on my computer. All of them were worth building.</p>
        <a href="/projects" class="more-projects-link">See Everything</a>
      </div>
    </section>

    <!-- Stay in the Loop -->
    <section class="stay-loop">
      <div class="stay-loop-inner">
        <h2>Stay in the Loop</h2>
        <div class="stay-loop-grid">
          <a href="https://www.linkedin.com/newsletters/7433378871594475520/" target="_blank" rel="noopener noreferrer" class="loop-card">
            <h3>AI, Actually!</h3>
            <p>What actually happens when you build with AI. The wins, the flops, and the weird stuff nobody warned me about.</p>
            <span class="loop-card-cta">Read on LinkedIn &rarr;</span>
          </a>
          <a href="https://www.youtube.com/@soundsandcolorstv" target="_blank" rel="noopener noreferrer" class="loop-card">
            <h3>YouTube Channel</h3>
            <p>Tutorials and walkthroughs for every project, in one place.</p>
            <span class="loop-card-cta">Watch on YouTube &rarr;</span>
          </a>
        </div>
      </div>
    </section>

    <!-- Say Hello -->
    <section class="say-hello">
      <div class="say-hello-inner">
        <h2>Say Hello</h2>
        <p>
          Got a question, idea, or just want to say hi?
          <span class="dot">&#x2022;</span>
          <a id="contact-link" href="#" aria-label="Send email">...</a>
        </p>
      </div>
    </section>

  </main>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-inner">
      <div class="footer-row">
        <div class="footer-brand">
          <span class="gradient-text-sounds">Sounds</span>
          <span style="color: rgba(176,190,197,0.6); font-size: 0.875rem; margin: 0 0.25rem;">&amp;</span>
          <span class="gradient-text-colors">Colors</span>
        </div>
        <nav class="footer-nav">
          <a href="/ruff-cutter">Ruff Cutter</a>
          <a href="/b-roller">B-Roller</a>
          <a href="/b-roller-studio">B-Roller Studio</a>
          <a href="/audiodesc">AudioDesc</a>
          <a href="/projects">Projects</a>
          <a href="https://ko-fi.com/brianparis" target="_blank" rel="noopener noreferrer">Support the Work</a>
          <a id="footer-contact" href="#">Email</a>
        </nav>
      </div>
      <div class="footer-copy">&copy; 2026 Brian Paris. Champaign, Illinois.</div>
    </div>
  </footer>

  <script>
    // Mobile menu toggle
    var btn = document.getElementById('mobile-menu-btn');
    var menu = document.getElementById('mobile-menu');
    btn.addEventListener('click', function() {
      var isOpen = menu.classList.toggle('open');
      btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
    });

    // Email obfuscation
    (function() {
      var parts = ['brian', 'soundsandcolors', 'com'];
      var addr = parts[0] + '@' + parts[1] + '.' + parts[2];
      var mailto = 'mai' + 'lto:' + addr;
      var el = document.getElementById('contact-link');
      if (el) { el.href = mailto; el.textContent = addr; }
      var fe = document.getElementById('footer-contact');
      if (fe) { fe.href = mailto; }
    })();
  </script>

</body>
</html>
