feat: containerize valitovgaziz site, add Dockerfile, nginx proxy, Makefile targets
This commit is contained in:
valitovgaziz
@@ -195,6 +195,28 @@ start_certbot:
|
|||||||
# Полный цикл обновления certbot
|
# Полный цикл обновления certbot
|
||||||
certbot: stop_cerbot git build_certbot start_certbot wat
|
certbot: stop_cerbot git build_certbot start_certbot wat
|
||||||
|
|
||||||
|
# Сборка фронтенда valitovgaziz
|
||||||
|
valitovgaziz_build_spa: git
|
||||||
|
cd valitovgaziz && npm run build
|
||||||
|
|
||||||
|
# Остановка valitovgaziz
|
||||||
|
stop_valitovgaziz:
|
||||||
|
docker compose down valitovgaziz
|
||||||
|
|
||||||
|
# Пересборка valitovgaziz
|
||||||
|
build_valitovgaziz:
|
||||||
|
docker compose build valitovgaziz --no-cache
|
||||||
|
|
||||||
|
# Запуск valitovgaziz
|
||||||
|
start_valitovgaziz:
|
||||||
|
docker compose up valitovgaziz -d
|
||||||
|
|
||||||
|
# Полный цикл обновления valitovgaziz
|
||||||
|
valitovgaziz: stop_valitovgaziz git build_valitovgaziz start_valitovgaziz wn
|
||||||
|
|
||||||
|
# Сборка SPA + полный цикл обновления valitovgaziz
|
||||||
|
vue_site: valitovgaziz_build_spa stop_valitovgaziz build_valitovgaziz start_valitovgaziz wn
|
||||||
|
|
||||||
# Мониторинг состояния контейнеров каждые 2 секунды
|
# Мониторинг состояния контейнеров каждые 2 секунды
|
||||||
wn:
|
wn:
|
||||||
watch -n 2 'docker ps'
|
watch -n 2 'docker ps'
|
||||||
|
|||||||
@@ -44,7 +44,6 @@ services:
|
|||||||
- certbot_www:/var/www/certbot
|
- certbot_www:/var/www/certbot
|
||||||
- ./stubSite:/usr/share/nginx/stub/html
|
- ./stubSite:/usr/share/nginx/stub/html
|
||||||
- ./yalarba/serv_spa/spa/vue/dist:/usr/share/nginx/yalarba/html
|
- ./yalarba/serv_spa/spa/vue/dist:/usr/share/nginx/yalarba/html
|
||||||
- ./valitovgaziz/html:/usr/share/nginx/valitovgaziz/html
|
|
||||||
- ./BB/bbvue/dist:/usr/share/nginx/begushiybashkir/html
|
- ./BB/bbvue/dist:/usr/share/nginx/begushiybashkir/html
|
||||||
- analytics_logs:/var/log/analytics:ro
|
- analytics_logs:/var/log/analytics:ro
|
||||||
networks:
|
networks:
|
||||||
@@ -101,6 +100,19 @@ services:
|
|||||||
retries: 3
|
retries: 3
|
||||||
start_period: 40s
|
start_period: 40s
|
||||||
|
|
||||||
|
# Vue 3 SPA для valitovgaziz.ru
|
||||||
|
valitovgaziz:
|
||||||
|
build:
|
||||||
|
context: ./valitovgaziz
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: valitovgaziz
|
||||||
|
restart: unless-stopped
|
||||||
|
networks:
|
||||||
|
- web-network
|
||||||
|
depends_on:
|
||||||
|
analytics:
|
||||||
|
condition: service_healthy
|
||||||
|
|
||||||
# REST API app on Golang (Gorm, Chi) бизнес логика приложения yalarba.ru. Работает с БД на PostgresQL db:db_tp
|
# REST API app on Golang (Gorm, Chi) бизнес логика приложения yalarba.ru. Работает с БД на PostgresQL db:db_tp
|
||||||
api_tp:
|
api_tp:
|
||||||
build:
|
build:
|
||||||
|
|||||||
@@ -175,48 +175,39 @@ server {
|
|||||||
ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH";
|
ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH";
|
||||||
|
|
||||||
# ============================================
|
# ============================================
|
||||||
# ЛОКАЦИЯ: Статический сайт
|
# ЛОКАЦИЯ: Проксирование к Vue SPA контейнеру
|
||||||
# ============================================
|
# ============================================
|
||||||
location / {
|
location / {
|
||||||
# Статические HTML файлы
|
proxy_pass http://valitovgaziz/;
|
||||||
root /usr/share/nginx/valitovgaziz/html;
|
proxy_set_header Host $host;
|
||||||
index index.html;
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
# Стандартная логика для статических сайтов
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
try_files $uri $uri/ /index.html;
|
proxy_set_header X-Forwarded-Port $server_port;
|
||||||
|
proxy_connect_timeout 600;
|
||||||
|
proxy_send_timeout 600;
|
||||||
|
proxy_read_timeout 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
# ============================================
|
# ============================================
|
||||||
# ЛОКАЦИЯ: API для аналитики
|
# ЛОКАЦИЯ: API для аналитики
|
||||||
# ============================================
|
# ============================================
|
||||||
location /api/ {
|
location /api/ {
|
||||||
# Проксирование на Node.js сервис аналитики
|
|
||||||
proxy_pass http://analytics:3000/;
|
proxy_pass http://analytics:3000/;
|
||||||
|
|
||||||
# Базовые заголовки прокси
|
|
||||||
proxy_set_header Host $host;
|
proxy_set_header Host $host;
|
||||||
proxy_set_header X-Real-IP $remote_addr;
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
proxy_set_header X-Forwarded-Proto $scheme;
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
|
||||||
# ========================================
|
|
||||||
# НАСТРОЙКИ CORS (Cross-Origin Resource Sharing)
|
|
||||||
# ========================================
|
|
||||||
# Разрешаем запросы с ЛЮБОГО домена (*)
|
|
||||||
# Внимание: "*" может быть небезопасно в production
|
|
||||||
add_header Access-Control-Allow-Origin "*" always;
|
add_header Access-Control-Allow-Origin "*" always;
|
||||||
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS" always;
|
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS" always;
|
||||||
add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
|
add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
|
||||||
add_header Access-Control-Allow-Credentials "true" always;
|
add_header Access-Control-Allow-Credentials "true" always;
|
||||||
|
|
||||||
# Обработка предварительных OPTIONS запросов (preflight)
|
|
||||||
# Браузеры отправляют такие запросы перед основными
|
|
||||||
if ($request_method = OPTIONS) {
|
if ($request_method = OPTIONS) {
|
||||||
# 204 - No Content (успешный пустой ответ)
|
|
||||||
return 204;
|
return 204;
|
||||||
}
|
}
|
||||||
|
|
||||||
# Стандартные таймауты для API аналитики
|
|
||||||
proxy_connect_timeout 30s;
|
proxy_connect_timeout 30s;
|
||||||
proxy_send_timeout 30s;
|
proxy_send_timeout 30s;
|
||||||
proxy_read_timeout 30s;
|
proxy_read_timeout 30s;
|
||||||
|
|||||||
@@ -0,0 +1,8 @@
|
|||||||
|
node_modules
|
||||||
|
analytics
|
||||||
|
src
|
||||||
|
package.json
|
||||||
|
package-lock.json
|
||||||
|
jsconfig.json
|
||||||
|
vite.config.js
|
||||||
|
index.html
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
FROM nginx:alpine
|
||||||
|
COPY dist /usr/share/nginx/html
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
# ValitovGaziz - Персональный сайт и портфолио
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div align="center">
|
|
||||||
|
|
||||||
🌐 **Live Demo**: [valitovgaziz.ru](https://valitovgaziz.ru) |
|
|
||||||
💼 **Портфолио** |
|
|
||||||
🚀 **Проекты** |
|
|
||||||
👥 **Команда мечты**
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## 📋 О проекте
|
|
||||||
|
|
||||||
Персональный сайт-портфолио Гализа Валитова - технологического предпринимателя и Fullstack-разработчика. Сайт представляет профессиональный профиль, проекты и возможности для сотрудничества.
|
|
||||||
|
|
||||||
### 🎯 Основные разделы:
|
|
||||||
- **Обо мне** - профессиональный профиль и подход к работе
|
|
||||||
- **Проекты** - текущие и завершенные разработки
|
|
||||||
- **Команда мечты** - приглашение к сотрудничеству
|
|
||||||
- **Yalarba.ru** - флагманский Travel Tech проект
|
|
||||||
- **Навыки** - технический стек и экспертиза
|
|
||||||
- **Опыт работы** - карьерный путь
|
|
||||||
|
|
||||||
## 🛠 Технологический стек
|
|
||||||
|
|
||||||
### Frontend
|
|
||||||
- **HTML5** - семантическая разметка
|
|
||||||
- **CSS3** - кастомные стили и анимации
|
|
||||||
- **JavaScript (ES6+)** - интерактивность и логика
|
|
||||||
- **Vue3.js** - современный фронтенд фреймворк
|
|
||||||
- **Nuxt.js 4** - SSR/SSG приложения
|
|
||||||
|
|
||||||
### Backend (Analytics Server)
|
|
||||||
- **Node.js** - серверная платформа
|
|
||||||
- **Express.js** - веб-фреймворк
|
|
||||||
- **Helmet** - безопасность HTTP заголовков
|
|
||||||
- **CORS** - кросс-доменные запросы
|
|
||||||
- **Compression** - сжатие ответов
|
|
||||||
- **Morgan** - логирование запросов
|
|
||||||
|
|
||||||
### Базы данных и инфраструктура
|
|
||||||
- **PostgreSQL** - реляционная БД
|
|
||||||
- **Docker** - контейнеризация
|
|
||||||
- **Docker Swarm** - оркестрация
|
|
||||||
|
|
||||||
## 🚀 Быстрый старт
|
|
||||||
|
|
||||||
### Предварительные требования
|
|
||||||
- Node.js 18+
|
|
||||||
- npm или yarn
|
|
||||||
- Современный браузер
|
|
||||||
|
|
||||||
### Установка и запуск
|
|
||||||
|
|
||||||
1. **Клонирование репозитория**
|
|
||||||
```bash
|
|
||||||
git clone https://github.com/valitovgaziz/valitovgaziz.ru.git
|
|
||||||
cd valitovgaziz.ru
|
|
||||||
@@ -1,274 +0,0 @@
|
|||||||
# Документация: ValitovGaziz.ru
|
|
||||||
|
|
||||||
## Обзор проекта
|
|
||||||
|
|
||||||
**ValitovGaziz.ru** — это персональный сайт-портфолио Гализа Валитова, технологического предпринимателя и Fullstack-разработчика. Сайт представляет собой профессиональную визитную карточку, демонстрирующую навыки, проекты и возможности для сотрудничества.
|
|
||||||
|
|
||||||
### Основные характеристики
|
|
||||||
- **Современный дизайн** с адаптивной версткой
|
|
||||||
- **Темная/светлая тема** с автоматическим определением системных предпочтений
|
|
||||||
- **Интерактивные элементы** для вовлечения пользователей
|
|
||||||
- **Цифровой фон** с анимациями в стиле "матрицы"
|
|
||||||
- **Полностью статический** (без серверного рендеринга)
|
|
||||||
- **Оптимизирован для SEO** и доступности
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Структура файлов
|
|
||||||
|
|
||||||
```
|
|
||||||
valitovgaziz.ru/
|
|
||||||
├── index.html # Главная страница
|
|
||||||
├── style.css # Основной файл стилей
|
|
||||||
├── scripts.js # Основные скрипты
|
|
||||||
├── darkThemeToggle.js # Переключение темной темы
|
|
||||||
├── digital_background.js # Создание цифрового фона
|
|
||||||
├── analytics.js # Пользовательская аналитика
|
|
||||||
├── README.md # Документация проекта
|
|
||||||
├── images/ # Изображения и иконки
|
|
||||||
│ ├── ValitovGaziz/ # Фотографии
|
|
||||||
│ └── favicon/ # Иконки и логотипы
|
|
||||||
└── style/ # Стилевые файлы
|
|
||||||
├── about.css
|
|
||||||
├── darkTheme.css
|
|
||||||
├── digital_background.css
|
|
||||||
├── footer.css
|
|
||||||
├── hero_section.css
|
|
||||||
├── links_style.css
|
|
||||||
├── repository_section.css
|
|
||||||
├── saveContactsButtonStyle.css
|
|
||||||
├── skill_section.css
|
|
||||||
├── social_link.css
|
|
||||||
└── yalarba_investmen.css
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Структура сайта
|
|
||||||
|
|
||||||
### 1. Hero Section (Заголовок)
|
|
||||||
**Файлы:** `hero_section.css`, `digital_background.css`
|
|
||||||
- Главный заголовок с приветствием
|
|
||||||
- Кнопки действий "Обсудить сотрудничество" и "Написать мне"
|
|
||||||
- Социальные ссылки (Telegram, VK)
|
|
||||||
- Кнопка переключения темы
|
|
||||||
- Анимированный цифровой фон
|
|
||||||
|
|
||||||
### 2. Обо мне (About Section)
|
|
||||||
**Файлы:** `about.css`
|
|
||||||
- Фотография профиля
|
|
||||||
- Описание профессионального подхода
|
|
||||||
- Ключевые компетенции:
|
|
||||||
- Техническое видение
|
|
||||||
- Бизнес-ориентация
|
|
||||||
- Практический подход
|
|
||||||
- Мотивация
|
|
||||||
|
|
||||||
### 3. О репозитории (Repository Section)
|
|
||||||
**Файлы:** `repository_section.css`
|
|
||||||
- Сетка проектов (3 карточки):
|
|
||||||
1. ValitovGaziz.ru
|
|
||||||
2. Yalarba.ru
|
|
||||||
3. BegushiyBashkir.ru
|
|
||||||
- Информация о текущей работе
|
|
||||||
- Ссылки на GitHub и проекты
|
|
||||||
|
|
||||||
### 4. Команда мечты (Team Section)
|
|
||||||
- Приглашение к сотрудничеству
|
|
||||||
- Роли для найма:
|
|
||||||
- Программисты
|
|
||||||
- Дизайнеры
|
|
||||||
- Аналитики
|
|
||||||
- Продавцы-стратеги
|
|
||||||
- Преимущества участия
|
|
||||||
- Кнопка "Присоединиться к команде"
|
|
||||||
|
|
||||||
### 5. Yalarba.ru (Travel Tech Project)
|
|
||||||
**Файлы:** `yalarba_investmen.css`
|
|
||||||
- Описание флагманского проекта
|
|
||||||
- Технологический стек
|
|
||||||
- Статистика и ценностное предложение
|
|
||||||
- Инвестиционные возможности
|
|
||||||
|
|
||||||
### 6. Навыки (Skills Section)
|
|
||||||
**Файлы:** `skill_section.css`
|
|
||||||
- Карточки навыков с уровнями:
|
|
||||||
- Golang (Продвинутый)
|
|
||||||
- JavaScript (Продвинутый)
|
|
||||||
- Vue3 (Средний)
|
|
||||||
- Nuxt (Средний)
|
|
||||||
- PostgreSQL (Средний)
|
|
||||||
- Docker (Средний)
|
|
||||||
- Java (Начинающий)
|
|
||||||
- Spring Framework (Начинающий)
|
|
||||||
|
|
||||||
### 7. Опыт работы и образование
|
|
||||||
- Таймлайн профессионального опыта
|
|
||||||
- Образование и курсы
|
|
||||||
- Языки
|
|
||||||
|
|
||||||
### 8. Контакты
|
|
||||||
**Файлы:** `saveContactsButtonStyle.css`
|
|
||||||
- Контактная информация
|
|
||||||
- Кнопка "Сохранить контакт" (vCard формат)
|
|
||||||
- Социальные сети и мессенджеры
|
|
||||||
|
|
||||||
### 9. Футер
|
|
||||||
**Файлы:** `footer.css`
|
|
||||||
- Технологии
|
|
||||||
- Контакты
|
|
||||||
- Сообщество
|
|
||||||
- Авторские права
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Технические особенности
|
|
||||||
|
|
||||||
### Темная тема
|
|
||||||
**Файлы:** `darkTheme.css`, `darkThemeToggle.js`
|
|
||||||
- Автоматическое определение системных предпочтений
|
|
||||||
- Сохранение выбора в localStorage
|
|
||||||
- Полная поддержка всех элементов интерфейса
|
|
||||||
|
|
||||||
### Цифровой фон
|
|
||||||
**Файлы:** `digital_background.css`, `digital_background.js`
|
|
||||||
- Анимированные двоичные потоки (бинарный дождь)
|
|
||||||
- Плавающие элементы кода
|
|
||||||
- Точки соединений и линии передачи данных
|
|
||||||
- Адаптация под текущую тему
|
|
||||||
|
|
||||||
### Аналитика
|
|
||||||
**Файл:** `analytics.js`
|
|
||||||
- Пользовательская система сбора данных
|
|
||||||
- Отслеживание событий и кликов
|
|
||||||
- Очередь с автосохранением в localStorage
|
|
||||||
- Отправка данных на сервер при возможности
|
|
||||||
- Отслеживание видимости секций
|
|
||||||
|
|
||||||
### Ссылки
|
|
||||||
**Файл:** `links_style.css`
|
|
||||||
- Анимированные внешние ссылки с иконками
|
|
||||||
- Индикация внутренних/внешних ссылок
|
|
||||||
- Адаптация под тему
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Технологический стек
|
|
||||||
|
|
||||||
### Frontend
|
|
||||||
- **HTML5** — семантическая разметка
|
|
||||||
- **CSS3** — Grid, Flexbox, CSS Variables, анимации
|
|
||||||
- **JavaScript (ES6+)** — нативный JS без фреймворков
|
|
||||||
- **CSS Grid Layout** — основная система верстки
|
|
||||||
|
|
||||||
### Особенности CSS
|
|
||||||
- CSS Custom Properties (переменные) для тем
|
|
||||||
- CSS Grid для сложных макетов
|
|
||||||
- CSS Flexbox для простых выравниваний
|
|
||||||
- CSS Animations для интерактивности
|
|
||||||
- Media Queries для адаптивности
|
|
||||||
|
|
||||||
### JavaScript функциональность
|
|
||||||
- Динамическое переключение тем
|
|
||||||
- Создание интерактивного фона
|
|
||||||
- Обработка форм и кнопок
|
|
||||||
- Сохранение контактов в vCard формате
|
|
||||||
- Интеграция с Telegram API
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## SEO и доступность
|
|
||||||
|
|
||||||
### Мета-теги
|
|
||||||
- Полный набор meta-тегов для SEO
|
|
||||||
- Ключевые слова для IT-специалистов и предпринимателей
|
|
||||||
- Атрибуты для доступности (alt, aria)
|
|
||||||
|
|
||||||
### Оптимизация
|
|
||||||
- Ленивая загрузка изображений
|
|
||||||
- Минификация CSS и JS
|
|
||||||
- Оптимизированные шрифты
|
|
||||||
- Быстрая загрузка страницы
|
|
||||||
|
|
||||||
### Адаптивность
|
|
||||||
- Mobile-first подход
|
|
||||||
- 4 точки останова:
|
|
||||||
- < 480px (мобильные)
|
|
||||||
- 480px - 768px (планшеты)
|
|
||||||
- 769px - 1024px (ноутбуки)
|
|
||||||
- > 1024px (десктопы)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Интеграции
|
|
||||||
|
|
||||||
### Telegram
|
|
||||||
- Отправка сообщений через Telegram Bot API
|
|
||||||
- Обработка кнопок "Написать мне"
|
|
||||||
- Форма для отправки предложений
|
|
||||||
|
|
||||||
### vCard
|
|
||||||
- Генерация контактов в формате vCard
|
|
||||||
- Автоматическое скачивание контакта
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Рекомендации по развитию
|
|
||||||
|
|
||||||
### Для добавления нового раздела:
|
|
||||||
1. Создайте HTML структуру в `index.html`
|
|
||||||
2. Добавьте стили в соответствующий CSS файл
|
|
||||||
3. Подключите через `@import` в `style.css`
|
|
||||||
4. Добавьте поддержку темной темы
|
|
||||||
5. Интегрируйте с аналитикой
|
|
||||||
|
|
||||||
### Для модификации существующего:
|
|
||||||
1. Найдите соответствующий CSS файл
|
|
||||||
2. Внесите изменения с учетом адаптивности
|
|
||||||
3. Проверьте поддержку темной темы
|
|
||||||
4. Протестируйте на разных устройствах
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Производительность
|
|
||||||
|
|
||||||
### Рекомендации по оптимизации:
|
|
||||||
1. **Изображения:** Используйте WebP формат с JPEG/PNG fallback
|
|
||||||
2. **Шрифты:** Локальное хранение системных шрифтов
|
|
||||||
3. **JavaScript:** Дефер загрузки скриптов
|
|
||||||
4. **CSS:** Критический CSS в head
|
|
||||||
|
|
||||||
### Мониторинг:
|
|
||||||
- Встроенная аналитика отслеживает загрузку страниц
|
|
||||||
- Google Analytics можно подключить через `analytics.js`
|
|
||||||
- Рекомендуется использовать Lighthouse для аудита
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Поддержка браузеров
|
|
||||||
|
|
||||||
- **Chrome** 60+
|
|
||||||
- **Firefox** 55+
|
|
||||||
- **Safari** 12+
|
|
||||||
- **Edge** 79+
|
|
||||||
- **iOS Safari** 12+
|
|
||||||
- **Android Chrome** 60+
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Лицензия
|
|
||||||
|
|
||||||
Проект распространяется под лицензией MIT. Все изображения и контент защищены авторскими правами Гализа Валитова.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Контакты для поддержки
|
|
||||||
|
|
||||||
- **Телеграм:** [@valitovgaziz](https://t.me/valitovgaziz)
|
|
||||||
- **Email:** valitovgaziz@yandex.ru
|
|
||||||
- **GitHub:** [valitovgaziz](https://github.com/valitovgaziz)
|
|
||||||
- **Сайт:** [valitovgaziz.ru](https://valitovgaziz.ru)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Последнее обновление документации: 2025*
|
|
||||||
@@ -1,270 +0,0 @@
|
|||||||
// analytics.js - собственный счетчик аналитики для браузера
|
|
||||||
class CustomAnalytics {
|
|
||||||
constructor() {
|
|
||||||
this.endpoint = 'https://valitovgaziz.ru/api/analytics'; // Ваш endpoint для сбора данных
|
|
||||||
this.queue = [];
|
|
||||||
this.isOnline = navigator.onLine;
|
|
||||||
this.sessionId = this.getSessionId();
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
init() {
|
|
||||||
// Загружаем сохраненные данные из localStorage
|
|
||||||
this.loadFromStorage();
|
|
||||||
|
|
||||||
// Отслеживание событий
|
|
||||||
this.trackPageView();
|
|
||||||
this.setupEventListeners();
|
|
||||||
|
|
||||||
// Периодическая отправка данных
|
|
||||||
setInterval(() => this.flushQueue(), 30000);
|
|
||||||
|
|
||||||
// Отслеживание онлайн/офлайн статуса
|
|
||||||
window.addEventListener('online', () => {
|
|
||||||
this.isOnline = true;
|
|
||||||
this.flushQueue();
|
|
||||||
});
|
|
||||||
window.addEventListener('offline', () => {
|
|
||||||
this.isOnline = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Отправка данных перед закрытием страницы
|
|
||||||
window.addEventListener('beforeunload', () => {
|
|
||||||
this.trackEvent('page', 'unload');
|
|
||||||
this.flushQueueSync();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
trackPageView() {
|
|
||||||
const data = {
|
|
||||||
type: 'pageview',
|
|
||||||
url: window.location.href,
|
|
||||||
referrer: document.referrer,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
userAgent: navigator.userAgent,
|
|
||||||
screen: `${screen.width}x${screen.height}`,
|
|
||||||
language: navigator.language,
|
|
||||||
sessionId: this.sessionId
|
|
||||||
};
|
|
||||||
this.addToQueue(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
trackEvent(category, action, label = null, value = null) {
|
|
||||||
const data = {
|
|
||||||
type: 'event',
|
|
||||||
category,
|
|
||||||
action,
|
|
||||||
label,
|
|
||||||
value,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
url: window.location.href,
|
|
||||||
sessionId: this.sessionId
|
|
||||||
};
|
|
||||||
this.addToQueue(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
trackClick(element, context = 'unknown') {
|
|
||||||
const data = {
|
|
||||||
type: 'click',
|
|
||||||
element: element.tagName,
|
|
||||||
text: element.textContent?.substring(0, 100),
|
|
||||||
context,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
url: window.location.href,
|
|
||||||
sessionId: this.sessionId
|
|
||||||
};
|
|
||||||
this.addToQueue(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
addToQueue(data) {
|
|
||||||
this.queue.push(data);
|
|
||||||
|
|
||||||
// Сохраняем в localStorage
|
|
||||||
this.saveToStorage();
|
|
||||||
|
|
||||||
// Отправляем сразу если онлайн и очередь большая
|
|
||||||
if (this.isOnline && this.queue.length >= 3) {
|
|
||||||
this.flushQueue();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async flushQueue() {
|
|
||||||
if (!this.isOnline || this.queue.length === 0) return;
|
|
||||||
|
|
||||||
const batch = [...this.queue];
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(this.endpoint, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
events: batch,
|
|
||||||
sessionId: this.sessionId
|
|
||||||
}),
|
|
||||||
keepalive: true // Позволяет отправлять данные даже при закрытии страницы
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
// Удаляем отправленные данные из очереди
|
|
||||||
this.queue = this.queue.filter(item => !batch.includes(item));
|
|
||||||
this.saveToStorage();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log('Analytics offline, storing locally');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
flushQueueSync() {
|
|
||||||
if (this.queue.length === 0) return;
|
|
||||||
|
|
||||||
// Используем sendBeacon для надежной отправки при закрытии страницы
|
|
||||||
const data = JSON.stringify({
|
|
||||||
events: this.queue,
|
|
||||||
sessionId: this.sessionId
|
|
||||||
});
|
|
||||||
|
|
||||||
if (navigator.sendBeacon) {
|
|
||||||
navigator.sendBeacon(this.endpoint, data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getSessionId() {
|
|
||||||
let sessionId = localStorage.getItem('ga_session_id');
|
|
||||||
const now = Date.now();
|
|
||||||
|
|
||||||
if (!sessionId) {
|
|
||||||
sessionId = 'sess_' + now + '_' + Math.random().toString(36).substr(2, 9);
|
|
||||||
localStorage.setItem('ga_session_id', sessionId);
|
|
||||||
localStorage.setItem('ga_session_start', now);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Обновляем время последней активности
|
|
||||||
localStorage.setItem('ga_last_activity', now);
|
|
||||||
|
|
||||||
return sessionId;
|
|
||||||
}
|
|
||||||
|
|
||||||
saveToStorage() {
|
|
||||||
try {
|
|
||||||
localStorage.setItem('ga_queue', JSON.stringify(this.queue));
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Cannot save analytics to localStorage');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
loadFromStorage() {
|
|
||||||
try {
|
|
||||||
const stored = localStorage.getItem('ga_queue');
|
|
||||||
if (stored) {
|
|
||||||
const parsed = JSON.parse(stored);
|
|
||||||
if (Array.isArray(parsed)) {
|
|
||||||
this.queue = parsed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Cannot load analytics from localStorage');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setupEventListeners() {
|
|
||||||
// Отслеживание кликов по кнопкам
|
|
||||||
document.addEventListener('click', (e) => {
|
|
||||||
if (e.target.matches('button, .btn, a[href]')) {
|
|
||||||
const context = e.target.closest('.section') ?
|
|
||||||
e.target.closest('.section').querySelector('h2')?.textContent || 'unknown' :
|
|
||||||
'global';
|
|
||||||
this.trackClick(e.target, context);
|
|
||||||
|
|
||||||
// Специальные события для кнопок сотрудничества
|
|
||||||
if (e.target.textContent.includes('сотрудничество') || e.target.textContent.includes('Написать')) {
|
|
||||||
this.trackEvent('conversion', 'contact_click', e.target.textContent.trim());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Отслеживание отправки форм
|
|
||||||
document.addEventListener('submit', (e) => {
|
|
||||||
this.trackEvent('form', 'submit', e.target.id || 'unknown');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Отслеживание видимости секций
|
|
||||||
this.setupSectionTracking();
|
|
||||||
|
|
||||||
// Отслеживание внешних ссылок
|
|
||||||
document.addEventListener('click', (e) => {
|
|
||||||
const link = e.target.closest('a[href]');
|
|
||||||
if (link && link.hostname !== window.location.hostname) {
|
|
||||||
this.trackEvent('outbound', 'click', link.href);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setupSectionTracking() {
|
|
||||||
const sections = document.querySelectorAll('.section');
|
|
||||||
const observedSections = new Set();
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
|
|
||||||
const sectionId = entry.target.id ||
|
|
||||||
entry.target.querySelector('h2')?.textContent?.substring(0, 50) ||
|
|
||||||
'unknown_section';
|
|
||||||
|
|
||||||
if (!observedSections.has(sectionId)) {
|
|
||||||
observedSections.add(sectionId);
|
|
||||||
this.trackEvent('content', 'section_view', sectionId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, {
|
|
||||||
threshold: [0.5],
|
|
||||||
rootMargin: '0px 0px -10% 0px'
|
|
||||||
});
|
|
||||||
|
|
||||||
sections.forEach(section => {
|
|
||||||
observer.observe(section);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Инициализация при полной загрузке DOM
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
window.analytics = new CustomAnalytics();
|
|
||||||
|
|
||||||
// Глобальные функции для ручного отслеживания
|
|
||||||
window.trackEvent = (category, action, label, value) => {
|
|
||||||
if (window.analytics) {
|
|
||||||
window.analytics.trackEvent(category, action, label, value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Отслеживание специальных событий для вашего сайта
|
|
||||||
const specialButtons = document.querySelectorAll('[onclick*="sendMessageTelegram"]');
|
|
||||||
specialButtons.forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
trackEvent('business', 'telegram_click', btn.textContent.trim());
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Отслеживание просмотра ключевых элементов
|
|
||||||
const keyElements = document.querySelectorAll('.hero, .team-section, .yalarba-section');
|
|
||||||
const elementObserver = new IntersectionObserver((entries) => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
const elementType = entry.target.className.split(' ')[0];
|
|
||||||
trackEvent('engagement', `${elementType}_viewed`);
|
|
||||||
elementObserver.unobserve(entry.target);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, { threshold: 0.3 });
|
|
||||||
|
|
||||||
keyElements.forEach(el => elementObserver.observe(el));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fallback для старых браузеров
|
|
||||||
if (!window.Promise) {
|
|
||||||
console.warn('Custom analytics requires Promise support');
|
|
||||||
window.trackEvent = function () { };
|
|
||||||
}
|
|
||||||
Binary file not shown.
@@ -1,187 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta name="description" content="Блог Валитова Газиза — мысли, проекты, обновления о разработке и предпринимательстве">
|
|
||||||
<link rel="icon" href="./images/favicon/code_orange.png">
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
<title>Блог | ValitovGaziz</title>
|
|
||||||
<style>
|
|
||||||
.blog-container { max-width: 800px; margin: 0 auto; padding: 40px 24px; }
|
|
||||||
.blog-post { margin-bottom: 48px; }
|
|
||||||
.blog-post + .blog-post { padding-top: 48px; border-top: 1px solid var(--border); }
|
|
||||||
.blog-post-header { margin-bottom: 16px; }
|
|
||||||
.blog-post-category { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
|
|
||||||
.blog-post-title { font-size: 1.5rem; font-weight: 700; margin: 6px 0; line-height: 1.3; }
|
|
||||||
.blog-post-meta { font-size: 0.85rem; color: var(--text-secondary); }
|
|
||||||
.blog-post-content { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; }
|
|
||||||
.blog-post-content h3 { font-size: 1.15rem; font-weight: 600; color: var(--text); margin: 24px 0 8px; }
|
|
||||||
.blog-post-content p { margin-bottom: 12px; }
|
|
||||||
.blog-post-content ul, .blog-post-content ol { padding-left: 20px; margin-bottom: 12px; }
|
|
||||||
.blog-post-content li { margin-bottom: 4px; }
|
|
||||||
.blog-post-content blockquote { border-left: 3px solid var(--accent); padding: 12px 20px; margin: 16px 0; background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--text); }
|
|
||||||
.blog-post-content code { background: var(--surface); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; border: 1px solid var(--border); }
|
|
||||||
.blog-post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
|
|
||||||
.blog-tag { font-size: 0.8rem; padding: 3px 10px; border-radius: 12px; background: var(--accent-light); color: var(--accent) !important; font-weight: 500; }
|
|
||||||
.blog-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; font-size: 0.9rem; color: var(--text-secondary) !important; }
|
|
||||||
.blog-back:hover { color: var(--accent) !important; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<div class="nav-inner">
|
|
||||||
<a href="index.html" class="nav-logo">ValitovGaziz</a>
|
|
||||||
<div class="nav-links">
|
|
||||||
<a href="index.html#about">Обо мне</a>
|
|
||||||
<a href="index.html#projects">Проекты</a>
|
|
||||||
<a href="index.html#contact">Контакты</a>
|
|
||||||
<button class="theme-toggle" id="themeToggle" aria-label="Переключить тему">🌙</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="section fade-in">
|
|
||||||
<div class="section-header">
|
|
||||||
<a href="index.html" class="blog-back">← На главную</a>
|
|
||||||
<h2>Блог</h2>
|
|
||||||
<p>Мысли, проекты и обновления</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<main class="blog-container fade-in">
|
|
||||||
<article class="blog-post">
|
|
||||||
<header class="blog-post-header">
|
|
||||||
<span class="blog-post-category">Проекты</span>
|
|
||||||
<h2 class="blog-post-title">Новый этап развития Yalarba.ru</h2>
|
|
||||||
<div class="blog-post-meta">15 марта 2024 · 5 мин чтения</div>
|
|
||||||
</header>
|
|
||||||
<div class="blog-post-content">
|
|
||||||
<p>Сегодня хочу поделиться важным обновлением по проекту Yalarba.ru. Мы завершили переход на новую архитектуру и готовимся к запуску нескольких ключевых функций.</p>
|
|
||||||
<h3>Что изменилось:</h3>
|
|
||||||
<ul>
|
|
||||||
<li>Полностью переработанный интерфейс поиска маршрутов</li>
|
|
||||||
<li>Интеграция с картографическими сервисами</li>
|
|
||||||
<li>Улучшенная система рекомендаций</li>
|
|
||||||
<li>Подготовка к мобильному приложению</li>
|
|
||||||
</ul>
|
|
||||||
<blockquote>«Технологии должны решать реальные проблемы людей, а не создавать новые»</blockquote>
|
|
||||||
<p>В ближайших планах — запуск бета-тестирования новых функций и привлечение первых партнёров из туристической отрасли.</p>
|
|
||||||
</div>
|
|
||||||
<div class="blog-post-tags">
|
|
||||||
<span class="blog-tag">Yalarba</span>
|
|
||||||
<span class="blog-tag">TravelTech</span>
|
|
||||||
<span class="blog-tag">Разработка</span>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="blog-post">
|
|
||||||
<header class="blog-post-header">
|
|
||||||
<span class="blog-post-category">Разработка</span>
|
|
||||||
<h2 class="blog-post-title">Переход с Vue 2 на Vue 3: опыт и выводы</h2>
|
|
||||||
<div class="blog-post-meta">10 марта 2024 · 7 мин чтения</div>
|
|
||||||
</header>
|
|
||||||
<div class="blog-post-content">
|
|
||||||
<p>После нескольких месяцев работы с Vue 3 в продакшене хочу поделиться наблюдениями о переходе с Vue 2.</p>
|
|
||||||
<h3>Основные преимущества:</h3>
|
|
||||||
<ol>
|
|
||||||
<li><strong>Composition API</strong> — действительно улучшает переиспользование кода</li>
|
|
||||||
<li><strong>Улучшенная производительность</strong> — заметный прирост в больших приложениях</li>
|
|
||||||
<li><strong>TypeScript поддержка</strong> — наконец-то полноценная интеграция</li>
|
|
||||||
<li><strong>Меньший размер бандла</strong> — tree-shaking работает лучше</li>
|
|
||||||
</ol>
|
|
||||||
<p>В целом, переход оправдан. Особенно для новых проектов — рекомендую сразу начинать с Vue 3.</p>
|
|
||||||
</div>
|
|
||||||
<div class="blog-post-tags">
|
|
||||||
<span class="blog-tag">Vue3</span>
|
|
||||||
<span class="blog-tag">Frontend</span>
|
|
||||||
<span class="blog-tag">JavaScript</span>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="blog-post">
|
|
||||||
<header class="blog-post-header">
|
|
||||||
<span class="blog-post-category">Мысли</span>
|
|
||||||
<h2 class="blog-post-title">О важности сообщества в разработке</h2>
|
|
||||||
<div class="blog-post-meta">5 марта 2024 · 4 мин чтения</div>
|
|
||||||
</header>
|
|
||||||
<div class="blog-post-content">
|
|
||||||
<p>В последнее время всё чаще задумываюсь о том, насколько важно окружение для профессионального роста. Когда работаешь один, легко застрять в своих паттернах и не замечать новые подходы.</p>
|
|
||||||
<ul>
|
|
||||||
<li><strong>Обратная связь</strong> — свежий взгляд на твои решения</li>
|
|
||||||
<li><strong>Совместное обучение</strong> — каждый знает что-то, чего не знаешь ты</li>
|
|
||||||
<li><strong>Поддержка</strong> — особенно важна в сложные периоды</li>
|
|
||||||
<li><strong>Вдохновение</strong> — видеть успехи других мотивирует</li>
|
|
||||||
</ul>
|
|
||||||
<p>Именно поэтому я решил больше инвестировать в развитие сообщества вокруг своих проектов.</p>
|
|
||||||
</div>
|
|
||||||
<div class="blog-post-tags">
|
|
||||||
<span class="blog-tag">Сообщество</span>
|
|
||||||
<span class="blog-tag">Развитие</span>
|
|
||||||
<span class="blog-tag">IT</span>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="blog-post">
|
|
||||||
<header class="blog-post-header">
|
|
||||||
<span class="blog-post-category">Проекты</span>
|
|
||||||
<h2 class="blog-post-title">EasySite & YalArba: текущее состояние и роадмап</h2>
|
|
||||||
<div class="blog-post-meta">20 марта 2024 · 6 мин чтения</div>
|
|
||||||
</header>
|
|
||||||
<div class="blog-post-content">
|
|
||||||
<p>Мы строим полноценную экосистему для туристического рынка Башкортостана.</p>
|
|
||||||
<h3>Суть проекта сегодня</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>EasySite (B2B)</strong> — конструктор сайтов для владельцев отелей, санаториев, ресторанов</li>
|
|
||||||
<li><strong>YalArba (B2C)</strong> — агрегатор для туристов с поиском, отзывами и системой бронирования</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Что уже работает</h3>
|
|
||||||
<ul>
|
|
||||||
<li>JWT-аутентификация</li>
|
|
||||||
<li>Полностью контейнеризованная инфраструктура (Docker)</li>
|
|
||||||
<li>SSL-шифрование на всех доменах (Let's Encrypt)</li>
|
|
||||||
<li>Базовая аналитика</li>
|
|
||||||
</ul>
|
|
||||||
<p><strong>Бета-версия</strong> уже доступна: <a href="https://easysite102.ru" target="_blank">easysite102.ru</a> и <a href="https://yalarba.ru" target="_blank">yalarba.ru</a>.</p>
|
|
||||||
</div>
|
|
||||||
<div class="blog-post-tags">
|
|
||||||
<span class="blog-tag">EasySite</span>
|
|
||||||
<span class="blog-tag">YalArba</span>
|
|
||||||
<span class="blog-tag">Туризм</span>
|
|
||||||
<span class="blog-tag">Стартап</span>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="blog-post">
|
|
||||||
<header class="blog-post-header">
|
|
||||||
<span class="blog-post-category">Мысли</span>
|
|
||||||
<h2 class="blog-post-title">Зачем я создаю YalArba: история и миссия</h2>
|
|
||||||
<div class="blog-post-meta">25 марта 2024 · 8 мин чтения</div>
|
|
||||||
</header>
|
|
||||||
<div class="blog-post-content">
|
|
||||||
<p>Эта история началась в 2017 году, когда я работал на заводе и параллельно учился. Зимой захотелось отдохнуть — съездить куда-нибудь на машине. Я полез в интернет искать информацию — и ни на одном сайте не смог найти маршрут или место, куда можно сходить бесплатно.</p>
|
|
||||||
<blockquote>«После этого случая мне сильно захотелось создать приложение, которое приводило бы людей к простому и быстрому решению по отдыху.»</blockquote>
|
|
||||||
<p>Большая часть услуг будет бесплатной. Я сам работал на заводе и знаю, как важно иметь доступную альтернативу отдыха. Сейчас я надеюсь, что смогу предоставить эту альтернативу — не только для жителей Башкортостана, но и для туристов из других регионов и стран.</p>
|
|
||||||
<h3>Бизнес-модель</h3>
|
|
||||||
<p>Основная ценность — в количестве пользователей. Приложение должно делать за пользователя часть работы по поиску, подбору и выбору маршрутов отдыха.</p>
|
|
||||||
</div>
|
|
||||||
<div class="blog-post-tags">
|
|
||||||
<span class="blog-tag">История</span>
|
|
||||||
<span class="blog-tag">Миссия</span>
|
|
||||||
<span class="blog-tag">Социальный проект</span>
|
|
||||||
<span class="blog-tag">Туризм</span>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<div class="footer-inner">
|
|
||||||
<p>Уфа · Ufa · Өфө</p>
|
|
||||||
<p style="margin-top: 4px;">© 2025 Valitov Gaziz</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script src="scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
function toggleTheme() {
|
|
||||||
document.body.classList.toggle('dark-mode');
|
|
||||||
const btn = document.querySelector('.theme-toggle');
|
|
||||||
|
|
||||||
if (document.body.classList.contains('dark-mode')) {
|
|
||||||
btn.textContent = '☀️ Светлая тема';
|
|
||||||
localStorage.setItem('theme', 'dark');
|
|
||||||
} else {
|
|
||||||
btn.textContent = '🌙 Темная тема';
|
|
||||||
localStorage.setItem('theme', 'light');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Загрузка темы при загрузке страницы
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const savedTheme = localStorage.getItem('theme');
|
|
||||||
const btn = document.querySelector('.theme-toggle');
|
|
||||||
|
|
||||||
if (savedTheme === 'dark') {
|
|
||||||
document.body.classList.add('dark-mode');
|
|
||||||
btn.textContent = '☀️ Светлая тема';
|
|
||||||
} else {
|
|
||||||
btn.textContent = '🌙 Темная тема';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,174 +0,0 @@
|
|||||||
// Digital Background Initialization
|
|
||||||
// Обновляем функцию для интеграции с темной темой
|
|
||||||
function updateBackgroundForTheme() {
|
|
||||||
const isDarkMode = document.body.classList.contains('dark-mode');
|
|
||||||
const binaryDigits = document.querySelectorAll('.binary-digit');
|
|
||||||
const floatingCode = document.querySelectorAll('.floating-code');
|
|
||||||
const connectionNodes = document.querySelectorAll('.connection-node');
|
|
||||||
const dataFlows = document.querySelectorAll('.data-flow');
|
|
||||||
|
|
||||||
// Обновляем цвета элементов в реальном времени
|
|
||||||
const accentColor = isDarkMode ? 'rgba(41, 128, 185, 0.8)' : 'rgba(0, 123, 255, 0.8)';
|
|
||||||
|
|
||||||
binaryDigits.forEach(digit => {
|
|
||||||
digit.style.color = accentColor;
|
|
||||||
});
|
|
||||||
|
|
||||||
floatingCode.forEach(code => {
|
|
||||||
code.style.color = accentColor;
|
|
||||||
});
|
|
||||||
|
|
||||||
connectionNodes.forEach(node => {
|
|
||||||
node.style.background = accentColor;
|
|
||||||
});
|
|
||||||
|
|
||||||
dataFlows.forEach(flow => {
|
|
||||||
flow.style.background = `linear-gradient(90deg, transparent, ${accentColor}, transparent)`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create binary rain effect
|
|
||||||
function createBinaryRain() {
|
|
||||||
const container = document.createElement('div');
|
|
||||||
container.className = 'binary-rain';
|
|
||||||
document.body.appendChild(container);
|
|
||||||
|
|
||||||
// Создаем больше потоков для полного покрытия
|
|
||||||
for (let i = 0; i < 15; i++) { // Увеличиваем количество потоков
|
|
||||||
setTimeout(() => {
|
|
||||||
createBinaryStream(container);
|
|
||||||
}, i * 150);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createBinaryStream(container) {
|
|
||||||
const stream = document.createElement('div');
|
|
||||||
stream.className = 'binary-stream';
|
|
||||||
// Распределяем потоки по всей ширине экрана
|
|
||||||
const left = Math.random() * 100;
|
|
||||||
stream.style.left = `${left}%`;
|
|
||||||
stream.style.position = 'absolute';
|
|
||||||
stream.style.width = 'auto';
|
|
||||||
|
|
||||||
// Создаем больше цифр в каждом потоке
|
|
||||||
for (let i = 0; i < 15; i++) {
|
|
||||||
const digit = document.createElement('div');
|
|
||||||
digit.className = 'binary-digit';
|
|
||||||
digit.textContent = Math.random() > 0.5 ? '1' : '0';
|
|
||||||
digit.style.position = 'absolute';
|
|
||||||
digit.style.left = '0';
|
|
||||||
digit.style.top = `${-i * 50}px`; // Увеличиваем расстояние между цифрами
|
|
||||||
digit.style.animationDuration = `${2 + Math.random() * 3}s`; // Быстрее анимация
|
|
||||||
digit.style.animationDelay = `${i * 0.15}s`;
|
|
||||||
digit.style.opacity = `${0.3 + Math.random() * 0.7}`; // Разная прозрачность
|
|
||||||
digit.style.fontSize = `${12 + Math.random() * 8}px`; // Разный размер шрифта
|
|
||||||
stream.appendChild(digit);
|
|
||||||
}
|
|
||||||
|
|
||||||
container.appendChild(stream);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create floating code elements
|
|
||||||
function createFloatingCode() {
|
|
||||||
const symbols = ['{', '}', '<>', '();', '[]', '</>', '=>', '&&', 'function', 'const', 'let', 'var', 'class', 'import', 'export', 'return'];
|
|
||||||
const classes = ['code-bracket', 'code-parenthesis', 'code-brace', 'code-tag'];
|
|
||||||
|
|
||||||
// Создаем больше плавающих элементов
|
|
||||||
for (let i = 0; i < 25; i++) {
|
|
||||||
const symbol = symbols[Math.floor(Math.random() * symbols.length)];
|
|
||||||
const element = document.createElement('div');
|
|
||||||
element.className = `floating-code ${classes[Math.floor(Math.random() * classes.length)]}`;
|
|
||||||
element.textContent = symbol;
|
|
||||||
element.style.left = `${Math.random() * 100}%`;
|
|
||||||
element.style.top = `${Math.random() * 100}%`;
|
|
||||||
element.style.animationDuration = `${20 + Math.random() * 20}s`;
|
|
||||||
element.style.fontSize = `${10 + Math.random() * 6}px`;
|
|
||||||
element.style.opacity = `${0.05 + Math.random() * 0.1}`;
|
|
||||||
document.body.appendChild(element);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create connection nodes
|
|
||||||
function createConnectionNodes() {
|
|
||||||
for (let i = 0; i < 20; i++) {
|
|
||||||
const node = document.createElement('div');
|
|
||||||
node.className = 'connection-node';
|
|
||||||
node.style.left = `${Math.random() * 100}%`;
|
|
||||||
node.style.top = `${Math.random() * 100}%`;
|
|
||||||
node.style.animationDelay = `${Math.random() * 4}s`;
|
|
||||||
node.style.width = `${4 + Math.random() * 6}px`;
|
|
||||||
node.style.height = node.style.width;
|
|
||||||
document.body.appendChild(node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create data flow lines
|
|
||||||
function createDataFlows() {
|
|
||||||
for (let i = 0; i < 12; i++) {
|
|
||||||
const flow = document.createElement('div');
|
|
||||||
flow.className = 'data-flow';
|
|
||||||
flow.style.top = `${Math.random() * 100}%`;
|
|
||||||
flow.style.width = `${40 + Math.random() * 50}%`;
|
|
||||||
flow.style.left = `${-Math.random() * 30}%`;
|
|
||||||
flow.style.animationDuration = `${5 + Math.random() * 10}s`;
|
|
||||||
flow.style.animationDelay = `${Math.random() * 8}s`;
|
|
||||||
flow.style.height = `${1 + Math.random() * 2}px`;
|
|
||||||
document.body.appendChild(flow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize digital background with theme integration
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
// Сначала создаем элементы
|
|
||||||
createBinaryRain();
|
|
||||||
createFloatingCode();
|
|
||||||
createConnectionNodes();
|
|
||||||
createDataFlows();
|
|
||||||
|
|
||||||
// Затем настраиваем наблюдение за темой
|
|
||||||
const observer = new MutationObserver(function(mutations) {
|
|
||||||
mutations.forEach(function(mutation) {
|
|
||||||
if (mutation.attributeName === 'class') {
|
|
||||||
setTimeout(updateBackgroundForTheme, 100); // Небольшая задержка для применения стилей
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
observer.observe(document.body, {
|
|
||||||
attributes: true,
|
|
||||||
attributeFilter: ['class']
|
|
||||||
});
|
|
||||||
|
|
||||||
// Инициализируем цвета при загрузке
|
|
||||||
setTimeout(updateBackgroundForTheme, 500);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Также обновляем тему при переключении
|
|
||||||
function toggleTheme() {
|
|
||||||
document.body.classList.toggle('dark-mode');
|
|
||||||
const btn = document.querySelector('.theme-toggle');
|
|
||||||
|
|
||||||
if (document.body.classList.contains('dark-mode')) {
|
|
||||||
btn.textContent = '☀️ Светлая тема';
|
|
||||||
localStorage.setItem('theme', 'dark');
|
|
||||||
} else {
|
|
||||||
btn.textContent = '🌙 Темная тема';
|
|
||||||
localStorage.setItem('theme', 'light');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Обновляем фон после переключения темы
|
|
||||||
setTimeout(updateBackgroundForTheme, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Загрузка темы при загрузке страницы
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const savedTheme = localStorage.getItem('theme');
|
|
||||||
const btn = document.querySelector('.theme-toggle');
|
|
||||||
|
|
||||||
if (savedTheme === 'dark') {
|
|
||||||
document.body.classList.add('dark-mode');
|
|
||||||
btn.textContent = '☀️ Светлая тема';
|
|
||||||
} else {
|
|
||||||
btn.textContent = '🌙 Темная тема';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 MiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-telegram"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" /></svg>
|
|
||||||
|
Before Width: | Height: | Size: 364 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-vk"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 0a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" /></svg>
|
|
||||||
|
Before Width: | Height: | Size: 538 B |
Binary file not shown.
|
Before Width: | Height: | Size: 329 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,201 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta name="description" content="Валитов Газиз — Технологический предприниматель и Fullstack-разработчик. Создаю цифровые решения для туризма.">
|
|
||||||
<link rel="icon" href="./images/favicon/code_orange.png">
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
<title>ValitovGaziz — Предприниматель · Fullstack-разработчик</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<div class="nav-inner">
|
|
||||||
<a href="#" class="nav-logo">ValitovGaziz</a>
|
|
||||||
<div class="nav-links">
|
|
||||||
<a href="#about" class="nav-desktop">Обо мне</a>
|
|
||||||
<a href="#projects" class="nav-desktop">Проекты</a>
|
|
||||||
<a href="#experience" class="nav-desktop">Опыт</a>
|
|
||||||
<a href="#skills" class="nav-desktop">Навыки</a>
|
|
||||||
<a href="#contact" class="nav-desktop">Контакты</a>
|
|
||||||
<a href="blog.html">Блог</a>
|
|
||||||
<button class="theme-toggle" id="themeToggle" aria-label="Переключить тему">🌙</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<section class="hero fade-in">
|
|
||||||
<div class="hero-content">
|
|
||||||
<h1>Валитов Газиз</h1>
|
|
||||||
<p class="hero-subtitle">Технологический предприниматель & Fullstack-разработчик</p>
|
|
||||||
<p class="hero-description">
|
|
||||||
Создаю цифровые решения для отдыха. Развиваю проект
|
|
||||||
<strong>Yalarba.ru</strong> — платформу, которая меняет подход к путешествиям по Башкортостану.
|
|
||||||
</p>
|
|
||||||
<div class="hero-buttons">
|
|
||||||
<a href="https://t.me/valitovgaziz" target="_blank" class="btn btn-primary">Написать в Telegram</a>
|
|
||||||
<a href="blog.html" class="btn btn-outline">Читать блог</a>
|
|
||||||
</div>
|
|
||||||
<div class="social-links">
|
|
||||||
<a href="https://t.me/valitovgaziz" target="_blank">Telegram</a>
|
|
||||||
<a href="https://vk.com" target="_blank">VK</a>
|
|
||||||
<a href="mailto:valitovgaziz@yandex.ru">Email</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="hero-photo">
|
|
||||||
<img src="./images/ValitovGaziz/valitovgaziz3.jpg" alt="Валитов Газиз" loading="lazy">
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="about" class="section fade-in">
|
|
||||||
<div class="section-header">
|
|
||||||
<h2>Обо мне</h2>
|
|
||||||
</div>
|
|
||||||
<div class="about-grid">
|
|
||||||
<img src="./images/ValitovGaziz/valitovgaziz3.jpg" alt="Валитов Газиз" class="about-photo" loading="lazy">
|
|
||||||
<div class="about-text">
|
|
||||||
<p>
|
|
||||||
Родился в г. Кумертау в 1985 году. После школы окончил УГАТУ, отслужил в армии, работал на производстве.
|
|
||||||
С 2015 года погрузился в IT — прошёл путь от техника до основателя собственного технологического проекта.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<a href="resume/resume.html">Полное резюме →</a>
|
|
||||||
</p>
|
|
||||||
<div class="about-highlights">
|
|
||||||
<div class="highlight">
|
|
||||||
<h4>Техническое видение</h4>
|
|
||||||
<p>Создаю архитектуру, которая масштабируется и адаптируется под растущие потребности бизнеса.</p>
|
|
||||||
</div>
|
|
||||||
<div class="highlight">
|
|
||||||
<h4>Бизнес-ориентация</h4>
|
|
||||||
<p>Фокусируюсь на создании ценности для пользователей и устойчивых бизнес-моделях.</p>
|
|
||||||
</div>
|
|
||||||
<div class="highlight">
|
|
||||||
<h4>Практический подход</h4>
|
|
||||||
<p>От прототипа к продукту: быстрое тестирование гипотез и итерационная разработка.</p>
|
|
||||||
</div>
|
|
||||||
<div class="highlight">
|
|
||||||
<h4>Мотивация</h4>
|
|
||||||
<p>Процесс создания проекта с большой пользой для многих людей — то, что даёт энергию для ежедневного роста.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="projects" class="section fade-in">
|
|
||||||
<div class="section-header">
|
|
||||||
<h2>Проекты</h2>
|
|
||||||
<p>Над чем я работаю сейчас</p>
|
|
||||||
</div>
|
|
||||||
<div class="projects-grid">
|
|
||||||
<div class="project-card">
|
|
||||||
<h3>🏞️ Yalarba.ru</h3>
|
|
||||||
<p>Платформа для туризма по Башкортостану. Помогает путешественникам открывать новые места и планировать маршруты.</p>
|
|
||||||
</div>
|
|
||||||
<div class="project-card">
|
|
||||||
<h3>🌐 EasySite102.ru</h3>
|
|
||||||
<p>Конструктор сайтов для туристических объектов. Часть экосистемы YalArba для владельцев отелей, санаториев и ресторанов.</p>
|
|
||||||
</div>
|
|
||||||
<div class="project-card">
|
|
||||||
<h3>🏃♂️ BegushiyBashkir.ru</h3>
|
|
||||||
<p>Сайт бегового клуба «Бегущий Башкир», основанного другом <a href="https://t.me/zagir_aminev">Аминевым Загиром</a>.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="experience" class="section fade-in">
|
|
||||||
<div class="section-header">
|
|
||||||
<h2>Опыт работы</h2>
|
|
||||||
</div>
|
|
||||||
<div class="timeline">
|
|
||||||
<div class="timeline-item">
|
|
||||||
<h3>Основатель и Tech Lead — Yalarba.ru</h3>
|
|
||||||
<p class="period">2020 — настоящее время</p>
|
|
||||||
<ul>
|
|
||||||
<li>Разработка архитектуры микросервисов на Go + Nuxt.js 4</li>
|
|
||||||
<li>Проектирование и оптимизация PostgreSQL</li>
|
|
||||||
<li>Внедрение Docker-контейнеризации</li>
|
|
||||||
<li>Управление продуктом и планирование развития</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="timeline-item">
|
|
||||||
<h3>Fullstack-разработчик (Проектная работа)</h3>
|
|
||||||
<p class="period">2017 — настоящее время</p>
|
|
||||||
<ul>
|
|
||||||
<li>Разработка REST API на Go (GORM, Chi), PostgreSQL</li>
|
|
||||||
<li>Создание фронтенда на Nuxt.js 4, Vue 3</li>
|
|
||||||
<li>Разработка лендингов и сайтов-визиток</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="education" class="section fade-in">
|
|
||||||
<div class="section-header">
|
|
||||||
<h2>Образование</h2>
|
|
||||||
</div>
|
|
||||||
<div class="edu-list">
|
|
||||||
<div class="edu-item">
|
|
||||||
<h4>МТИ — Московский технологический институт</h4>
|
|
||||||
<p class="meta">Разработка программного обеспечения · 2025 — н.в.</p>
|
|
||||||
</div>
|
|
||||||
<div class="edu-item">
|
|
||||||
<h4>Университет Иннополис</h4>
|
|
||||||
<p class="meta">Java Enterprise developer · 2021</p>
|
|
||||||
</div>
|
|
||||||
<div class="edu-item">
|
|
||||||
<h4>УКСиВТ — Уфимский колледж статистики и информатики</h4>
|
|
||||||
<p class="meta">Техник по информационным системам · 2016–2020</p>
|
|
||||||
</div>
|
|
||||||
<div class="edu-item">
|
|
||||||
<h4>УГАТУ</h4>
|
|
||||||
<p class="meta">Сварочное производство · 2002–2005</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="skills" class="section fade-in">
|
|
||||||
<div class="section-header">
|
|
||||||
<h2>Навыки</h2>
|
|
||||||
</div>
|
|
||||||
<div class="skills-grid">
|
|
||||||
<span class="skill-badge">Golang <span class="skill-level skill-advanced">Advanced</span></span>
|
|
||||||
<span class="skill-badge">JavaScript <span class="skill-level skill-advanced">Advanced</span></span>
|
|
||||||
<span class="skill-badge">Vue 3 <span class="skill-level skill-intermediate">Intermediate</span></span>
|
|
||||||
<span class="skill-badge">Nuxt.js <span class="skill-level skill-intermediate">Intermediate</span></span>
|
|
||||||
<span class="skill-badge">PostgreSQL <span class="skill-level skill-intermediate">Intermediate</span></span>
|
|
||||||
<span class="skill-badge">Docker <span class="skill-level skill-intermediate">Intermediate</span></span>
|
|
||||||
<span class="skill-badge">Java <span class="skill-level skill-beginner">Beginner</span></span>
|
|
||||||
<span class="skill-badge">Spring Framework <span class="skill-level skill-beginner">Beginner</span></span>
|
|
||||||
<span class="skill-badge">Go (Chi, GORM)</span>
|
|
||||||
<span class="skill-badge">REST API</span>
|
|
||||||
<span class="skill-badge">Nginx</span>
|
|
||||||
<span class="skill-badge">Linux</span>
|
|
||||||
<span class="skill-badge">Git</span>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="contact" class="section fade-in">
|
|
||||||
<div class="section-header">
|
|
||||||
<h2>Контакты</h2>
|
|
||||||
<p>Всегда рад новым знакомствам и интересным предложениям</p>
|
|
||||||
</div>
|
|
||||||
<div class="contact-grid">
|
|
||||||
<a href="https://t.me/valitovgaziz" target="_blank" class="contact-link">Telegram: @valitovgaziz</a>
|
|
||||||
<a href="mailto:valitovgaziz@yandex.ru" class="contact-link">valitovgaziz@yandex.ru</a>
|
|
||||||
<a href="tel:+79625439343" class="contact-link">+7 (962) 543-93-43</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<div class="footer-inner">
|
|
||||||
<p>Уфа · Ufa · Өфө</p>
|
|
||||||
<p style="margin-top: 4px;">© 2025 Valitov Gaziz</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script src="scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,261 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="./style/main.css" />
|
|
||||||
<title>Валитов Газиз Камилевич · Резюме</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="resume-card">
|
|
||||||
<!-- header -->
|
|
||||||
<div class="header">
|
|
||||||
<h1 class="name">Валитов Газиз Камилевич</h1>
|
|
||||||
<div class="subhead">
|
|
||||||
<span class="subhead-item"><i>📅</i> 40 лет (27.10.1985)</span>
|
|
||||||
<span class="subhead-item"><i>📍</i> Уфа, готов к переезду/командировкам</span>
|
|
||||||
<span class="subhead-item"><i>📞</i> <a href="tel:+79625439343">+7 (962) 5439343</a></span>
|
|
||||||
<span class="subhead-item"><i>✉️</i> <a
|
|
||||||
href="mailto:valitovgaziz@gmail.com">valitovgaziz@yandex.ru</a></span>
|
|
||||||
<span class="subhead-item"><i>📱</i> telegram: @valitovgaziz</span>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 0.5rem;">
|
|
||||||
<span class="badge">гражданство РФ</span>
|
|
||||||
<span class="badge">разрешение на работу РФ</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="job-title">Программист / Руководитель проектов</div>
|
|
||||||
|
|
||||||
<div class="specialization-block">
|
|
||||||
<span>Специализации:</span>
|
|
||||||
<div class="spec-list">
|
|
||||||
<div class="spec-item">Руководитель проектов</div>
|
|
||||||
<div class="spec-item">CIO (Директор по ИТ)</div>
|
|
||||||
<div class="spec-item">Программист-разработчик</div>
|
|
||||||
<div class="spec-item">Руководитель группы разработки</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem;">
|
|
||||||
<span>✅ Полная занятость / частичная / проектная</span>
|
|
||||||
<span>✅ Полный день / сменный / гибкий / удалёнка</span>
|
|
||||||
<span>🚌 Время в пути до 1 часа</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- main two column -->
|
|
||||||
<div class="grid-2">
|
|
||||||
<!-- left column: skills, languages, образование, водительские -->
|
|
||||||
<div class="sidebar">
|
|
||||||
<!-- Ключевые навыки (из списка) -->
|
|
||||||
<div class="section-title">Ключевые навыки</div>
|
|
||||||
<div class="skill-tags">
|
|
||||||
<span class="skill-tag">Английский B2</span><span class="skill-tag">Linux</span><span
|
|
||||||
class="skill-tag">Adobe Photoshop</span>
|
|
||||||
<span class="skill-tag">CorelDRAW</span><span class="skill-tag">C</span><span
|
|
||||||
class="skill-tag">Figma</span>
|
|
||||||
<span class="skill-tag">Git</span><span class="skill-tag">SQL</span><span
|
|
||||||
class="skill-tag">Agile</span>
|
|
||||||
<span class="skill-tag">Java</span><span class="skill-tag">ООП</span><span
|
|
||||||
class="skill-tag">Управление персоналом</span>
|
|
||||||
<span class="skill-tag">Atlassian Jira</span><span class="skill-tag">Spring Framework</span><span
|
|
||||||
class="skill-tag">JUnit</span>
|
|
||||||
<span class="skill-tag">PostgreSQL</span><span class="skill-tag">XPath</span><span
|
|
||||||
class="skill-tag">Go</span>
|
|
||||||
<span class="skill-tag">Intellij IDEA</span><span class="skill-tag">Spring MVC</span><span
|
|
||||||
class="skill-tag">MySQL</span>
|
|
||||||
<span class="skill-tag">Internet Marketing</span><span class="skill-tag">Грамотная речь</span>
|
|
||||||
<span class="skill-tag">Организаторские навыки</span><span class="skill-tag">Обучение
|
|
||||||
персонала</span>
|
|
||||||
<span class="skill-tag">Разработка ПО</span><span class="skill-tag">Agile Project Management</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Знание языков -->
|
|
||||||
<div class="section-title">Языки</div>
|
|
||||||
<div class="lang-item">
|
|
||||||
<span class="lang-name">Башкирский</span>
|
|
||||||
<span class="lang-level">родной</span>
|
|
||||||
</div>
|
|
||||||
<div class="lang-item">
|
|
||||||
<span class="lang-name">Русский</span>
|
|
||||||
<span class="lang-level">C1 —
|
|
||||||
продвинутый</span>
|
|
||||||
</div>
|
|
||||||
<div class="lang-item">
|
|
||||||
<span class="lang-name">Английский</span>
|
|
||||||
<span class="lang-level">B1 - средний</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Образование -->
|
|
||||||
<div class="section-title">Образование</div>
|
|
||||||
<div style="margin-bottom: 1rem;">
|
|
||||||
<div><strong style="color: #0b3b5c;">2020 · УКСИВТ</strong> — техник по информационным системам
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 0.5rem;"><strong style="color: #0b3b5c;">2004 · УГАТУ</strong> —
|
|
||||||
Автоматизация технологических систем, сварочное производство (неоконч. высшее)</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- курсы, повышение квалификации -->
|
|
||||||
<div class="section-title">Повышение квалификации</div>
|
|
||||||
<ul style="list-style-type: none; padding-left: 0;">
|
|
||||||
<li style="margin-bottom: 0.5rem;">🔹 <strong>2024</strong> Skillbox — Эффективный руководитель
|
|
||||||
(управление проектами)</li>
|
|
||||||
<li style="margin-bottom: 0.5rem;">🔹 <strong>2022</strong> JetBrains Academy — Java FullStack
|
|
||||||
Developer</li>
|
|
||||||
<li style="margin-bottom: 0.5rem;">🔹 <strong>2021</strong> Университет Иннополис — java-программист
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 0.5rem;">🔹 <strong>2020</strong> Нетология — Управление по Agile: Scrum,
|
|
||||||
Kanban, Lean</li>
|
|
||||||
<li style="margin-bottom: 0.5rem;">🔹 <strong>2019</strong> Frog-school — English Intermediate</li>
|
|
||||||
<li style="margin-bottom: 0.5rem;">🔹 <strong>2019</strong> Школа студия телерадио (ГУП ТРК
|
|
||||||
"Башкортостан") — телерадиоведущий</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- правый столбец: опыт работы и обо мне -->
|
|
||||||
<div class="main-content">
|
|
||||||
<!-- Опыт работы 12 лет 1 месяц -->
|
|
||||||
<div class="section-title">Опыт работы — 12 лет 1 месяц</div>
|
|
||||||
<!-- Август 2023 — Март 2024 -->
|
|
||||||
<div class="job-entry">
|
|
||||||
<div class="job-header">
|
|
||||||
<span class="job-company">ООО "ИКЦ Ял Арба"</span>
|
|
||||||
<span class="job-period">Ноябрь 2022 — настоящее время (30 мес)</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-position">Директор</div>
|
|
||||||
<div class="job-desc">Наем персонала, руководитель группы разработки, маркетинг, продажи,
|
|
||||||
разрбаотка, написание кода.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Август 2021 — Октябрь 2021 -->
|
|
||||||
<div class="job-entry">
|
|
||||||
<div class="job-header">
|
|
||||||
<span class="job-company">ИП Сафаров Я.Р., Уфа</span>
|
|
||||||
<span class="job-period">Авг 2021 — Окт 2021 (3 мес)</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-position">Программист 1С</div>
|
|
||||||
<div class="job-desc">Разработка не типовых конфигураций для платформы 1С ERP.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Апрель 2019 — Октябрь 2019 -->
|
|
||||||
<div class="job-entry">
|
|
||||||
<div class="job-header">
|
|
||||||
<span class="job-company">ГУП ТРК "Башкортостан" БСТ (СМИ)</span>
|
|
||||||
<span class="job-period">Апр 2019 — Окт 2019 (7 мес)</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-position">Инженер</div>
|
|
||||||
<div class="job-desc">Звукозапись, обслуживание кинокамер. Командировки в районы в качестве
|
|
||||||
звукового оператора. Сопровождение и ведение записи на реал тайм проекте "Республика лайв".
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Май 2017 — Июль 2017 -->
|
|
||||||
<div class="job-entry">
|
|
||||||
<div class="job-header">
|
|
||||||
<span class="job-company">ООО "ЭРУДИТ", Старосубхангулово</span>
|
|
||||||
<span class="job-period">Май 2017 — Июль 2017 (3 мес)</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-position">Сетевой администратор</div>
|
|
||||||
<div class="job-desc"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Февраль 2017 — Май 2017 (ПАО УМПО) -->
|
|
||||||
<div class="job-entry">
|
|
||||||
<div class="job-header">
|
|
||||||
<span class="job-company">ПАО "УМПО", Уфа</span>
|
|
||||||
<span class="job-period">Фев 2017 — Май 2017 (4 мес)</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-position">Токарь-расточник (5 разряд)</div>
|
|
||||||
<div class="job-desc">Цех по производству деталей редуктора Ка-32. Обработка на
|
|
||||||
координатно-расточном станке 1964г. Квалитеты до 6, точность менее ±0.01мм, шероховатость 5
|
|
||||||
класс. Чтение чертежей и техпроцесса.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Июнь 2016 — Октябрь 2016 ООО "ПФО Вертикаль" -->
|
|
||||||
<div class="job-entry">
|
|
||||||
<div class="job-header">
|
|
||||||
<span class="job-company">ООО "ПФО Вертикаль" (аутстафф), Уфа</span>
|
|
||||||
<span class="job-period">Июнь 2016 — Окт 2016 (5 мес)</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-position">Токарь-расточник (5 разряд)</div>
|
|
||||||
<div class="job-desc">Инструментальный цех, ночные смены. Координатно-расточной станок, высокая
|
|
||||||
точность (до ±0.01мм), 6 квалитет.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Май 2013 — Окт 2015 ООО "БААС-сервис" -->
|
|
||||||
<div class="job-entry">
|
|
||||||
<div class="job-header">
|
|
||||||
<span class="job-company">ООО "БААС-сервис", Старосубхангулово</span>
|
|
||||||
<span class="job-period">Май 2013 — Окт 2015 (2 года 6 мес)</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-position">Директор (услуги населению: фото/видео, ремонт)</div>
|
|
||||||
<div class="job-desc">Управление персоналом (8 чел), учет наличности, отчетность ИФНС, обучение.
|
|
||||||
Софт, диагностика железа, заправка картриджей, фото/видеосъемка, дизайн.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Март 2009 — Окт 2012 ОАО "КумаПП" -->
|
|
||||||
<div class="job-entry">
|
|
||||||
<div class="job-header">
|
|
||||||
<span class="job-company">ОАО "КумаПП", Кумертау</span>
|
|
||||||
<span class="job-period">Март 2009 — Окт 2012 (3 года 8 мес)</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-position">Токарь-расточник (5 разряд)</div>
|
|
||||||
<div class="job-desc">Расточка деталей вертолета (втулки, качалки, рессоры). Координатно-расточные
|
|
||||||
работы, допуски до ±0.01мм, квалитет 6, шероховатость 5 класс.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Авг 2008 — Окт 2008 ООО НОП "Мега-Щит" -->
|
|
||||||
<div class="job-entry">
|
|
||||||
<div class="job-header">
|
|
||||||
<span class="job-company">ООО НОП "Мега-Щит", Ханты-Мансийск</span>
|
|
||||||
<span class="job-period">Авг 2008 — Окт 2008 (3 мес)</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-position">Охранник</div>
|
|
||||||
<div class="job-desc">КПП, контроль пропускного режима, досмотр.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Май 2005 — Июль 2008 Вооруженные силы РФ -->
|
|
||||||
<div class="job-entry">
|
|
||||||
<div class="job-header">
|
|
||||||
<span class="job-company">Вооруженные силы РФ</span>
|
|
||||||
<span class="job-period">Май 2005 — Июль 2008 (3 года 3 мес)</span>
|
|
||||||
</div>
|
|
||||||
<div class="job-position">Командир отделения</div>
|
|
||||||
<div class="job-desc">Командование отделением.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Обо мне -->
|
|
||||||
<div class="section-title">Обо мне</div>
|
|
||||||
<div class="about-text">
|
|
||||||
Программист, коммуникатор, компанейский человек, всегда за положительный движ.
|
|
||||||
</div>
|
|
||||||
<!-- Дополнительные строки из резюме: Уфа, гражданство и пр уже вверху -->
|
|
||||||
<div
|
|
||||||
style="font-size: 0.9rem; color: #1f3f55; margin-top: 1rem; background: #f1f7fd; padding: 0.8rem; border-radius: 12px;">
|
|
||||||
<span style="font-weight:600;">Дополнительно:</span> linux, Figma, SQL, Agile, Jira, Java, Spring,
|
|
||||||
Go, интернет-маркетинг, командная работа, менторство.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- нижний колонтитул (страница 4) -->
|
|
||||||
<div style="background-color: #f4f9ff; padding: 1.5rem 2.5rem; border-top: 1px solid #bfd5e6;">
|
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between;">
|
|
||||||
<div>
|
|
||||||
<span style="font-weight:600;">🏠 Проживание:</span> Уфа · готов к переезду / командировкам
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span style="font-weight:600;">📄 обновлено:</span> февраль 2026 года
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span style="font-weight:600;">📞 +7 (962) 543 - 93 - 43</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,297 +0,0 @@
|
|||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #eef2f5;
|
|
||||||
font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: #1a2634;
|
|
||||||
padding: 2rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resume-card {
|
|
||||||
max-width: 1100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: #ffffff;
|
|
||||||
box-shadow: 0 10px 25px rgba(0, 35, 70, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-top: 6px solid #0b3b5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* header section */
|
|
||||||
.header {
|
|
||||||
background-color: #f9fcff;
|
|
||||||
padding: 2rem 2.5rem 1.5rem 2.5rem;
|
|
||||||
border-bottom: 1px solid #d9e4ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
font-size: 2.8rem;
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
color: #0b3b5c;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subhead {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1.5rem 2.5rem;
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
color: #2f4858;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subhead-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subhead-item i {
|
|
||||||
width: 20px;
|
|
||||||
color: #1e5a7a;
|
|
||||||
font-weight: 400;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
background-color: #e1edf7;
|
|
||||||
color: #0b3b5c;
|
|
||||||
padding: 0.3rem 1rem;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 600;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
border: 1px solid #b9d1e4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.job-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #1d4e6b;
|
|
||||||
margin: 1rem 0 0.5rem 0;
|
|
||||||
border-bottom: 2px solid #b0c8da;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.specialization-block {
|
|
||||||
background: #e9f0f7;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
border-radius: 40px;
|
|
||||||
margin: 0.5rem 0 0 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.specialization-block span {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #0b3b5c;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spec-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.6rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spec-item {
|
|
||||||
color: #1e3b4f;
|
|
||||||
border-left: 3px solid #1e5a7a;
|
|
||||||
padding-left: 10px;
|
|
||||||
font-size: 0.98rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-2 {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 2.2fr;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* sidebar */
|
|
||||||
.sidebar {
|
|
||||||
background-color: #f7fafd;
|
|
||||||
padding: 2rem 1.8rem;
|
|
||||||
border-right: 1px solid #cddeec;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
padding: 2rem 2rem 2rem 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.35rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #0b3b5c;
|
|
||||||
border-bottom: 2px solid #b6d0e2;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
margin: 1.8rem 0 1.2rem 0;
|
|
||||||
letter-spacing: -0.2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title:first-of-type {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row {
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-label {
|
|
||||||
width: 100px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #1e5a7a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-value {
|
|
||||||
color: #152b39;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-tags {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-tag {
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #b0c5d6;
|
|
||||||
padding: 0.25rem 1rem;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #0f3a52;
|
|
||||||
font-weight: 500;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 20, 40, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-bottom: 1px dashed #b8cbd9;
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-name {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #0f3f5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lang-level {
|
|
||||||
color: #1d5b81;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* опыт */
|
|
||||||
.job-entry {
|
|
||||||
margin-bottom: 1.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.job-header {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: baseline;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.job-company {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #0b3b5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.job-period {
|
|
||||||
background: #dbe7f2;
|
|
||||||
padding: 0.2rem 1rem;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #103a52;
|
|
||||||
letter-spacing: 0.3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.job-position {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1f5777;
|
|
||||||
margin: 0.15rem 0 0.4rem 0;
|
|
||||||
font-size: 1.05rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.job-desc {
|
|
||||||
color: #1e333f;
|
|
||||||
font-size: 0.93rem;
|
|
||||||
margin-left: 0.2rem;
|
|
||||||
padding-left: 0.8rem;
|
|
||||||
border-left: 3px solid #9bb7d0;
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
|
|
||||||
.compact-mb {
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border: 0;
|
|
||||||
border-top: 1px solid #c9dae7;
|
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-text {
|
|
||||||
background: #f0f6fc;
|
|
||||||
padding: 1.5rem 2rem;
|
|
||||||
border-radius: 50px 8px 50px 8px;
|
|
||||||
color: #103c58;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
border-left: 6px solid #1f6a92;
|
|
||||||
margin: 2rem 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-note {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: #5e778a;
|
|
||||||
text-align: right;
|
|
||||||
border-top: 1px solid #b9cfdf;
|
|
||||||
padding-top: 0.8rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #1b5f89;
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px dotted #8eb1c7;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
border-bottom: 2px solid #0b3b5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 750px) {
|
|
||||||
.grid-2 {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
padding: 2rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
border-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const themeToggle = document.getElementById('themeToggle');
|
|
||||||
const saved = localStorage.getItem('theme');
|
|
||||||
|
|
||||||
if (saved === 'dark') {
|
|
||||||
document.body.classList.add('dark');
|
|
||||||
themeToggle.textContent = '☀️';
|
|
||||||
}
|
|
||||||
|
|
||||||
themeToggle.addEventListener('click', () => {
|
|
||||||
document.body.classList.toggle('dark');
|
|
||||||
const isDark = document.body.classList.contains('dark');
|
|
||||||
themeToggle.textContent = isDark ? '☀️' : '🌙';
|
|
||||||
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
||||||
});
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
entry.target.classList.add('visible');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, { threshold: 0.1 });
|
|
||||||
|
|
||||||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
|
||||||
});
|
|
||||||
@@ -1,378 +0,0 @@
|
|||||||
:root {
|
|
||||||
--bg: #ffffff;
|
|
||||||
--surface: #f8fafc;
|
|
||||||
--text: #0f172a;
|
|
||||||
--text-secondary: #64748b;
|
|
||||||
--accent: #2563eb;
|
|
||||||
--accent-hover: #1d4ed8;
|
|
||||||
--accent-light: #eff6ff;
|
|
||||||
--border: #e2e8f0;
|
|
||||||
--shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
|
|
||||||
--shadow-lg: 0 10px 25px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.04);
|
|
||||||
--radius: 12px;
|
|
||||||
--radius-sm: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark {
|
|
||||||
--bg: #0f172a;
|
|
||||||
--surface: #1e293b;
|
|
||||||
--text: #f1f5f9;
|
|
||||||
--text-secondary: #94a3b8;
|
|
||||||
--accent: #60a5fa;
|
|
||||||
--accent-hover: #93bbfd;
|
|
||||||
--accent-light: #1e3a5f;
|
|
||||||
--border: #334155;
|
|
||||||
--shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
||||||
--shadow-lg: 0 10px 25px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
||||||
|
|
||||||
html { scroll-behavior: smooth; }
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--text);
|
|
||||||
line-height: 1.6;
|
|
||||||
transition: background 0.3s, color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
|
|
||||||
a:hover { color: var(--accent-hover); }
|
|
||||||
|
|
||||||
/* Navigation */
|
|
||||||
nav {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 100;
|
|
||||||
background: var(--bg);
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
background: rgba(255,255,255,0.85);
|
|
||||||
transition: background 0.3s, border-color 0.3s;
|
|
||||||
}
|
|
||||||
body.dark nav { background: rgba(15,23,42,0.85); }
|
|
||||||
|
|
||||||
.nav-inner {
|
|
||||||
max-width: 1100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 24px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo { font-weight: 700; font-size: 1.1rem; color: var(--text) !important; }
|
|
||||||
|
|
||||||
.nav-links { display: flex; align-items: center; gap: 8px; }
|
|
||||||
.nav-links a {
|
|
||||||
padding: 6px 14px;
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
color: var(--text-secondary) !important;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
transition: background 0.2s, color 0.2s;
|
|
||||||
}
|
|
||||||
.nav-links a:hover { background: var(--accent-light); color: var(--accent) !important; }
|
|
||||||
|
|
||||||
.theme-toggle {
|
|
||||||
background: none;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
padding: 6px 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
transition: background 0.2s, border-color 0.2s;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.theme-toggle:hover { background: var(--surface); border-color: var(--accent); }
|
|
||||||
|
|
||||||
/* Hero */
|
|
||||||
.hero {
|
|
||||||
max-width: 1100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 80px 24px 60px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 48px;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 70vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content { max-width: 540px; }
|
|
||||||
|
|
||||||
.hero h1 { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 12px; }
|
|
||||||
|
|
||||||
.hero-subtitle {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-description { font-size: 1rem; color: var(--text-secondary); margin-bottom: 32px; max-width: 480px; }
|
|
||||||
|
|
||||||
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 24px;
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--accent);
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow); }
|
|
||||||
|
|
||||||
.btn-outline {
|
|
||||||
background: transparent;
|
|
||||||
color: var(--text) !important;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
.btn-outline:hover { border-color: var(--accent); color: var(--accent) !important; }
|
|
||||||
|
|
||||||
.hero-photo {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-photo img {
|
|
||||||
width: 320px;
|
|
||||||
height: 320px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
border: 4px solid var(--bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links { display: flex; gap: 16px; margin-top: 24px; }
|
|
||||||
.social-links a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--text-secondary) !important;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.social-links a:hover { border-color: var(--accent); color: var(--accent) !important; background: var(--accent-light); }
|
|
||||||
|
|
||||||
/* Sections */
|
|
||||||
.section {
|
|
||||||
max-width: 1100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 80px 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header { margin-bottom: 48px; }
|
|
||||||
.section-header h2 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
|
|
||||||
.section-header p { color: var(--text-secondary); font-size: 1rem; }
|
|
||||||
|
|
||||||
/* About */
|
|
||||||
.about-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 200px 1fr;
|
|
||||||
gap: 48px;
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-photo {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-text { color: var(--text-secondary); }
|
|
||||||
.about-text p + p { margin-top: 16px; }
|
|
||||||
|
|
||||||
.about-highlights {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 16px;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
background: var(--surface);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
|
||||||
}
|
|
||||||
.highlight:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
|
|
||||||
.highlight h4 { font-size: 0.95rem; margin-bottom: 6px; }
|
|
||||||
.highlight p { font-size: 0.85rem; color: var(--text-secondary); }
|
|
||||||
|
|
||||||
/* Timeline */
|
|
||||||
.timeline { position: relative; padding-left: 28px; }
|
|
||||||
.timeline::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 7px;
|
|
||||||
top: 4px;
|
|
||||||
bottom: 4px;
|
|
||||||
width: 2px;
|
|
||||||
background: var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item { position: relative; margin-bottom: 32px; }
|
|
||||||
.timeline-item::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: -24px;
|
|
||||||
top: 6px;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--accent);
|
|
||||||
border: 2px solid var(--bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-item h3 { font-size: 1.1rem; font-weight: 600; }
|
|
||||||
.timeline-item .period { font-size: 0.85rem; color: var(--text-secondary); margin: 2px 0 8px; }
|
|
||||||
.timeline-item p { font-size: 0.9rem; color: var(--text-secondary); }
|
|
||||||
.timeline-item ul { margin-top: 8px; padding-left: 20px; }
|
|
||||||
.timeline-item li { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 4px; }
|
|
||||||
|
|
||||||
/* Projects */
|
|
||||||
.projects-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card {
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
padding: 28px;
|
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
|
||||||
}
|
|
||||||
.project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
|
|
||||||
.project-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
|
|
||||||
.project-card p { font-size: 0.9rem; color: var(--text-secondary); }
|
|
||||||
|
|
||||||
/* Skills */
|
|
||||||
.skills-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 6px 16px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: border-color 0.2s, background 0.2s;
|
|
||||||
}
|
|
||||||
.skill-badge:hover { border-color: var(--accent); background: var(--accent-light); }
|
|
||||||
|
|
||||||
.skill-level {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
padding: 1px 8px;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.skill-advanced { background: #22c55e; color: #fff; }
|
|
||||||
.skill-intermediate { background: #eab308; color: #000; }
|
|
||||||
.skill-beginner { background: #94a3b8; color: #fff; }
|
|
||||||
|
|
||||||
/* Contact */
|
|
||||||
.contact-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 12px 24px;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
color: var(--text) !important;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.contact-link:hover { border-color: var(--accent); color: var(--accent) !important; background: var(--accent-light); }
|
|
||||||
|
|
||||||
/* Education */
|
|
||||||
.edu-list { display: grid; gap: 20px; }
|
|
||||||
.edu-item { border-left: 3px solid var(--accent); padding-left: 16px; }
|
|
||||||
.edu-item h4 { font-size: 1rem; font-weight: 600; }
|
|
||||||
.edu-item .meta { font-size: 0.85rem; color: var(--text-secondary); }
|
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
footer {
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
padding: 40px 24px;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
footer a { color: var(--text-secondary) !important; }
|
|
||||||
footer a:hover { color: var(--accent) !important; }
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
|
|
||||||
.fade-in.visible { opacity: 1; transform: translateY(0); }
|
|
||||||
|
|
||||||
/* Grid helpers */
|
|
||||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
|
||||||
|
|
||||||
/* Languages */
|
|
||||||
.lang-list { display: flex; gap: 24px; flex-wrap: wrap; }
|
|
||||||
.lang-item { display: flex; gap: 8px; font-size: 0.95rem; }
|
|
||||||
.lang-name { font-weight: 600; }
|
|
||||||
.lang-level { color: var(--text-secondary); }
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.hero { grid-template-columns: 1fr; padding: 48px 24px 40px; text-align: center; }
|
|
||||||
.hero-content { max-width: 100%; }
|
|
||||||
.hero-description { max-width: 100%; }
|
|
||||||
.hero-buttons { justify-content: center; }
|
|
||||||
.hero-photo { order: -1; }
|
|
||||||
.hero-photo img { width: 200px; height: 200px; }
|
|
||||||
.social-links { justify-content: center; }
|
|
||||||
|
|
||||||
.about-grid { grid-template-columns: 1fr; text-align: center; }
|
|
||||||
.about-photo { margin: 0 auto; }
|
|
||||||
.about-highlights { grid-template-columns: 1fr; }
|
|
||||||
|
|
||||||
.section { padding: 48px 20px; }
|
|
||||||
.nav-links .nav-desktop { display: none; }
|
|
||||||
|
|
||||||
.grid-2 { grid-template-columns: 1fr; }
|
|
||||||
.projects-grid { grid-template-columns: 1fr; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.hero h1 { font-size: 2rem; }
|
|
||||||
.hero-subtitle { font-size: 1rem; }
|
|
||||||
.section-header h2 { font-size: 1.5rem; }
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
.about {
|
|
||||||
display: flex;
|
|
||||||
width: inherit;
|
|
||||||
height: auto;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-valitovgaziz-photo-box {
|
|
||||||
width: fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-valitovgaziz-photo-box img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 1em;
|
|
||||||
-webkit-box-shadow: 4px 4px 8px 9px rgba(34, 60, 80, 0.2);
|
|
||||||
-moz-box-shadow: 4px 4px 8px 9px rgba(34, 60, 80, 0.2);
|
|
||||||
box-shadow: 4px 4px 8px 9px rgba(34, 60, 80, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#about-valitovgaziz-photo-img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
/* Сетка для about секции */
|
|
||||||
.about {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-valitovgaziz-photo-box {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
justify-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-text {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,617 +0,0 @@
|
|||||||
/* Базовые стили для блога */
|
|
||||||
:root {
|
|
||||||
--primary: #9ab09492;
|
|
||||||
--secondary: #3498db;
|
|
||||||
--accent: #2ecc71;
|
|
||||||
--light: #f8f9fa;
|
|
||||||
--dark: #1a252f;
|
|
||||||
--gray: #6c757d;
|
|
||||||
--light-gray: #e9ecef;
|
|
||||||
--border-radius: 12px;
|
|
||||||
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
--shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.15);
|
|
||||||
--transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: var(--dark);
|
|
||||||
background-color: var(--light);
|
|
||||||
transition: var(--transition);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Стили для темной темы */
|
|
||||||
body.dark-mode {
|
|
||||||
background-color: #121212;
|
|
||||||
color: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-nav {
|
|
||||||
background-color: #1e1e1e;
|
|
||||||
border-bottom: 1px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-header {
|
|
||||||
background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-container,
|
|
||||||
body.dark-mode .blog-sidebar,
|
|
||||||
body.dark-mode .blog-post {
|
|
||||||
background-color: #1e1e1e;
|
|
||||||
color: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-sidebar-section,
|
|
||||||
body.dark-mode .blog-post-content,
|
|
||||||
body.dark-mode .blog-post-footer {
|
|
||||||
border-color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-quote {
|
|
||||||
background-color: #2d2d2d;
|
|
||||||
border-left-color: var(--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-tag {
|
|
||||||
background-color: #2c3e50;
|
|
||||||
color: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-pagination-btn {
|
|
||||||
background-color: #2c3e50;
|
|
||||||
color: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-footer {
|
|
||||||
background-color: #1a252f;
|
|
||||||
color: #b0b0b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Кнопка переключения темы */
|
|
||||||
.theme-toggle {
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
z-index: 1000;
|
|
||||||
padding: 8px 16px;
|
|
||||||
background-color: var(--secondary);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: var(--transition);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: var(--shadow-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Навигация */
|
|
||||||
.blog-nav {
|
|
||||||
background-color: white;
|
|
||||||
border-bottom: 1px solid var(--light-gray);
|
|
||||||
padding: 1rem 0;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 100;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-nav-container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 2rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-nav-logo {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--dark);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-nav-link {
|
|
||||||
color: var(--secondary);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-nav-link:hover {
|
|
||||||
color: var(--dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Заголовок блога */
|
|
||||||
.blog-header {
|
|
||||||
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-header-content {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-title {
|
|
||||||
font-size: 3rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-subtitle {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-meta {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 2rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-meta-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Основной контейнер - ИСПРАВЛЕНЫ ПРОПОРЦИИ */
|
|
||||||
.blog-container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 3rem auto;
|
|
||||||
padding: 0 2rem;
|
|
||||||
display: grid;
|
|
||||||
/* Основная колонка 70%, боковая 30% */
|
|
||||||
grid-template-columns: 1fr 280px;
|
|
||||||
gap: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Боковая панель - компактная */
|
|
||||||
.blog-sidebar {
|
|
||||||
position: sticky;
|
|
||||||
top: 100px;
|
|
||||||
height: fit-content;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-sidebar-section {
|
|
||||||
background-color: white;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
padding: 1.25rem;
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
transition: var(--transition);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-sidebar-section h3 {
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
color: var(--dark);
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-sidebar-section p {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-categories {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-categories li {
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-category {
|
|
||||||
display: block;
|
|
||||||
padding: 0.4rem 0.75rem;
|
|
||||||
color: var(--gray);
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: var(--transition);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-category:hover {
|
|
||||||
background-color: var(--light-gray);
|
|
||||||
color: var(--dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-recent {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-recent li {
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
padding-bottom: 0.8rem;
|
|
||||||
border-bottom: 1px solid var(--light-gray);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-recent li:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-recent a {
|
|
||||||
color: var(--dark);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: var(--transition);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-recent a:hover {
|
|
||||||
color: var(--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Основное содержание - шире */
|
|
||||||
.blog-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2.5rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post {
|
|
||||||
background-color: white;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
transition: var(--transition);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: var(--shadow-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-header {
|
|
||||||
padding: 2rem 2rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-category {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
background-color: var(--light-gray);
|
|
||||||
color: var(--gray);
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: var(--dark);
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
color: var(--gray);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-content {
|
|
||||||
padding: 0 2rem 1rem;
|
|
||||||
border-bottom: 1px solid var(--light-gray);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-content p {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: 1.05rem;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-content h3 {
|
|
||||||
margin: 1.5rem 0 1rem;
|
|
||||||
color: var(--dark);
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-content ul,
|
|
||||||
.blog-post-content ol {
|
|
||||||
margin: 1rem 0 1.5rem 1.5rem;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-content li {
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
font-size: 1.05rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-quote {
|
|
||||||
margin: 1.5rem 0;
|
|
||||||
padding: 1.5rem;
|
|
||||||
background-color: var(--light-gray);
|
|
||||||
border-left: 4px solid var(--secondary);
|
|
||||||
font-style: italic;
|
|
||||||
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-footer {
|
|
||||||
padding: 1.5rem 2rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-tags {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-tag {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
background-color: var(--light-gray);
|
|
||||||
color: var(--gray);
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-tag:hover {
|
|
||||||
background-color: var(--secondary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-comment-btn {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
background-color: var(--secondary);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
transition: var(--transition);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-comment-btn:hover {
|
|
||||||
background-color: #2980b9;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Пагинация */
|
|
||||||
.blog-pagination {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 3rem auto 4rem;
|
|
||||||
padding: 0 2rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-pagination-btn {
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
background-color: white;
|
|
||||||
color: var(--dark);
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
transition: var(--transition);
|
|
||||||
border: 1px solid var(--light-gray);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-pagination-btn:hover {
|
|
||||||
background-color: var(--secondary);
|
|
||||||
color: white;
|
|
||||||
border-color: var(--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-pagination-current {
|
|
||||||
color: var(--gray);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Футер */
|
|
||||||
.blog-footer {
|
|
||||||
background-color: var(--dark);
|
|
||||||
color: white;
|
|
||||||
padding: 3rem 0;
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-footer-content {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-footer-content p {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-footer-content a {
|
|
||||||
color: var(--light-gray);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-footer-content a:hover {
|
|
||||||
color: var(--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Кнопка для мобильного меню */
|
|
||||||
.blog-sidebar-toggle {
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
background-color: var(--secondary);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Адаптивность */
|
|
||||||
@media (max-width: 1100px) {
|
|
||||||
.blog-container {
|
|
||||||
grid-template-columns: 1fr 240px;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.blog-container {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-sidebar {
|
|
||||||
position: static;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.blog-title {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-container {
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-nav-container {
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-header {
|
|
||||||
padding: 3rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-meta {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-header,
|
|
||||||
.blog-post-content,
|
|
||||||
.blog-post-footer {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-title {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-pagination {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-sidebar-toggle {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-sidebar {
|
|
||||||
display: none;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-sidebar.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.blog-title {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-title {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-container {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-header,
|
|
||||||
.blog-post-content,
|
|
||||||
.blog-post-footer {
|
|
||||||
padding: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post-footer {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-quote {
|
|
||||||
padding: 1rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Улучшения для темной темы */
|
|
||||||
body.dark-mode .blog-sidebar-section {
|
|
||||||
background-color: #2d2d2d;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-category {
|
|
||||||
color: #b0b0b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-category:hover {
|
|
||||||
background-color: #3d3d3d;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-recent a {
|
|
||||||
color: #b0b0b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .blog-recent a:hover {
|
|
||||||
color: var(--secondary);
|
|
||||||
}
|
|
||||||
@@ -1,246 +0,0 @@
|
|||||||
/* Переменные для темной темы */
|
|
||||||
:root {
|
|
||||||
--dark-bg: #1a252f;
|
|
||||||
--dark-text: #ecf0f1;
|
|
||||||
--dark-card: #2c3e50;
|
|
||||||
--dark-border: #34495e;
|
|
||||||
--dark-secondary: #2980b9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Кнопка переключения темы */
|
|
||||||
header {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* В darkTheme.css - добавьте системные предпочтения */
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--dark-bg: #0a0a0a;
|
|
||||||
--dark-text: #e0e0e0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
background: var(--secondary);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle:hover {
|
|
||||||
background: var(--dark-secondary);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Стили для темной темы */
|
|
||||||
body.dark-mode {
|
|
||||||
background-color: var(--dark-bg);
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode header {
|
|
||||||
background-color: var(--dark-bg);
|
|
||||||
color: var(--dark-text);
|
|
||||||
background: linear-gradient(135deg, var(--dark-bg) 0%, #1a535c 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .section {
|
|
||||||
background: var(--dark-card);
|
|
||||||
color: var(--dark-text);
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
||||||
border: 1px solid var(--dark-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .contact-info a {
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .skill-tag {
|
|
||||||
background-color: var(--dark-border);
|
|
||||||
color: var(--dark-text);
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode footer {
|
|
||||||
color: var(--dark-text);
|
|
||||||
background-color: var(--dark-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode h1,
|
|
||||||
body.dark-mode h2,
|
|
||||||
body.dark-mode h3 {
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .project-link {
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .project-link:hover {
|
|
||||||
color: #3498db;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .btn-primary {
|
|
||||||
background-color: var(--dark-secondary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .btn-primary:hover {
|
|
||||||
background-color: #3498db;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .btn-secondary {
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--dark-text);
|
|
||||||
border: 2px solid var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .btn-secondary:hover {
|
|
||||||
background-color: var(--dark-text);
|
|
||||||
color: var(--dark-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .yalarba-section {
|
|
||||||
background: linear-gradient(135deg, var(--dark-card) 0%, #34495e 100%);
|
|
||||||
border-left: 5px solid var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .investment-cta {
|
|
||||||
background-color: var(--dark-border);
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .timeline:before {
|
|
||||||
background: var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .timeline-item:before {
|
|
||||||
background: var(--dark-card);
|
|
||||||
border: 2px solid var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .highlight {
|
|
||||||
color: #f39c12;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Темная тема для социальных ссылок */
|
|
||||||
body.dark-mode .social_link {
|
|
||||||
background-color: var(--dark-card);
|
|
||||||
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Темная тема для фото */
|
|
||||||
body.dark-mode .about-valitovgaziz-photo-box img {
|
|
||||||
box-shadow: 4px 4px 8px 9px rgba(0, 0, 0, 0.3);
|
|
||||||
filter: brightness(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ТЕМНАЯ ТЕМА ДЛЯ СЕКЦИИ "О РЕПОЗИТОРИИ" */
|
|
||||||
body.dark-mode .projects-grid {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .project-card {
|
|
||||||
background: var(--dark-card);
|
|
||||||
color: var(--dark-text);
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
||||||
border-left: 4px solid var(--dark-secondary);
|
|
||||||
border: 1px solid var(--dark-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .project-card h3 {
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .current-info {
|
|
||||||
color: var(--dark-text);
|
|
||||||
border: 1px solid var(--dark-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .current-info h3 {
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .current-info ul {
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .current-info strong {
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Темная тема для контактной секции */
|
|
||||||
body.dark-mode .contact-info p {
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .contact-info a {
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode #saveContactBtn {
|
|
||||||
background: var(--dark-card);
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
border: 2px solid var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode #saveContactBtn:hover {
|
|
||||||
background: var(--dark-secondary);
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Темная тема для футера */
|
|
||||||
body.dark-mode .footer-box {
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .footer-box a {
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .footer-box ul {
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Темная тема для hero section */
|
|
||||||
body.dark-mode .hero {
|
|
||||||
background: linear-gradient(135deg, var(--dark-bg) 0%, #1a535c 100%);
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .hero-description {
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .hero-subtitle {
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Темная тема для секции "Обо мне" */
|
|
||||||
body.dark-mode .about {
|
|
||||||
background: var(--dark-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .about-text {
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .entrepreneur-highlights {
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .highlight-item h4 {
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .highlight-item p {
|
|
||||||
color: var(--dark-text);
|
|
||||||
}
|
|
||||||
@@ -1,226 +0,0 @@
|
|||||||
/* Digital Background for Software Development Website */
|
|
||||||
/* Интеграция с существующей системой тем */
|
|
||||||
|
|
||||||
/* Используем переменные из darkTheme.css */
|
|
||||||
:root {
|
|
||||||
/* Light Theme Colors - интегрируем с существующими переменными */
|
|
||||||
--bg-primary-light: #f8f9fa;
|
|
||||||
--bg-secondary-light: #e9ecef;
|
|
||||||
--accent-primary-light: #007bff;
|
|
||||||
--accent-secondary-light: #6c757d;
|
|
||||||
--text-primary-light: #212529;
|
|
||||||
--particle-color-light: rgba(0, 123, 255, 0.1);
|
|
||||||
|
|
||||||
/* Dark Theme Colors - используем переменные из darkTheme.css */
|
|
||||||
--bg-primary-dark: var(--dark-bg, #1a252f);
|
|
||||||
--bg-secondary-dark: var(--dark-card, #2c3e50);
|
|
||||||
--accent-primary-dark: var(--dark-secondary, #2980b9);
|
|
||||||
--accent-secondary-dark: var(--dark-border, #34495e);
|
|
||||||
--text-primary-dark: var(--dark-text, #ecf0f1);
|
|
||||||
--particle-color-dark: rgba(41, 128, 185, 0.15);
|
|
||||||
|
|
||||||
/* Current Theme - defaults to light */
|
|
||||||
--bg-primary: var(--bg-primary-light);
|
|
||||||
--bg-secondary: var(--bg-secondary-light);
|
|
||||||
--accent-primary: var(--accent-primary-light);
|
|
||||||
--accent-secondary: var(--accent-secondary-light);
|
|
||||||
--text-primary: var(--text-primary-light);
|
|
||||||
--particle-color: var(--particle-color-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Интеграция с существующей темной темой */
|
|
||||||
body.dark-mode {
|
|
||||||
--bg-primary: var(--bg-primary-dark);
|
|
||||||
--bg-secondary: var(--bg-secondary-dark);
|
|
||||||
--accent-primary: var(--accent-primary-dark);
|
|
||||||
--accent-secondary: var(--accent-secondary-dark);
|
|
||||||
--text-primary: var(--text-primary-dark);
|
|
||||||
--particle-color: var(--particle-color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Base Body Styles */
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
min-height: 100vh;
|
|
||||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
overflow-x: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animated Background Elements */
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background:
|
|
||||||
radial-gradient(circle at 20% 80%, var(--particle-color) 0%, transparent 50%),
|
|
||||||
radial-gradient(circle at 80% 20%, var(--particle-color) 0%, transparent 50%),
|
|
||||||
radial-gradient(circle at 40% 40%, var(--particle-color) 0%, transparent 50%);
|
|
||||||
animation: backgroundPulse 8s ease-in-out infinite;
|
|
||||||
z-index: -3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Binary Code Rain Effect - ИСПРАВЛЕННЫЙ СТИЛЬ */
|
|
||||||
.binary-rain {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: -1;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.binary-digit {
|
|
||||||
position: absolute;
|
|
||||||
color: var(--accent-primary);
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
font-weight: bold;
|
|
||||||
animation: fall linear infinite;
|
|
||||||
text-shadow: 0 0 5px currentColor;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Circuit Board Grid */
|
|
||||||
.circuit-grid {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image:
|
|
||||||
linear-gradient(var(--accent-secondary) 1px, transparent 1px),
|
|
||||||
linear-gradient(90deg, var(--accent-secondary) 1px, transparent 1px);
|
|
||||||
background-size: 40px 40px;
|
|
||||||
opacity: 0.03;
|
|
||||||
z-index: -2;
|
|
||||||
animation: gridMove 20s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Floating Code Elements */
|
|
||||||
.floating-code {
|
|
||||||
position: fixed;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
color: var(--accent-primary);
|
|
||||||
opacity: 0.1;
|
|
||||||
z-index: -1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-bracket { animation: float 15s ease-in-out infinite; }
|
|
||||||
.code-parenthesis { animation: float 18s ease-in-out infinite reverse; }
|
|
||||||
.code-brace { animation: float 20s ease-in-out infinite; }
|
|
||||||
.code-tag { animation: float 16s ease-in-out infinite reverse; }
|
|
||||||
|
|
||||||
/* Connection Nodes */
|
|
||||||
.connection-node {
|
|
||||||
position: fixed;
|
|
||||||
background: var(--accent-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0.2;
|
|
||||||
z-index: -1;
|
|
||||||
animation: nodePulse 4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Data Flow Lines */
|
|
||||||
.data-flow {
|
|
||||||
position: fixed;
|
|
||||||
background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
|
|
||||||
opacity: 0.1;
|
|
||||||
z-index: -1;
|
|
||||||
animation: dataFlow 6s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ОБЯЗАТЕЛЬНО: Убедимся что основной контент поверх фона */
|
|
||||||
header, .section, footer {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes backgroundPulse {
|
|
||||||
0%, 100% { opacity: 0.5; }
|
|
||||||
50% { opacity: 0.8; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fall {
|
|
||||||
to {
|
|
||||||
transform: translateY(100vh);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% {
|
|
||||||
transform: translate(0, 0) rotate(0deg);
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
transform: translate(20px, 20px) rotate(5deg);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translate(-15px, 30px) rotate(-5deg);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: translate(10px, -10px) rotate(3deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gridMove {
|
|
||||||
0% { transform: translate(0, 0); }
|
|
||||||
100% { transform: translate(20px, 20px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes nodePulse {
|
|
||||||
0%, 100% { transform: scale(1); opacity: 0.2; }
|
|
||||||
50% { transform: scale(1.3); opacity: 0.4; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes dataFlow {
|
|
||||||
0% { transform: translateX(-100%); opacity: 0; }
|
|
||||||
50% { opacity: 0.3; }
|
|
||||||
100% { transform: translateX(100%); opacity: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Interactive Elements */
|
|
||||||
.connection-node:hover {
|
|
||||||
opacity: 0.6;
|
|
||||||
transform: scale(1.5);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Performance Optimizations */
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.binary-digit,
|
|
||||||
.floating-code,
|
|
||||||
.connection-node,
|
|
||||||
.data-flow,
|
|
||||||
body::before {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.binary-digit {
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circuit-grid {
|
|
||||||
background-size: 20px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.floating-code {
|
|
||||||
font-size: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Убедимся что кнопка переключения темы всегда поверх всего */
|
|
||||||
.theme-toggle {
|
|
||||||
z-index: 1000 !important;
|
|
||||||
}
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
footer {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1em 0 0 0;
|
|
||||||
color: var(--dark);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links {
|
|
||||||
padding: 1em;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 2rem;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section h4 {
|
|
||||||
margin: 0 0 0.5rem 0;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.two-column-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
border-left: 1px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-box {
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-box ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-box li {
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-box a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-box a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-end-text {
|
|
||||||
margin: 2rem 0 3rem 0;
|
|
||||||
position: relative;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Адаптивность для мобильных устройств */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.footer-links {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.two-column-grid {
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
/* Hero Section Styles */
|
|
||||||
.hero {
|
|
||||||
background: linear-gradient(135deg, var(--primary) 0%, #2fe892 100%);
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-text {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-subtitle {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
color: #137c5c; /* Яркий акцентный цвет */
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-description {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-buttons {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
background-color: var(--secondary);
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.8rem 1.5rem;
|
|
||||||
border-radius: 5px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
color: white;
|
|
||||||
border: 2px solid white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background-color: #2980b9;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-image {
|
|
||||||
flex: 0 0 300px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-image img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.resume-block {
|
|
||||||
justify-self: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#resume-link {
|
|
||||||
color: #2980b9;
|
|
||||||
|
|
||||||
/* Адаптивность для героя */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.hero-content {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Адаптивность для героя */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.hero-content {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-buttons {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
/* Добавьте в style.css */
|
|
||||||
a {
|
|
||||||
color: var(--secondary);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: var(--transition);
|
|
||||||
font-weight: 500;
|
|
||||||
position: relative;
|
|
||||||
padding-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:not(.btn):after {
|
|
||||||
content: "↗";
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
font-size: 0.8em;
|
|
||||||
opacity: 0;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:not(.btn):hover {
|
|
||||||
color: #2980b9;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:not(.btn):hover:after {
|
|
||||||
opacity: 1;
|
|
||||||
right: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Для внутренних ссылок (без внешней иконки) */
|
|
||||||
a[href*="valitovgaziz.ru"]:after,
|
|
||||||
a[href*="#"]:after {
|
|
||||||
content: "→";
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Для темной темы */
|
|
||||||
body.dark-mode a:not(.btn) {
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode a:not(.btn):hover {
|
|
||||||
color: #3498db;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Для ссылок в футере */
|
|
||||||
.footer-box a {
|
|
||||||
color: inherit;
|
|
||||||
transition: var(--transition);
|
|
||||||
border-bottom: 1px dotted transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-box a:hover {
|
|
||||||
border-bottom-color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Для ссылок в hero-секции */
|
|
||||||
.hero a {
|
|
||||||
color: #ffd166; /* Акцентный цвет из hero-секции */
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero a:hover {
|
|
||||||
color: #ffb347;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Для ссылок в карточках проектов */
|
|
||||||
.project-card a {
|
|
||||||
color: var(--dark-secondary);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card a:hover {
|
|
||||||
color: var(--secondary);
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
|
|
||||||
.current-info {
|
|
||||||
margin: 1rem;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-item:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Сетка для проектов */
|
|
||||||
.projects-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin: 2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card {
|
|
||||||
background: white;
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
border-left: 4px solid var(--secondary);
|
|
||||||
transition: var(--transition);
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: auto 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
height: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
#saveContactBtn {
|
|
||||||
padding: 10px 20px;
|
|
||||||
background: white;
|
|
||||||
color: #2541b2;
|
|
||||||
border: 2px solid #2541b2;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#saveContactBtn:hover {
|
|
||||||
background: #2541b2;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#saveContactBtn.dark-mode {
|
|
||||||
background: --dark-card;
|
|
||||||
}
|
|
||||||
@@ -1,136 +0,0 @@
|
|||||||
/* [file name]: skill_section.css */
|
|
||||||
.skills-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-card {
|
|
||||||
background: linear-gradient(135deg, var(--secondary) 0%, #2980b9 100%);
|
|
||||||
color: white;
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: var(--transition);
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: auto auto 1fr auto;
|
|
||||||
gap: 0.8rem;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-card::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 4px;
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-header {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
align-items: start;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-name {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-level {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
padding: 0.3rem 0.8rem;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: bold;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-description {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.4;
|
|
||||||
opacity: 0.9;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-acquisition {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 0.8rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-growth {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #e8f4fc;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-growth::before {
|
|
||||||
content: '🚀';
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Уровни навыков */
|
|
||||||
.skill-level.beginner { background: rgba(231, 76, 60, 0.8); }
|
|
||||||
.skill-level.intermediate { background: rgba(241, 196, 15, 0.8); }
|
|
||||||
.skill-level.advanced { background: rgba(46, 204, 113, 0.8); }
|
|
||||||
.skill-level.expert { background: rgba(52, 152, 219, 0.8); }
|
|
||||||
|
|
||||||
/* Темная тема */
|
|
||||||
body.dark-mode .skill-card {
|
|
||||||
background: linear-gradient(135deg, var(--dark-card) 0%, #34495e 100%);
|
|
||||||
border: 1px solid var(--dark-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .skill-level {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .skill-acquisition {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Адаптивность */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.skills-container {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-card {
|
|
||||||
padding: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-header {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-level {
|
|
||||||
justify-self: start;
|
|
||||||
margin-top: 0.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.skills-container {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
.social_links_block {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 100%;
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social_link_block {
|
|
||||||
width: fit-content;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social_links_block h4 {
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social_link {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
-webkit-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
|
|
||||||
-moz-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
|
|
||||||
box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.social_link a {
|
|
||||||
width: fit-content;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
/* Yalarba Investment Section */
|
|
||||||
.yalarba-section {
|
|
||||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
||||||
border-left: 5px solid var(--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.yalarba-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yalarba-tagline {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--text);
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yalarba-stats {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
margin: 0;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat h3 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
color: var(--secondary);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yalarba-value ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yalarba-value li {
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.investment-cta {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 2rem;
|
|
||||||
padding: 2rem;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user