rail
/
railwayka-landing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
railwayka-landing/README.md

4.8 KiB
Raw Blame History

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