Personal Website Overhaul

Personal website?

Yes! A personal website is a website that is mainly used as a sort of “portfolio” for a person. It mainly includes some skills, past sample works, and overall, portrays the person as a whole. Some people even go all in and make the color scheme and theme reflect their personality and such, making it truly “personal”.

For me, I use my personal website for my career mostly and it’s also a project on my Github and as a student, I also show what I’m involved in at the university.

Tech Description

  • Domain: Namecheap
  • Host: Github Pages
  • Made with: Bootstrap, HTML, CSS

The process

Originally, I did have a website made, but it was made in pure HTML and CSS. When I first started this website, I wanted to do it in Bootstrap for a cleaner look but decided against it for the time being as I wanted to show that I could do some front-end development.

Over the course of the last few months, I realized that Bootstrap would make it so much better in terms of optimizing for a mobile screen so, over the course of about a day or so, I migrated each page to Bootstrap.

Landing / Home Page

I started off getting the landing index.html page set up, and instead of just having a picture of me, it had my Twitter feed, Links, and some quick facts. I thought that the landing page looked way better now, but then I had to change the other pages.

My website home page
The current home page, which needs some more adjustments.

About Me

The About Me page was simple, with a picture of me and the basic skills, facts, and activities. Not a bad thing to work on.

Contact Me

Contact Me was another relatively okay page to migrate, as it only needed links and text. Since I’m hosting this website on Github Pages, I can only host static pages so I can’t add a contact form.

However, I might consider adding a Google Form for contacting me or something, with email notifications so I can receive an alert for every new form entry. That is indeed a workaround but I will have to look into that and how it will affect my website layout.

My website contact me page

Projects

Projects was originally a page that listed out all the pet projects in an indented format, but that is now changed to a table and divided into rows and columns. It looks a little cleaner now, so I am happy.

In terms of the website navigation, I quickly added my blog link to it so it navigates to the blog so others can check out my content.

I decided against a Github Pages blog in Jekyll as then I would have to continuously deploy the same website over and over again and it just doesn’t have the same easy-to-use and customizable user interface as WordPress.

Lastly, as this website is mainly for my internships and summer position search, I activated my domain on Namecheap and made it angusleung100.me as it looks a little more professional than a .github.io domain.

Targetting the Namecheap DNS settings to the Github repository was ok, as I was talking to support to ensure it was configured properly. Well, it did not work at all and kept giving me a 404 error. Turns out, I forgot to park it on the Github repository and after parking it, the website URL worked.

Road ahead for improvements

Though the migration was straightforward, there are still many things to fix and add. I will probably work on these when I have the time but for now, here are several on the top of my head:

Problems:

  • Mobile view makes all sections on page squish and look terrible
  • Menu button on mobile view is not displaying properly

Things to add:

  • Activities and what I’m passionate about
  • Contact Page includes a contact form for easier contacting
Angus

Angus

Student, Blogger, and Developer, with an interest in fintech, aerospace defence, and finance.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Font Resize
Contrast