Website Redesign

October 20, 2021

My priorities for this new website were, in order:

  • expressiveness (I wanted it to look distinct enough that it was clearly worth paying attention to)
  • ease of use
  • content-heavy (most of my work comes in the form of projects, ideas, writing. How do I make that front-and-center?)

The first feature you'll notice is the typewriter animation, which was animated with simple CSS:

.typewriter {
  overflow: hidden;
  font-size: 1rem;
  font-family: "Courier";
  border-right: .15rem solid var(--accentColor);
  white-space: nowrap;
  flex-basis: 30%;
  letter-spacing: .15rem;
  animation:
    typing 3s steps(40, end),
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--accentColor) }
}

In addition to the typewriter animation, I also implemented an SVG line animation1 to mimick human handwriting. This was done using a recurrent neural network (RNN) with Gaussian mixture model (GMM) output4. The RNN was trained on a dataset of handwriting samples, allowing it to generate new, unique handwriting styles. The GMM output of the RNN was used to generate the SVG path data, which was then animated using the 'stroke-dasharray' and 'stroke-dashoffset' properties in CSS. The result is a smooth and natural-looking animation that was very straightforward to implement once the SVG was rendered.2 This can be done directly in CSS, but I ended up using React-Vivus

The combination of the typewriter and SVG line animations is styled with two sequential animations in CSS. The first animation triggers the typewriter effect, and upon completion, the second animation triggers the SVG line animation. This was achieved using CSS animation-delay and animation-duration properties. This creates a layered effect, with the animations playing one after the other, further enhancing the visual appeal of the website.

The tree below I initially added to a biographical "Why" page that I deprecated. Nonetheless, I'm proud of the tree and want to share it here. I created it using a stochastic variant of an L-Tree algorithm. I was inspired by inconvergent, a digital artist I'd highly recommend you check out3. The algorithm starts with a single line segment, and then samples from a set of transition probabilities to decide how many branches to add. The angle of the new line segments is also randomly sampled. The algorithm is implemented in JavaScript, and the tree is rendered using raw SVG. I chose SVG because it is a vector format, which means that the tree will look crisp and clear on any screen while being space efficient. The tree is also animated using CSS with the same 'stroke-dasharray' and 'stroke-dashoffset' properties as the SVG line animation for handwriting on the home page. This gives the illusion that the tree is growing.

The procedural drawing is mostly SVG animation1 with a lot of tomfoolery to make it simple2 and pretty3.

Sources: 1: How SVG Line Animation Works 2: A neat trick to animate drawing SVGs without JS 3: Sand Splines and Other Tricks 4: Neural Network Calligrapher