My personal website, version 5! Build from scratch using the awesome power of
pure HTML, CSS, and JS, baby.
I really liked using the Fetch API to populate the content of the site in
version 4. So, I did it again!
I made a couple easily editable JSON files to make maintaining information about
me and what I'm doing super simple. You can check those out for yourself in thecontents folder. To get them into the HTML, I pulled the information from
them with fetch. Fun fact, Safari and fetch don't get along. So, I used
GitHub's handy fetch polyfill project to fix
the holes in that. There was so much debugging, it was like the aftermath of
a real safari with no bug spray.
I originally had all of the content of the site exposed immediately, and changed
that for 2 reasons:
So, it had to be expanded. This part was actually pretty simple. The classList
DOM property already has a built-in function called toggle, so I just toggled
a CSS class to make the content display.
Okay, so I didn't really use pure CSS, technically. Less
really saved my butt when it came to nesting CSS classes and using mixins to
avoid the rewriting of a lot of properties of repeating sections. And color
variables are so nice.
I really backed off on the crazy designs for this version of the site. I wanted
something simple, techy, and understandable. And fast-loading, of course.
So, as I was just messing with things in vim, I realized, "Wow, my vim setup is
beautiful" and I copied myself. Found some cool monospace webfonts, picked some
nice accent colors from my terminal config, and voila. A terminally-ill site
("ill" meaning "sick" or "totally radical dude" like the kids say).
Right now I'm happy with the site, but touch events on iPhone (thanks again,
Safari) are weird. You kind of have to told the toggle a bit. I want to make
that smoother, and maybe add an Easter egg or two. :)