albinotonnina.com

albinotonnina.com is an open-source interactive portfolio template by developer Albino Tonnina that turns scroll input into animated SVG scene transitions, built with React 18 and Webpack 5.

What is albinotonnina.com?

albinotonnina.com is a personal portfolio website that presents Albino Tonnina's work through a series of hand-crafted SVG illustrations and subtitle text, animated as the user scrolls. The project is implemented as a single-page React application: the source accepts SVG scenes, transition definitions, and text subtitles, and outputs a browser experience where each scroll position maps to a different animation state. It runs on a modern JavaScript toolchain — React 18 for the UI, Webpack 5 with Babel 7 and PostCSS for building, and a custom animation engine using D3 Interpolate. The complete source is available on GitHub under the CC BY-NC-ND 4.0 license.

Key Features

• Scroll-triggered scene transitions — A custom tick function calculates animation styles from scroll position; D3 Interpolate smooths transitions and gradient stop-color attributes are preserved during transformations.
• Animation Debugger — In development, press Ctrl/Cmd+D to toggle a real-time overlay showing scene timing, active animated elements, and a full scene timeline; console commands let you jump to a scene, list all scenes, or export state as JSON.
• React 18 architecture — Functional components with hooks, React.memo for performance, and the createRoot API; scene logic is split into focused modules under src/scene.
• Webpack 5 optimization — Code splitting, asset optimization, SVG processing with @svgr/webpack, and filesystem caching; production bundle was reduced from 181KB to 23KB through tree-shaking.
• Complete developer tooling — ESLint with Babel parser, Prettier formatting, Stylelint for CSS, Jest tests, Webpack Bundle Analyzer, and preconfigured VS Code settings for format-on-save, linting, and CSS IntelliSense.
• Responsive and performance-focused — The site is optimized for desktop and mobile viewing, with source maps and hot module replacement during development.

Who should use albinotonnina.com?

Creative front-end developers who want to study a real-world implementation of scroll-driven SVG animation with React and Webpack will find the modular scene system and animation debugger instructive. Portfolio owners looking for an interactive personal site can use the project as inspiration and a technical reference, though the CC BY-NC-ND license restricts modifying and redistributing the code. Developers interested in Webpack 5 build optimizations can run yarn analyze to explore how the bundle size was cut by roughly 88 percent.

What can you do with albinotonnina.com?

• Study advanced SVG animation techniques: Read the transition definitions in transitions.js and the tick function to understand how complex scene changes are coordinated with scroll position.
• Use the animation debugger: Toggle it with Ctrl/Cmd+D in development to inspect the current scene state, jump directly to a specific scene, or export the state as JSON for analysis.
• Explore the modern build pipeline: Clone the repository, run yarn install and yarn dev to start the Webpack 5 development server at localhost:8080 with hot module replacement and fast refresh.
• Examine the quality toolchain: Run yarn lint, yarn lint:css, yarn format, and yarn test to see how ESLint, Stylelint, Prettier, and Jest are configured for a React 18 project.

How does albinotonnina.com work?

Visitors scroll, and the scroll position drives a custom animation engine that interpolates between predefined scene states using D3 Interpolate, updating inline SVG styles and filters in real time. To run the project locally, clone the GitHub repository, install Node.js version 22.x or higher and Yarn, run yarn install, then yarn dev; the site is served at http://localhost:8080. In development, the animation debugger overlay and window.animationDebugger console API expose the internal scene timeline for tuning transitions.

Pros and cons

Pros:

• Production bundle size was reduced from 181KB to 23KB (~88% smaller) through tree-shaking and dev-only exclusions.
• The built-in animation debugger is excluded from production builds, so it adds zero overhead to the deployed site.
• The codebase is well organized with separated animation modules, utility functions, co-located tests, and clear config files.

Cons:

• The CC BY-NC-ND 4.0 license prohibits modifying and redistributing the material, so it cannot be directly reused as a portfolio by replacing the name or content.
• Requires Node.js version 22.x or higher, which may be newer than what some LTS environments provide.

Pricing

The template is free to view, run, and experiment with locally for learning purposes. Under the CC BY-NC-ND 4.0 license, commercial use and distribution of modified versions are not permitted.

FAQ

Is albinotonnina.com free?

Yes, the source code is freely available on GitHub under the CC BY-NC-ND 4.0 license. You can view, run, and experiment with it locally, but the license restricts commercial use and distribution of modified versions.

What tech stack does albinotonnina.com use?

It uses React 18 with functional components, Webpack 5 as the module bundler, Babel 7 for JavaScript compilation, PostCSS for CSS processing, and D3 Interpolate for animation transitions. Development tooling includes ESLint, Prettier, Stylelint, Jest, and Webpack Bundle Analyzer.

Can I use albinotonnina.com for my own portfolio?

Not directly. The CC BY-NC-ND 4.0 license states you may not modify and redistribute the material, such as using it as your own portfolio by changing the name or content. You can study the code and build your own version using the techniques demonstrated.

How do I run albinotonnina.com locally?

Clone the GitHub repository, ensure you have Node.js version 22.x or higher and Yarn installed, then run yarn install followed by yarn dev. The development server will start with hot module replacement at http://localhost:8080.

What does the animation debugger do?

It's a development-only overlay toggled with Ctrl/Cmd+D that shows real-time timing and progress information for the scene transitions, the current scene and animation state, a scene timeline, and a list of active animated elements. Console commands are also available on window.animationDebugger.