🌎 Portfolio using Hugo
Summary
Version 1 of lachlanmckay.com
was a great success in that I was
able to get my feet wet with hosting, deployment and some source
management using Hugo. However it still had many problems related to
load times, SEO and navigtation. I aimed to fix these issues in the
second version, which you can read about here





Rationale
The aim for this project was to create a personal website that I could show to potential employers. I wanted it to include a portfolio of impressive visual content as the main attraction.
Objectives
- Visually impressive
- Able to be presented to potential employers
- Displays my work
- Code, deploy and host my first website
Technologies
The tables below give a complete list of all the technologies involved in the first phase of this site, and how I used them.
Hosting Tech
Technology | Use |
---|---|
Github | Source code hosting |
AWS S3 | Static file hosting |
Google Cloud Storage | Media file hosting (images/video/pdfs etc.) |
Development Tech
Technology | Use |
---|---|
Hugo | Static HTML generation. Main development tool |
Sass | CSS preprocessing (built into Jekyll) |
Jquery | Powerful javascript extension, required by other .js plugins |
Git | Version control |
Real Favicon Generator | Creating favicon files for many platforms |
Retrospective
What went well?
- Splash page - Full page youtube video background with audio playing is very cool
- Gallery shows a lot of my work in a single page
- Animated gifs give the user lots of interesting things to look at
What could be improved?
- All images (particularly gallery images) are too big for the space they occupy. It takes way too long to load gallery pages
- It takes way too long to load youtube background video, people would have clicked on something already
- Navigation images are cool, but the user does not immediately know where they will be going like they would with text
- Splash page does not help SEO efforts
- Source code is somewhat messy - things that should be in the theme are in site content directories
- Audio on a homepage can be annoying, maybe it should be removed
What still puzzles me?
- How to layout gallery images in a nice format similar to pInterest
- Should I completely eliminate the splash page?