railwayka.ru Landing Page

Modern business card website for railwayka.ru infrastructure, built with Rust + WebAssembly and deployed via dcape GitOps platform.

Features

• 🦀 Rust + WebAssembly - High-performance, compiled to WASM
• ✨ Modern Animations - Scroll-triggered reveals, parallax effects, micro-interactions
• 🎨 Dark Theme - Clean, professional design with gradient accents
• 📱 Fully Responsive - Optimized for all screen sizes
• 🚀 Minimal Bundle - ~25KB WASM + 10KB JS (highly optimized)
• ♿ 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

• Rust: Core application logic with DOM manipulation
• WebAssembly: Fast, portable binary format
• wasm-bindgen: Rust-WASM bindings and glue code
• web-sys: Web API bindings (DOM, IntersectionObserver, etc.)
• 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
• Traefik: Automatic HTTPS via Let's Encrypt
• Dcape: GitOps-based deployment platform

Deployment

This application uses GitOps workflow:

1. Push code to Git repository
2. Woodpecker CI automatically triggers
3. Application builds and deploys
4. Service goes live at https://railwayka.ru

Manual Deployment

# Clone repository
git clone https://git.dc.railwayka.ru/howl/railwayka-landing.git
cd railwayka-landing

# Configure environment
make config
# Edit .env.sample and rename to .env
mv .env.sample .env

# Build and deploy
make docker-build
make up

Building from Source

Prerequisites

• Rust (latest stable) - install from rustup.rs
• wasm-bindgen-cli - cargo install wasm-bindgen-cli
• wasm32 target - rustup target add wasm32-unknown-unknown

Build Steps

# 1. Build Rust to WASM
cargo build --release --target wasm32-unknown-unknown

# 2. Generate JS bindings
wasm-bindgen --out-dir dist --target web \
  target/wasm32-unknown-unknown/release/railwayka_landing.wasm

# 3. Copy static assets
cp index.html style.css dist/

# 4. Serve locally
cd dist
python3 -m http.server 8000
# Visit http://localhost:8000

Quick Build Script

For convenience, you can use this one-liner:

cargo build --release --target wasm32-unknown-unknown && \
wasm-bindgen --out-dir dist --target web target/wasm32-unknown-unknown/release/railwayka_landing.wasm && \
cp index.html style.css dist/

Project Structure

.
├── Cargo.toml              # Rust project manifest
├── .cargo/
│   └── config.toml         # Rust build configuration
├── src/
│   └── lib.rs              # Main Rust/WASM code
├── index.html              # HTML shell
├── style.css               # Styling
├── dist/                   # Built artifacts (committed to git)
│   ├── index.html
│   ├── style.css
│   ├── railwayka_landing.js
│   ├── railwayka_landing_bg.wasm
│   └── *.d.ts
├── html-old/               # Archived old HTML version
├── Makefile                # Dcape app Makefile
├── docker-compose.yml      # Service definition
├── Dockerfile              # Nginx deployment
└── .woodpecker.yml         # CI/CD pipeline

Why Rust + WASM?

• Performance: Near-native execution speed in the browser
• Size: Highly optimized bundle (~25KB WASM + 10KB JS)
• Type Safety: Rust's type system prevents runtime errors
• Modern Stack: Cutting-edge web technology (2024-2025 trends)
• 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

MIT