website screenshot
Grand Sorter
  • Developed a web application using React.js for comparing prices of items in a game I used to play a lot called Old School Runescape.
  • I implemented component-based architecture, and also used a linter for better code organization and maintainability using Props in React.
  • React Axios was used to manage API calls to fetch data dynamically and update the UI accordingly.
  • This time I added a countdown timer for each round you want to play, providing an engaging user experience. Integrated audio playback for sound effects using the HTML5 Audio API.
Visit the Site GitHub Repo
website screenshot
Hexa-Find
  • A React web application that generates a random color and three possible answer choices, and challenges the user to select the correct color.
  • Techniques used in this application include the useState hook to manage state variables, and the useEffect hook to run the generateColor function on mount.
  • The app also employs conditional rendering to display feedback to the user indicating whether they have selected the correct color.
Visit the Site GitHub Repo
website screenshot
Timeless Theatre
  • A game using The Movie Database API where the user guesses the date of the movie shown.
  • The npm package Axios was used to fetch the JSON data. Said JSON data was manipulated by methods such as JSON.stringify, REGEX with replace, LocalStorage, etc, to obtain only what was needed.
  • Common react hooks were utilized in conjunction with LocalStorage to keep track of user lives and score.
Visit the Site GitHub Repo
website screenshot
Portfolio/Blog
  • This portfolio site is made using AstroJS. Astro Components are similar to React Props and promote reusability and readability.
  • This project taught me how folder structure is important in order to make code maintainable. This project also taught me how to use GIT and its version control system, as well as reading of the documentations in order to properly implement dependencies.
Visit the Site GitHub Repo
website screenshot
Pearl China (Online Menu)
  • Client wanted a mobile site to hold their ever updating menu and prices. The site has a Google Map Embed and uses grid layout for the menus for a responsive experience, for all screen sizes.
  • This site taught me how to include favicons for all browsers and how to create UI from a mockup design. It is hosted on Vercel via CloudFlare and gets a humble 1000 vists a week.
  • I used proper HTML semantics for Search Engine Optimization (SEO) and it managed to reach the 1st page of Google.
Visit the Site GitHub Repo
website screenshot
Anime (API) Database Search
  • A React app I made using a REST API called Jikan, containing JSON information about shows from Japan.
  • I utilized the 'useState' hook from React as well as async, fetch, await. Creating a search function parsing through the JSON data, returning 15 related shows, each within a card with their own synopsis and cover image.
Visit the Site GitHub Repo
website screenshot
Initial Speed (Online Business)
  • A Mock up site for my friend's car repair business. It is a one page site and was made with mobile first in mind.
  • I learnt about using lazy loading when using images that are too high quality and how to use CSS animation for a more entertaining user experience.
  • I used Tailwind's inbuilt light/dark mode classes to suit the user's preferred colour scheme.
Visit the Site GitHub Repo
website screenshot
Tic-Tac-Toe
  • A rite of passage for people learning the core 3 of HTML, CSS and JavaScript.
  • The game was made practise fundamentals and as a result contains common methods such as addEventListener(), map() and split(), all used in conjunction with DOM manipulation.
  • I also followed best practices for Web Accessibility, so you can tab through each tile and it will properly focus.
Visit the Site GitHub Repo
website screenshot
Space Invaders
  • Made a Space Invaders clone using Object Oriented Programming JavaScript with HTML Canvas.
  • This was my first game and it was interesting to learn about collision detection, and how interaction on the canvas works.
  • Learnt how to draw on the canvas with the context method, and using delta time in conjunction with requestAnimationFrame to ensure the game does not skip frames and unsync the sprites on screen.
Visit the Site GitHub Repo