https://github.com/av/av

https://github.com/av/av

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/av/av
• Owner: av
• Created: 2018-04-16T16:10:44.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-09-27T19:21:54.000Z (almost 2 years ago)
• Last Synced: 2025-02-27T09:41:37.608Z (over 1 year ago)
• Language: Pug
• Homepage: https://av.codes
• Size: 36.2 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# av.codes

## Disclaimer

This personal site is created without any specific UI framework, just using core technologies and some helper libraries.

## Interesting Features

### Lava blobs

![Colorful blobs with SVG filters](./docs/goo-mechanics.png)

These are generated and animated procedurally with randomised amount and shape of participating elements. The core effect is implemented using a classic technique via the [SVG filters](./src/filters.pug) (blur + contrast).

The rest is achieved with tuning of the shapes, sizes, colors and animation timings to provide with "lava-lamp" like effect.

![Examples of blobs](./docs/blobs.png)

See the [source code](./src/mixins/shape.pug) for more details.

### Dynamic section splitters

![Dynamic section splitters](./docs/dynamic-splitter.png)

Implemented using a similar technique as the blobs, but with a different set of initial transforms and layout for the underlying elements

![Example of a section splitter without the filters applied](./docs/splitter-no-filter.png)

Example of a section splitter without the filters applied

### Visualisations

#### Career Timeline

![Career Timeline screenshot](./docs/career-timeline.png)

- Detects if User tries to scroll through the page on mobile while tapping within the visualisation using [gesture detection](./src/lib/PointerTracker.ts)

- Fancy dynamic resize

- Game-engine like scene/component architecture with draw/update loop

  - [Scene](./src/lib/Scene.ts) - ECS-like scene implementation

    - [Drawable](./src/lib/Drawable.ts), [Transformable](./src/lib/Transformable.ts), [Updatable](./src/lib/Updatable.ts) interfaces for the visualisation components

  - LERP for [values](./src/lib/InterpolatedValue.ts) and [transforms](./src/lib/SmoothTransform.ts)

See the [source code](./src/career/TimelineVisualisation.ts) for more details.