redesign valitovgaziz.ru personal site with clean & minimal UI
- Rewrite index.html with modern layout: sticky nav, hero, about, projects, timeline, skills badges, contact - Consolidate 12 fragmented CSS files into one cohesive style.css with CSS custom properties and dark mode - Consolidate JS into scripts.js (dark toggle + scroll animations), remove exposed telegram bot token - Update blog.html to match new design - Add AGENTS.md
This commit is contained in:
valitovgaziz
+171
-574
@@ -1,590 +1,187 @@
|
||||
<!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="Блог Валитова Газиза - мысли, проекты, обновления и размышления о разработке и предпринимательстве">
|
||||
<title>Блог | ValitovGaziz - Мысли и обновления</title>
|
||||
<link rel="icon" href="./images/favicon/code_orange.png">
|
||||
<link rel="stylesheet" href="style/blog.css" />
|
||||
<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>
|
||||
<!-- Кнопка переключения темы -->
|
||||
<button class="theme-toggle" onclick="toggleTheme()">
|
||||
🌙 Темная тема
|
||||
</button>
|
||||
|
||||
<!-- Навигация -->
|
||||
<nav class="blog-nav">
|
||||
<div class="blog-nav-container">
|
||||
<a href="index.html" class="blog-nav-logo">ValitovGaziz</a>
|
||||
<a href="index.html" class="blog-nav-link">← На главную</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Заголовок блога -->
|
||||
<header class="blog-header">
|
||||
<div class="blog-header-content">
|
||||
<h1 class="blog-title">Блог</h1>
|
||||
<p class="blog-subtitle">Мысли, проекты и обновления из мира разработки и предпринимательства</p>
|
||||
<div class="blog-meta">
|
||||
<span class="blog-meta-item">📝 Личный блог</span>
|
||||
<span class="blog-meta-item">🔄 Регулярные обновления</span>
|
||||
<span class="blog-meta-item">🎯 Фокус на содержании</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="blog-container">
|
||||
<!-- Кнопка для мобильного меню (скрыта на десктопе) -->
|
||||
<button class="blog-sidebar-toggle" onclick="toggleSidebar()">
|
||||
📂 Меню блога
|
||||
</button>
|
||||
|
||||
<!-- Основное содержание блога - ЛЕВАЯ КОЛОНКА (70%) -->
|
||||
<div class="blog-content">
|
||||
<!-- Пример записи блога -->
|
||||
<article class="blog-post" id="post1">
|
||||
<header class="blog-post-header">
|
||||
<span class="blog-post-category">Проекты</span>
|
||||
<h2 class="blog-post-title">Новый этап развития Yalarba.ru</h2>
|
||||
<div class="blog-post-meta">
|
||||
<time datetime="2024-03-15">15 марта 2024</time>
|
||||
<span>•</span>
|
||||
<span>5 минут чтения</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="blog-post-content">
|
||||
<p>Сегодня хочу поделиться важным обновлением по проекту Yalarba.ru. Мы завершили переход на новую
|
||||
архитектуру и готовимся к запуску нескольких ключевых функций, которые существенно улучшат
|
||||
пользовательский опыт.</p>
|
||||
|
||||
<h3>Что изменилось:</h3>
|
||||
<ul>
|
||||
<li>Полностью переработанный интерфейс поиска маршрутов</li>
|
||||
<li>Интеграция с картографическими сервисами</li>
|
||||
<li>Улучшенная система рекомендаций</li>
|
||||
<li>Подготовка к мобильному приложению</li>
|
||||
</ul>
|
||||
|
||||
<p>Этот этап занял больше времени, чем планировалось, но результат того стоит. Особенно горжусь тем,
|
||||
как команда справилась с техническими вызовами.</p>
|
||||
|
||||
<blockquote class="blog-quote">
|
||||
"Технологии должны решать реальные проблемы людей, а не создавать новые"
|
||||
</blockquote>
|
||||
|
||||
<p>В ближайших планах — запуск бета-тестирования новых функций и привлечение первых партнеров из
|
||||
туристической отрасли.</p>
|
||||
</div>
|
||||
|
||||
<footer class="blog-post-footer">
|
||||
<div class="blog-post-tags">
|
||||
<a href="#" class="blog-tag">#Yalarba</a>
|
||||
<a href="#" class="blog-tag">#TravelTech</a>
|
||||
<a href="#" class="blog-tag">#Разработка</a>
|
||||
</div>
|
||||
<button onclick="sendMessageTelegram()" class="blog-comment-btn">
|
||||
💬 Обсудить
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<!-- Вторая запись -->
|
||||
<article class="blog-post" id="post2">
|
||||
<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">
|
||||
<time datetime="2024-03-10">10 марта 2024</time>
|
||||
<span>•</span>
|
||||
<span>7 минут чтения</span>
|
||||
</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>
|
||||
|
||||
<h3>Сложности перехода:</h3>
|
||||
<p>Не всё прошло гладко. Некоторые библиотеки ещё не обновились, пришлось искать альтернативы или
|
||||
писать собственные решения. Также Composition API требует изменения мышления, особенно для
|
||||
разработчиков, долго работавших с Options API.</p>
|
||||
|
||||
<p>В целом, переход оправдан. Особенно для новых проектов — рекомендую сразу начинать с Vue 3.</p>
|
||||
</div>
|
||||
|
||||
<footer class="blog-post-footer">
|
||||
<div class="blog-post-tags">
|
||||
<a href="#" class="blog-tag">#Vue3</a>
|
||||
<a href="#" class="blog-tag">#Frontend</a>
|
||||
<a href="#" class="blog-tag">#JavaScript</a>
|
||||
</div>
|
||||
<button onclick="sendMessageTelegram()" class="blog-comment-btn">
|
||||
💬 Обсудить
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<!-- Третья запись -->
|
||||
<article class="blog-post" id="post3">
|
||||
<header class="blog-post-header">
|
||||
<span class="blog-post-category">Мысли</span>
|
||||
<h2 class="blog-post-title">О важности сообщества в разработке</h2>
|
||||
<div class="blog-post-meta">
|
||||
<time datetime="2024-03-05">5 марта 2024</time>
|
||||
<span>•</span>
|
||||
<span>4 минуты чтения</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="blog-post-content">
|
||||
<p>В последнее время всё чаще задумываюсь о том, насколько важно окружение для профессионального
|
||||
роста. Особенно в IT, где технологии меняются так быстро.</p>
|
||||
|
||||
<p>Когда работаешь один, легко застрять в своих паттернах, не замечать новые подходы или повторять
|
||||
одни и те же ошибки. Сообщество — это не только нетворкинг, это:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Обратная связь</strong> — свежий взгляд на твои решения</li>
|
||||
<li><strong>Совместное обучение</strong> — каждый знает что-то, чего не знаешь ты</li>
|
||||
<li><strong>Поддержка</strong> — особенно важна в сложные периоды</li>
|
||||
<li><strong>Вдохновение</strong> — видеть успехи других мотивирует</li>
|
||||
</ul>
|
||||
|
||||
<p>Именно поэтому я решил больше инвестировать в развитие сообщества вокруг своих проектов. Если вы
|
||||
читаете это — возможно, нам стоит пообщаться :)</p>
|
||||
</div>
|
||||
|
||||
<footer class="blog-post-footer">
|
||||
<div class="blog-post-tags">
|
||||
<a href="#" class="blog-tag">#Сообщество</a>
|
||||
<a href="#" class="blog-tag">#Развитие</a>
|
||||
<a href="#" class="blog-tag">#IT</a>
|
||||
</div>
|
||||
<button onclick="sendMessageTelegram()" class="blog-comment-btn">
|
||||
💬 Присоединиться
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<!-- Четвёртая запись -->
|
||||
<article class="blog-post" id="post4">
|
||||
<header class="blog-post-header">
|
||||
<span class="blog-post-category">Проекты</span>
|
||||
<h2 class="blog-post-title">EasySite & YalArba: Текущее состояние и роадмап развития</h2>
|
||||
<div class="blog-post-meta">
|
||||
<time datetime="2024-03-20">20 марта 2024</time>
|
||||
<span>•</span>
|
||||
<span>6 минут чтения</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="blog-post-content">
|
||||
<p>С момента запуска первых версий <strong>EasySite102.ru</strong> и <strong>YalArba.ru</strong>
|
||||
прошло
|
||||
несколько месяцев интенсивной разработки. Хочу поделиться текущим состоянием проекта,
|
||||
достигнутыми
|
||||
результатами и планами на ближайшее будущее.</p>
|
||||
|
||||
<h3>🎯 Суть проекта сегодня</h3>
|
||||
<p>Мы строим полноценную экосистему для туристического рынка:</p>
|
||||
<ul>
|
||||
<li><strong>EasySite (B2B)</strong> — конструктор сайтов для владельцев отелей, санаториев,
|
||||
ресторанов и
|
||||
достопримечательностей</li>
|
||||
<li><strong>YalArba (B2C)</strong> — агрегатор для туристов с поиском, отзывами, маршрутами и
|
||||
системой
|
||||
бронирования</li>
|
||||
</ul>
|
||||
|
||||
<h3>✅ Что уже работает (стабильно в продакшене)</h3>
|
||||
<ul>
|
||||
<li><strong>JWT-аутентификация</strong> — безопасный вход для всех типов пользователей</li>
|
||||
<li><strong>Полностью контейнеризованная инфраструктура</strong> — Docker, Docker Compose</li>
|
||||
<li><strong>SSL шифрование</strong> — HTTPS на всех доменах через Let's Encrypt</li>
|
||||
<li><strong>Базовая аналитика</strong> — отслеживание посещений и пользовательского поведения
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>🛠️ Технологический стек (актуальный)</h3>
|
||||
<div class="tech-stack">
|
||||
<div class="tech-item">
|
||||
<strong>Frontend:</strong> Nuxt.js 3 (EasySite), Vue 3 + Composition API (YalArba)
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>Backend:</strong> Go (Golang) с использованием GORM, Chi
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>База данных:</strong> PostgreSQL (раздельные инстансы для разных сервисов)
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>Инфраструктура:</strong> Docker, Nginx, система автоматического обновления SSL
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>📊 API-архитектура</h3>
|
||||
<p>Проект построен по микросервисной архитектуре:</p>
|
||||
<ul>
|
||||
<li><strong>EasySite API:</strong> <code>localhost:8088/docs</code> (управление сайтами)</li>
|
||||
<li><strong>YalArba API:</strong> <code>localhost:8888/docs</code> (поиск и бронирование)</li>
|
||||
<li><strong>Auth Service:</strong> централизованная аутентификация</li>
|
||||
</ul>
|
||||
|
||||
<blockquote class="blog-quote">
|
||||
"Статус проекта на 20.03.2026: 🟢 Активная разработка. Основная функциональность работает, идёт
|
||||
наполнение
|
||||
контентом и привлечение первых пользователей."
|
||||
</blockquote>
|
||||
|
||||
<h3>📅 Роадмап развития (2026 год)</h3>
|
||||
<p>Приоритеты на ближайшие месяцы:</p>
|
||||
|
||||
<h4>Q3 2026 (Июль–Сентябрь)</h4>
|
||||
<ul>
|
||||
<li><strong>Платежная система</strong> — интеграция с ЮKassa, Tinkoff</li>
|
||||
<li><strong>Мультиязычность</strong> — поддержка английского и башкирского языков</li>
|
||||
<li><strong>API для партнеров</strong> — возможность интеграции сторонних сервисов</li>
|
||||
<li><strong>Система кэширования</strong> — Redis для повышения производительности</li>
|
||||
</ul>
|
||||
|
||||
<h4>Q4 2026 (Октябрь–Декабрь)</h4>
|
||||
<ul>
|
||||
<li><strong>Мобильные приложения</strong> — iOS и Android (React Native)</li>
|
||||
<li><strong>Система рекомендаций</strong> — AI-based подборки на основе поведения</li>
|
||||
<li><strong>Масштабирование инфраструктуры</strong> — переход на Kubernetes</li>
|
||||
<li><strong>Реферальная программа</strong> — для владельцев и туристов</li>
|
||||
</ul>
|
||||
|
||||
<h3>👥 Командная ситуация</h3>
|
||||
<p>Сейчас проект развивается силами небольшой команды (2 человека). Мы активно ищем:</p>
|
||||
<ul>
|
||||
<li><strong>Frontend-разработчиков</strong> (Vue 3, Nuxt.js)</li>
|
||||
<li><strong>Дизайнеров UI/UX</strong></li>
|
||||
<li><strong>Маркетологов</strong> для продвижения в туристической нише</li>
|
||||
<li><strong>Контент-менеджеров</strong> для наполнения платформы</li>
|
||||
</ul>
|
||||
|
||||
<h3>🎯 Когда ждать полноценного запуска?</h3>
|
||||
<p><strong>Бета-версия с основной функциональностью</strong> уже доступна по адресам:</p>
|
||||
<ul>
|
||||
<li><a href="https://easysite102.ru" target="_blank">easysite102.ru</a> (для владельцев)</li>
|
||||
<li><a href="https://yalarba.ru" target="_blank">yalarba.ru</a> (для туристов)</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Полноценный запуск</strong> с платежами и мобильным приложением планируется на
|
||||
<strong>сентябрь
|
||||
2026</strong>.
|
||||
</p>
|
||||
|
||||
<p><strong>Масштабирование на весь Урал и Поволжье</strong> — цель на <strong>2026 год</strong>.</p>
|
||||
|
||||
<h3>💬 Как можно поучаствовать?</h3>
|
||||
<p>Проект открыт для сотрудничества в разных форматах:</p>
|
||||
<ul>
|
||||
<li><strong>Технические специалисты</strong> — присоединяйтесь к разработке (удаленно)</li>
|
||||
<li><strong>Владельцы туристических объектов</strong> — создайте свой сайт на EasySite</li>
|
||||
<li><strong>Инвесторы и партнеры</strong> — обсуждаем стратегическое сотрудничество</li>
|
||||
<li><strong>Тестировщики</strong> — помогайте улучшать пользовательский опыт</li>
|
||||
</ul>
|
||||
|
||||
<p>Если вас заинтересовал проект — давайте обсудим возможности сотрудничества!</p>
|
||||
</div>
|
||||
|
||||
<footer class="blog-post-footer">
|
||||
<div class="blog-post-tags">
|
||||
<a href="#" class="blog-tag">#EasySite</a>
|
||||
<a href="#" class="blog-tag">#YalArba</a>
|
||||
<a href="#" class="blog-tag">#Туризм</a>
|
||||
<a href="#" class="blog-tag">#Разработка</a>
|
||||
<a href="#" class="blog-tag">#Стартап</a>
|
||||
</div>
|
||||
<button onclick="sendMessageTelegram()" class="blog-comment-btn">
|
||||
💬 Обсудить проект
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<!-- Пятая запись (новая) -->
|
||||
<article class="blog-post" id="post5">
|
||||
<header class="blog-post-header">
|
||||
<span class="blog-post-category">Мысли</span>
|
||||
<h2 class="blog-post-title">Зачем я создаю YalArba: история и миссия</h2>
|
||||
<div class="blog-post-meta">
|
||||
<time datetime="2024-03-25">25 марта 2024</time>
|
||||
<span>•</span>
|
||||
<span>8 минут чтения</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="blog-post-content">
|
||||
<p>Эта история началась в 2017 году, когда я работал на заводе УМПО и параллельно учился в УКСиВТ.
|
||||
Зимой
|
||||
захотелось отдохнуть — съездить куда-нибудь на машине или просто развеяться в парке. Я, конечно,
|
||||
полез в
|
||||
интернет искать сайты и информацию. И ни на одном сайте не смог найти маршрут или место, куда
|
||||
можно сходить
|
||||
бесплатно.</p>
|
||||
|
||||
<p>Везде мне продавали туры, гостиницы, ещё много вариантов, которые для меня, простого рабочего,
|
||||
совершенно не
|
||||
имели никакой ценности. Пришлось искать через знакомых, через группы, куда можно поехать на
|
||||
отдых с
|
||||
корзинкой, бутербродами, на своей машине.</p>
|
||||
|
||||
<blockquote class="blog-quote">
|
||||
«После этого случая мне сильно захотелось создать приложение, которое приводило бы людей к
|
||||
простому и
|
||||
быстрому решению по отдыху. Особенно это ценно для рабочих, у которых нет особой насмотренности,
|
||||
много
|
||||
возможностей и ресурсов для отдыха вдали от дома или за границей.»
|
||||
</blockquote>
|
||||
|
||||
<h3>Социальность проекта</h3>
|
||||
<p>Большая часть услуг будет бесплатной для всех, включая предпринимателей. Потому что я сам работал
|
||||
на заводе и
|
||||
был всегда (большую часть времени) за станком. Но остальная жизнь тогда больше походила на
|
||||
несистематизированные пьянки и гулянки. В то время это было интересно, сейчас это совершенно не
|
||||
вписывается
|
||||
в моё мировоззрение.</p>
|
||||
|
||||
<p>Мне кажется, в те годы мне не хватало широты взгляда, в общем, некому было подсказать, что
|
||||
отдыхать можно
|
||||
по-другому. Что есть много исторических мест, памятников природы. Я просто не видел альтернативы
|
||||
своему
|
||||
образу отдыха.</p>
|
||||
|
||||
<h3>Миссия сегодня</h3>
|
||||
<p>Сейчас я надеюсь, что смогу предоставить эту альтернативу. Зумеры, конечно, уже меньше подвержены
|
||||
старым
|
||||
способам отдыха (алкоголь употребляют меньше). Но я хочу добавить приложение (веб-портал),
|
||||
которое сможет
|
||||
подсказать, подкинуть идею, что отдых может быть более культурным, не таким дорогим. И главное —
|
||||
недалеко от
|
||||
дома. В рамках района, области или страны.</p>
|
||||
|
||||
<p>И я уверен, что это будет работать и в других странах. Ведь везде есть просто очень занятые люди,
|
||||
всё
|
||||
внимание которых направлено на работу и дом. В этом я вижу мейнстрим, большую цель для своего
|
||||
приложения.
|
||||
</p>
|
||||
|
||||
<h3>Международный потенциал</h3>
|
||||
<p>Через это же приложение можно будет привлекать самостоятельных туристов в нашу страну — через
|
||||
рекламу,
|
||||
распространение в другие страны. Открывать наши места отдыха не только для внутреннего туриста,
|
||||
но и для
|
||||
иностранного (выборочно, конечно).</p>
|
||||
|
||||
<h3>Бизнес-модель</h3>
|
||||
<p>Основная прибыль в этом проекте спрятана в количестве пользователей, которые будут пользоваться
|
||||
порталом
|
||||
(приложением). Конечно, приложение должно буквально делать за пользователя часть работы по
|
||||
поиску, подбору,
|
||||
исследованию и выбору маршрутов отдыха — чтобы получить наилучший результат.</p>
|
||||
|
||||
<h3>Личный путь</h3>
|
||||
<p>Поставленная высокая цель помогает мне добиваться высоких результатов в жизни. Для реализации
|
||||
проекта я
|
||||
выучил несколько языков программирования, английский язык, добился от себя внятных установок на
|
||||
жизнь,
|
||||
развил в себе планирование и смог познакомиться с невероятным количеством людей. Каждый новый
|
||||
рубль,
|
||||
потраченный на этом пути, будет воздан.</p>
|
||||
|
||||
<h3>Инвестиции или самостоятельная разработка?</h3>
|
||||
<p>Часто ловлю себя на мысли: а нужны ли мне инвестиции? И да, я часто и с большой уверенностью
|
||||
говорю: да!
|
||||
Нужны. На сервер, на человеко-часы, на заказные части программы. С другой стороны, передо мной
|
||||
часто
|
||||
возникает дилемма — хочется сделать всё самому.</p>
|
||||
|
||||
<p>Это, конечно, ошибка, которая уже стоила мне пары лет в разработке и ещё аукнется большим
|
||||
количеством
|
||||
времени, потраченным на разработку приложения самостоятельно. Я всё ещё на что-то надеюсь, что
|
||||
как-то смогу
|
||||
завершить приложение (я смогу). Просто это будет не так пафосно и круто, как хотелось бы. И
|
||||
дальше, конечно,
|
||||
встанет вопрос о том, как же его продавать (продвигать). Здесь уже заложены некоторые
|
||||
маркетинговые фишки и
|
||||
ходы для создания нового рынка и выхода на существующие.</p>
|
||||
|
||||
<p>В данный момент больше стараюсь уделять время семье и дому. Но часть моих усилий всегда
|
||||
направлена на работу
|
||||
над проектом. Конкретно сейчас работаю над блогом для проекта, хотя, казалось бы, должен
|
||||
вгрызаться в
|
||||
реализацию серверного приложения на Golang (gorm, chi).</p>
|
||||
|
||||
<p>Но я верю, что этот блог — тоже часть пути. Часть истории, которую я хочу рассказать. Чтобы
|
||||
другие, кто,
|
||||
возможно, оказался в похожей ситуации, знали: альтернатива есть. И мы её создаём.</p>
|
||||
</div>
|
||||
|
||||
<footer class="blog-post-footer">
|
||||
<div class="blog-post-tags">
|
||||
<a href="#" class="blog-tag">#История</a>
|
||||
<a href="#" class="blog-tag">#Миссия</a>
|
||||
<a href="#" class="blog-tag">#СоциальныйПроект</a>
|
||||
<a href="#" class="blog-tag">#Туризм</a>
|
||||
<a href="#" class="blog-tag">#Развитие</a>
|
||||
</div>
|
||||
<button onclick="sendMessageTelegram()" class="blog-comment-btn">
|
||||
💬 Обсудить идею
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Боковая панель - ПРАВАЯ КОЛОНКА (30%) -->
|
||||
<aside class="blog-sidebar">
|
||||
<div class="blog-sidebar-section">
|
||||
<h3>О блоге</h3>
|
||||
<p>Здесь я делюсь мыслями о разработке, обновлениями проектов и размышлениями о технологическом
|
||||
предпринимательстве.</p>
|
||||
</div>
|
||||
|
||||
<div class="blog-sidebar-section">
|
||||
<h3>Категории</h3>
|
||||
<ul class="blog-categories">
|
||||
<li><a href="#" class="blog-category">Проекты</a></li>
|
||||
<li><a href="#" class="blog-category">Разработка</a></li>
|
||||
<li><a href="#" class="blog-category">Предпринимательство</a></li>
|
||||
<li><a href="#" class="blog-category">Мысли</a></li>
|
||||
<li><a href="#" class="blog-category">Обновления</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="blog-sidebar-section">
|
||||
<h3>Последние записи</h3>
|
||||
<ul class="blog-recent">
|
||||
<li><a href="#post5">Зачем я создаю YalArba: история и миссия</a></li>
|
||||
<li><a href="#post4">EasySite & YalArba: состояние и планы от Январь 2026</a></li>
|
||||
<li><a href="#post1">Новые возможности Yalarba.ru</a></li>
|
||||
<li><a href="#post2">Переход на Vue 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<!-- Пагинация -->
|
||||
<div class="blog-pagination">
|
||||
<a href="#" class="blog-pagination-btn blog-pagination-prev">← Назад</a>
|
||||
<span class="blog-pagination-current">Страница 1 из 4</span>
|
||||
<a href="#" class="blog-pagination-btn blog-pagination-next">Вперед →</a>
|
||||
<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>
|
||||
|
||||
<!-- Футер блога -->
|
||||
<footer class="blog-footer">
|
||||
<div class="blog-footer-content">
|
||||
<p>© 2024 Блог Валитова Газиза. Все записи — личные размышления и опыт.</p>
|
||||
<p>
|
||||
<a href="index.html">На главную</a> •
|
||||
<a href="https://t.me/valitovgaziz">Telegram</a> •
|
||||
<a href="mailto:valitovgaziz@yandex.ru">Email</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="section fade-in">
|
||||
<div class="section-header">
|
||||
<a href="index.html" class="blog-back">← На главную</a>
|
||||
<h2>Блог</h2>
|
||||
<p>Мысли, проекты и обновления</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Функция для переключения темы
|
||||
function toggleTheme() {
|
||||
document.body.classList.toggle('dark-mode');
|
||||
const btn = document.querySelector('.theme-toggle');
|
||||
<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>
|
||||
|
||||
if (document.body.classList.contains('dark-mode')) {
|
||||
btn.textContent = '☀️ Светлая тема';
|
||||
localStorage.setItem('blog-theme', 'dark');
|
||||
} else {
|
||||
btn.textContent = '🌙 Темная тема';
|
||||
localStorage.setItem('blog-theme', 'light');
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
||||
// Загрузка сохраненной темы
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const savedTheme = localStorage.getItem('blog-theme');
|
||||
const btn = document.querySelector('.theme-toggle');
|
||||
<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>
|
||||
|
||||
if (savedTheme === 'dark') {
|
||||
document.body.classList.add('dark-mode');
|
||||
btn.textContent = '☀️ Светлая тема';
|
||||
} else {
|
||||
btn.textContent = '🌙 Темная тема';
|
||||
}
|
||||
<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>
|
||||
|
||||
// Адаптация для мобильных устройств
|
||||
if (window.innerWidth < 768) {
|
||||
const sidebar = document.querySelector('.blog-sidebar');
|
||||
const toggleBtn = document.querySelector('.blog-sidebar-toggle');
|
||||
<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>
|
||||
|
||||
toggleBtn.style.display = 'block';
|
||||
sidebar.style.display = 'none';
|
||||
}
|
||||
});
|
||||
<footer>
|
||||
<div class="footer-inner">
|
||||
<p>Уфа · Ufa · Өфө</p>
|
||||
<p style="margin-top: 4px;">© 2025 Valitov Gaziz</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
// Функция для отправки сообщения в Telegram
|
||||
function sendMessageTelegram() {
|
||||
window.open('https://t.me/valitovgaziz', '_blank');
|
||||
}
|
||||
|
||||
// Функция для переключения сайдбара на мобильных
|
||||
function toggleSidebar() {
|
||||
const sidebar = document.querySelector('.blog-sidebar');
|
||||
sidebar.style.display = sidebar.style.display === 'block' ? 'none' : 'block';
|
||||
}
|
||||
|
||||
// Обработчик изменения размера окна
|
||||
window.addEventListener('resize', function () {
|
||||
const sidebar = document.querySelector('.blog-sidebar');
|
||||
const toggleBtn = document.querySelector('.blog-sidebar-toggle');
|
||||
|
||||
if (window.innerWidth >= 768) {
|
||||
sidebar.style.display = 'block';
|
||||
toggleBtn.style.display = 'none';
|
||||
} else {
|
||||
toggleBtn.style.display = 'block';
|
||||
sidebar.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Плавная прокрутка для якорных ссылок
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
window.scrollTo({
|
||||
top: targetElement.offsetTop - 100,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// Закрываем сайдбар на мобильных
|
||||
if (window.innerWidth < 768) {
|
||||
const sidebar = document.querySelector('.blog-sidebar');
|
||||
sidebar.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,681 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="keywords" content="
|
||||
Fullstack-разработчик, Fullstack developer, Backend разработка, Frontend разработка, Веб-разработка, Программист Java, Программист Golang, Vue3.js разработка, JavaScript разработчик, Разработка веб-приложений, Создание сайтов, Микросервисная архитектура, REST API, PostgreSQL, Docker, Системное проектирование, Поиск тимейтов, Нетворкинг разработчиков, IT сообщество, Open-source проекты, Присоединиться к команде, Команда мечты, Рекрутинг разработчиков, Поиск программистов, Поиск дизайнеров, Поиск аналитиков, Удаленная команда, Профессиональный рост в IT, Совместная разработка, Технический предприниматель, Стартап партнерство, Инвестиции в IT, Соучредитель проекта, Бизнес-партнер, Tech Lead, Развитие проекта, Стратегическое партнерство, Венчурные инвестиции, Digital-продукты, Монетизация проектов, Travel Tech, Туристическая платформа, Планирование путешествий, Yalarba.ru, Туризм Башкортостан, Разработка платформы, Экосистема проектов, Маркетплейс туризма, Сайт-визитка разработчика, Портфолио программиста, Удаленная работа, Фриланс, Аутсорс разработка, Создание продукта с нуля, Agile разработка, Управление IT проектами, Цифровая трансформация
|
||||
" />
|
||||
|
||||
<link rel="icon" href="./images/favicon/code_orange.png" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="scripts.js"></script>
|
||||
<script src="darkThemeToggle.js"></script>
|
||||
<script src="digital_background.js"></script>
|
||||
<script src="JavaScript/analytics.js"></script>
|
||||
<title>ValitovGaziz - Предприниматель - Fullstack-разработчик</title>
|
||||
<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>
|
||||
<header class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h1>ВАЛИТОВ ГАЗИЗ</h1>
|
||||
<h3 class="hero-subtitle">
|
||||
Технологический предриниматель & Fullstack-разработчик
|
||||
</h3>
|
||||
<p class="hero-description">
|
||||
Создаю цифровое решение для отдыха. Развиваю проект
|
||||
<strong>Yalarba.ru</strong> — платформу, которая меняет подход к
|
||||
путешествиям по Башкортостану.
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<button onclick="sendMessageTelegram()" class="btn btn-primary">
|
||||
Обсудить сотрудничество
|
||||
</button>
|
||||
<button onclick="sendMessageTelegram()" class="btn btn-secondary">
|
||||
Написать мне
|
||||
</button>
|
||||
<a href="blog.html" class="btn btn-secondary">
|
||||
📝 Читать блог
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Кнопка переключения темы -->
|
||||
<button class="theme-toggle" onclick="toggleTheme()">
|
||||
🌙 Темная тема
|
||||
</button>
|
||||
|
||||
<div class="social_links_block">
|
||||
<div class="social_link_block">
|
||||
<h4>Подписывайтесь в ВК</h4>
|
||||
<a href="https://vk.com" target="_blank">
|
||||
<div class="social_link">
|
||||
<img src="./images/favicon/brand-vk.svg" alt="VK - вконтакте" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="social_link_block">
|
||||
<h4>Пишите в телеграм</h4>
|
||||
<a href="https://t.me/valitovgaziz" target="_blank">
|
||||
<div class="social_link">
|
||||
<img src="./images/favicon/brand-telegram.svg" alt="телеграмм" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
</header>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="section about">
|
||||
<div class="about-valitovgaziz-photo-box">
|
||||
<img src="./images/ValitovGaziz/valitovgaziz3.jpg" alt="Valitov Gaziz" id="valitovgaziz-photo-img"
|
||||
loading="lazy" />
|
||||
<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">
|
||||
<h2>Технический предприниматель и Fullstack-разработчик</h2>
|
||||
<ul>
|
||||
<li>г. Кумерау, 1985 год родиля</li>
|
||||
<li>1992 - 2002 г. Кумертау, БРГИ 3</li>
|
||||
<li>2002 - 2005 г.Уфа, УГАТУ, специальность "Сварочное производство"</li>
|
||||
<li>2005 - 2009 Росстовская область, СКВО, служба в армии по контракту</li>
|
||||
<li>2009 - 2012 г. Кумертау, станочник "Токарь-расточник" КумАПП</li>
|
||||
<li>2012 -2015 село Старосубхангулово, ремонт электроники. ООО "БААС - сервис" владелец</li>
|
||||
<li>2015 - 2020 г. Уфа, учеба в УКСиВТ "Техник по Информационным Системам"</li>
|
||||
<li>с 2021 самообучние и работа над проектом Ял Арба, владелец</li>
|
||||
</ul>
|
||||
<div class="resume-block">
|
||||
<a href="resume/resume.html" id="resume-link" target="_blank">resume</a>
|
||||
</div>
|
||||
<p>
|
||||
Мой подход:
|
||||
<strong>"Технологии как инструмент для решения реальных проблем"</strong>. Именно этот принцип лежит в основе
|
||||
моего флагманского проекта
|
||||
<a href="https://yalarba.ru" target="_blank">
|
||||
Yalarba.ru
|
||||
</a> <a href="https://easysite102.ru" target="_blank">
|
||||
easysite102.ru
|
||||
</a> —
|
||||
платформы, которая упрощает планирование путешествий и открывает новые
|
||||
возможности для туризма.
|
||||
Родился в г. Кумертау в 1985 году. После школы окончил УГАТУ, отслужил в армии, работал на производстве.
|
||||
С 2015 года погрузился в IT — прошёл путь от техника до основателя собственного технологического проекта.
|
||||
</p>
|
||||
|
||||
<div class="entrepreneur-highlights">
|
||||
<div class="highlight-item">
|
||||
<h4>🎯 Техническое видение</h4>
|
||||
<p>
|
||||
Создаю архитектуру, которая масштабируется и адаптируется под
|
||||
растущие потребности бизнеса
|
||||
</p>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4>💡 Бизнес-ориентация</h4>
|
||||
<p>
|
||||
Фокусируюсь на создании ценности для пользователей и устойчивых
|
||||
бизнес-моделях
|
||||
</p>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4>🚀 Практический подход</h4>
|
||||
<p>
|
||||
От прототипа к продукту: быстрое тестирование гипотез и
|
||||
итерационная разработка
|
||||
</p>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4>❤️🔥 Меня мотивирует</h4>
|
||||
<p>
|
||||
Процесс создания проекта с большой пользой многим людям - это то,
|
||||
что по-настоящему подпитывает меня, давая энергию для ежедневного
|
||||
стремления к лучшему будущему.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- НОВАЯ СЕКЦИЯ: О репозитории -->
|
||||
<div class="section repository">
|
||||
<h2>
|
||||
👨💻 О репозитории
|
||||
<a href="https://github.com/valitovgaziz" class="link-style-none" target="_blank">
|
||||
ValitovGaziz-GitHub.com
|
||||
</a>
|
||||
</h2>
|
||||
<p>
|
||||
Добро пожаловать! Этот репозиторий — моё цифровое портфолио и
|
||||
пространство для экспериментов.
|
||||
</p>
|
||||
|
||||
<div class="projects-grid">
|
||||
<div class="project-card">
|
||||
<h3>
|
||||
🌐
|
||||
<a href="https://valitovgaziz.ru" class="link-style-none" target="_blank">ValitovGaziz.ru</a>
|
||||
</h3>
|
||||
<p>
|
||||
Сайт-визитка, который вы сейчас просматриваете. Здесь собрана
|
||||
информация о моих навыках, проектах и способах связи.
|
||||
</p>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<h3>
|
||||
🏞️
|
||||
<a href="https://yalarba.ru" class="link-style-none" target="_blank">Yalarba.ru</a>
|
||||
</h3>
|
||||
<p>
|
||||
Платформа для туризма по Башкортостану. Помогает путешественникам
|
||||
открывать новые места и планировать маршруты.
|
||||
</p>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<h3>
|
||||
🏃♂️
|
||||
<a href="https://BegushiyBashkir.ru" class="link-style-none" target="_blank">BegushiyBashkir.ru</a>
|
||||
</h3>
|
||||
<p>
|
||||
Сайт бегового клуба "Бегущий Башкир", основанного моим другом
|
||||
<a href="https://t.me/zagir_aminev">Аминевым Загиром.</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="current-info">
|
||||
<h3>
|
||||
Что сейчас в работе?
|
||||
<a href="https://easysite102.ru" class="link-style-none" target="_blank"
|
||||
title="Конструктор сайтов для туристических объектов">easysite102.ru</a>
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Разрабатываю:</strong> easysite102.ru - как часть экосистемы
|
||||
YalArba.ru.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Открыт к сотрудничеству:</strong> Участвую в разработке
|
||||
open-source проектов.
|
||||
</li>
|
||||
<li><strong>Нужна помощь:</strong> В развитии моих проектов.</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<strong>Задавайте вопросы</strong> по моим проектам или всему, в чём
|
||||
могу быть полезен.
|
||||
<a href="resume/resume.html">Полное резюме →</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- НОВАЯ СЕКЦИЯ: Команда мечты -->
|
||||
<div class="section team-section">
|
||||
<div class="team-header">
|
||||
<h2>🚀 Ищем тимейтов для роста и прорыва</h2>
|
||||
<p class="team-tagline">
|
||||
Создаем digital-будущее вместе через разработку цифровых решений
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="team-content">
|
||||
<div class="team-mission">
|
||||
<h3>💫 Наша миссия</h3>
|
||||
<p>
|
||||
Мы строим сообщество профессионалов, которые через технологии
|
||||
создают реальную пользу для людей. Это не коммерческая работа — это
|
||||
возможность расти, решая сложные задачи и открывая новые горизонты.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="team-roles">
|
||||
<h3>👥 Кого мы ищем:</h3>
|
||||
<div class="roles-grid">
|
||||
<div class="role-card">
|
||||
<h4>💻 Программисты</h4>
|
||||
<p>
|
||||
Fullstack, Backend, Frontend, Mobile — все, кто готов строить
|
||||
масштабируемые решения
|
||||
</p>
|
||||
</div>
|
||||
<div class="role-card">
|
||||
<h4>🎨 Дизайнеры</h4>
|
||||
<p>UI/UX, продуктовые дизайнеры, креативные мыслители</p>
|
||||
</div>
|
||||
<div class="role-card">
|
||||
<h4>📊 Аналитики</h4>
|
||||
<p>
|
||||
Ищем аналитика (системного и бизнес‑аналитика) для анализа
|
||||
процессов, сбора требований и перевода бизнес‑потребностей в
|
||||
технические решения.
|
||||
</p>
|
||||
</div>
|
||||
<div class="role-card">
|
||||
<h4>🚀 Продавцы-стратеги</h4>
|
||||
<p>Кто понимает, как digital-продукты меняют рынки</p>
|
||||
</div>
|
||||
<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 class="team-value">
|
||||
<h3>🎯 Что получаете взамен:</h3>
|
||||
<ul>
|
||||
<li>
|
||||
✅ <strong>Реальный опыт</strong> — задачи уровня коммерческих
|
||||
проектов
|
||||
</li>
|
||||
<li>
|
||||
✅ <strong>Профессиональный рост</strong> — следующий уровень
|
||||
навыков гарантирован
|
||||
</li>
|
||||
<li>
|
||||
✅ <strong>Нетворкинг</strong> — сообщество сильных специалистов
|
||||
</li>
|
||||
<li>
|
||||
✅ <strong>Портфолио</strong> — проекты, которые впечатляют
|
||||
работодателей
|
||||
</li>
|
||||
<li>
|
||||
✅ <strong>Горизонтальное развитие</strong> — возможность
|
||||
пробовать себя в смежных ролях
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="team-challenge">
|
||||
<h3>⚡ Уровень сложности:</h3>
|
||||
<p>
|
||||
Спектр задач достаточно высок — решая их, вы гарантированно
|
||||
подниметесь на следующую ступень развития. Мы работаем с
|
||||
технологиями, которые определяют будущее: микросервисы, AI/ML,
|
||||
масштабируемые архитектуры, современный UX и бизнес-модели.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="team-cta">
|
||||
<h3>Готовы расти вместе?</h3>
|
||||
<p>
|
||||
Если вы ищете не просто проект, а сообщество для профессионального
|
||||
прорыва — давайте знакомиться!
|
||||
</p>
|
||||
<button class="btn btn-primary" onclick="sendMessageTelegram()">
|
||||
Присоединиться к команде
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ОБНОВЛЕННАЯ СЕКЦИЯ: Yalarba -->
|
||||
<div id="yalarba-invest" class="section yalarba-section">
|
||||
<div class="yalarba-header">
|
||||
<h2>
|
||||
🚀 <a href="https://yalarba.ru" target="_blank">Yalarba.ru</a> —
|
||||
Travel Tech проект
|
||||
</h2>
|
||||
<p class="yalarba-tagline">
|
||||
Платформа для планирования путешествий нового поколения
|
||||
</p>
|
||||
<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="yalarba-content">
|
||||
<div class="yalarba-stats">
|
||||
<div class="stat">
|
||||
<h3>❤️</h3>
|
||||
<p>проект, рожденный от любви к краю</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<h3>🤝</h3>
|
||||
<p>открыт для помощи и сотрудничества</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<h3>🚀</h3>
|
||||
<p>готов к росту с правильной командой</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yalarba-value">
|
||||
<h3>Технологический стек проекта:</h3>
|
||||
<ul>
|
||||
<li>✅ Микросервисная архитектура на Golang (Gorm, Chi)</li>
|
||||
<li>✅ Современный фронтенд на Nuxt.js 4, Vue3.js</li>
|
||||
<li>✅ Оптимизированная база данных PostgreSQL</li>
|
||||
<li>
|
||||
✅ Контейнеризация и легкое масштабирование через Docker, Docker
|
||||
Swarm
|
||||
</li>
|
||||
<li>✅ Полный цикл разработки от идеи до продукта</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="investment-cta">
|
||||
<h3>Инвестиционные возможности</h3>
|
||||
<p>
|
||||
Проект открыт для стратегических партнерств и инвестиций. Если вас
|
||||
заинтересовала платформа, давайте обсудим перспективы
|
||||
сотрудничества.
|
||||
</p>
|
||||
<button class="btn btn-primary" onclick="sendMessageTelegram()">
|
||||
Обсудить детали
|
||||
</button>
|
||||
</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>
|
||||
|
||||
<div class="section">
|
||||
<section id="experience" class="section fade-in">
|
||||
<div class="section-header">
|
||||
<h2>Опыт работы</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<h3>Основатель и Tech Lead - Yalarba.ru</h3>
|
||||
<p><strong>2020 — настоящее время</strong> (5+ лет)</p>
|
||||
<p>
|
||||
Разработка и продвижение инновационной платформы для планирования
|
||||
путешествий с полным циклом разработки:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Создание архитектуры микросервисов на Nuxt.js 4 и Golang</li>
|
||||
<li>Разработка современного фронтенда на Nuxt.js 4 & Vue3.js</li>
|
||||
<li>Проектирование и оптимизация баз данных PostgreSQL</li>
|
||||
<li>Внедрение Docker и контейнеризации для масштабирования</li>
|
||||
<li>Управление проектом, планирование развития продукта</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<h3>Fullstack-разработчик (Проектная работа)</h3>
|
||||
<p><strong>2017 — настоящее время</strong> (7+ лет)</p>
|
||||
<p>Участие в различных IT-проектах:</p>
|
||||
<ul>
|
||||
<li>Разработка лендинг-страниц и сайтов-визиток</li>
|
||||
<li>Создание маркетплейсов и туристических агрегаторов</li>
|
||||
<li>
|
||||
Проектирование REST API на Golang (gorm, chi), PostgresQL, https
|
||||
</li>
|
||||
<li>Разработка фронтенда на Nuxt.js 4 (vue3.js)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Обновленная секция навыков в index.html -->
|
||||
<div class="section">
|
||||
<h2>Навыки</h2>
|
||||
<div class="skills-container">
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<h3 class="skill-name">Golang</h3>
|
||||
<span class="skill-level advanced">Продвинутый</span>
|
||||
</div>
|
||||
<p class="skill-description">
|
||||
Высокопроизводительные backend сервисы
|
||||
</p>
|
||||
<div class="skill-acquisition">
|
||||
<strong>Опыт:</strong> 2+ лет коммерческой разработки, REST API,
|
||||
best practices
|
||||
</div>
|
||||
<div class="skill-growth">
|
||||
Concurrency patterns, advanced Go features
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<h3 class="skill-name">JavaScript</h3>
|
||||
<span class="skill-level advanced">Продвинутый</span>
|
||||
</div>
|
||||
<p class="skill-description">
|
||||
Fullstack разработка, современный ES6+
|
||||
</p>
|
||||
<div class="skill-acquisition">
|
||||
<strong>Опыт:</strong> 3+ лет коммерческой разработки, Vue.js,
|
||||
Node.js
|
||||
</div>
|
||||
<div class="skill-growth">
|
||||
TypeScript, advanced patterns, performance optimization
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<h3 class="skill-name">Vue3</h3>
|
||||
<span class="skill-level intermediate">Средний</span>
|
||||
</div>
|
||||
<p class="skill-description">
|
||||
Современный фронтенд с Composition API
|
||||
</p>
|
||||
<div class="skill-acquisition">
|
||||
<strong>Опыт:</strong> Разработка SPA приложений, Vue Router, Pinia
|
||||
</div>
|
||||
<div class="skill-growth">Vue 3 advanced patterns, testing, SSR</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<h3 class="skill-name">Nuxt</h3>
|
||||
<span class="skill-level intermediate">Средний</span>
|
||||
</div>
|
||||
<p class="skill-description">SSR/SSG приложения на Vue.js</p>
|
||||
<div class="skill-acquisition">
|
||||
<strong>Опыт:</strong> Nuxt 3, server-side rendering, static site
|
||||
generation
|
||||
</div>
|
||||
<div class="skill-growth">Nuxt 4, advanced caching strategies</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<h3 class="skill-name">PostgreSQL</h3>
|
||||
<span class="skill-level intermediate">Средний</span>
|
||||
</div>
|
||||
<p class="skill-description">
|
||||
Реляционные базы данных, оптимизация запросов
|
||||
</p>
|
||||
<div class="skill-acquisition">
|
||||
<strong>Опыт:</strong> Проектирование схем, индексы, сложные запросы
|
||||
</div>
|
||||
<div class="skill-growth">
|
||||
Advanced SQL, partitioning, replication
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<h3 class="skill-name">Docker</h3>
|
||||
<span class="skill-level intermediate">Средний</span>
|
||||
</div>
|
||||
<p class="skill-description">Контейнеризация приложений</p>
|
||||
<div class="skill-acquisition">
|
||||
<strong>Опыт:</strong> Docker Compose, multi-stage builds,
|
||||
оптимизация образов
|
||||
</div>
|
||||
<div class="skill-growth">
|
||||
Kubernetes, Docker Swarm, orchestration
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<h3 class="skill-name">Java</h3>
|
||||
<span class="skill-level beginner">Начинающий</span>
|
||||
</div>
|
||||
<p class="skill-description">
|
||||
Backend разработка микросервисов и enterprise приложений
|
||||
</p>
|
||||
<div class="skill-acquisition">
|
||||
<strong>Опыт:</strong> Коммерческая разработка 2+ лет, Spring
|
||||
Framework, Hibernate
|
||||
</div>
|
||||
<div class="skill-growth">
|
||||
Углубление в Spring Boot 3, reactive programming
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<div class="skill-header">
|
||||
<h3 class="skill-name">Spring Framework</h3>
|
||||
<span class="skill-level beginner">Начинающий</span>
|
||||
</div>
|
||||
<p class="skill-description">
|
||||
Создание масштабируемых enterprise приложений
|
||||
</p>
|
||||
<div class="skill-acquisition">
|
||||
<strong>Опыт:</strong> Spring Boot, Spring Security, Spring Data,
|
||||
Spring MVC
|
||||
</div>
|
||||
<div class="skill-growth">
|
||||
Изучение Spring Cloud, микросервисная архитектура
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<section id="education" class="section fade-in">
|
||||
<div class="section-header">
|
||||
<h2>Образование</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<h3>УКСИВТ</h3>
|
||||
<p>Уфимский колледж статистики и информатики</p>
|
||||
<p>Техник по информационным системам</p>
|
||||
<p><strong>2016 - 2020</strong></p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<h3>
|
||||
Автономная некоммерческая организация высшего образования
|
||||
«Университет Иннополис»
|
||||
</h3>
|
||||
<p>Java enterprise, Java enterprise developer</p>
|
||||
<p><strong>2021 - 2021</strong></p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<h3>МТИ - Московский технологический институт.</h3>
|
||||
<p>Разработка программного обеспечения</p>
|
||||
<p><strong>2025 - ></strong></p>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div class="section">
|
||||
<h2>Курсы и сертификаты</h2>
|
||||
<ul>
|
||||
<li>2024: Управление проектами (Skillbox, Эффективный руководитель)</li>
|
||||
<li>2022: Java Full Stack Developer (JetBrains Academy)</li>
|
||||
<li>2021: Java Enterprise developer (Университет Иннополис)</li>
|
||||
<li>
|
||||
2020: Управление по Agile: Scrum, Kanban, Lean (Нетология-групп)
|
||||
</li>
|
||||
<li>2019: English intermediate (Frog-school)</li>
|
||||
</ul>
|
||||
<section id="skills" class="section fade-in">
|
||||
<div class="section-header">
|
||||
<h2>Навыки</h2>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Языки</h2>
|
||||
<ul>
|
||||
<li>Башкирский — Родной</li>
|
||||
<li>Русский — C1 (Продвинутый)</li>
|
||||
<li>Английский — B2 (Средне-продвинутый)</li>
|
||||
</ul>
|
||||
<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>
|
||||
|
||||
<div class="section">
|
||||
<section id="contact" class="section fade-in">
|
||||
<div class="section-header">
|
||||
<h2>Контакты</h2>
|
||||
<p>
|
||||
Всегда рад новым знакомствам и интересным предложениям о сотрудничестве.
|
||||
</p>
|
||||
<div class="contact-info">
|
||||
<p>
|
||||
📱 Телеграм:
|
||||
<a href="https://t.me/valitovgaziz" target="_blank">@valitovgaziz</a>
|
||||
</p>
|
||||
<p>
|
||||
📧 Email:
|
||||
<a href="mailto:valitovgaziz@yandex.ru" target="_blank">valitovgaziz@yandex.ru</a>
|
||||
</p>
|
||||
<p>
|
||||
📞 Телефон:
|
||||
<a href="tel:+79625439343" target="_blank">+7(962)543-93-43</a>
|
||||
</p>
|
||||
</div>
|
||||
<button id="saveContactBtn" onclick="saveContact()">
|
||||
📇 Сохранить контакт
|
||||
</button>
|
||||
<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-links">
|
||||
<div class="footer-section">
|
||||
<h4>Технологии:</h4>
|
||||
<div class="two-column-grid">
|
||||
<div class="footer-box">
|
||||
<ul>
|
||||
<li>FrontEnd:</li>
|
||||
<li>BackEnd:</li>
|
||||
<li>DataBase:</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-box">
|
||||
<ul>
|
||||
<li>Vue3.js Nuxt.js</li>
|
||||
<li>Golang (Gorm, Chi)</li>
|
||||
<li>PostgresQL</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="footer-inner">
|
||||
<p>Уфа · Ufa · Өфө</p>
|
||||
<p style="margin-top: 4px;">© 2025 Valitov Gaziz</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>Контакты:</h4>
|
||||
<div class="two-column-grid">
|
||||
<div class="footer-box">
|
||||
<ul>
|
||||
<li>Telegram:</li>
|
||||
<li>Phone:</li>
|
||||
<li>Email:</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-box">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://t.me/valitovgaziz" target="_blank">@valitovgaziz</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="tel:+79625439343" target="_blank">8 (962) 543-93-43</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:valitovgaziz@yandex.ru" target="_blank">valitovgaziz@yandex.ru</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>Сообщество:</h4>
|
||||
<div class="two-column-grid">
|
||||
<div class="footer-box">
|
||||
<ul>
|
||||
<li>Telegram channel:</li>
|
||||
<li>Telegram channel:</li>
|
||||
<li>VK group:</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-box">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://t.me/ValitovGaziz_Ufa" target="_blank">Мои новости</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://t.me/+oYymS0r6qG9lYWJi" target="_blank">YalArba.ru team</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vk.com/club222248484?from=groups" target="_blank">ЯлАрба | Путевозитель</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-end-text">
|
||||
<p>Уфа Ufa Өфө 2025 © Created by Valitov Gaziz</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,132 +1,26 @@
|
||||
function saveContact() {
|
||||
// Создаем содержимое vCard (VCF)
|
||||
const vCardData = `BEGIN:VCARD
|
||||
VERSION:3.0
|
||||
FN:Валитов Газиз Камилевич
|
||||
N:Валитов;Газиз;Камилевич
|
||||
ORG:FREELANCE
|
||||
TITLE:FULLSTACK_DEVELOPER
|
||||
TEL;TYPE=MOBILE:+79279238823
|
||||
TEL;TYPE=MOBILE:+79044513441
|
||||
TEL;TYPE=MOBILE:+79625439243
|
||||
EMAIL;TYPE=HOME:valitovgaziz@gmail.com
|
||||
EMAIL;TYPE=WORK:valitovgaziz@yandex.ru
|
||||
URL:https://valitovgaziz.ru
|
||||
URL:https://t.me/valitovgaziz
|
||||
URL:https://vk.ru/id378105199
|
||||
BDAY:1985-10-27
|
||||
END:VCARD`;
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const saved = localStorage.getItem('theme');
|
||||
|
||||
// Создаем Blob (бинарный объект) с данными vCard
|
||||
const blob = new Blob([vCardData], { type: 'text/vcard' });
|
||||
|
||||
// Создаем URL для скачивания
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
// Создаем временную ссылку для скачивания
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'valitovgaziz.vcf'; // Имя файла
|
||||
link.click();
|
||||
|
||||
// Освобождаем память
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function loadTermSheet() {
|
||||
// Create a temporary anchor element
|
||||
const link = document.createElement('a');
|
||||
|
||||
// Set correct relative path to the PDF file
|
||||
link.href = './assets/docs/TermSheet.pdf';
|
||||
|
||||
// Set download attribute with filename
|
||||
link.download = 'TermSheet.pdf';
|
||||
|
||||
// Append to body to make it work in some browsers
|
||||
document.body.appendChild(link);
|
||||
|
||||
// Trigger the download
|
||||
link.click();
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
|
||||
// Обработчик для кнопки "Запросить презентацию"
|
||||
function sendMessageTelegram() {
|
||||
// Проверяем, поддерживает ли браузер диалоги
|
||||
if (typeof window.orientation !== 'undefined' && !window.confirm) {
|
||||
// Для мобильных браузеров без поддержки prompt - открываем Telegram напрямую
|
||||
window.open('https://t.me/valitovgaziz', '_blank');
|
||||
return;
|
||||
if (saved === 'dark') {
|
||||
document.body.classList.add('dark');
|
||||
themeToggle.textContent = '☀️';
|
||||
}
|
||||
|
||||
const message = prompt("Опишите, пожалуйста, ваше предложение или вопрос. Я свяжусь с вами в ближайшее время:");
|
||||
if (message) {
|
||||
const BOT_TOKEN = "8470085635:AAEPZcsN3n-3FkMdr7DzxbiQ3q8mXZTGwug";
|
||||
const CHAT_ID = "559861569";
|
||||
|
||||
// Используем FormData вместо JSON (более надежно)
|
||||
const formData = new FormData();
|
||||
formData.append('chat_id', CHAT_ID);
|
||||
formData.append('text', `📥 Новое сообщение с сайта ValitovGaziz:\n\n${message}`);
|
||||
formData.append('parse_mode', 'HTML');
|
||||
|
||||
// Альтернативный URL
|
||||
fetch(`https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.ok) {
|
||||
alert("Сообщение успешно отправлено! Я свяжусь с вами в ближайшее время.");
|
||||
} else {
|
||||
console.error('Telegram API Error:', data);
|
||||
alert("Ошибка: " + (data.description || 'Неизвестная ошибка'));
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Ошибка:", error);
|
||||
alert("Произошла ошибка сети. Попробуйте позже или свяжитесь со мной напрямую.");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Универсальный обработчик для кнопок
|
||||
function setupButtonHandlers() {
|
||||
const buttons = document.querySelectorAll('button[onclick*="sendMessageTelegram"]');
|
||||
|
||||
buttons.forEach(button => {
|
||||
// Удаляем старые обработчики
|
||||
button.removeAttribute('onclick');
|
||||
|
||||
// Добавляем универсальные обработчики
|
||||
button.addEventListener('click', handleTelegramButtonClick);
|
||||
button.addEventListener('touchstart', handleTelegramButtonClick, { passive: true });
|
||||
themeToggle.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark');
|
||||
const isDark = document.body.classList.contains('dark');
|
||||
themeToggle.textContent = isDark ? '☀️' : '🌙';
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||
});
|
||||
}
|
||||
|
||||
// Обработчик кликов для Telegram кнопок
|
||||
function handleTelegramButtonClick(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
// Для touch-событий, предотвращаем повторное срабатывание
|
||||
if (event.type === 'touchstart') {
|
||||
const now = Date.now();
|
||||
if (this.lastTouch && (now - this.lastTouch) < 500) {
|
||||
return;
|
||||
}
|
||||
this.lastTouch = now;
|
||||
}
|
||||
|
||||
sendMessageTelegram();
|
||||
}
|
||||
|
||||
// Инициализация при загрузке страницы
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
setupButtonHandlers();
|
||||
});
|
||||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||||
});
|
||||
|
||||
+321
-407
@@ -1,464 +1,378 @@
|
||||
@import url("./style/digital_background.css");
|
||||
@import url("./style/saveContactsButtonStyle.css");
|
||||
@import url("./style/darkTheme.css");
|
||||
@import url("./style/about.css");
|
||||
@import url("./style/social_link.css");
|
||||
@import url("./style/hero_section.css");
|
||||
@import url("./style/yalarba_investmen.css");
|
||||
@import url("./style/footer.css");
|
||||
@import url("./style/repository_section.css");
|
||||
@import url("./style/links_style.css");
|
||||
@import url("./style/skill_section.css");
|
||||
|
||||
/* style.css - обновленный */
|
||||
:root {
|
||||
--primary: #a9e299;
|
||||
--secondary: #63c1ff;
|
||||
--light: #ecf0f1;
|
||||
--dark: #36304d;
|
||||
--success: #2ecc71;
|
||||
--border-radius: 12px;
|
||||
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--transition: all 0.3s ease;
|
||||
--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;
|
||||
}
|
||||
|
||||
* {
|
||||
transition: background-color 0.3s ease, color 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
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);
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
min-width: 300px;
|
||||
max-width: 1200px;
|
||||
margin: 10px auto 5px auto;
|
||||
padding: 10px 20px;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
min-height: 100vh;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
/* Улучшенная сетка для header */
|
||||
header {
|
||||
background-color: var(--primary);
|
||||
color: var(--dark);
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
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 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
justify-self: end;
|
||||
padding: 8px 12px;
|
||||
background: var(--secondary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: var(--transition);
|
||||
z-index: 1000;
|
||||
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); }
|
||||
|
||||
.social_links_block {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
justify-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Улучшенная сетка для секций */
|
||||
.section {
|
||||
background: rgb(226, 240, 241);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.entrepreneur-highlights {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.highlight-item {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/* Сетка для команды */
|
||||
.team-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.team-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.roles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.role-card {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
transition: var(--transition);
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.role-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Сетка для Yalarba секции */
|
||||
.yalarba-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.yalarba-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.yalarba-value ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Сетка для контактов */
|
||||
.contact-info {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Сетка для футера */
|
||||
footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
padding: 1em 0 0 0;
|
||||
color: var(--dark);
|
||||
font-size: 0.9rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.two-column-grid {
|
||||
/* Hero */
|
||||
.hero {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 24px 60px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
border-left: 1px solid black;
|
||||
grid-template-rows: auto; /* Явно указываем одну строку */
|
||||
grid-auto-flow: row; /* Запрещаем автоматическое создание новых строк */
|
||||
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;
|
||||
justify-content: center;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: var(--transition);
|
||||
padding: 10px 24px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--secondary);
|
||||
color: white;
|
||||
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;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #2980b9;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
.hero-photo img {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 4px solid var(--bg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: white;
|
||||
.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;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: white;
|
||||
color: var(--primary);
|
||||
}
|
||||
.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; }
|
||||
|
||||
/* Timeline улучшения */
|
||||
.timeline {
|
||||
/* About */
|
||||
.about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 48px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
content: "";
|
||||
.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: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 7px;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 2px;
|
||||
background: var(--secondary);
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.timeline-item:before {
|
||||
content: "";
|
||||
.timeline-item { position: relative; margin-bottom: 32px; }
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
top: 5px;
|
||||
left: -24px;
|
||||
top: 6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
border: 2px solid var(--secondary);
|
||||
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) {
|
||||
body {
|
||||
padding: 5px 10px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
.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; }
|
||||
|
||||
header {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
.about-grid { grid-template-columns: 1fr; text-align: center; }
|
||||
.about-photo { margin: 0 auto; }
|
||||
.about-highlights { grid-template-columns: 1fr; }
|
||||
|
||||
.theme-toggle {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
justify-self: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.section { padding: 48px 20px; }
|
||||
.nav-links .nav-desktop { display: none; }
|
||||
|
||||
.section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.about {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-valitovgaziz-photo-box img {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.roles-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.yalarba-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.two-column-grid {
|
||||
border-left: none;
|
||||
border-top: 1px solid black;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.timeline-item:before {
|
||||
left: -20px;
|
||||
}
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
.projects-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Адаптация для очень маленьких экранов */
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.projects-grid,
|
||||
.roles-grid,
|
||||
.entrepreneur-highlights {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.yalarba-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.skills-container {
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Улучшения для планшетов */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.about {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.roles-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.entrepreneur-highlights {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Анимации и улучшения UX */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
.project-card,
|
||||
.role-card,
|
||||
.highlight-item {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Улучшения доступности */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Улучшения фокуса для доступности */
|
||||
button:focus,
|
||||
a:focus {
|
||||
outline: 2px solid var(--secondary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Улучшения для темной темы */
|
||||
body.dark-mode .highlight-item,
|
||||
body.dark-mode .role-card {
|
||||
background: var(--dark-card);
|
||||
}
|
||||
|
||||
body.dark-mode .project-card:hover,
|
||||
body.dark-mode .role-card:hover,
|
||||
body.dark-mode .highlight-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
|
||||
.hero h1 { font-size: 2rem; }
|
||||
.hero-subtitle { font-size: 1rem; }
|
||||
.section-header h2 { font-size: 1.5rem; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user