Project Directory
A temporary directory for all the websites that were designed and coded by me. The main purpose for most projects are to practice my development skills as I learn.
Last Updated: 01/10/23
Virtual Keyboard
Interactive Component
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.
Last Updated: 01/04/23
Weather
Live Data Application
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.
Last Updated: 12/09/22
Omnifood
Landing Page
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.
Last Updated: 12/06/22
Hogwarts
Landing Page
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.
Last Updated: 11/23/22
Valorant
Landing Page
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. Possible update in the future.
Last Updated: 11/16/22
NYC
Landing Page
A minimalistic landing page about New York City geared towards
enticing tourists. Website utilizes keyframe animations to cycle
through words, mix-blend-mode
for the hero, and
additional layout practice.
Currently in Planning/Design Phase
Toggle
Multiple Components
Multiple mini projects that use a toggle switch to switch from one state to another.