Aether | The sky, translated
Weather Web Application
I developed Aether to go beyond standard API integrations, delivering an immersive, highly performant weather application that bypasses local device clocks for precise global forecasting and real-time environment simulation. Built with React.js and Vite, the frontend features a glassmorphism-inspired UI with Samsung One UI-style dynamic gradients that instantly adapt to active weather conditions.
By integrating OpenWeatherMap REST APIs, I engineered a custom time engine that processes raw timezone offsets to drive intelligent day/night transitions and celestial rendering that obscures the sun and moon during storms. I also implemented 60 FPS CSS and SVG physics for advanced weather rendering—including double-strobe jagged lightning and dynamic particle generation for sleet—alongside custom logic to compute US EPA-standard Air Quality Index metrics from PM2.5 and PM10 concentrations. The complete application is deployed securely on Vercel with environment configurations handled via dotenv.
HavenHop | Your escape, anywhere you desire.
Full-Stack Vacation Rental Marketplace
I built HavenHop to go beyond basic CRUD applications and create a production-ready, full-stack vacation rental marketplace where users can seamlessly browse properties, manage listings, post reviews, and explore locations on live maps. Built on Node.js, Express.js, and an MVC architecture, the application features an EJS and Bootstrap 5 front end integrated with Leaflet.js and OpenStreetMap for interactive spatial data, along with client-side category filtering for instant view switching. Data relationships across users, properties, and reviews are handled with MongoDB Atlas and Mongoose, while persistent session management is secured via connect-mongo. For security and control, I implemented authentication using Passport.js, custom authorization middleware to restrict edit and delete permissions strictly to listing owners, and input validation with Joi. Multi-part image uploads are processed seamlessly through Multer directly to Cloudinary, and the complete application is deployed live on Render with environment configurations handled via dotenv.
Netflix Clone
Streaming Platform Recreation
I engineered this comprehensive streaming platform interface to handle complex dynamic content rendering entirely from scratch, proving that high performance can be achieved without heavy framework overhead. Relying strictly on vanilla JavaScript, I implemented an optimized lazy-loading system for image assets and custom event delegation to ensure smooth user interactions. This project served as a deep dive into core DOM manipulation and CSS layout engines, resulting in a fully responsive grid system that adapts seamlessly across all viewports.
Spotify Clone
Music Streaming Interface
I built this music streaming application to simulate a premium listening experience, focusing heavily on component modularity and interactive state management. Using vanilla JavaScript and ES6 modules, I integrated the Web Audio API for precise playback control and utilized local storage to persist user states seamlessly. The UI relies on advanced CSS techniques, including Flexbox and custom properties, to drive a dynamic theming system alongside complex asynchronous JavaScript patterns.
Simon Says Game
Interactive Memory Game
I created this sophisticated memory game to showcase complex algorithm design and game logic programming using vanilla JavaScript ES6+. The application handles robust state management and recursive pattern generation to drive a progressive difficulty algorithm that keeps players engaged. I integrated smooth CSS animations, audio playback, and cross-browser responsive touch and mouse event handling, while utilizing local storage to persist high scores. The final product emphasizes clean code architecture and modular design patterns for an optimal gaming experience.
'/%3E%3Cg transform='translate(200,150)'%3E%3Ccircle cx='-60' cy='-60' r='45' fill='%23ff2a85' stroke='%23ccff00' stroke-width='3'/%3E%3Ccircle cx='60' cy='-60' r='45' fill='%2300f0ff' stroke='%23ccff00' stroke-width='3'/%3E%3Ccircle cx='-60' cy='60' r='45' fill='%23ccff00' stroke='%23fff' stroke-width='3'/%3E%3Ccircle cx='60' cy='60' r='45' fill='%23ff2a85' stroke='%2300f0ff' stroke-width='3'/%3E%3C/g%3E%3Ctext x='200' y='270' text-anchor='middle' font-family='monospace' font-size='18' fill='%23fff' font-weight='bold'%3ESimon Says Memory Game%3C/text%3E%3C/svg%3E)
WeLoveQRcodes
QR Code Generator Tool
I developed this powerful web application to demonstrate advanced third-party JavaScript library integration alongside native Canvas API manipulation. The tool processes data in real-time to instantly generate dynamic QR codes via the QR.js library, rendering them to a canvas and making them exportable through custom file download APIs. I built in robust input validation, comprehensive error handling, and asynchronous JavaScript patterns, wrapping the utility in a clean, responsive design optimized for varying data types.
UniitzConvert
Mobile Unit Converter App
I built this comprehensive unit conversion app to deliver a fast, intuitive native mobile experience capable of handling complex mathematical calculations across length, weight, temperature, and volume categories. Focusing on clean mobile UI/UX design, I implemented responsive touch interfaces and real-time conversion logic optimized for strict decimal precision. The application includes rigorous input validation and full offline functionality, ensuring users have reliable access to precise measurements without needing a network connection.
