thallada.github.io/README.md

162 lines
5.5 KiB
Markdown
Raw Permalink Normal View History

2014-04-17 23:57:04 +00:00
thallada.github.io
==================
2014-07-11 22:23:02 +00:00
2014-11-11 03:07:50 +00:00
This is the latest version of my personal website. It is a static website built
with [Jekyll](http://jekyllrb.com/).
2017-11-29 23:34:38 +00:00
See it at [https://www.hallada.net/](https://www.hallada.net/).
2014-11-11 03:07:50 +00:00
2020-01-05 23:09:53 +00:00
## 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](https://jekyllrb.com/docs/installation/)
3. Run `bundle install`
3. Run `bundle exec jekyll serve`
4. Visit `http://localhost:4000` to view the website
2017-06-21 01:33:47 +00:00
## Magic
2014-11-11 03:58:09 +00:00
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
2014-12-09 06:40:39 +00:00
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.
2014-11-11 03:58:09 +00:00
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](js/magic.js)
leverages [AnimationFrame](https://github.com/kof/animationFrame) to animate
the construction of procedurally generated trees of
[B-splines](http://en.wikipedia.org/wiki/B-spline) for a random range of time.
I adapted a large portion of the code from Maissian's [tutorial on simulating
vines](http://www.maissan.net/articles/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
2017-11-29 23:34:38 +00:00
page](https://www.hallada.net/magic) which has sliders for tweaking the
animations in realtime.
2014-11-11 03:58:09 +00:00
2017-06-21 01:33:47 +00:00
## Layout & CSS
2014-07-11 22:23:02 +00:00
I use a [grid system devised by Adam Kaplan](http://www.adamkaplan.me/grid/) and
with some pieces from [Jorden Lev](http://jordanlev.github.io/grid/). 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:
2014-07-11 22:29:59 +00:00
Wrap everything in a div element with the `container` class.
2014-07-11 22:23:02 +00:00
2014-07-11 22:28:07 +00:00
```html
2014-07-11 22:23:02 +00:00
<div class="container"></div>
2014-07-11 22:28:07 +00:00
```
2014-07-11 22:23:02 +00:00
2014-07-11 22:29:59 +00:00
To create rows add div elements with the `row` and `clearfix` classes.
2014-07-11 22:23:02 +00:00
2014-07-11 22:28:07 +00:00
```html
2014-07-11 22:23:02 +00:00
<div class="container">
<div class="row clearfix"></div>
</div>
2014-07-11 22:28:07 +00:00
```
2014-07-11 22:23:02 +00:00
2014-07-11 22:29:59 +00:00
To create columns add div elements with the `column` class. Then add a class
2014-07-11 22:23:02 +00:00
to describe the width of the column with respect to the container. The possible
widths are:
2014-07-11 22:28:07 +00:00
CSS class name | width percentage
--------------- | ----------------
2014-07-11 22:33:06 +00:00
`full` | 100%
`two-thirds` | 66.7%
`half` | 50%
`third` | 33.3%
`fourth` | 25%
`three-fourths` | 75%
2014-07-11 22:23:02 +00:00
These are purely for convienence. A more precise width can be specified in the
CSS if desired with the `width` attribute.
2014-07-11 22:28:07 +00:00
```html
2014-07-11 22:23:02 +00:00
<div class="container">
<div class="row clearfix">
<div class="column full"></div>
</div>
</div>
2014-07-11 22:28:07 +00:00
```
2014-07-11 22:23:02 +00:00
2014-07-11 22:29:59 +00:00
Columns stack up right to left. To force a column out of order all the way to
2014-07-13 00:06:42 +00:00
the right use the `flow-opposite` class on the column (but remain first on
smaller screens).
2014-07-11 22:23:02 +00:00
2014-07-11 22:28:07 +00:00
```html
2014-07-11 22:23:02 +00:00
<div class="container">
<div class="row clearfix">
<div class="column half"></div>
<div class="column half flow-opposite"></div>
</div>
</div>
2014-07-11 22:28:07 +00:00
```
2014-07-11 22:23:02 +00:00
2014-07-11 22:29:59 +00:00
To hide an element on mobile phones add the class `hide-mobile`. To hide on
2014-07-11 22:23:02 +00:00
desktop, use `hide-desktop` instead.
2014-07-11 22:28:07 +00:00
```html
2014-07-11 22:23:02 +00:00
<div class="container">
<div class="row clearfix">
<div class="column half hide-mobile"></div>
<div class="column half hide-desktop"></div>
</div>
</div>
2014-07-11 22:28:07 +00:00
```
2014-07-11 22:23:02 +00:00
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.
2014-07-11 22:29:59 +00:00
Another note: I use [box-sizing (as suggested by Paul
2014-07-11 22:23:02 +00:00
Irish)](http://www.paulirish.com/2012/box-sizing-border-box-ftw/), which I think
makes dealing with sizing elements a lot more sane.
2014-07-13 00:06:42 +00:00
2020-01-05 23:09:53 +00:00
### 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](https://css-tricks.com/dark-modes-with-css/).
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](https://github.com/GoogleChromeLabs/dark-mode-toggle).
2017-06-21 01:33:47 +00:00
## Attributions
2014-07-13 00:06:42 +00:00
[Book](http://thenounproject.com/term/book/23611/) designed by [Nherwin
Ardoña](http://thenounproject.com/nherwinma) from the Noun Project.
[Profile](http://thenounproject.com/term/profile/20733/) designed by [Ryan
Beck](http://thenounproject.com/RyanBeck) from the Noun Project.
[Photos](http://thenounproject.com/term/photos/29898/) designed by [Ryan
Beck](http://thenounproject.com/RyanBeck) from the Noun Project.