Update README.md with animation features and technical highlights
- Added animation features section with detailed descriptions - Updated technology stack with new dependencies - Added technical highlights section - Updated bundle size to reflect animations (~25KB WASM + 10KB JS) - Documented IntersectionObserver implementation in Rust - Enhanced feature list with accessibility and responsiveness
This commit is contained in:
parent
4d44e470cc
commit
f738756664
55
README.md
55
README.md
|
|
@ -5,22 +5,38 @@ Modern business card website for railwayka.ru infrastructure, built with **Rust
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- 🦀 **Rust + WebAssembly** - High-performance, compiled to WASM
|
- 🦀 **Rust + WebAssembly** - High-performance, compiled to WASM
|
||||||
- Modern dark theme with clean design
|
- ✨ **Modern Animations** - Scroll-triggered reveals, parallax effects, micro-interactions
|
||||||
- Service cards showcasing current and planned services
|
- 🎨 **Dark Theme** - Clean, professional design with gradient accents
|
||||||
- Technology stack descriptions
|
- 📱 **Fully Responsive** - Optimized for all screen sizes
|
||||||
- Fully responsive layout
|
- 🚀 **Minimal Bundle** - ~25KB WASM + 10KB JS (highly optimized)
|
||||||
- Minimal bundle size (~19KB WASM)
|
- ♿ **Accessible** - Respects `prefers-reduced-motion` settings
|
||||||
|
|
||||||
|
### Animation Features
|
||||||
|
|
||||||
|
- **Scroll-Triggered Animations**: Cards and tech items fade in and slide up as you scroll
|
||||||
|
- **Parallax Hero Effect**: Floating background gradient with smooth animation
|
||||||
|
- **Gradient Text Animation**: Color-shifting title with smooth transitions
|
||||||
|
- **Micro-Interactions**:
|
||||||
|
- Service cards: Subtle bounce on hover
|
||||||
|
- Tech items: Scale effect with pulsing glow
|
||||||
|
- Footer links: Animated underline slide-in
|
||||||
|
- Hero badge: Floating + glowing pulse
|
||||||
|
- Status badges: Gentle pulse animation
|
||||||
|
- **GPU-Accelerated**: All animations use CSS transforms for optimal performance
|
||||||
|
- **Accessibility**: Honors user motion preferences
|
||||||
|
|
||||||
## Technology Stack
|
## Technology Stack
|
||||||
|
|
||||||
- **Rust**: Core application logic
|
- **Rust**: Core application logic with DOM manipulation
|
||||||
- **WebAssembly**: Fast, portable binary format
|
- **WebAssembly**: Fast, portable binary format
|
||||||
- **wasm-bindgen**: Rust-WASM bindings
|
- **wasm-bindgen**: Rust-WASM bindings and glue code
|
||||||
- **web-sys**: Web API bindings for Rust
|
- **web-sys**: Web API bindings (DOM, IntersectionObserver, etc.)
|
||||||
- **Nginx**: Alpine-based web server
|
- **js-sys**: JavaScript standard library bindings
|
||||||
|
- **CSS Animations**: Modern keyframe animations and transitions
|
||||||
|
- **Nginx**: Alpine-based web server (nginx:1.27-alpine)
|
||||||
- **Docker**: Containerized deployment
|
- **Docker**: Containerized deployment
|
||||||
- **Traefik**: Automatic HTTPS via Let's Encrypt
|
- **Traefik**: Automatic HTTPS via Let's Encrypt
|
||||||
- **Dcape**: GitOps-based deployment
|
- **Dcape**: GitOps-based deployment platform
|
||||||
|
|
||||||
## Deployment
|
## Deployment
|
||||||
|
|
||||||
|
|
@ -111,11 +127,20 @@ cp index.html style.css dist/
|
||||||
|
|
||||||
## Why Rust + WASM?
|
## Why Rust + WASM?
|
||||||
|
|
||||||
- **Performance**: Near-native execution speed
|
- **Performance**: Near-native execution speed in the browser
|
||||||
- **Size**: Optimized bundle (~19KB WASM + 9KB JS)
|
- **Size**: Highly optimized bundle (~25KB WASM + 10KB JS)
|
||||||
- **Type Safety**: Rust's type system prevents common bugs
|
- **Type Safety**: Rust's type system prevents runtime errors
|
||||||
- **Modern**: Cutting-edge web technology
|
- **Modern Stack**: Cutting-edge web technology (2024-2025 trends)
|
||||||
- **Learning**: Great opportunity to explore WASM ecosystem
|
- **Developer Experience**: Built-in IntersectionObserver, direct DOM manipulation
|
||||||
|
- **Learning**: Practical exploration of WASM ecosystem
|
||||||
|
|
||||||
|
## Technical Highlights
|
||||||
|
|
||||||
|
- **IntersectionObserver in Rust**: Scroll animations implemented natively in WASM
|
||||||
|
- **Zero JavaScript**: All logic written in Rust, compiled to WASM
|
||||||
|
- **CSS-Driven Animations**: GPU-accelerated transforms and keyframes
|
||||||
|
- **Optimized Build**: LTO enabled, opt-level "z" for minimal bundle size
|
||||||
|
- **Staggered Animations**: Cascade effect with configurable delays
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue