Overview
Context:
I created this site for two reasons. First I needed a project where I could learn about UI design and practice HTML, CSS, and JS. Second, I needed a good place to store my works, resume, and info about me!
Role:
I designed this site from the ground up coding everything by hand in HTML, CSS, and JS with the help of Bootstrap 5 for basic styling.
Tools Used:
HTML, CSS, Bootstrap 5, Jekyll, Github, and Porkbun
TL;DR
Problem:
When choosing what UI/UX project I wanted to create, I needed both projects, and a place on the internet to display them. While using a website builder was an option, I wanted to practice the core skills behind UI/UX design and engineering.
Solution:
To create this I purchased a domain and set up hosting through Github Pages which allows for static site hosting. I then used Jekyll as a base to streamline creation of items like headers. After, I began coding in HTML and CSS with Bootstrap 5 as a UI base to create the final product. Ensuring the site worked on all devices and was mobile-responsive was the most difficult aspect and increased build time 8x. I am especially proud of the resume section!
Domain Provider
Choosing a domain proivder was especially difficult. One of the main issues is the long term pricing and how the site handles security and DNS management. From my research, I chose Porkbun which is a smaller company with a cute mascot. They provide great pricing and provide features like WHOIS Privacy, SSL Certificates, and easy domain transfers in the future. One worry of mine was being locked into a provider, and Porkbun allows me to leave anytime.
Github
I chose Github for two reasons. First, I wanted a place that I could publicly host my source control, allowing other people to fork and build their own portfolio sites. Secondly, Github has a feature called Github Pages allowing you to generate your own static sites meaning I pay $0 in web hosting. This was a strong long term solution for me as I can quickly build in VSCode, push to Github, and it will be live within minutes.
Home
For the home page, I knew it had to contain all my projects front and center. I made sure to add responsiveness when people hover to create a more interactive experience. This is one of the first pages I worked on, and it taught me so much about writing in HTML.
Resume
This page is one that I am most proud of. I love how it takes what an original resume is, and builds upon it. Using HTML allowed much more fine precision in scaling items, adding color, and little flairs. I love what I call the tic tacs which are the round descriptors. I feel they draw the users attention and add color to the page. One major issue I ran into here was mobile responsiveness. Having two columns I needed a way to display the sections in a specific order depending on screen width. I landed on using CSS Grid to set priority based on page width.
About
This is a simple page that explains my work, hobbies, and contact info. Seeing as it's a portfolio website, I felt I needed to introduce myself to anybody visiting.
Challenges
This project took far longer than expected due to mobile responsiveness. As the page gets smaller all the text and images need to scale nicely to make any viewing experience enjoyable. At many points I thought it worked until testing it on tiny phone screens like the iPhone SE and realizing elements didn't fit at all.
Future
While the basics are done, theres still more I want to do when it comes to this site. I want to find ways to switch up the fonts and add SASS (Synthetically Awesome Style Sheets) which would allow me to add more customization and switch up how Bootstrap displays things. Unfortunately this is still an issue I have yet to figure out as Jekyll refuses to render with SASS. I love that this site is a living version of everything that I've accomplished. It allows me to quickly pull and update it when new events happen.