Artem Ryazanov - Personal Website

A multilingual personal website with a neon retro sci-fi design and an alternative beach theme, featuring interactive elements and automatic language detection.

Visit the live website: www.artryazanov.com

✨ Features

• Dual Theme Design:
  • Dark Theme: Neon retro sci-fi design with dark background and glowing neon elements
  • Light Theme: Beach-inspired design with warm colors and wave animations
  • Theme persistence using localStorage
  • Automatic system theme preference detection
• Responsive Layout: Fully responsive design that works on all devices
• Multilingual Support: Available in 6 languages with automatic language detection
• Interactive Elements:
  • Star animation background (transforms to beach elements in light theme)
  • Glitch effect on profile picture click
  • Hover animations on all interactive elements
  • Theme toggle with sun/moon icons
• Project Showcase: Displays personal projects with descriptions and links
• SSI Partials: Shared CSS and JavaScript are included via Nginx SSI to avoid duplication across pages

💻 Technologies Used

• HTML5
• CSS3 (with CSS Variables, Animations, and Transitions)
• JavaScript (Vanilla)
  • LocalStorage for theme persistence
  • Media queries for system theme detection
• Google Fonts (Orbitron, Roboto, Pacifico, Montserrat, Open Sans, Cairo, Noto Sans SC, Sarabun)
• Font Awesome Icons
• SVG for background patterns
• Nginx Server-Side Includes (SSI) for partials

🔌 Server-Side Includes (SSI)

This site uses Nginx Server-Side Includes (SSI) to share common code between pages.

• Shared CSS is included in each language page via an SSI directive in the :

<!--# include virtual="/_partials/style.shtml" -->

• Shared JavaScript is included at the end of the body:

<!--# include virtual="/_partials/script.shtml" -->

• Nginx must have SSI enabled for HTML:

ssi on;
ssi_types text/html;

📁 Project Structure

• index.html - Main entry point with language detection and redirection
• index_en.html - English version
• index_ru.html - Russian version
• index_th.html - Thai version
• index_zh.html - Chinese version
• index_es.html - Spanish version
• index_ar.html - Arabic version (with RTL support)
• _partials/style.shtml - Shared stylesheet included in each page via SSI
• _partials/script.shtml - Shared JavaScript included in each page via SSI
• logo-300x300.png - Profile picture
• Various favicon files for different platforms

🌐 Language Support

The website automatically detects the user's browser language and redirects to the appropriate language version. Currently supported languages:

• English (EN)
• Russian (RU)
• Thai (TH)
• Chinese (中文)
• Spanish (ES)
• Arabic (AR)—with Right-to-Left (RTL) support

Users can manually switch between languages using the language switcher in the top-right corner (top-left for Arabic).

🎨 Theme Support

The website features two distinct themes:

1. Dark Theme (Default): A neon retro sci-fi design with:

   • Dark background with grid pattern
   • Neon blue and purple accents
   • Glowing text effects
   • Twinkling star animation

2. Light Theme: A beach-inspired design with:

   • Warm sand background with wave patterns
   • Coral and teal accents
   • Soft shadows and rounded elements
   • Floating beach elements animation

The theme system includes:

• Theme toggle button in the top-left corner
• Theme persistence using localStorage
• System theme preference detection
• Smooth transitions between themes

🚀 Installation and Usage

Local Usage

1. Clone or download this repository
2. Open index.html in your web browser
3. The site will automatically redirect to the appropriate language version based on your browser settings

Note: Opening HTML files directly via file:// will not process SSI directives, so some shared components (like styles and scripts) might not load correctly.

Running Locally with Docker (Recommended)

To see SSI includes (style.shtml and script.shtml) rendered properly, you can spin up the project locally using Docker. This accurately simulates the production Nginx environment.

1. Build the Docker image:

   docker build -t my-website .

2. Run the container, mapping port 80 to your local port 8080:

   docker run -d -p 8080:80 --name my-website-test my-website

3. Open your browser and navigate to http://localhost:8080.

To stop and remove the container when you're done:

docker stop my-website-test
docker rm my-website-test

🚢 Deployment

The project is configured for an automated GitOps deployment using GitHub Actions and Docker Swarm.

Deployment Configuration

• Dockerfile: Packages the website with a lightweight Nginx image and enables SSI.
• nginx.conf: Custom Nginx configuration built into the Docker container.
• .github/workflows/deploy.yml: GitHub Actions workflow that automatically builds the Docker image and pushes it to GitHub Container Registry (GHCR) as ghcr.io/artryazanov/artryazanov-website:latest on every push to the main branch.

Setup for Deployment

1. The GitHub Actions workflow will automatically use the standard GITHUB_TOKEN to push images to the GitHub Container Registry (GHCR). No custom secrets are needed.
2. Committing and pushing changes to the main branch will automatically build and publish the new Docker image.
3. Your external Docker Swarm infrastructure (orchestrator) will automatically detect the new image on GHCR using Shepherd and seamlessly perform a zero-downtime rolling update.

⚙️ Customization

Changing Personal Information

Edit the following sections in each language file:

• Profile picture: Replace logo-300x300.png with your own image
• Name: Update the <h1 class="name"> element
• Bio: Update the <p class="bio"> element
• Social links: Modify the links in the <div class="social-links"> section
• Projects: Edit the project cards in the <div class="projects"> section

Modifying the Design

• Color scheme: Update the CSS variables in the :root selector
• Fonts: Change the Google Fonts import and update the font-family properties
• Background: Modify the SVG pattern in the body::before CSS rule
• Themes: Adjust the theme-specific styles in the CSS

Adding New Languages

To add a new language:

1. Create a copy of index_en.html and name it index_XX.html (where XX is the language code)
2. Update the lang attribute in the <html> tag
3. Translate all text content
4. Add the language to the switcher in all HTML files
5. Update the language detection script in index.html

🙌 Credits

• Fonts: Google Fonts
• Icons: Font Awesome
• Design inspiration: Neon retro sci-fi aesthetics and beach themes

📄 License

© 2025 Artem Ryazanov. All rights reserved.