🚀 Kuria's UX Portfolio 2025

A Next.js-powered showcase of UX design expertise
Combining case studies, interactive components, and design system documentation

🌟 Key Features

• 🎨 Modern Design System using brand colors (#06D6A0, #118AB2, #FFD166)
• 📊 Interactive Case Studies with animated components
• 🧠 AI-Powered Design Challenges
• 📅 Smart Scheduling System with calendar integration
• 🏆 Achievement-Based Progress Tracking
• 🌓 Dark/Light Theme with smooth transitions

🛠 Tech Stack

• ⚡ Frontend: Next.js 14 (App Router)
• 🎨 Styling: Tailwind CSS + CSS Modules
• 📦 UI Components: shadcn/ui
• 🌀 Animations: Framer Motion
• 📊 Data Visualization: Recharts
• 🔍 Search: Algolia InstantSearch
• 📝 Content: MDX + Contentlayer

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm 8+

Installation

git clone https://github.com/yourusername/ux-portfolio.git
cd ux-portfolio
pnpm install
pnpm dev

📂 Project Structure

ux-portfolio/
├── app/               # App router entries
│   └── dashboard/     # Main dashboard components
├── components/        # Reusable components
│   ├── bento/         # Bento grid components
│   └── interactive/   # Animated components
├── lib/               # Utility functions
├── styles/            # Global CSS and animations
└── content/           # MDX case studies

🎨 Design System

// Primary Colors
const colors = {
  mint: '#06D6A0',     // Primary actions
  ocean: '#118AB2',    // Secondary elements
  gold: '#FFD166',     // Highlights
  coral: '#EF476F'     // Errors
}

🤖 Key Components

🧩 Interactive Elements

• BentoQuizCard.tsx - Gamified design challenges
• EnhancedScheduling.tsx - Meeting scheduler
• CollapsibleDesignChallenge.tsx - Expandable case studies

🎮 UX Patterns

• Progressive disclosure
• Time-based theming
• Micro-interactions
• Accessibility-first approach

📜 License

MIT License - See LICENSE.md for details

---

Made with ❤️ by [Kuria](https://linkedin.com/in/ianmwitumi) [📧 Contact Me](mailto:ianmwitumi@gmail.com) | [🐙 GitHub](https://github.com/Kuria-byte)