vancouver/README.md

Vancouver Investment Fund - Official Website

A modern, responsive website for the Vancouver Investment Fund built with Svelte and Vite.

🌐 Live Site

Visit the official website at: https://vancouverinvest.com.ua

🚀 Features

• Modern UI/UX: Clean, professional design with smooth animations and scroll effects
• Multilingual Support: English and Ukrainian languages with automatic browser detection
• Theme Switching: Light/dark/system mode with automatic detection and persistent preferences
• Responsive Design: Mobile-first approach, optimized for all devices
• Fast Performance: Built with Vite for optimal loading speeds and asset optimization
• Custom Domain: Deployed at vancouverinvest.com.ua with SSL certificate
• Docker Support: Easy development and deployment with Docker/Podman
• CI/CD Pipeline: Automated deployment to GitHub Pages with custom domain
• Component Architecture: Reusable components for scalability and maintainability

🛠 Tech Stack

• Frontend: Svelte 5 + Vite
• Styling: CSS Custom Properties for theming with light/dark/system modes
• Icons: Lucide Svelte for consistent iconography
• Routing: Svelte SPA Router (ready for multi-page expansion)
• Deployment: GitHub Pages with custom domain (vancouverinvest.com.ua)
• Development: Docker/Podman support with hot reload
• Assets: Optimized background images and SVG graphics

🏃‍♂️ Quick Start

Using Make (Recommended)

# Install dependencies in container
make install

# Start development server with hot reload (automatic rebuild on file changes)
make dev

# Build for production (static files for GitHub Pages)
make build

# Clean build files and containers
make clean

# Stop all containers
make stop

The make dev command will:

• Automatically detect Docker or Podman
• Start the development server in a container
• Watch for file changes and rebuild automatically
• Enable hot module replacement (HMR) for instant updates

Manual Commands (in container)

# Install dependencies
make install

# Start development server
make dev

# Build for production
make build

Docker Development

# Development with Docker
docker-compose up app

# Production with Docker
docker-compose --profile production up app-prod

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── Header.svelte   # Navigation with theme/language switchers
│   ├── Footer.svelte   # Footer component
│   └── Home.svelte     # Main page content
├── stores.js           # Global state management (theme, language)
├── translations.js     # Multi-language support (EN/UK)
├── app.css            # Global styles and CSS custom properties
├── App.svelte         # Root component
└── main.js            # Application entry point

public/
├── CNAME              # Custom domain configuration
├── hero-background.svg # Hero section background (light theme)
├── hero-background-dark.svg # Hero section background (dark theme)
├── energy-background.jpg # Investment area background
├── retail-background.jpg # Investment area background
├── office-background.jpg # Investment area background
└── favicon.svg        # Site favicon

🌍 Internationalization

The website supports multiple languages with automatic browser detection:

• English (en) - Default
• Ukrainian (uk)

Language preferences are stored in localStorage and persist across sessions.

🎨 Theming

The application supports comprehensive theming with:

• System Detection: Automatically detects user's system preference (light/dark)
• Manual Override: Users can manually select light, dark, or system mode
• Persistent Preferences: Theme choice is stored in localStorage
• CSS Custom Properties: Consistent theming across all components
• Smooth Transitions: Animated theme switching for better UX
• Responsive Design: Optimized colors and contrasts for both themes

🚀 Deployment

Custom Domain Setup

The site is deployed at vancouverinvest.com.ua with automatic SSL certificate.

GitHub Pages Configuration

The deployment is fully automated via GitHub Actions:

1. Domain Configuration:

   • Custom domain: vancouverinvest.com.ua
   • CNAME file automatically deployed
   • SSL certificate provided by GitHub Pages

2. Automatic Deployment:

   • Triggered on every push to main branch
   • Builds static assets with Vite
   • Optimizes images and assets for production
   • Deploys to GitHub Pages with custom domain

3. Build Process:

   • Installs dependencies with npm ci
   • Builds production bundle with npm run build
   • Uploads build artifacts to GitHub Pages
   • Serves content from custom domain

Development & Production URLs

• Production: https://vancouverinvest.com.ua
• Development: http://localhost:5173 (when running locally)

GitHub Pages (Automatic)

Push to the main branch to trigger automatic deployment with the following process:

1. GitHub Actions builds the project
2. Static files are generated in dist/ directory
3. Assets are optimized and processed by Vite
4. Site is deployed to custom domain with SSL
5. CNAME file ensures proper domain routing

Manual Deployment

# Build the project
npm run build

# Deploy the dist/ folder to your hosting provider

🐳 Container Development

The project automatically detects and uses Docker or Podman:

Development with Hot Reload

# Automatically detects container runtime (Docker/Podman)
make dev

# Or manually specify:
docker-compose up app
# OR
podman-compose up app

Features:

• Automatic file watching: Changes to source files trigger instant rebuilds
• Hot Module Replacement (HMR): See changes without page refresh
• Volume mounting: Source code changes are reflected immediately
• Container runtime detection: Works with both Docker and Podman

Container Configuration:

• Port: 5173 (accessible at http://localhost:5173)
• Polling: Enabled for file watching in containers
• HMR: Configured for container networking
• Volume mounts: Source code and node_modules are properly mounted

📝 Available Scripts

• make dev - Start development server with hot reload
• make build - Build for production with optimized assets
• make prod - Start production server preview
• make dev-docker - Start development with Docker
• make prod-docker - Start production with Docker
• make install - Install dependencies in container
• make clean - Clean build files and containers
• make stop - Stop all running containers
• make help - Show all available commands

📄 License

This project is proprietary and confidential.