This repository contains a curated set of mini UI projects and screen clones that I built to practice responsive, mobile-first design and interactive UI patterns.
All HTML, CSS, and JavaScript is written from scratch — no frameworks or libraries. Every animation, gesture, and design element is handcrafted.
- Mobile-only status screen with interactive gestures
- Swipe to next/previous status or next person
- Fully animated transitions
Demo Link 🔗
Demo GIF:
- Feed with stories, posts, and comments
- Interactive sidebar that adapts to mobile view
- Navbar converts into sidebar and bottom navigation in mobile view
Demo Links:
Demo GIF:
- Notifications and connections screens
- Navbar converts into sidebar and bottom navigation in mobile view
- Smooth transitions and responsive layout
Demo Link 🔗
Demo GIF:
- Desktop and mobile-friendly profile layout
- Profile image, cover image, info sections, and posts
- Fully handcrafted responsive styling
Demo Link 🔗
Demo GIF:
- Mobile-first messaging interface inspired by Telegram
- Chat list and conversation layout
- Smooth responsive animations
Demo Links:
Demo GIF:
- Desktop messaging layout similar to WhatsApp Web
- Chat sidebar, conversation pane, and interactive elements
Demo Link 🔗
Demo GIF:
- HTML5 · CSS3 · JavaScript (ES6+)
- Mobile-first responsive design
- Flexbox and CSS Grid for layouts
- Custom animations and transitions
- No external frameworks or libraries
- Fully responsive across mobile, tablet, and desktop
- Interactive gestures and hover effects
- Animations written entirely by hand
- Focus on pixel-perfect UI replication
- Practicing real-world UI patterns and layouts
These mini-projects were built independently as a learning exercise to sharpen frontend, responsive design, and animation skills.