• Frontend Development
  • Design

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

  • HTML
  • CSS
  • JavaScript

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

  • HTML
  • Bootstrap
  • CSS
  • API
  • Figma
  • JavaScript
  • JSON

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

  • HTML
  • CSS
  • Figma
  • JavaScript

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

  • HTML
  • CSS
  • JavaScript
  • Figma

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

  • HTML
  • CSS
  • Figma
  • JavaScript

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

  • HTML
  • CSS
  • JavaScript

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

  • HTML
  • CSS
  • JavaScript
  • Figma

Toggle


Multiple Components

Multiple mini projects that use a toggle switch to switch from one state to another.

Currently in Planning/Design Phase

  • HTML
  • CSS
  • JavaScript
  • Figma
  • API

World Clock


Live Data Application

To be determined.

Currently in Planning/Design Phase

  • HTML
  • CSS
  • JavaScript
  • Figma

Calculator


Arithmetic Tools

To be determined.