UI Projects Repository

A personal collection of UI projects built for learning and experimenting with modern web technologies. This repository serves as my playground for exploring different frameworks, design patterns, and frontend development techniques.

Note: This is a hobby project created for learning purposes and personal skill development.

🚀 Quick Start

# Clone the repository
git clone [repository-url]
cd UI_Projects

# Navigate to any project
cd [project-name]

# Install dependencies and start
npm install
npm run dev

📁 Projects in this Repository

🔐 login_dark_version/

Modern Enterprise Login - Dark Theme

A sleek dark-themed login interface with advanced authentication features.

• Framework: Next.js 14 with React 18 and TypeScript
• Styling: Tailwind CSS with custom dark theme
• Features:
  • Multi-factor authentication with OTP
  • Account lockout protection
  • Remember me functionality
  • Password strength validation
  • Responsive glassmorphism design
• Status: ✅ Complete

cd login_dark_version && npm run dev

🎮 spring_mass_animator/

Interactive Physics Simulation

A real-time spring-mass system simulator with energy visualization.

• Technologies: HTML5 Canvas, JavaScript, Tailwind CSS
• Features:
  • Real-time physics simulation
  • Interactive mass and spring creation
  • Energy conservation tracking
  • Force vector visualization
  • Adjustable physics parameters
• Status: ✅ Complete

# Open spring_mass.html in a browser

⚖️ massCalculator/

Mass and Spring Calculator

A desktop application for calculating and visualizing mass-spring systems.

• Framework: Electron.js
• Features:
  • Mass and spring calculations
  • Real-time visualization
  • Custom physics engine
  • Parameter optimization
• Status: ✅ Complete

cd massCalculator && npm start

🎨 animator/ and animator_v2_dark_version/

Animation Projects

Two versions of animation projects exploring different techniques and themes.

• Technologies: HTML5, CSS3, JavaScript
• Features:
  • Custom animations
  • Interactive elements
  • Dark/light themes
  • Performance optimizations
• Status: ✅ Complete

🔐 login/ and login_light_version/

Login Interface Variations

Light and dark theme variations of a modern login interface.

• Technologies: HTML5, CSS3, JavaScript
• Features:
  • Responsive design
  • Form validation
  • Theme switching
  • Modern UI elements
• Status: ✅ Complete

🛠 Technologies Used

The projects in this repository demonstrate:

• Next.js 14 - React framework with App Router
• React 18 - Component-based UI library
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first styling
• Electron.js - Desktop application framework
• HTML5 Canvas - Graphics and animations
• Custom Physics Engines - For simulations
• react-hot-toast - Toast notifications
• lucide-react - Modern icons

🎯 Learning Goals

Through these projects, I'm exploring:

• Modern React patterns and hooks
• TypeScript for better code quality
• Responsive design with Tailwind CSS
• Authentication and security practices
• Component-driven development
• Performance optimization techniques
• Physics simulation and visualization
• Desktop application development
• Animation and interaction design

📄 License

MIT License - Feel free to use these projects for your own learning!

---

Built for learning and experimentation 🚀