Netflix Homepage UI Design
For my first project, I created a Netflix homepage design using HTML and CSS. This project focused on replicating the visual layout of Netflix’s homepage, including elements like the navigation bar, hero banner, and genre sections. Through this, I strengthened my understanding of HTML structure, CSS styling, and responsive design principles. While it doesn’t include any backend or streaming functionality, the project helped me learn how to translate real-world UI into clean, semantic code.
Key Features:
- Responsive design to ensure the layout adjusts across different screen sizes (desktop, tablet, mobile).
- Use of CSS Flexbox and Grid for efficient layout management.
- Clean and intuitive user interface similar to Netflix’s homepage.
- Hover effects for interactive elements like movie posters.
Songify – Custom Music Player
Songify is a fully functional music player built using HTML, CSS, and JavaScript. It automatically detects songs from local folders and dynamically displays albums using metadata fetched from a JSON file. This project helped me explore DOM manipulation, audio APIs, and interactive UI design while also focusing on responsiveness and a smooth user experience across devices.
Through this project, I gained hands-on experience working with file structures, custom audio controls, and JavaScript-based features like shuffle, repeat, search, and volume management.
Key Features:
Dynamic Song Loading: Automatically fetches and lists
.mp3files from a selected folder without hardcoding.Album Management: Reads album details like title, description, artist, and cover image from a
JSONfile and displays them in cards.Full Audio Controls:
Play/Pause toggle
Repeat and Shuffle functionality
Next and Previous song navigation
Volume control with mute/unmute
Seekbar and live song timer display
Search Functionality: Real-time search bar to filter and play songs by name.
Responsive Design: Optimized layout for both desktop and mobile devices.
Interactive UI: Smooth transitions, hover effects, and a modern interface with intuitive controls.
Bravo6 – Personal Portfolio Website
As a part of my projects, I built my own portfolio website from scratch using WordPress and the Astra theme. This project showcases my skills, experience, and work while demonstrating my ability to create a fully functional and visually appealing site.
Key Features:
- Astra Theme Customization: Leveraged Astra’s lightweight and flexible features to build a fast and responsive portfolio.
- Interactive Elements: Added forms, Google Maps integration, and tabbed sections for a seamless user experience.
- Custom SVG Graphics: Designed and incorporated custom SVGs to enhance the site’s visual appeal.
- Optimized for Performance: Ensured fast loading speeds and a clean UI for easy navigation.
Sevy Photography – Professional Photography Business Website
For my second project, I built a professional photography business website using WordPress. This project helped me explore WordPress development, theme customization, and feature integration to create a visually appealing and functional business site.
Key Features:
- BeTheme Customization: Used BeTheme’s pre-built layouts and features to create a modern and responsive design.
- Sliders & Galleries: Integrated dynamic sliders and image galleries to showcase photography work effectively.
- Blog Section: Added a blog to share photography tips, portfolio updates, and industry insights.
- Business-Oriented Design: Optimized the site for client engagement with clear call-to-actions, contact forms, and service details.
ElevateX – Digital Marketing Agency Website
Key Features:
- Single-Page Design: Created a streamlined, one-page layout with sections for Home, About Us, Services, and Contact Us.
- Interactive Contact Form: Integrated a user-friendly contact form for easy inquiries.
- Google Maps Integration: Added an embedded map for location visibility and easy navigation.
- Smooth Animations: Incorporated subtle animations to enhance the user experience and engagement.
- Mobile Optimization: Ensured the site is fully responsive and works seamlessly on mobile devices.
- Clear CTAs: Strategically placed call-to-action buttons for driving conversions and user engagement.
Bazario – E-commerce Store
Key Features:
- Multi-Page Store: Designed a structured layout with Home, All Products, and Category pages (Electronics, Smartphones, Fashion, etc.).
- WooCommerce Integration: Implemented WooCommerce for product management, cart, checkout, and order handling.
- Payment Gateway Support: Enabled Cash on Delivery and Razorpay for secure transactions.
- User Account System: Added login, logout, and profile management for customers.
- Coupons & Discounts: Integrated promotional coupon codes for better user engagement.
- Responsive & Optimized: Ensured a mobile-friendly design with a seamless shopping experience.
