▄███████▄                  ▄██████▄      ▄██████▄      ▄██████▄      ▄██████▄      ▄██████▄    
    ▄█████████▀▀               ▄█▀████▀███▄  ▄██████████▄  ▄██████████▄  ▄██████████▄  ▄███▀████▀█▄
    ███████▀      ▄▄  ▄▄  ▄▄   █▄▄███▄▄████  ███ ████ ███  ███ ████ ███  ███ ████ ███  ████▄▄███▄▄█
    ███████▄      ▀▀  ▀▀  ▀▀   ████████████  ████████████  ████████████  ████████████  ████████████  
    ▀█████████▄▄               ██▀██▀▀██▀██  ██▀██▀▀██▀██  ██▀██▀▀██▀██  ██▀██▀▀██▀██  ██▀██▀▀██▀██
      ▀███████▀                ▀   ▀  ▀   ▀  ▀   ▀  ▀   ▀  ▀   ▀  ▀   ▀  ▀   ▀  ▀   ▀  ▀   ▀  ▀   ▀

Site Overview

Making a site that represents you as a person is difficult. A biography should do just that. This meant that I ended up spending a lot of time just thinking about what the site should look like and how I wanted it to be laid out.

In the end, I settled for something close to home, I wanted to design it to look like a Linux terminal. I spend a lot of time designing my own arch Linux environments and as I use it every day, it has become a part of my life - and I also thought that it would look good.

Navigation

To get the look, I started on the navigation. There isn't really a navigation system that works in a terminal so how would I make it look like one? I ended up just using an inline list that looks like a directory path. There is also PHP inside the tags that make the current page button be highlighted red with a red underline.

Main page content

For the assignment, we had to use the grid layout. This means that everything needs to have a set % size on the page and be laid out accordingly. This meant that I had to use aside and main for the content. To use this system to my advantage and to display the main content, I decided to mimic a Linux script called neo-fetch. It is one of the most widely known scripts around, most people who have done anything with Linux would have seen it.

To mimic neo-fetch, I used the aside section to the left and displayed an image of myself (replacing the distro's art) and the main section as the "system info". This contains all the info that I'm willing to put on the internet about myself, I even made a little JS script that counts how long I've been alive - named "uptime".

Main page lower

To get more stuff on the index page so that the site wasn't just a card site (no scrolling) I had to add another section. In this section, I wanted to add some more Linux scripts - what are the most common? Well, cowsay and htop I use them a lot, so why not add them?

To make it seen that you can scroll down the page, I used the cowsay bit to say "Scroll for more" - what else are you going to put there?

Under cowsay is a recreation of htop. This is usually a script that will track and display all the current processes on the machine. I used a table to make this and I also included some clickable links to some other sites I'm working on.

Portfolio

On this page, I needed to use another grid so that I could display the different projects I'm working on. This scales to the size of the screen and stacks on mobile. I added a transition effect to the pictures that makes them half transparent and shows the name of the project with the whole pane being a link to the site.

Contact

The contact section is very simple, originally I was going to do a form to accept emails, however, that would require post requests and PHP which would be a waste of time. I settled for a mailto link for both of my emails and my phone number above them. Nice - simple - easy.

Mobile optimizations

As we were not allowed to use Bootstrap (boooo), I had to use media breakpoints (so Bootstrap manually). This would just hide the desktop nav and show the mobile nav on screens that were too small. This is also how I did the stacking of the grid on the portfolio page. The last thing I did with media breakpoints was to change the layout on mobile pages. This just hides the header (Pacman) and on some pages (like the home page) removes some sections that can't fit.

Mobile nav

The mobile nav is just the desktop nav but instead of inline, the list displays vertically. This is then put on a div called "sidebar" that changes its width with a JS function. The JS function also adds margin to the area "main" to make room. This is all then animated with CSS to do the width change over time to make it look like the sidebar slides in.