<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Strayegg — Independent Software Development</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      },
    }
  </script>
  <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;700&display=swap" rel="stylesheet" />
  <script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]);t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+" (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureFlagEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('phc_roBa9TQMsnnhvnzf9fBFgr2CwGLJTwXPMcySu7vnmDsj', {
      api_host: 'https://b.strayegg.com',
      ui_host: 'https://eu.posthog.com',
      defaults: '2026-01-30',
      person_profiles: 'identified_only',
    });
  </script>
</head>
<body class="bg-white text-gray-900 font-sans antialiased">

  <!-- Header -->
  <header class="py-16 px-6 text-center border-b border-gray-100">
    <a href="/" class="inline-block">
      <img src="assets/hobo_egg_100px.png" alt="Strayegg" class="w-20 h-20 mx-auto mb-4 rounded-full" />
    </a>
    <h1 class="text-4xl font-bold tracking-tight text-gray-900">Strayegg</h1>
    <p class="mt-2 text-lg text-gray-500">Independent software development</p>
  </header>

  <!-- About -->
  <section class="max-w-2xl mx-auto px-6 py-14 text-center">
    <p class="text-gray-600 leading-relaxed">
      Strayegg is an independent software development studio building apps and tools for iOS, Android, and the web.
    </p>
    <p class="mt-4">
      <a href="mailto:simon@strayegg.com" class="text-gray-500 hover:text-gray-900 transition-colors text-sm">
        simon@strayegg.com
      </a>
    </p>
  </section>

  <!-- Projects -->
  <section class="max-w-2xl mx-auto px-6 pb-20">
    <h2 class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-8 text-center">Projects</h2>

    <!-- Swindle Sidekick -->
    <div class="rounded-2xl border border-gray-200 p-8 flex flex-col sm:flex-row items-center sm:items-start gap-6">
      <img
        src="assets/swindle-sidekick-logo.png"
        alt="Swindle Sidekick"
        class="w-20 h-20 rounded-2xl flex-shrink-0 shadow-sm"
      />
      <div class="flex-1 text-center sm:text-left">
        <h3 class="text-xl font-semibold text-gray-900">Swindle Sidekick</h3>
        <p class="mt-1 text-gray-500 text-sm leading-relaxed">A golf swindle scoring app for iOS and Android.</p>
        <div class="mt-4 flex flex-wrap gap-3 justify-center sm:justify-start">
          <a
            href="https://www.swindlesidekick.com"
            class="inline-flex items-center gap-1.5 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700 transition-colors"
          >
            <!-- Globe icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
            </svg>
            Website
          </a>
          <a
            href="#"
            class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:border-gray-400 transition-colors"
          >
            <!-- Apple icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 814 1000" fill="currentColor">
              <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 372.5 0 256.3 0 146c0-75 28.5-152.8 79.8-195.8C124.9 7.7 178.3 0 227.3 0c70.5 0 131.2 41.7 174.5 41.7 42.3 0 108.4-44.4 189.9-44.4 16.8 0 108.4 2 162.8 86.5zm-244.6-64.1c-15.2-5.3-43.4-22.7-43.4-22.7 0 0 14.7 5.3 43.4 22.7zM407.2 138.7c37.5-44.1 93.1-68 145.4-68 1.9 29.8-8.2 61.2-27 85.1-20.1 25.3-56.9 50.3-98.3 51.3-1.6-29.9 9.3-57.2 29.9-79.4l-50 11z"/>
            </svg>
            App Store
          </a>
          <a
            href="#"
            class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:border-gray-400 transition-colors"
          >
            <!-- Play icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
              <path d="M3 20.5v-17c0-.83.94-1.3 1.6-.8l14 8.5c.6.36.6 1.24 0 1.6l-14 8.5c-.66.5-1.6.03-1.6-.8z"/>
            </svg>
            Google Play
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="border-t border-gray-100 py-8 text-center">
    <p class="text-sm text-gray-400">&copy; 2026 Strayegg</p>
  </footer>

</body>
</html>
