Персональный веб-сайт Павла Горлова

Минималистичный и производительный персональный веб-сайт/портфолио, разработанный с использованием современных веб-технологий.

О проекте

Это персональный сайт-визитка с поддержкой мультиязычности (русский/английский), темной темы и адаптивного дизайна. Сайт статически генерируется для максимальной производительности и может быть размещен на любом хостинге статических файлов.

Технологический стек

• Astro (v5.8.2) - современный фреймворк для статической генерации сайтов с нулевым JavaScript по умолчанию
• Tailwind CSS (v4.1.8) - utility-first CSS фреймворк для быстрой стилизации
• i18next - мощная система интернационализации для поддержки нескольких языков
• TypeScript - строгая типизация для надежности кода
• Sharp - высокопроизводительная обработка изображений
• pnpm - быстрый и эффективный пакетный менеджер

Основные возможности

• ⚡ Высокая производительность - статическая генерация HTML для мгновенной загрузки
• 🌍 Мультиязычность - полная поддержка русского и английского языков
• 🌓 Темная тема - автоматическое определение системных настроек с возможностью ручного переключения
• 📱 Адаптивный дизайн - отлично выглядит на всех устройствах
• ♿ Доступность - семантический HTML и ARIA атрибуты
• 🎨 Минимализм - чистый и фокусированный на контенте дизайн

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

├── src/
│   ├── assets/
│   │   ├── images/     # Изображения и SVG
│   │   ├── scripts/    # JavaScript скрипты
│   │   └── styles/     # Глобальные стили CSS
│   ├── components/     # Астро компоненты
│   │   ├── LanguageSwitcher.astro
│   │   ├── ThemeSwitcher.astro
│   │   └── Welcome.astro
│   ├── layouts/       # Макеты страниц
│   │   └── Layout.astro
│   └── pages/         # Страницы сайта
│       ├── index.astro    # Главная (EN)
│       ├── cv.astro      # Резюме (EN)
│       └── ru/          # Русская версия
│           ├── index.astro
│           └── cv.astro
├── public/
│   └── locales/      # Файлы переводов
│       ├── en/       # Английские переводы
│       └── ru/       # Русские переводы
├── astro.config.mjs  # Конфигурация Astro
├── tailwind.config.js # Конфигурация Tailwind
└── package.json      # Зависимости проекта

Установка и запуск

Требования

• Node.js 18 или выше
• pnpm 8 или выше

Установка

# Клонирование репозитория
git clone https://github.com/yourusername/gorlov.me.git
cd gorlov.me

# Установка зависимостей
pnpm install

Команды разработки

Команда	Описание
pnpm dev	Запуск локального сервера разработки на localhost:4321
pnpm build	Сборка проекта для продакшена в папку ./dist/
pnpm preview	Предпросмотр собранного сайта локально
pnpm astro ...	Запуск команд Astro CLI

Разработка

Добавление новых страниц

1. Создайте новый .astro файл в src/pages/
2. Добавьте русскую версию в src/pages/ru/
3. Обновите навигацию в src/layouts/Layout.astro
4. Добавьте переводы в public/locales/*/translation.json

Изменение контента

• Персональная информация: Редактируйте файлы переводов в public/locales/
• Страницы: Редактируйте соответствующие .astro файлы в src/pages/
• Стили: Глобальные стили в src/assets/styles/global.css, компонентные стили через Tailwind классы

Настройка темы

Цветовая схема настраивается через CSS переменные в src/assets/styles/global.css:

/* Светлая тема */
--bg-color: #FFFFFF;
--text-color: #000000;
--link-color: #000000;

/* Темная тема */
[data-theme='dark'] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --link-color: #bbbbbb;
}

Деплой

Сайт можно развернуть на любом хостинге статических файлов:

Vercel

# Установка Vercel CLI
pnpm add -g vercel

# Деплой
vercel

Netlify

1. Подключите GitHub репозиторий к Netlify
2. Настройки сборки:
   • Build command: pnpm build
   • Publish directory: dist

GitHub Pages

# Добавьте в package.json
"scripts": {
  "deploy": "pnpm build && gh-pages -d dist"
}

# Деплой
pnpm deploy

Настройка контента

Изменение личной информации

1. Откройте файлы переводов:

   • public/locales/ru/translation.json (русский)
   • public/locales/en/translation.json (английский)

2. Измените необходимые поля:

{
  "name": "Ваше имя",
  "position": "Ваша должность",
  "contacts": {
    "email": "ваш@email.com",
    "linkedin": "ваш-профиль",
    "github": "@вашник"
  }
}

Добавление новых секций

1. Добавьте ключи переводов в JSON файлы
2. Используйте их в компонентах через t('ключ')
3. Стилизуйте с помощью Tailwind классов

Производительность

• Lighthouse Score: 100/100 по всем метрикам
• Размер сборки: < 50KB (без учета шрифтов)
• Время первой отрисовки: < 1 секунда
• Нулевой JavaScript: по умолчанию (кроме интерактивных элементов)

Поддержка браузеров

• Chrome/Edge (последние 2 версии)
• Firefox (последние 2 версии)
• Safari 14+
• Мобильные браузеры iOS/Android

Лицензия

MIT

Контакты

• Email: pavel@gorlov.me
• GitHub: @pgorlov
• LinkedIn: Pavel Gorlov

---

Сделано с минимализмом и вниманием к деталям.