sabirov.tech

Личный сайт-портфолио с системой обратной связи и Telegram-уведомлениями

CI/CD Status

Docker Images

Tech Stack

Frontend

Backend

Infrastructure

Libraries & Tools

Архитектура

┌─────────────────┐      ┌─────────────────┐     ┌─────────────────┐
│                 │      │                 │     │                 │
│   Next.js       │────▶│   FastAPI       │────▶│   Kafka         │
│   Frontend      │      │   Backend       │     │   (shared)      │
│                 │      │                 │     │                 │
└─────────────────┘      └─────────────────┘     └────────┬────────┘
                                │                         │
                                ▼                         ▼
                         ┌─────────────────┐     ┌─────────────────┐
                         │                 │     │                 │
                         │   Redis         │     │   Worker        │
                         │   (rate limit)  │     │   (consumer)    │
                         │                 │     │                 │
                         └─────────────────┘     └────────┬────────┘
                                                          │
                                ┌─────────────────────────┼─────────────────────────┐
                                │                         │                         │
                                ▼                         ▼                         ▼
                         ┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
                         │                 │     │                 │     │                 │
                         │   PostgreSQL    │     │   Telegram Bot  │     │   Email         │
                         │   (storage)     │     │   (webhooks)    │     │   (optional)    │
                         │                 │     │                 │     │                 │
                         └─────────────────┘     └─────────────────┘     └─────────────────┘

Технологии

Frontend

Next.js 14 - React framework с App Router
TypeScript - типизация
Tailwind CSS - стили
Framer Motion 11 - продвинутые анимации (scroll-based, parallax, stagger)
next-intl - полная интернационализация (русский/английский)
- Динамические переводы всех компонентов через useTranslations
- Автоматический роутинг по языкам (/ru, /en)
- SEO-оптимизированные мета-теги для каждого языка
react-parallax-tilt - 3D card эффекты
react-intersection-observer - scroll-triggered анимации

Backend

FastAPI - async Python web framework
aiokafka - Kafka producer/consumer
aiogram 3 - Telegram Bot API
SQLAlchemy 2 - async ORM
Redis - rate limiting

Infrastructure

Kafka KRaft - 3-node cluster (гарантированная доставка, high availability)
PostgreSQL - хранение заявок
Redis Sentinel - кэширование, rate limiting и high availability
Docker - контейнеризация
Traefik - reverse proxy с Let's Encrypt (self-hosted)

Новые возможности ✨

Frontend UX Improvements

🎨 Продвинутые анимации: Scroll-triggered анимации с Framer Motion, parallax эффекты, плавные transitions с сохранением glassmorphism
🌌 Floating Particles: Интерактивная Canvas-анимация с физикой частиц, damping и velocity capping
💎 Glassmorphism Design: Современный liquid glass эффект для всех карточек с backdrop blur, тонкими borders и inner shadows
💳 3D Card Tilt: React-parallax-tilt эффекты с glare, оптимизированные для desktop (отключены на mobile)
🌍 Полная локализация (i18n): Поддержка русского/английского с next-intl - переведены все компоненты, карточки, формы, SEO-теги
⌨️ Interactive Terminal: Терминал с командами, typing эффектом, историей и keyboard shortcut (Ctrl+`)

Backend & Infrastructure

☁️ Внешний Kafka: Миграция на shared Kafka KRaft кластер (3 brokers, replication factor 3)
🔔 Telegram Webhooks: Переход с polling на webhooks для мгновенных уведомлений
🔒 Traefik Integration: Полная интеграция с Traefik для HTTPS и routing

Performance & SEO

⚡ Code Splitting: Dynamic imports для компонентов ниже fold
🖼️ Image Optimization: WebP/AVIF форматы, lazy loading, blur placeholders
📊 SEO Enhancement: Полные metadata, Open Graph, Twitter Cards, JSON-LD structured data
🗺️ Dynamic Sitemap: Автоматическая генерация sitemap для всех языков
🤖 Robots.txt: Правильная конфигурация для поисковых систем

Design & Accessibility

🎨 Glassmorphism UI: Консистентный liquid glass дизайн для карточек с оптимизированной прозрачностью
🌓 Dark/Light Themes: Полная поддержка тёмной и светлой тем с адаптивными цветами
📱 Mobile-First: Адаптивный дизайн с оптимизацией touch targets (44px+)
♿ Accessibility: WCAG-совместимые contrast ratios, keyboard navigation

Структура проекта

PersonalWebsite/
├── .github/
│   ├── workflows/
│   │   ├── frontend-ci.yml      # Frontend CI/CD pipeline
│   │   └── backend-ci.yml       # Backend CI/CD pipeline
│   └── dependabot.yml           # Dependency updates
│
├── frontend/                    # Next.js приложение
│   ├── src/
│   │   ├── app/                 # App Router (pages, layout)
│   │   ├── components/          # React компоненты
│   │   └── hooks/               # Custom hooks
│   ├── __tests__/               # Unit & integration тесты
│   │   ├── components/          # Component tests (Jest + RTL)
│   │   ├── hooks/               # Hook tests
│   │   └── integration/         # Integration tests
│   ├── e2e/                     # E2E тесты (Playwright)
│   ├── public/                  # Static files
│   ├── jest.config.js           # Jest configuration
│   ├── playwright.config.ts     # Playwright configuration
│   ├── package.json
│   └── Dockerfile
│
├── backend/                     # FastAPI приложение
│   ├── app/
│   │   ├── api/                 # REST endpoints
│   │   ├── database/            # SQLAlchemy models & service
│   │   ├── kafka/               # Kafka consumer
│   │   ├── models/              # Pydantic models
│   │   ├── services/            # Business logic
│   │   ├── telegram/            # Telegram bot
│   │   ├── config.py            # Settings
│   │   ├── main.py              # FastAPI app
│   │   └── worker.py            # Kafka worker entry
│   ├── tests/                   # Тесты (pytest)
│   │   ├── unit/                # Unit тесты
│   │   ├── integration/         # Integration тесты
│   │   ├── fixtures/            # Test fixtures
│   │   └── conftest.py          # Pytest configuration
│   ├── pytest.ini               # Pytest settings
│   ├── mypy.ini                 # Type checking
│   ├── pyproject.toml           # Ruff/Black configuration
│   ├── requirements.txt
│   ├── requirements-dev.txt     # Dev dependencies
│   └── Dockerfile
│
├── www/                         # Legacy static site (архив)
│
├── docker-compose.yml           # Local development
├── docker-compose.prod.yml      # Production
└── README.md

Тестирование 🧪

Проект имеет комплексное покрытие тестами для обеспечения качества кода и стабильности.

Frontend Tests

Unit тесты с Jest + React Testing Library:

cd frontend
npm test                   # Запустить тесты
npm run test:watch         # Watch mode
npm run test:coverage      # С coverage

E2E тесты с Playwright:

cd frontend
npm run test:e2e           # Headless mode
npm run test:e2e:ui        # UI mode

Coverage: Компоненты, хуки, интеграционные сценарии

Contact form (валидация, отправка, обработка ошибок)
Navigation (desktop/mobile, theme toggle)
Hero section (анимации, типизация)
Custom hooks (useInView)

Backend Tests

Unit тесты с pytest:

cd backend
pytest                     # Запустить все тесты
pytest tests/unit/         # Только unit тесты
pytest --cov               # С coverage
pytest -v                  # Verbose mode

Покрытие:

✅ API endpoints (contact, health, telegram)
✅ Rate limiter (Redis-based)
✅ Kafka producer
✅ Telegram bot (notifications, commands)
✅ Integration tests (полный flow)

Code Quality Tools:

cd backend
ruff check app/            # Linting
black --check app/         # Formatting check
mypy app/                  # Type checking
bandit -r app/             # Security scan

CI/CD Pipeline

GitHub Actions автоматически запускают:

Frontend CI:

ESLint + TypeScript проверки
Unit тесты с coverage
E2E тесты на Chromium/Firefox/Mobile Safari
Production build
Upload к Codecov

Backend CI:

Ruff linting + Black formatting
mypy type checking
Bandit security scanning
pytest с PostgreSQL + Redis services
Coverage upload к Codecov

Dependabot: Автоматические PR для обновления зависимостей (npm, pip, GitHub Actions)

Быстрый старт

Требования

Docker & Docker Compose
Внешний Kafka KRaft кластер в сети messaging
Внешний Redis Sentinel кластер в сети messaging
(Опционально) Node.js 20+ и Python 3.12+ для локальной разработки без Docker

1. Клонирование

git clone https://github.com/SabirovSR/PersonalWebsite.git
cd PersonalWebsite

2. Подготовка инфраструктуры

Убедитесь, что внешняя инфраструктура запущена:

# Проверьте Docker networks
docker network ls | grep messaging
docker network ls | grep edge

# Запустите Kafka KRaft + Redis Sentinel (если не запущены)
cd c:\infra\messaging
docker-compose up -d

# Проверьте статус
docker ps | grep -E "kafka-controller|redis"

3. Настройка переменных окружения

Создайте .env файл:

cp .env.example .env

Заполните обязательные переменные:

# Environment
ENVIRONMENT=development
DEBUG=true

# Security
PUBLIC_API_KEY=your-secure-random-api-key

# CORS
CORS_ORIGINS=https://sabirov.tech,https://web.sabirov.tech,http://localhost:3000

# Redis Sentinel
REDIS_PASSWORD=redis_secure_password

# Database
POSTGRES_PASSWORD=secure-postgres-password

# Telegram
TELEGRAM_BOT_TOKEN=123456789:ABCdefGHIjklMNOpqrsTUVwxyz
TELEGRAM_OWNER_ID=123456789
TELEGRAM_WEBHOOK_SECRET=random-secret-string
TELEGRAM_WEBHOOK_URL=https://api.sabirov.tech

Генерация секретов:

# API Key и Webhook Secret
openssl rand -base64 32

4. Запуск приложения

# Сборка и запуск всех сервисов
docker-compose up -d --build

# Проверка статуса
docker-compose ps

# Просмотр логов
docker-compose logs -f backend worker

5. Проверка работоспособности

# Health checks
curl http://localhost:8000/api/health
curl http://localhost:8000/api/health/ready
curl http://localhost:8000/api/health/live

# API Docs (только если DEBUG=true)
open http://localhost:8000/docs

# Frontend
open http://localhost:3000/ru
open http://localhost:3000/en

Сервисы будут доступны:

Frontend: http://localhost:3000
Backend API: http://localhost:8000
API Docs: http://localhost:8000/docs (только в dev режиме)

API

POST /api/public/contact

Отправка формы обратной связи.

Headers:

Content-Type: application/json
api-key: {PUBLIC_API_KEY}

Body:

{
  "name": "Иван Иванов",
  "message": "Привет! Хочу обсудить проект...",
  "channels": ["email", "telegram"],
  "contacts": {
    "email": "ivan@example.com",
    "telegram": "@ivan_ivanov"
  }
}

Response:

{
  "status": "queued",
  "message": "Your message has been received. We will contact you soon!",
  "id": "550e8400-e29b-41d4-a716-446655440000"
}

Доступные каналы связи

Channel	Description
telegram	Telegram @username
vk	VK
max	MAX
email	Email адрес
phone	Телефон
website	Личный сайт

Telegram бот

Бот отправляет уведомления только владельцу (по TELEGRAM_OWNER_ID).

Формат уведомления

📬 Новая заявка с сайта!

👤 Имя: Иван Иванов

📝 Сообщение:
Привет! Хочу обсудить проект...

📞 Способы связи:
• 📧 Email: ivan@example.com
• 💬 Telegram: @ivan_ivanov

🕐 17.01.2026 14:32
🌍 IP: 1.2.3.4

Команды бота

/start - Приветствие
/status - Проверка статуса

Kafka

Топики

Topic	Description
sabirov-contact-requests	Заявки с сайта
sabirov-contact-dlq	Dead Letter Queue

Локализация (i18n) 🌍

Проект полностью поддерживает двуязычность (русский/английский) с использованием next-intl.

Поддерживаемые языки

🇷🇺 Русский (/ru) - основной язык
🇬🇧 Английский (/en) - английская версия

Архитектура локализации

frontend/
├── messages/
│   ├── en.json          # Английские переводы
│   └── ru.json          # Русские переводы
├── src/
│   ├── i18n.ts          # Конфигурация next-intl
│   └── middleware.ts    # Автоматический роутинг по языкам

Что локализовано

Переведены все компоненты и контент сайта:

✅ Навигация - меню, переключение языка
✅ Hero секция - приветствие, описание, CTA кнопки
✅ About секция - статистика, терминал, описания
✅ Skills - категории навыков, описания
✅ Experience - карточки опыта работы (должности, компании, описания)
✅ Projects - карточки проектов (названия, подробные описания)
✅ Contact форма - лейблы, плейсхолдеры, validation сообщения, успешные/ошибочные состояния
✅ Footer - копирайт
✅ SEO - мета-теги, Open Graph, JSON-LD для каждого языка

Использование в компонентах

import { useTranslations } from 'next-intl';

export function MyComponent() {
  const t = useTranslations('about');
  
  // Простые строки
  const title = t('title');  // "Кто я такой?" / "Who am I?"
  
  // Массивы и объекты
  const stats = t.raw('stats') as Array<{ number: string; label: string }>;
  
  return (
    <section>
      <h2>{t('title')}</h2>
      {stats.map(stat => (
        <div key={stat.label}>
          {stat.number} {stat.label}
        </div>
      ))}
    </section>
  );
}

Структура файлов переводов

{
  "nav": {
    "about": "About",
    "skills": "Skills"
  },
  "about": {
    "title": "Who am I?",
    "stats": [
      { "number": "3+", "label": "Years of experience" }
    ]
  },
  "experience": {
    "jobs": [
      {
        "title": "Developer",
        "company": "GNIVC",
        "description": "Development and maintenance...",
        "tech": ["C#", ".NET"]
      }
    ]
  }
}

SEO для разных языков

Автоматический роутинг: /ru/, /en/
Мета-теги: <html lang="ru"> / <html lang="en">
hreflang теги: автоматические alternate links
Sitemap: динамическая генерация для обоих языков
Open Graph: локализованные og:title, og:description
JSON-LD: structured data на каждом языке

Особенности реализации

.raw() метод - для получения сложных структур (массивы, объекты)
Type-safe - TypeScript типизация для всех переводов
Server Components - поддержка Server Components в Next.js 14
Fallback - автоматический fallback на русский при отсутствии перевода
URL-based - язык определяется из URL пути

Разработка

Frontend

cd frontend
npm install
npm run dev

Backend

cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt

# API server
uvicorn app.main:app --reload

# Worker (в другом терминале)
python -m app.worker

Переменные окружения

Variable	Description	Required	Default
PUBLIC_API_KEY	API ключ для публичной формы	Yes	-
KAFKA_BOOTSTRAP_SERVERS	Адреса Kafka brokers (KRaft cluster)	Yes	kafka-controller-1:9092,kafka-controller-2:9092,kafka-controller-3:9092
KAFKA_TOPIC	Топик для заявок	No	sabirov-contact-requests
KAFKA_DLQ_TOPIC	Dead Letter Queue топик	No	sabirov-contact-dlq
KAFKA_CONSUMER_GROUP	Consumer group ID	No	contact-processor
POSTGRES_URL	PostgreSQL connection string	Yes	-
REDIS_URL	Redis connection string	Yes	-
TELEGRAM_BOT_TOKEN	Токен Telegram бота	Yes	-
TELEGRAM_OWNER_ID	Твой Telegram ID	Yes	-
TELEGRAM_WEBHOOK_SECRET	Секрет для webhook URL	Yes	-
TELEGRAM_WEBHOOK_URL	Базовый URL для webhook (https://api.sabirov.tech)	Yes	-

Лицензия

MIT License - используй как хочешь!

Автор

Сабиров Савелий Русланович

Website: sabirov.tech
Email: contact@sabirov.tech
Telegram: @savik175
GitHub: @SabirovSR

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
.github		.github
backend		backend
frontend		frontend
.cursor_write_test.txt		.cursor_write_test.txt
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
docker-compose.yml		docker-compose.yml

Folders and files

Latest commit

History

Repository files navigation

sabirov.tech

CI/CD Status

Docker Images

Tech Stack

Frontend

Backend

Infrastructure

Libraries & Tools

Архитектура

Технологии

Frontend

Backend

Infrastructure

Новые возможности ✨

Frontend UX Improvements

Backend & Infrastructure

Performance & SEO

Design & Accessibility

Структура проекта

Тестирование 🧪

Frontend Tests

Backend Tests

CI/CD Pipeline

Быстрый старт

Требования

1. Клонирование

2. Подготовка инфраструктуры

3. Настройка переменных окружения

4. Запуск приложения

5. Проверка работоспособности

API

POST /api/public/contact

Доступные каналы связи

Telegram бот

Формат уведомления

Команды бота

Kafka

Рекомендация по использованию

Топики

Локализация (i18n) 🌍

Поддерживаемые языки

Архитектура локализации

Что локализовано

Использование в компонентах

Структура файлов переводов

SEO для разных языков

Особенности реализации

Разработка

Frontend

Backend

Переменные окружения

Лицензия

Автор

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages