Commissioning this weblog 🍾

Hooray! 🙌🏻

Today I built this personal site. This is a task I've been putting off for a long. time.

The first assignment for my Data Science and Analytics class is to build a personal website with a short bio and a professional photograph, but I built this instead.

Static Site Generator

I knew that I wanted to use a static site generator. The requirements of the assignment included hosting your simple site on the university server, or via GitHub pages (spoiler alert: I went with github).

I've used static generators prior; my cv is hosted on github using Jekyll. I've got nothing bad to say about jekyll. It works great for my CV, and if Zola wasn't written in Rust 🦀 I probably would have, but wow-- Zola is fast. Very fast. Zola build on this site takes 20ms, whereas Jekyll on my CV takes 392ms. This isn't a dig on Jekyll, I'm not complaining about waiting 392ms, but Zola is almost imperceptibly fast.

update 9/11/2020

I have ported my CV over to be part of this site! Zola with blog posts, my landing page, and my cv builds in 83ms, over 4x faster than Jekyll.

SVG

Knowing I was going to build this site, I spent $9.99 on a udemy course to learn a little bit about svg. I'd seen the amazing things that some people make with SVG and while I will probably never do that I wanted to have some fun with this.

The udemy course was an absolute waste of $9.99. I won't link to it as to not slander the creator, I'm sure some people found it very useful. It was highly rated, but it wasn't at the level I wanted.

We made this cute 'lil face (modified to work with dark mode)! And it's fine, but it wasn't what I was looking for. That was a bust, but it did give me some basic knowledge and understanding of how SVG works that I leveraged for the silhouette illustration of the reaper.

Travis-CI

Since I use Travis for my other projects' build pipelines it made sense enough to use it again. The Zola documentation has a tutorial for setting up a continuous deployment build with Travis, but I wasn't having success with just following the tutorial. I've used Travis enough that I decided just to "do the work myself" and came up with this .travis.yml

language: minimal

before_script:
  # Download and unzip the zola executable
  - curl -s -L https://github.com/getzola/zola/releases/download/v0.11.0/zola-v0.11.0-x86_64-unknown-linux-gnu.tar.gz | sudo tar xvzf - -C /usr/local/bin

script:
  - zola build

deploy:
  provider: pages
  skip-cleanup: true
  local_dir: public
  github_token: $GH_TOKEN
  on:
    branch: master

Light mode/Dark mode --> Party mode/cold-reality-mode mode

Admittedly all of the hard work of designing a color scheme was done for me. I ape'd a significant amount of the markup for this site from cassie.codes, but I implemented my own simple mode switcher from party mode to cold-dark-reality-mode.

function() {
    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

    function switchTheme(e) {
        document.body.classList.toggle('party')
        document.body.classList.toggle('death')
        localStorage.setItem('theme', document.body.classList.contains('party') ? 'party' : 'death'); //add this
    }

    toggleSwitch.addEventListener('change', switchTheme, false);

    const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

    if (currentTheme) {
        document.body.className = ''
        document.body.classList.add(currentTheme)
        toggleSwitch.checked = currentTheme === 'death'

        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
        }
    }
}

• Now to take that professional photo (DONE!)