A directory showcasing all my completed and ongoing web development projects — all designs and code are my own.
- HTML
- CSS
- JavaScript
- Masonry.js
A simple but feature-rich coding assistance chat powered by AI with features that include pre-defined contexts (explain, refactor, debug and convert) to streamline the chat, built-in chat commands for enhanced guidance, automatic chat encoding, Prism.js syntax highlighting, downloadable chat history file optimized for printing and the ability to use the application as a PWA.
My version of the 100 Days of CSS challenge, allowing for extensive usage of CSS animations, layout tricks, 3D transformations, SVG manipulations and interactive components. Each day includes a detailed README with notes on concepts I worked on. Compiled and bundled with a custom configuration using Webpack.
A fully responsive, minimalistic and sleek analog and digital time dashboard that features over 550 global timezones. Users can choose from the randomly generated list of 30 timezones or they can search through the dropdown. Additional data points are included for each selected timezone.
A responsive landing page about New York City that serves as a travel guide. Packed with content in different grid and flex layouts along with subtle animations, and content toggling. Utilizes the DistanceTo API to provide flight times and distance to users.
A responsive virtual keyboard with 8 unique styles (and 2 different keyboard lighting animations) that triggers on mouse clicks and keyboard presses along with a text area to write, copy and save Markdown content. Utilizes localStorage to save the user's theme preference and any Markdown content.
A detailed light and dark mode dashboard with a complete overview of live weather conditions in the specified city. Option to toggle weather data between Celsius and Fahrenheit units. Sidebar with random major cities weather. Built using the OpenWeather API.
A full redesign of the original Omnifood website (fictional AI-based meal subscription service). Website utilizes a sticky navigation, hamburger menu, toggle switch, animations triggered by IntersectionObserver, and smooth scrolling.
A simple landing page about the characters and maps found in the competitive tactical FPS game, Valorant. Website has a light and dark mode, uses a responsive grid and text overlays that appear on hover.
A landing page about the fictional institution, Hogwarts, from the Harry Potter series. Utilizes CSS grids, flexbox, animations, form validation, if-else statements based on user inputs, and for loops to enable toggling between different content.