Sawubona! I’m Bonwa Mdluli, a full-stack developer and AI trailblazer from South Africa 🇿🇦, weaving tech magic with a Mzansi twist. My GitHub is a vibey showcase of my projects, blending clean code, bold design, and the spirit of ubuntu to solve real-world problems. Whether it’s apps for local businesses or AI-driven solutions, I’m bringing South African energy to the global stage.

I’m a self-taught coder from South Africa, fueled by amapiano beats and a passion for tech and community. My work creates scalable web apps, AI-powered solutions, and mobile experiences that vibe with South Africans—like apps as lively as a Soweto braai! I’m also into Distributed Biology, reimagining education and bioinformatics with a local lens.

• Hometown: South Africa, the Rainbow Nation 🌈
• Core Skills: Next.js, React, TypeScript, Python, Django, Payload CMS, Tailwind CSS, Shadcn UI
• AI Expertise: Vercel AISDK, PyTorch, DeepSeek, Ollama
• Mobile Dev: Expo React Native
• Design: Figma, with a protea-inspired pink, orange, and cream vibe
• Tools: AWS S3, Cloudflare, n8n, Tanstack Query, Paystack, MongoDB, WordPress

My projects pulse with Mzansi energy, inspired by protea flowers, shweshwe fabrics, and amapiano rhythms. I use bold colors and smooth animations to craft user experiences that feel like a Jozi street party.

• Color Palette:
  • Pink (oklch(0.75, 0.15, 330)): Bold like a Jozi sunset
• Orange (oklch(0.85, 0.2, 40)): Warm like a Karoo braai
• Cream (oklch(0.95, 0.02, 60)): Soft like Cape Town’s beaches
• Typography: Sans-serif (Inter) with hand-drawn, shweshwe-inspired accents
• Animations: Hover effects, pulsing protea SVGs, and amapiano-style transitions
• SVGs: Custom designs with Zulu shields, proteas, and shweshwe patterns

• NORT : A music platform for Mzansi artists, with Paystack subscriptions and a protea-vinyl SVG loader. Built with Next.js, Payload CMS, TypeScript.
• Catering App : A subscription app for South African caterers, with role-based auth and Paystack payments in ZAR cents.
• AI Agents : AI apps using Vercel AISDK and DeepSeek for local education and business.
• Mobile Apps : Cross-platform apps with Expo React Native, backed by AWS S3 and MongoDB for township startups.

Check my repos for code and demos!

Keen to collaborate on something dope? Here’s how:

1. Browse My Repos: Explore my pinned projects or dive into my GitHub.
2. Clone a Project:

   git clone https://github.com/your-username/your-repo.git

3. Install Dependencies:

   npm install

4. Run Locally:

   npm run dev

5. Contribute:
   • Fork, create a branch (git checkout -b feature/sharp-idea).
   • Commit (git commit -m 'Add sharp idea').
   • Push and open a pull request.

Keep it ubuntu—check my Code of Conduct.

• Paystack: For seamless ZAR payments, keeping it local
• Vercel: For hosting and AI SDKs that vibe with my flow
• Open-Source Mzansi: For Tailwind CSS, Shadcn UI, DeepSeek
• South Africa: For the hustle, heart, and amapiano beats

Built with ❤️ & Mzansi Pride by Bonwa Mdluli

1. Hero Banner (hero-protea-web.svg)
   A protea flower intertwined with digital web threads, symbolizing tech-weaving skills and South African pride.

   <svg width="600" height="200" viewBox="0 0 600 200" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="600" height="200" fill="#FFFDD0"/>
     <path d="M100 150C150 180 200 150 250 100C300 50 350 20 400 50C450 80 500 120 550 100" stroke="#F06292" stroke-width="5" stroke-linecap="round"/>
     <path d="M50 100C80 130 120 130 150 100C180 70 220 70 250 100C280 130 320 130 350 100C380 70 420 70 450 100C480 130 520 130 550 100" stroke="#FF8C00" stroke-width="3" stroke-linecap="round"/>
     <circle cx="300" cy="100" r="30" fill="#F06292"/>
     <path d="M290 90C295 85 305 85 310 90C315 95 315 105 310 110C305 115 295 115 290 110C285 105 285 95 290 90Z" fill="#FFFDD0"/>
     <text x="200" y="180" font-family="Inter, sans-serif" font-size="24" fill="#F06292">Bonwa Mdluli</text>
   </svg>

2. Code Icon (code-shield.svg)
   A coding chevron pattern styled like a Zulu shield, representing coding prowess and cultural roots.

   <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M10 14L5 20L10 26M30 14L35 20L30 26M15 32L25 8" stroke="#F06292" stroke-width="3"/>
     <path d="M20 20L22 22L20 24L18 22Z" fill="#FF8C00"/>
     <rect x="5" y="5" width="30" height="30" rx="5" stroke="#FFFDD0" stroke-width="2"/>
   </svg>

3. AI Icon (ai-rhythm.svg)
   An amapiano-inspired waveform with a neural network node, symbolizing AI expertise and SA music culture.

   <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="20" cy="20" r="15" stroke="#FF8C00" stroke-width="3"/>
     <path d="M14 20H26M16 16H24M16 24H24" stroke="#F06292" stroke-width="2"/>
     <circle cx="20" cy="10" r="3" fill="#FFFDD0"/>
     <circle cx="10" cy="30" r="3" fill="#FFFDD0"/>
     <circle cx="30" cy="30" r="3" fill="#FFFDD0"/>
   </svg>

4. Design Icon (design-protea.svg)
   A protea flower with petals in color palette, reflecting your vibrant design skills.

   <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M20 5C20 5 15 10 15 20C15 30 20 35 20 35C20 35 25 30 25 20C25 10 20 5 20 5Z" fill="#FFFDD0" stroke="#F06292" stroke-width="3"/>
     <path d="M17 15C18 13 22 13 23 15C24 17 24 23 23 25C22 27 18 27 17 25C16 23 16 17 17 15Z" fill="#FF8C00"/>
   </svg>

5. NORT Project Icon (nort-vinyl.svg)
   A vinyl record with a protea center, tying to music platform and SA roots.

   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="12" cy="12" r="10" stroke="#F06292" stroke-width="2"/>
     <circle cx="12" cy="12" r="4" fill="#FF8C00"/>
     <path d="M10 10C10.5 9.5 11.5 9.5 12 10C12.5 10.5 12.5 11.5 12 12C11.5 12.5 10.5 12.5 10 12C9.5 11.5 9.5 10.5 10 10Z" fill="#FFFDD0"/>
   </svg>

6. Catering App Icon (braai-flame.svg)
   A flame inspired by a South African braai, symbolizing a catering app I built.

   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M12 3C10 7 8 12 8 16C8 20 10 22 12 22C14 22 16 20 16 16C16 12 14 7 12 3Z" fill="#FF8C00" stroke="#F06292" stroke-width="2"/>
     <path d="M10 14C11 12 13 12 14 14C15 16 15 18 14 20C13 22 11 22 10 20C9 18 9 16 10 14Z" fill="#FFFDD0"/>
   </svg>

7. Mobile App Icon (mobile-township.svg)
   A smartphone with a township-inspired pattern, reflecting mobile apps for SA startups.

8. Social Icons

   • Email (email-shweshwe.svg): Shweshwe pattern envelope.

     <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect x="3" y="8" width="24" height="16" stroke="#F06292" stroke-width="2"/>
       <path d="M3 8L15 16L27 8" stroke="#FF8C00" stroke-width="2"/>
       <path d="M5 20L10 15L20 15L25 20" fill="#FFFDD0"/>
     </svg>

   • LinkedIn (linkedin-protea.svg): Protea-inspired LinkedIn logo.

     <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect x="3" y="3" width="24" height="24" stroke="#F06292" stroke-width="2"/>
       <circle cx="8" cy="8" r="2" fill="#FFFDD0"/>
       <path d="M8 12V20M12 20H16M12 16C12 14 16 14 16 16V20" stroke="#FF8C00" stroke-width="2"/>
     </svg>

   • X (x-amapiano.svg): Amapiano waveform for X logo.

     <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M5 5L25 25M25 5L5 25" stroke="#F06292" stroke-width="3"/>
       <path d="M10 15H20M12 12H18M12 18H18" stroke="#FF8C00" stroke-width="1.5"/>
     </svg>

   • GitHub (github-zulu.svg): Zulu shield-inspired GitHub logo.

     <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M15 3C10 3 7 7 7 12C7 18 10 22 15 22C20 22 23 18 23 12C23 7 20 3 15 3Z" stroke="#F06292" stroke-width="2"/>
       <path d="M12 20C12 22 18 22 18 20" stroke="#FF8C00" stroke-width="2"/>
       <rect x="13" y="10" width="4" height="4" fill="#FFFDD0"/>
     </svg>

9. Badges

   • Mzansi Coder (mzansi-coder.svg): A badge with a shweshwe-inspired border.

     <svg width="100" height="30" viewBox="0 0 100 30" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect x="2" y="2" width="96" height="26" rx="5" fill="#FFFDD0" stroke="#F06292" stroke-width="2"/>
       <path d="M10 15L20 10L30 15L20 20L10 15Z" stroke="#FF8C00" stroke-width="1.5"/>
       <text x="35" y="20" font-family="Inter, sans-serif" font-size="12" fill="#F06292">Mzansi Coder</text>
     </svg>

   • AI Visionary (ai-visionary.svg): Neural network with amapiano accents.

     <svg width="100" height="30" viewBox="0 0 100 30" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect x="2" y="2" width="96" height="26" rx="5" fill="#FFFDD0" stroke="#FF8C00" stroke-width="2"/>
       <circle cx="20" cy="15" r="5" stroke="#F06292" stroke-width="1.5"/>
       <path d="M15 15H25M18 12H22M18 18H22" stroke="#F06292" stroke-width="1"/>
       <text x="35" y="20" font-family="Inter, sans-serif" font-size="12" fill="#F06292">AI Visionary</text>
     </svg>

   • Ubuntu Designer (ubuntu-designer.svg): Protea with ubuntu-inspired lines.

     <svg width="100" height="30" viewBox="0 0 100 30" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect x="2" y="2" width="96" height="26" rx="5" fill="#FFFDD0" stroke="#F06292" stroke-width="2"/>
       <path d="M20 10C18 12 22 12 20 10C18 8 22 8 20 10C22 12 22 18 20 20C18 22 22 22 20 20" stroke="#FF8C00" stroke-width="1.5"/>
       <text x="35" y="20" font-family="Inter, sans-serif" font-size="12" fill="#F06292">Ubuntu Designer</text>
     </svg>

10. Decorative Element (shweshwe-mandala.svg)
    A shweshwe-patterned mandala for the footer, evoking South African artistry.

    <svg width="200" height="50" viewBox="0 0 200 50" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="200" height="50" fill="#FFFDD0"/>
      <path d="M50 25C60 30 70 30 80 25C90 20 110 20 120 25C130 30 140 30 150 25" stroke="#F06292" stroke-width="3"/>
      <path d="M60 20C65 15 75 15 80 20C85 25 85 35 80 40C75 45 65 45 60 40C55 35 55 25 60 20Z" fill="#FF8C00"/>
      <circle cx="100" cy="25" r="5" fill="#F06292"/>
      <path d="M140 20C145 15 155 15 160 20C165 25 165 35 160 40C155 45 145 45 140 40C135 35 135 25 140 20Z" fill="#FF8C00"/>
    </svg>