albinotonnina.com

Interactive portfolio website showcasing creative web development and animation techniques

✨ Features

Interactive SVG Animations - Complex scene transitions with scroll-based animations
Responsive Design - Optimized for desktop and mobile viewing
Performance Optimized - Webpack 5 with code splitting and asset optimization
Modern React - Built with React 18 and modern JavaScript
Custom Animation Engine - Scroll-triggered animations with D3 interpolation
Advanced SVG Rendering - Preserved gradient definitions and complex illustrations

📜 License

This portfolio is licensed under CC BY-NC-ND 4.0. You are welcome to view, run, and experiment with the code locally for learning purposes. However, you may not modify and redistribute it, such as using it as your own portfolio by changing the name or content.

🚀 Quick Start

Prerequisites

Node.js >=22.x
Yarn (recommended) or npm

Installation

# Clone the repository
git clone https://github.com/albinotonnina/albinotonnina.com.git
cd albinotonnina.com

# Install dependencies
yarn install

Development

# Start development server
yarn dev

# Open browser to http://localhost:8080

The development server includes:

Hot module replacement
Fast refresh for React components
Source maps for debugging
Optimized SVG processing
Animation Debugger - Press Ctrl/Cmd + D to toggle real-time animation info

Recommended Development Setup

For the best development experience, I recommend using VS Code with the following extensions:

Stylelint - CSS linting integration
Prettier - Code formatting
Tailwind CSS IntelliSense - CSS class completion
CSS Peek - Navigate to CSS definitions
HTML CSS Class Completion - Auto-complete CSS classes

The project includes VS Code configuration for:

✅ Format on save for consistent code style
✅ CSS syntax highlighting with proper language association
✅ Integrated linting with error highlighting
✅ Auto-fix on save for Stylelint issues

Production Build

# Build for production
yarn build

# Analyze bundle size
yarn analyze

Testing

# Run tests
yarn test

# Run tests in watch mode
yarn test --watch

Code Quality

# Lint JavaScript files
yarn lint

# Fix auto-fixable JavaScript issues
yarn lint:fix

# Lint CSS files
yarn lint:css

# Fix auto-fixable CSS issues
yarn lint:css:fix

# Format all files with Prettier
yarn format

🛠️ Available Scripts

| Command | Description | | ------------------- | ---------------------------------------- | | yarn dev | Start development server with hot reload | | yarn build | Build for production | | yarn analyze | Analyze bundle size | | yarn test | Run test suite | | yarn lint | Lint JavaScript files | | yarn lint:fix | Fix auto-fixable JavaScript issues | | yarn lint:css | Lint CSS files | | yarn lint:css:fix | Fix auto-fixable CSS issues | | yarn format | Format all files with Prettier |

🛠️ Tech Stack

Frontend

React 18 - UI library with modern hooks
Webpack 5 - Module bundler with advanced optimization
Babel - JavaScript compiler with modern syntax support
PostCSS - CSS processing with modern features

Animation & Graphics

D3 Interpolate - Smooth animation transitions
SVG Filter - Dynamic SVG effects and filters
Custom Animation Engine - Scroll-based scene transitions
Complex SVG Illustrations - Hand-crafted vector graphics

Development Tools

ESLint - Code linting with modern Babel parser and comprehensive rules
Prettier - Code formatting with consistent style
Stylelint - CSS linting with PostCSS support
Jest - Testing framework
Webpack Bundle Analyzer - Bundle size analysis
VS Code Integration - Configured for optimal development experience

📁 Project Structure

src/
├── scene/           # Main interactive scene components
│   ├── index.js     # Scene component with SVG rendering
│   ├── scene.svg    # Complex interactive SVG illustration
│   ├── transitions.js    # Animation definitions
│   ├── tickFunction.js   # Animation engine
│   ├── animationDebugger.js # Development animation debugger
│   ├── calculateStyles.js   # Animation style calculations
│   └── transition-utilities.js # Animation utility functions
├── styles/          # CSS and styling
│   ├── main.css     # Main application styles
│   └── ...
├── subtitles/       # Text content and subtitles
├── images/          # Static assets
├── utils/           # Utility functions
│   └── svg-id-processor.js # SVG processing utilities
└── index.js         # Application entry point

# Configuration files
├── .eslintrc        # ESLint configuration
├── .prettierrc      # Prettier configuration
├── .stylelintrc     # Stylelint configuration
├── webpack.config.babel.js # Webpack configuration
├── jest.config.js   # Jest test configuration
└── .vscode/         # VS Code workspace configuration
    ├── settings.json    # Editor settings
    └── extensions.json  # Recommended extensions

🎨 Key Technical Achievements

SVG Animation System

Scroll-triggered animations with precise timing control
Gradient preservation during complex transformations
Performance optimized rendering for large SVG files
Cross-browser compatible animation engine

Modern React Architecture

React 18 with createRoot API
Functional components with hooks
Performance optimized with React.memo
Clean separation of concerns

Advanced Webpack Configuration

Development/Production optimized builds
Code splitting for optimal loading
Asset optimization with modern loaders
SVG processing with @svgr/webpack
Fast development with filesystem caching

🐛 Known Issues & Solutions

SVG Gradient Rendering

The project includes custom solutions for preserving SVG gradient stop-color attributes during animations. The animation system has been modified to prevent opacity inheritance issues that could break gradient definitions.

� Development & Debugging

Animation Debugger

The project includes a powerful real-time animation debugger to help understand and modify the complex scene transitions:

Toggle Debugger: Press Ctrl/Cmd + D in the browser

Features:

📊 Real-time timing and progress information
🎭 Current scene and animation state
📅 Complete scene timeline with status indicators
🎯 List of currently active animated elements
🔍 Scene-by-scene breakdown with timing details

Console Commands:

// Available in browser console
animationDebugger.jumpToScene("company"); // Jump to specific scene
animationDebugger.listScenes(); // Show all available scenes
animationDebugger.exportState(); // Export current state as JSON
animationDebugger.logState(); // Log detailed state info

For detailed debugging information, see ANIMATION_DEBUG.md.

Development Best Practices

The project follows modern development practices:

Code Quality Standards:

All JavaScript follows ESLint rules with modern Babel parser
CSS follows Stylelint standards with PostCSS support
Consistent formatting enforced by Prettier
Comprehensive test coverage for utility functions

Development Workflow:

Before committing, run yarn lint and yarn lint:css to check for issues
Use yarn format to ensure consistent code formatting
Fix linting issues with yarn lint:fix and yarn lint:css:fix when possible
Test changes thoroughly using the animation debugger
Maintain clean code with proper separation of concerns

File Organization:

Animation logic separated into focused modules
Utility functions extracted for reusability
CSS organized with clear naming conventions
Test files co-located with source code

Making Changes

Use the debugger to understand current animation state
Modify timing in the SCENE_TIMING object in transitions.js
Add new animations using the existing generator patterns
Test changes with the real-time debugger feedback

Project Status ✅

This project has been successfully modernized with the following improvements:

✅ Completed Modernization

React 18 with latest features and concurrent mode support
Webpack 5 with improved bundling and tree-shaking
Modern build tools (Babel 7, PostCSS, CSS optimization)
Animation system refactor for improved maintainability
Development tooling with hot module replacement and source maps

✅ Animation Debugging System

Real-time animation debugger available in development mode only
Toggle with Ctrl/Cmd+D to show/hide the debug overlay
Zero production overhead - debug code is completely excluded from production builds
Console API available at window.animationDebugger in development

✅ Bundle Optimization

Production build size reduced by ~88% (181KB → 23KB) through effective tree-shaking
Development-only features properly excluded from production
SVG optimizations with proper gradient and animation preservation

✅ Code Quality & Development Experience

ESLint with modern Babel parser and comprehensive linting rules
Prettier for consistent code formatting across the project
Stylelint for CSS linting

Albinotonnina.com

Install / Use

README