Latest version of my personal website

Tyler Hallada 9f3a4fc64e Update profile photo 9 months ago
.well-known I can write JSON. I promise. 2 years ago
_data Fix url and images config, add authors file 5 years ago
_includes Switch to https 4 years ago
_layouts Fix class attribute typo on home template 1 year ago
_posts Add image to last blog post 2 years ago
assets New blog draft 6 years ago
blog Add dark theme with theme switcher 2 years ago
css Remove z-index on canvas 1 year ago
fonts Add icon font for buttons 7 years ago
img Update profile photo 9 months ago
js Complete options panel 7 years ago
laundry Double quotes in html tags. No link self-end tags. 6 years ago
magic Show options on desktop 7 years ago
resume Double quotes in html tags. No link self-end tags. 6 years ago
.gitignore Initial jekyll set-up & homepage 8 years ago
CNAME Create CNAME 2 years ago
Gemfile Update jekyll conf. New post w/ assets. 7 years ago
README.md Add dark theme with theme switcher 2 years ago
_config.yml Specify post excerpts with comment separator 4 years ago
favicon.png Add favicon 8 years ago
feed.xml Add SEO tags to all pages 5 years ago
index.html Update home page for Outcomes4Me 2 years ago
resume.pdf Update resume 1 year ago

README.md

thallada.github.io

This is the latest version of my personal website. It is a static website built with Jekyll.

See it at https://www.hallada.net/.

Build Locally

To run a version of the site in development locally. Checkout this repo and then:

  1. cd thallada.github.io
  2. Install Jekyll
  3. Run bundle install
  4. Run bundle exec jekyll serve
  5. Visit http://localhost:4000 to view the website

Magic

Most of the development work of this website went into creating what I like to call "magic", or the dynamic background to my homepage. A few seconds after loading the page, a branching web of colored tendrils will grow in a random position on the page, followed soon after by other "spells" sprouting in random locations across the background. Clicking on the background will also initiate a starting point for a new spell to appear.

It is meant to represent the imaginative and infinite wonders of programming as described eloquently by Fred Brooks in one of my favorite quotes from him in his book The Mythical Man-Month, which is featured on the page.

A canvas element spans the entire background and my script leverages AnimationFrame to animate the construction of procedurally generated trees of B-splines for a random range of time. I adapted a large portion of the code from Maissian's tutorial on simulating vines, making it more random, colorful, and more CPU efficient.

It was really fun to tweak various variables in the script and see how the animation reacted. It didn't take much tweaking to get the lines to appear like lightning flashing in the distant background, or like cracks splitting the screen, or like growing forest of sprouting trees.

You can play around with these variables yourself on the /magic page which has sliders for tweaking the animations in realtime.

Layout & CSS

I use a grid system devised by Adam Kaplan and with some pieces from Jorden Lev. It is set-up by scratch in my main.css. I decided on this so that I would not have to load a huge framework like Bootstrap since I would only be using the grid system out of it.

As an introduction to this system:

Wrap everything in a div element with the container class.

<div class="container"></div>

To create rows add div elements with the row and clearfix classes.

<div class="container">
    <div class="row clearfix"></div>
</div>

To create columns add div elements with the column class. Then add a class to describe the width of the column with respect to the container. The possible widths are:

CSS class name width percentage
full 100%
two-thirds 66.7%
half 50%
third 33.3%
fourth 25%
three-fourths 75%

These are purely for convienence. A more precise width can be specified in the CSS if desired with the width attribute.

<div class="container">
    <div class="row clearfix">
        <div class="column full"></div>
    </div>
</div>

Columns stack up right to left. To force a column out of order all the way to the right use the flow-opposite class on the column (but remain first on smaller screens).

<div class="container">
    <div class="row clearfix">
        <div class="column half"></div>
        <div class="column half flow-opposite"></div>
    </div>
</div>

To hide an element on mobile phones add the class hide-mobile. To hide on desktop, use hide-desktop instead.

<div class="container">
    <div class="row clearfix">
        <div class="column half hide-mobile"></div>
        <div class="column half hide-desktop"></div>
    </div>
</div>

I had an issue with displaying elements on desktop that had the class "hide-mobile", so you can add the following classes to make sure they redisplay in the right display type correctly:

  • hide-mobile-block
  • hide-mobile-inline-block
  • hide-mobile-inline
  • hide-deskop-block
  • hide-desktop-inline-block
  • hide-desktop-inline

I could add more for each display property, but I'm trying to find a better way of fixing this without adding these second classes.

Another note: I use box-sizing (as suggested by Paul Irish), which I think makes dealing with sizing elements a lot more sane.

Light & Dark Themes

In 2020, I created a dark theme for the website. The dark theme is used if it detects that the user's OS is set to prefer a dark theme using the prefers-color-scheme @media query.

To allow the user to select a theme separate from their OS's theme, I have also included a switch that can toggle between the two themes.

Attributions

Book designed by Nherwin Ardoña from the Noun Project.

Profile designed by Ryan Beck from the Noun Project.

Photos designed by Ryan Beck from the Noun Project.