Personal Website
Personal website to showcase project portfolio.
One of my first personal projects was creating a personal website. I have gone through two major iterations of my website and utilised various tools for each version. This article will be discussing the major changes and their respective reasons.
The current version of the website is customized from a Jekyll template to include features such as a search bar and custom post pages.
Link to GitHub Code.
Technologies used include Jekyll, Markdown, Google Forms, Bootstrap, Github Pages, JavaScript, Sass, HTML, VS Code.
Overview of Major Changes
1. Website Foundation
2. Home Page
3. Contact Form
4. Video Portfolio
Details of Major Changes
1. Website Foundation
In the first version of the website, the code was built from the ground up and minimal Bootstrap was used to develop features. However, that introduced a lot of problems across browsers and it was time-consuming to add new pages. Then I discovered Jekyll and Markdown which made it easier to add new pages and customize website features.
2. Home Page
Initially, the home page consisted of a pyramid of key topics that I was interested in. When hovered, additional details about the topics were shown to the user. Although beneficial, it was soon analyzed that the most frequently visited page was the Projects tab. Thus, in the second iteration, that page became the home page.
Initial Home Page 
Initial Project Page The initial project page where cards would flip when hovered to provide more information about the project. 
Revised Project Page The new version where key project information was displayed on the project card and users can click the card for more detailed information. 
3. Contact Form
In the first iteration of the website, the contact form would redirect users to an email application where the content of the email were prepopulated with the information that they had written on the form. However, showcasing my personal email in the files would expose it to email spam bots. Since my personal website is static to decrease loading time, I utilized Google Forms in my code for the contact form. By using Google Forms, I can quickly analyze the form responses and I get a notification when a form is submitted.
Initial Contact Form 
Contact Form with Google Forms 
4. Video Portfolio
At first, I was planning to host a video portfolio on my website as videos are more engaging. However, after conducting research and user tests, it was soon discovered that factors such as loading time for the video outweigh the possible benefits of using a video. Thus, the video was removed and a simple About page was used instead.
Using a Video 
Showing an About Page 
