# albinotonnina/albinotonnina.com

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/albinotonnina-albinotonnina-com).**

2,754 stars · 510 forks · JavaScript · other

## Links

- GitHub: https://github.com/albinotonnina/albinotonnina.com
- Homepage: http://www.albinotonnina.com
- awesome-repositories: https://awesome-repositories.com/repository/albinotonnina-albinotonnina-com.md

## Topics

`albinotonnina` `animatecss` `css` `javascript` `portfolio-website` `scrolling` `vanilla-javascript` `webpack`

## Description

This is a personal portfolio website that uses scroll position to drive complex SVG scene animations, creating an interactive storytelling experience. The project is built around a scroll-synchronised animation controller that maps user scrolling to a timeline of interpolated state changes across a directed graph of visual elements, enabling fluid scene transitions.

The site features a real-time animation state debugger that overlays a live HUD showing timing, active elements, and scene breakdown, with console commands for scene jumping and state export. It also includes a gradient-preserving SVG transform pipeline that maintains gradient definitions and opacity inheritance when dynamically transforming hand-crafted vector illustrations.

The project provides a declarative scene composition model for defining scenes as configurations of SVG elements and their animated properties, with a timeline-based interpolation system that drives fluid motion between keyframe-defined states. The documentation covers the scroll-driven scene graph engine and animation debugging workflow.

## Tags

### Content Management & Publishing

- [Personal Portfolio Generators](https://awesome-repositories.com/f/content-management-publishing/personal-portfolio-generators.md) — Builds a personal portfolio website where narrative and visual elements unfold as the visitor scrolls through the content.

### Software Engineering & Architecture

- [Declarative Scene Graphs](https://awesome-repositories.com/f/software-engineering-architecture/declarative-scene-graphs.md) — Defines scenes as declarative SVG element configurations mapped to animated state transitions.
- [Scene Graph Engines](https://awesome-repositories.com/f/software-engineering-architecture/scroll-position-event-triggers/scroll-driven-visual-transformations/scene-graph-engines.md) — Animates SVG scene transitions by mapping scroll position to a timeline of interpolated state changes across a directed graph of visual elements.

### User Interface & Experience

- [Scroll-Triggered Animations](https://awesome-repositories.com/f/user-interface-experience/declarative-animations/scroll-triggered-animations.md) — Animates SVG scene transitions triggered by scroll position with precise timing and smooth interpolation. ([source](https://cdn.jsdelivr.net/gh/albinotonnina/albinotonnina.com@master/README.md))
- [Timeline-Based Interpolators](https://awesome-repositories.com/f/user-interface-experience/linear-interpolation-rendering/curve-based-property-interpolators/timeline-based-interpolators.md) — Drives fluid motion by interpolating between keyframe-defined scene states using precise timing curves tied to scroll progress.
- [Scroll-Driven Animation Tools](https://awesome-repositories.com/f/user-interface-experience/scroll-driven-animation-tools.md) — Binds animation timelines to scroll position via continuous mapping for frame-accurate synchronisation.
- [Animation State Debug Overlays](https://awesome-repositories.com/f/user-interface-experience/real-time-state-displays/animation-state-debug-overlays.md) — Provides a real-time overlay showing timing, active elements, and scene breakdown with console commands for scene jumping and state export.

### Development Tools & Productivity

- [Scroll-Animation Debugging Workflows](https://awesome-repositories.com/f/development-tools-productivity/animation-debugging-tools/scroll-animation-debugging-workflows.md) — Provides a workflow for inspecting and controlling scroll-triggered animations with a real-time overlay and console commands.
- [State Debugging Tools](https://awesome-repositories.com/f/development-tools-productivity/state-debugging-tools.md) — Toggles a real-time overlay showing timing, active elements, and scene breakdown with console commands for debugging. ([source](https://cdn.jsdelivr.net/gh/albinotonnina/albinotonnina.com@master/README.md))

### Graphics & Multimedia

- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Renders complex SVG graphics while preserving gradient definitions and opacity inheritance during dynamic transforms. ([source](https://cdn.jsdelivr.net/gh/albinotonnina/albinotonnina.com@master/README.md))

### Web Development

- [Gradient-Preserving Transform Pipelines](https://awesome-repositories.com/f/web-development/svg-component-transformations/gradient-preserving-transform-pipelines.md) — Ships a tree-walking serialiser that maintains gradient definitions and opacity when transforming hand-crafted vector illustrations.