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

# Starry's Hub

> Crafting exceptional digital experiences with Flutter. Explore documentation, tutorials, and open-source projects.

<Frame>
  <a href="/" 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/Hipu60ZQpO6_hjaS/images/cover.png?fit=max&auto=format&n=Hipu60ZQpO6_hjaS&q=85&s=2482af70f9bdec54470f1b29763717c9" 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="Starry Banner" width="1536" height="1024" data-path="images/cover.png" />

    {/* Overlay Text - Adjusted padding and text size for mobile */}

    <div className="absolute bottom-0 left-0 p-6 md:p-8 z-20">
      <h2 className="text-white text-2xl md:text-3xl font-bold mb-1 drop-shadow-md">Hi, I'm KenStarry</h2>
      <p className="text-gray-100 text-xs md:text-sm drop-shadow-md opacity-90">Welcome To The Hub</p>
    </div>

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

<div className="mb-12" />

<div className="not-prose flex flex-col md:flex-row items-center gap-8 p-8 rounded-3xl border border-gray-200 dark:border-white/5 bg-white dark:bg-white/[0.02] shadow-sm mb-12 relative overflow-hidden">
  {/* Background Glow */}

  <div className="absolute top-0 right-0 w-64 h-64 bg-[#1F9ABC]/5 rounded-full blur-3xl -z-10" />

  {/* Avatar */}

  <div className="shrink-0 relative group">
    <div className="absolute -inset-1 bg-gradient-to-br from-[#1F9ABC] to-purple-600 rounded-full opacity-30 group-hover:opacity-60 blur-md transition duration-500" />

    <img src="https://github.com/KenStarry.png" alt="Creator" className="relative w-32 h-32 rounded-full object-cover border-4 border-white dark:border-[#151720] shadow-2xl" />

    <div className="absolute bottom-1 right-1 bg-green-500 w-5 h-5 rounded-full border-4 border-white dark:border-[#151720]" title="Online" />
  </div>

  {/* Content */}

  <div className="flex-1 text-center md:text-left">
    <div className="flex items-center justify-center md:justify-start gap-3 mb-6">
      <h2 className="text-2xl font-bold text-gray-900 dark:text-white m-0">
        KenStarry
      </h2>

      <span className="px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-gray-100 dark:bg-white/10 text-gray-500 dark:text-gray-400 rounded-md">
        Mobile Dev
      </span>
    </div>

    <p className="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-6 max-w-lg mx-auto md:mx-0">
      I build tools that help developers move faster and apps that users love to touch.
    </p>

    {/* Social Row */}

    <div className="flex items-center justify-center md:justify-start gap-2">
      <a href="https://github.com/KenStarry" target="_blank" className="p-2 rounded-lg text-gray-500 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 transition-all">
        <Icon icon="github" size={20} />
      </a>

      <a href="https://linkedin.com/in/kenneth-michuki-133a04217" target="_blank" className="p-2 rounded-lg text-gray-500 hover:text-[#0077B5] hover:bg-gray-100 dark:hover:bg-white/10 transition-all">
        <Icon icon="linkedin" size={20} />
      </a>

      <a href="https://x.com/ken_starry" target="_blank" className="p-2 rounded-lg text-gray-500 hover:text-[#1DA1F2] hover:bg-gray-100 dark:hover:bg-white/10 transition-all">
        <Icon icon="x" size={20} />
      </a>

      <div className="w-px h-5 bg-gray-200 dark:bg-white/10 mx-2" />

      <a href="mailto:starrycodes@gmail.com" className="flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#1F9ABC]/10 text-[#1F9ABC] text-xs font-bold hover:bg-[#1F9ABC] hover:text-white transition-all no-underline">
        <Icon icon="paper-plane" size={12} />

        <span>Contact</span>
      </a>
    </div>
  </div>
</div>

<div className="mb-12">
  <div className="text-center mb-8">
    {/*     <h3 className="text-xl font-bold text-gray-900 dark:text-white">The Arsenal</h3> */}

    <p className="text-m text-gray-500 dark:text-gray-400">Technologies powering my work</p>
  </div>

  <div className="flex flex-wrap justify-center gap-4 p-8 rounded-3xl bg-gray-50 dark:bg-white/[0.02] border border-gray-200 dark:border-white/5 relative overflow-hidden">
    {/* Subtle Background Pattern */}

    <div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]" style={{backgroundImage: 'radial-gradient(#1F9ABC 1px, transparent 1px)', backgroundSize: '20px 20px'}} />

    {/* Tech Pill: Flutter */}

    <div className="flex items-center gap-3 px-5 py-3 rounded-2xl bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 shadow-sm hover:border-[#1F9ABC]/50 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
      <Icon icon="flutter" className="text-blue-500 w-6 h-6" />

      <div className="flex flex-col">
        <span className="text-sm font-bold text-gray-900 dark:text-white">Flutter</span>
        <span className="text-[10px] text-gray-500">UI Toolkit</span>
      </div>
    </div>

    {/* Tech Pill: Dart */}

    <div className="flex items-center gap-3 px-5 py-3 rounded-2xl bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 shadow-sm hover:border-blue-400/50 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
      <Icon icon="code" className="text-blue-400 w-6 h-6" />

      <div className="flex flex-col">
        <span className="text-sm font-bold text-gray-900 dark:text-white">Dart</span>
        <span className="text-[10px] text-gray-500">Core Logic</span>
      </div>
    </div>

    {/* Tech Pill: Kotlin */}

    <div className="flex items-center gap-3 px-5 py-3 rounded-2xl bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 shadow-sm hover:border-purple-500/50 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
      <Icon icon="android" className="text-purple-500 w-6 h-6" />

      <div className="flex flex-col">
        <span className="text-sm font-bold text-gray-900 dark:text-white">Kotlin</span>
        <span className="text-[10px] text-gray-500">Android Native</span>
      </div>
    </div>

    {/* Tech Pill: Jetpack Compose */}

    <div className="flex items-center gap-3 px-5 py-3 rounded-2xl bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 shadow-sm hover:border-green-400/50 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
      <Icon icon="robot" className="text-green-500 w-6 h-6" />

      <div className="flex flex-col">
        <span className="text-sm font-bold text-gray-900 dark:text-white">Compose</span>
        <span className="text-[10px] text-gray-500">Native UI</span>
      </div>
    </div>

    {/* Tech Pill: Firebase */}

    <div className="flex items-center gap-3 px-5 py-3 rounded-2xl bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 shadow-sm hover:border-yellow-500/50 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
      <Icon icon="fire" className="text-yellow-500 w-6 h-6" />

      <div className="flex flex-col">
        <span className="text-sm font-bold text-gray-900 dark:text-white">Firebase</span>
        <span className="text-[10px] text-gray-500">Backend</span>
      </div>
    </div>

    {/* Tech Pill: Supabase */}

    <div className="flex items-center gap-3 px-5 py-3 rounded-2xl bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 shadow-sm hover:border-emerald-500/50 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
      <Icon icon="bolt" className="text-emerald-500 w-6 h-6" />

      <div className="flex flex-col">
        <span className="text-sm font-bold text-gray-900 dark:text-white">Supabase</span>
        <span className="text-[10px] text-gray-500">PostgreSQL</span>
      </div>
    </div>
  </div>
</div>

<div className="mb-12">
  {/* Header with "View All" Link */}

  <div className="flex items-center justify-between mb-6">
    <h2 className="text-2xl font-bold m-0">✨ Featured Projects</h2>

    <a href="/projects" className="text-sm font-bold text-[#1F9ABC] hover:underline flex items-center gap-1">
      View All <Icon icon="arrow-right" size={12} />
    </a>
  </div>

  {/* HERO PROJECT: FLOW MUSIC */}

  <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-6" />

  {/* SECONDARY PROJECTS GRID */}

  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    {/* Flutter Extend */}

    <Frame hint="Open Source" caption="Flutter Extend">
      <a href="https://pub.dev/packages/flutter_extend" target="_blank" className="group relative block w-full h-64 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/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 transition-transform duration-700 ease-out group-hover:scale-105 pointer-events-none" alt="Flutter Extend" width="4600" height="2600" data-path="images/flutter_extend/banner.png" />
      </a>
    </Frame>

    {/* Britam App */}

    <Frame hint="Enterprise" caption="MyBritam App">
      <a href="https://play.google.com/store/search?q=mybritam&c=apps&hl=en" target="_blank" className="group relative block w-full h-64 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/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 transition-transform duration-700 ease-out group-hover:scale-105 pointer-events-none" alt="Britam App" width="2976" height="1440" data-path="images/britam.png" />
      </a>
    </Frame>
  </div>
</div>

<div className="mb-12">
  {/* Header with "View All" Link */}

  <div className="flex items-center justify-between mb-6">
    <h2 className="text-2xl font-bold m-0">✍️ Latest from the Blog</h2>

    <a href="blogs/articles" className="text-sm font-bold text-[#1F9ABC] hover:underline flex items-center gap-1">
      Read More <Icon icon="arrow-right" size={12} />
    </a>
  </div>

  <Steps>
    <Step title="Multi-Wayed SVG Styling">
      <Card title="SVG Styling" icon="flutter" href="/blogs/flutter/multi-wayed-svg-styling">
        <div className="flex items-center gap-2 mb-2">
          <span className="bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-xs px-2 py-0.5 rounded font-bold">Flutter</span>
        </div>

        Multiple approaches to styling SVGs in Flutter effectively.
      </Card>
    </Step>
  </Steps>
</div>

## 📬 Get in Touch

I am always open to discussing new projects, open-source collaborations, or just geek out about Flutter.

<div className="flex flex-col gap-6 mt-8">
  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
    {/* GitHub */}

    <a href="https://github.com/KenStarry" target="_blank" className="flex flex-col items-center justify-center gap-2 p-6 rounded-2xl bg-[#1F9ABC]/5 border border-[#1F9ABC]/20 hover:border-[#1F9ABC] hover:bg-[#1F9ABC]/10 hover:shadow-[0_0_20px_-10px_#1F9ABC] hover:-translate-y-1 transition-all duration-300 group no-underline">
      <Icon icon="github" className="w-8 h-8 text-[#1F9ABC] transition-transform group-hover:scale-110" />

      <span className="font-bold text-gray-900 dark:text-white">GitHub</span>
      <span className="text-xs text-[#1F9ABC]">Check the code</span>
    </a>

    {/* Email (Solid Color Pop) */}

    <a href="mailto:your.email@gmail.com" className="flex flex-col items-center justify-center gap-2 p-6 rounded-2xl bg-[#1F9ABC] text-white shadow-lg shadow-[#1F9ABC]/30 hover:shadow-[#1F9ABC]/50 hover:brightness-110 hover:-translate-y-1 transition-all duration-300 group no-underline">
      <Icon icon="paper-plane" className="w-8 h-8 text-white group-hover:animate-pulse" />

      <span className="font-bold text-white">Email Me</span>
      <span className="text-xs text-white/80">Get in touch</span>
    </a>

    {/* LinkedIn */}

    <a href="https://linkedin.com/in/yourprofile" target="_blank" className="flex flex-col items-center justify-center gap-2 p-6 rounded-2xl bg-[#1F9ABC]/5 border border-[#1F9ABC]/20 hover:border-[#1F9ABC] hover:bg-[#1F9ABC]/10 hover:shadow-[0_0_20px_-10px_#1F9ABC] hover:-translate-y-1 transition-all duration-300 group no-underline">
      <Icon icon="linkedin" className="w-8 h-8 text-[#1F9ABC] transition-transform group-hover:scale-110" />

      <span className="font-bold text-gray-900 dark:text-white">LinkedIn</span>
      <span className="text-xs text-[#1F9ABC]">Let's connect</span>
    </a>
  </div>

  <div className="flex items-center justify-center gap-4">
    <div className="flex items-center gap-1 px-1 py-1 bg-gray-50 dark:bg-white/5 rounded-full border border-gray-200 dark:border-white/10">
      <a href="https://twitter.com/KenStarry" target="_blank" className="flex items-center gap-2 px-4 py-2 rounded-full hover:bg-white dark:hover:bg-white/10 hover:text-[#1F9ABC] transition-all text-gray-600 dark:text-gray-400 no-underline group">
        <Icon icon="x" className="w-4 h-4 group-hover:text-[#1F9ABC] transition-colors" />

        <span className="text-sm font-medium">Twitter</span>
      </a>

      <div className="w-px h-4 bg-gray-300 dark:bg-gray-700" />

      <a href="https://wa.me/254717446607" target="_blank" className="flex items-center gap-2 px-4 py-2 rounded-full hover:bg-white dark:hover:bg-white/10 hover:text-[#1F9ABC] transition-all text-gray-600 dark:text-gray-400 no-underline group">
        <Icon icon="whatsapp" className="w-4 h-4 group-hover:text-[#1F9ABC] transition-colors" />

        <span className="text-sm font-medium">WhatsApp</span>
      </a>
    </div>
  </div>
</div>