> ## Documentation Index
> Fetch the complete documentation index at: https://starrycodes.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Projects

> A showcase of open-source tools, enterprise solutions, and creative experiments.

<div className="h-0" />

## ✨ Featured Gallery

<div className="h-4" />

<Frame hint="Indie/Creative" caption="Flow Music Player">
  <a href="https://play.google.com/store/apps/details?id=com.kenstarry.flow&pcampaignid=web_share" target="_blank" className="group relative block w-full h-80 md:h-[28rem] overflow-hidden rounded-3xl bg-gray-100 dark:bg-gray-800 shadow-sm hover:shadow-xl transition-shadow duration-500 cursor-pointer">
    <img src="https://mintcdn.com/starrycodes/hN2tu8EQ7231Z2yn/images/flow_v2.png?fit=max&auto=format&n=hN2tu8EQ7231Z2yn&q=85&s=e2414bd526a5b6bc80dbecf96ec5f10c" className="absolute inset-0 w-full h-full object-cover m-0 transition-transform duration-700 ease-out group-hover:scale-105 pointer-events-none" alt="Flow Music Player" width="1024" height="768" data-path="images/flow_v2.png" />

    {/* 2. Responsive Padding: p-6 (Mobile) -> p-8 (Desktop) */}

    <div className="absolute bottom-0 left-0 p-6 md:p-8 z-20">
      {/* 3. Responsive Font Size: text-2xl -> text-3xl */}

      <h2 className="text-white text-2xl md:text-3xl font-bold mb-1 drop-shadow-md">Flow Music Player</h2>
      <p className="text-gray-100 text-xs md:text-sm drop-shadow-md opacity-90">A theming engine for your audio.</p>
    </div>

    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-60" />
  </a>
</Frame>

<div className="h-5" />

## 💡 Indie/Creative

<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
  <Frame hint="Android" caption="Flow Music Player">
    <a href="https://play.google.com/store/apps/details?id=com.kenstarry.flow&hl=en" target="_blank" className="group relative block w-full h-60 overflow-hidden rounded-3xl bg-gray-100 dark:bg-gray-800 shadow-sm hover:shadow-xl transition-all duration-500 cursor-pointer">
      <img src="https://mintcdn.com/starrycodes/hN2tu8EQ7231Z2yn/images/flow_v2.png?fit=max&auto=format&n=hN2tu8EQ7231Z2yn&q=85&s=e2414bd526a5b6bc80dbecf96ec5f10c" className="absolute inset-0 w-full h-full object-cover m-0 transform group-hover:scale-110 transition-transform duration-700 ease-out pointer-events-none" alt="Flow Music Player" width="1024" height="768" data-path="images/flow_v2.png" />
    </a>
  </Frame>

  <Frame hint="Android" caption="CribLynk">
    <a href="https://play.google.com/store/apps/details?id=com.kenstarry.criblynk&hl=en" target="_blank" className="group relative block w-full h-60 overflow-hidden rounded-3xl bg-gray-100 dark:bg-gray-800 shadow-sm hover:shadow-xl transition-all duration-500 cursor-pointer">
      <img src="https://mintcdn.com/starrycodes/Oo6eKWfMOUi84O49/images/criblynk.png?fit=max&auto=format&n=Oo6eKWfMOUi84O49&q=85&s=0ab216c39fabe0908f75bd7504b7ef59" className="absolute inset-0 w-full h-full object-cover m-0 transform group-hover:scale-110 transition-transform duration-700 ease-out pointer-events-none" alt="CribLynk" width="1472" height="832" data-path="images/criblynk.png" />
    </a>
  </Frame>
</div>

## 🐙 Open Source

<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
  <Frame hint="Flutter Package | Pub.dev" caption="Flutter Extend">
    <a href="https://pub.dev/packages/flutter_extend" target="_blank" className="group relative block w-full h-60 overflow-hidden rounded-3xl bg-gray-100 dark:bg-gray-800 shadow-sm hover:shadow-xl transition-all duration-500 cursor-pointer">
      <img src="https://mintcdn.com/starrycodes/PS8JuEC6FMIbIiYC/images/flutter_extend/banner.png?fit=max&auto=format&n=PS8JuEC6FMIbIiYC&q=85&s=7db1922d6a6366bd91445a66282b5db1" className="absolute inset-0 w-full h-full object-cover m-0 transform group-hover:scale-110 transition-transform duration-700 ease-out pointer-events-none" alt="Flutter_Extend" width="4600" height="2600" data-path="images/flutter_extend/banner.png" />
    </a>
  </Frame>
</div>

## 🏢 Enterprise

<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
  <Frame hint="Android | IOS | Web" caption="Britam App">
    <a href="https://play.google.com/store/search?q=mybritam&c=apps&hl=en" target="_blank" className="group relative block w-full h-60 overflow-hidden rounded-3xl bg-gray-100 dark:bg-gray-800 shadow-sm hover:shadow-xl transition-all duration-500 cursor-pointer">
      <img src="https://mintcdn.com/starrycodes/Oo6eKWfMOUi84O49/images/britam.png?fit=max&auto=format&n=Oo6eKWfMOUi84O49&q=85&s=0db71755961fa9a846ad1c0946e370bc" className="absolute inset-0 w-full h-full object-cover m-0 duration-700 ease-out pointer-events-none" alt="Britam App" width="2976" height="1440" data-path="images/britam.png" />
    </a>
  </Frame>
</div>

## Education

<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
  <Frame hint="Youtube" caption="StarryBits Tutorials">
    <div className="group relative block w-full h-64 overflow-hidden rounded-3xl bg-gray-900 shadow-sm hover:shadow-xl transition-shadow duration-500">
      <img src="https://mintcdn.com/starrycodes/hN2tu8EQ7231Z2yn/images/starrybits.png?fit=max&auto=format&n=hN2tu8EQ7231Z2yn&q=85&s=6bdb2b9cfd6efb7929cacbb898bd3bc4" className="absolute inset-0 w-full h-full object-cover m-0 opacity-50 grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:opacity-80 pointer-events-none" alt="StarryBits" width="2560" height="1440" data-path="images/starrybits.png" />

      <div className="absolute inset-0 flex items-center justify-center">
        <span className="px-4 py-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-white font-bold text-sm">
          🚀 Coming Soon
        </span>
      </div>
    </div>
  </Frame>
</div>