README.md

thallada.github.io

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.

<divclass="container"></div>

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

<divclass="container">
<divclass="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.