Complete Design Portfolio

Explore my comprehensive collection of UX/UI designs, wireframes, prototypes, and design systems.

Loading design portfolio...
Request Access to Full Portfolio →

Resources & Blogs

Transform your product with my tailored design Resources & Blogs I crafted for seamless UX

Notion
Article

All in One UX/UI Guide and Bookmarks

This is a curated library, that can help you find relevant information on your UX journey!

loading
Read More
Article | FNB Hackerthon '24

Enhancing Financial Inclusion For SMME's

An inventory management by leveraging AI video analytics and smart sensors.

Financial Technology Dashboard
Read More
Notion
Article

Break into tech as a designer

Learn key steps to land your first tech role, build a standout portfolio.

loading
Read More
Article | African Bank Hackarthon

Community-Based Financial Hubs

Built a supportive community, connecting farmers and cooperatives with funding.

Community Farming Cooperation
Read More

UI Playground

Experimental interfaces, interactive prototypes, and creative design explorations

🎨

Design Systems

Component libraries and design tokens for scalable design systems

Interactive Prototypes

High-fidelity prototypes with micro-interactions and animations

🌟

3D Interfaces

Experimental 3D UI elements and immersive design concepts

🔮

AI-Powered UX

Exploring the intersection of AI and user experience design

📱

Mobile Innovations

Cutting-edge mobile interface patterns and gestures

🎯

Accessibility Focus

Inclusive design solutions and accessibility-first approaches

UI Development Showcase

Interactive components, design systems, and functional UI elements built with modern web technologies

Interactive Button System

Neumorphic button components with hover states and animations

Form Components

Custom form elements with validation and interactive feedback

Toggle Switches & Controls

Custom switches and controls with smooth animations

Dark Mode
Notifications
Auto-save

Progress Indicators

Animated progress bars and loading states

Project Completion: 75%
Design Phase: 90%
Development: 45%

Interactive Cards

Hover effects and micro-interactions

🎨

Design

Click to flip

UI/UX Design

Creating beautiful and functional user interfaces

💻

Development

Click to flip

Frontend Dev

Bringing designs to life with modern web technologies

Performance

Click to flip

Optimization

Fast, efficient, and scalable solutions

Code Preview

Sample CSS for neumorphic button implementation

.demo-button {
  background: linear-gradient(145deg, #f5f7f9, #ffffff);
  box-shadow: 
    inset 4px 4px 8px rgba(174, 190, 205, 0.25),
    inset -4px -4px 8px rgba(255, 255, 255, 0.95),
    2px 2px 6px rgba(174, 190, 205, 0.15);
  border-radius: 8px;
  border: none;
  padding: 12px 24px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.demo-button:hover {
  transform: translateY(-2px);
  box-shadow: 
    6px 6px 12px rgba(174, 190, 205, 0.25),
    -6px -6px 12px rgba(255, 255, 255, 0.95);
}
TOP