< back to all projects

Personal Website

Spring 2020 - Present

Skills Gained

Overview
Languages and Frameworks

In this project, I mostly used plain HTML, CSS, and JavaScript. I have built websites with templates which used Bootstrap before. However, this the majority of this site's functionalities, including the animations and responsive design, are completely coded with just HTML/CSS/JavaScript. For my photo gallery, I learned to use the PhotoSwipe API.

Site Features

Responsive Navbar

The navbar is fixed at the top so that when the user is scrolling, so that it is easy for the user to see at all times. In addition, once the user starts scrolling, the navbar becomes a 90% opacity, so that the user can still see the site under the navbar. When the user scrolls down, the two horizontal lines separating the navbar and the rest of the site fades, giving a pleasant transition. When the window is sufficiently small, the navbar is collapsed into a hamburger menu that opens vertically. This way, the navbar is never cramped (and follows the usability heuristic of aesthetic and minimalist design). The navbar also uses hover transitions that smoothen the user experience between selecting different items on the navbar. When the user hovers over a navbar link, it is highlighted. This follows from the usability heuristic of visibility of system status.

Photography Gallery

This photograph gallery is built using the PhotoSwipe API. The API is well-documented, and following the steps did not cause many problems. However, when the screen was too small, my images ended up getting squashed. I had to use responsive CSS to fix this problem, and now images retain aspect ratio. This API allows users to use gestures to swipe between photos. In addition, it includes animations when opening images into the lightbox, which allows the user to understand the relationship between the photos in the gallery and the photos in lightbox view.

Background and Motivation

This project originally began as a homework assignment in the HCI course 05-430 Programming Usable Interfaces, taught by Patrick Carrington. It reflects the material learned in the course. First, we created prototypes of the website. Then, we used HTML/CSS/JavaScript knowledge to convert that prototype into a working website. In class, we learned about how usability is far more imporant than aesthetic; my website strives to give the user a very straightforward experience, by keeping the website clean and simple.