148 lines
4.8 KiB
Markdown
148 lines
4.8 KiB
Markdown
# railwayka.ru Landing Page
|
|
|
|
Modern business card website for railwayka.ru infrastructure, built with **Rust + WebAssembly** and deployed via [dcape](https://github.com/dopos/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
|
|
|
|
```bash
|
|
# 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](https://rustup.rs/)
|
|
- wasm-bindgen-cli - `cargo install wasm-bindgen-cli`
|
|
- wasm32 target - `rustup target add wasm32-unknown-unknown`
|
|
|
|
### Build Steps
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
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
|