Page Design
Two of us share this domain, neither touching the other's half. Our goals, focus, and style are distinct, yet we share two halves of a single space. The front page is an art project, designed to capture this dynamic. The inspiration came from my ideas, but the execution was as everything else: a shared but disjoint effort.
Personal Half
2d, colorful, HTML/CSS/JS-based, randomized, sporadic, and mosaic-like. These were the pieces that captured my imagination and made the left half into my half. The choice of patterns and transitions gave me room to be creative, and the many moving parts made the implementation challenging.
Patterns
There are nine patterns available for the half-circle. Each of them is captured by a black-and-white image, and the triangles are placed using rejection sampling with the image as a bitmap. The patterns are simple and recognizable as different even with the random distribution of triangles.
Transitions
Every ten seconds, the triangles undergo one of five transitions.
All the transitions have a randomized aspect, adding to the general chaos.
They are applied by modifying styles directly on each triangle and relying on CSS transitions to complete the animation.
Because there are many triangles (two hundred), the transitions only change the transition and opacity properties of each triangle, which can be efficiently animated with CSS.