Pantane Hub

Built different. Built in Kenya.

Pantane Hub is a high-performance professional portfolio built by Pantane. A central showcase for software projects, professional connections, and technical explorations — with deep integrations for the East African market.

Explore the Live Site ↗

---

✨ Key Features

• ⚡ Real-Time GitHub Sync — Automatically fetches and displays repositories using the GitHub REST API, with dynamic topic chips, language detection, and branded fallback cards.
• 💳 Multi-Channel Payment Ecosystem — Support system featuring direct M-Pesa STK Push, PayPal, Paystack, and Buy Me a Coffee.
• 🛣️ Clean URL Routing — Powered by React Router v6 with proper browser history (/projects, /contact, /support) — no hash URLs.
• 📱 Mobile-First Design — Fully responsive with a hamburger menu, fluid animations, and a clean bright aesthetic.
• 🎨 Custom Branding — Unique SVG iconography, consistent design language, and branded project card fallbacks.
• 🛡️ Production-Ready — CORS-secured backend, webhook signature verification, environment-based config, and Vercel SPA rewrites.

---

💰 Payment Integrations

Method	Provider	Market
Lipa na M-Pesa	Lipana — STK Push	Kenya 🇰🇪
PayPal	PayPal SDK	Global 🌍
Paystack	Paystack Inline	Africa 🌍
Buy Me a Coffee	URI redirect	Global 🌍

---

🛠 Tech Stack

Layer	Technology
Frontend	React 19, TypeScript, Vite 6
Styling	Tailwind CSS 3 (PostCSS — no CDN)
Routing	React Router v6 (BrowserRouter)
Backend	Node.js, Express — deployed on Render
Payments	M-Pesa via Lipana, PayPal, Paystack
Email	EmailJS
Data	GitHub REST API
Hiosted-On	Vercel

📂 Structure

pantane-hub/
├── components/
│   ├── Layout.tsx        # Header, Footer, TechMarquee
│   ├── Icons.tsx         # Custom SVG icon components
│   ├── MpesaModal.tsx    # STK Push modal
│   ├── SupportModal.tsx  # PayPal / Paystack / Coffee modal
│   └── MouseEffect.tsx   # Cursor effect
├── pages/
│   ├── Home.tsx          # Landing page
│   ├── Projects.tsx      # GitHub repos grid
│   ├── Socials.tsx       # Social links
│   ├── Contact.tsx       # EmailJS contact form
│   └── Support.tsx       # Payment methods
├── server/
│   ├── index.js          # Express server + CORS
│   └── routes/
│       ├── stk.js        # M-Pesa STK Push route
│       └── webhook.js    # Lipana webhook handler
├── types.ts              # TypeScript interfaces & enums
├── App.tsx               # React Router routes
├── index.tsx             # React entry point
├── index.css             # Tailwind directives + global styles
├── tailwind.config.js    # Tailwind content paths
├── vite.config.ts        # Vite config
└── vercel.json           # SPA rewrite rules

---

🤝 Connect

• 🌐 pantane.is-a.dev
• 💼 LinkedIn
• 🐙 GitHub
• 🐦 Twitter / X

---

📜 License

© 2026 Pantane. All rights reserved. Built with precision in Kenya 🇰🇪