Code Portfolio

Hannah Logo

My Personal Coding Projects

I created these projects for my personal learning of HTML, CSS, and Javascipt. The are fun little web applications that demonstrate my knowledge and grow abilities. If you click on the snapshots of the applications displayed below, it will take you to their corresponding Code Pens when you can view the code written and see the working versions! Enjoy!

Pixel Art Maker

I created this project during my scholarship course awarded by Google. I had very little experience with design or programming at this point, but I think it demonstrates my ability to learn very quickly. This web application allows you to:

  • Create fun pixel art that is nostalgic of the past
  • Pick an appropriate canvas size for your art project
  • Pick different colors to paint with
  • Double click a cell to have the erase functionality for mistakes

Matching Game

I created this game to better my programming skills. It was fun and challenging at the same time. It helped me work on my algorithm logic and I feel that you can see design skills have been improved in comparison to the Pixel Art Maker. This web application includes the following features:

  • It’s a fun game that most people are nostalgic about
  • It tracks the number of moves taken to win the game
  • It keeps track of the time taken to win the game
  • It has really cool animations created with CSS
  • Has the logic to know which cards are matches
  • Has the logic to know which cards are unmatched
  • Ability to start a new game
  • Gives you a star score based on the number of moves taken to win the game

Princess Frogger

I created this game as a part of the scholarship curriculum. It is a tribute to the classic game called Frogger, but instead has a very cute princess that only wants to get across the road full of bugs to go for a swim. HAHA! This web application includes the following features:

  • It’s a fun game that most people are nostalgic about
  • It utilizes sprites
  • The game logic to know how each sprite should behave
  • Has event listeners for the keystrokes that control the princess
  • Has the game logic to restart the position if collision occurs
  • Animates the motions of the sprites
  • Restarts the game when the princess successfully reaches the other side