Style Guide

My personal website has gone through a couple iterations, mostly as my skills improve and I find design elements I want to incorporate. Most of those changes have been around how I wanted to structure the content, what to prioritize, while still including things 'just because'. At first, I wanted this site to simply be a place I could share my professional projects. Since then, I've made the decision to make the site more holistic, including different aspects of my personal life and hobbies.

One of the earliest versions of Harmonie.is was made in late 2020, as I was taking an HTML course and updating my knowledge of website structure. This design followed a classic top-level navigation layout, with light colors for easily readable text. I tend to lean toward nature for my personal style, so for my first site I went with trees for the theme. This was a little joke on my behalf, as a nod to the "tree" of the html structure I was working on.

The first version of my site.
The results of the first styling revision.

Web Design has changed a little since my angelfire days and I was a little saddened to find that things like 'marquee' had gone out of vogue. I won't lie and say that there are no "early internet" design elements hiding here and there, but I have made sure that the main structure allows the site to feel and behave more like a modern site.

Once I started learning more about both grid and flex I was introduced to more modern layouts and decided to try some of that for myself. The current layout, as you can see, uses a left navigation and a darker color palette. My thinking in doing this, was that the actual page backgrounds could remain light, so they would feel more layered and closer to the screen, while also making images and links stand out more in contrast.

As I started to build things out more, my partner suggested I look into learning how to use Jinja templates for the structure. By breaking things up into smaller files, and utilizing Flask to manage the application, I could control better the overall layout and content. When I first started, if I wanted to change the site nav, I would need to edit each page one by one. With a template, I edit the navigation.html file and Flask and Jinja use that information to echo the changes on each page. This meant that I could grow my site much quicker and finally make room for some of the more fun things I wanted to make.

My main goal then became to have a place I could post about projects and share my work. With how quickly social spaces go in and out of vogue, I felt nostaglic for the freedom of having my own little plot of internet land that would remain static. I wanted a place I could both put down roots, while also having the level of control that would allow me to try different ideas. So I settled on using the classic blog format, with categories, to organize the creative chaos.

Since I was taking a Web Design path through UML, I was constantly needing to link pages and images for assignments, and as UML provided a student site area, I made another site explicitly for my school content. The UML Coursework site went in the other direction, with a lighter background and a darker content color scheme, simply because I wanted to try a different approach.

The Site Map for my Coursework site.
A Site Map for my Coursework site.

The structure of the Coursework site is built around presenting the same information in each area, but from two different directions. There's a page that lists the classes I took, so it's easier to browse by specialty, and then a projects page that highlights a few things, to bring them up to a higher level of user access. This way, a user can decide what path they want to take through the site.

When I graduated, I migrated the UML site to my own hosting setup, which is on a Raspberry Pi in my house. Everything under the Harmonie.is domain has a home there. As part of this migration, I also reformated the HTML and CSS to work with the Jinja template structure. This also let me fill in areas that I had not finished while in school, as my schoolwork was the priority at that point. The goal is to have content to represent the full strata of topics I covered and show off just a little of that hard work.

These are some of the resources that I've collected over the last couple years. feel free to check them out if any are new to you and you're interested in Web Design. If you have a new one to show me that you like, please, send me a message through the Contact form!