modified: begushiybashkir/bbvue/src/App.vue

new file: valitovgaziz/html/images/favicon/icons8-vk-50.png new file: "valitovgaziz/html/images/favicon/icons8-\321\202\320\265\320\273\320\265\320\263\321\200\320\260\320\274-50.png" modified: valitovgaziz/html/index.html modified: valitovgaziz/html/scripts.js modified: valitovgaziz/html/style.css new file: valitovgaziz/html/style/hero_section.css modified: valitovgaziz/html/style/social_link.css new file: valitovgaziz/html/style/up_button.css new file: valitovgaziz/html/style/yalarba_investmen.css modifay and change valitovgaziz site
2025-10-02 15:24:52 +05:00
parent 7697cb403f
commit f4ae7ba51e
10 changed files with 374 additions and 543 deletions
@@ -61,26 +61,48 @@
    ></noscript>
    <!-- /Yandex.Metrika counter -->

-    <header>
-      <h1>Валитов Газиз Камилевич</h1>
-      <p>Fullstack-разработчик</p>
-      <img src="" alt="" />
-      <div class="contact-info">
-        <span id="phone">+7(904)451-34-47</span>
-        <span id="email">valitovgaziz@yandex.ru</span>
-        <span id="telegram">
-          <a target="_blank" href="https://t.me/valitovgaziz">telegram</a>
-        </span>
-        <span id="city">Уфа, Россия</span>
+    <header class="hero">
+      <div class="hero-content">
+        <div class="hero-text">
+          <h1>Валитов Газиз</h1>
+          <p class="hero-subtitle">
+            Fullstack-разработчик & Основатель
+            <span class="highlight">Yalarba.ru</span>
+          </p>
+          <p class="hero-description">
+            Создаю технологические решения для туризма будущего. Ищу инвесторов
+            для масштабирования проекта <strong>Yalarba.ru</strong> — платформы,
+            которая меняет подход к путешествиям.
+          </p>
+          <div class="hero-buttons">
+            <a href="#yalarba-invest" class="btn btn-primary"
+              >Инвестировать в Yalarba</a
+            >
+            <a href="#contact" class="btn btn-secondary">Связаться со мной</a>
+          </div>
+        </div>
+      </div>
+      <div class="social_links_block">
+        <div class="social_link_block">
+          <h4>Подписывайтесь в ВК</h4>
+          <a href="https://vk.com">
+            <div class="social_link">
+              <img src="./images/favicon/icons8-vk-50.png" alt="VK - вконтакте">
+            </div>
+          </a>
+        </div>
+        <div class="social_link_block">
+          <h4>Пишите в телеграм</h4>
+          <a href="https://t.me/valitovgaziz">
+            <div class="social_link">
+              <img src="./images/favicon/icons8-телеграм-50.png" alt="телеграмм">
+            </div>
+          </a>
+        </div>
      </div>
-      <button id="saveContactBtn" onclick="saveContact()">
-        Скачать контакты
-      </button>
-      <button class="theme-toggle" onclick="toggleTheme()">
-        🌙 Темная тема
-      </button>
    </header>

+    <!-- ОБНОВИТЕ секцию "Обо мне" -->
    <div class="section about">
      <div class="about-valitovgaziz-photo-box">
        <img
@@ -90,40 +112,117 @@
        />
      </div>
      <div class="about-text">
-        <h2>Обо мне</h2>
+        <h2>Технический предприниматель и Fullstack-разработчик</h2>
        <p>
-          Специализируюсь на создании веб-приложений с использованием
-          современных технологий. Свой хостинг и сайты на нативном коде дают
-          преимущество в гибкой цене сайта и возможности передать исключительные
-          права владения кодом заказчику.
+          С 2017 года создаю цифровые продукты, сочетая техническую экспертизу и
+          бизнес-видение. Специализируюсь на разработке веб-приложений под ключ
+          — от идеи до масштабируемого продукта.
        </p>

        <p>
-          <strong>Девиз:</strong> "Век живи, век учись. Краткость — сестра
-          таланта."
+          Мой подход:
+          <strong
+            >"Технологии как инструмент для решения реальных проблем"</strong
+          >. Именно этот принцип лежит в основе моего флагманского проекта
+          <a href="https://yalarba.ru" target="_blank">Yalarba.ru</a> —
+          платформы, которая упрощает планирование путешествий и открывает новые
+          возможности для туризма.
        </p>
-        <div class="social_links_block">
-          <div class="social_link_block">
-            <h4>Подписывайтесь в ВК</h4>
-            <a href="https://vk.com">
-              <div class="social_link">
-                <span>VK</span>
-              </div>
-            </a>
+
+        <div class="entrepreneur-highlights">
+          <div class="highlight-item">
+            <h4>🎯 Техническое видение</h4>
+            <p>
+              Создаю архитектуру, которая масштабируется и адаптируется под
+              растущие потребности бизнеса
+            </p>
          </div>
-          <div class="social_link_block">
-            <h4>Пишите в телеграм</h4>
-            <a href="https://t.me/valitovgaziz">
-              <div class="social_link">
-                <span>TG</span>
-              </div>
-            </a>
+          <div class="highlight-item">
+            <h4>💡 Бизнес-ориентация</h4>
+            <p>
+              Фокусируюсь на создании ценности для пользователей и устойчивых
+              бизнес-моделях
+            </p>
          </div>
+          <div class="highlight-item">
+            <h4>🚀 Практический подход</h4>
+            <p>
+              От прототипа к продукту: быстрое тестирование гипотез и
+              итерационная разработка
+            </p>
+          </div>
+        </div>
+
+        <!-- Социальные ссылки остаются без изменений -->
+      </div>
+    </div>
+
+    <!-- ДОБАВЬТЕ эту секцию ПОСЛЕ секции "Обо мне" -->
+    <div id="yalarba-invest" class="section yalarba-section">
+      <div class="yalarba-header">
+        <h2>🚀 Yalarba.ru — Инвестиции в Travel Tech</h2>
+        <p class="yalarba-tagline">
+          Платформа для планирования путешествий нового поколения
+        </p>
+      </div>
+
+      <div class="yalarba-content">
+        <div class="yalarba-stats">
+          <div class="stat">
+            <h3>7+</h3>
+            <p>лет разработки</p>
+          </div>
+          <div class="stat">
+            <h3>3</h3>
+            <p>технологических стека</p>
+          </div>
+          <div class="stat">
+            <h3>100%</h3>
+            <p>права на код</p>
+          </div>
+        </div>
+
+        <div class="yalarba-value">
+          <h3>Почему это перспективно для инвесторов?</h3>
+          <ul>
+            <li>✅ Растущий рынок Travel Tech в России и СНГ</li>
+            <li>✅ Уникальная технологическая платформа</li>
+            <li>✅ Полные права на код и IP</li>
+            <li>✅ Опытная команда разработки</li>
+            <li>✅ Доказанная жизнеспособность концепции</li>
+          </ul>
+        </div>
+
+        <div class="investment-cta">
+          <h3>Готовы обсудить инвестиционные возможности?</h3>
+          <p>Свяжитесь для получения презентации проекта и финансовой модели</p>
+          <a href="#contact" class="btn btn-primary">Запросить презентацию</a>
        </div>
      </div>
    </div>

    <div class="section">
+      <div class="timeline-item">
+        <h3>Основатель и Tech Lead - Yalarba.ru</h3>
+        <p><strong>2020 — настоящее время</strong> (5+ лет)</p>
+        <p>
+          Разработка и продвижение инновационной платформы для планирования
+          путешествий с полным циклом разработки:
+        </p>
+        <ul>
+          <li>
+            Создание архитектуры микросервисов на Java Spring Boot и Golang
+          </li>
+          <li>Разработка современного фронтенда на Vue3.js</li>
+          <li>Проектирование и оптимизация баз данных PostgreSQL</li>
+          <li>Внедрение Docker и контейнеризации для масштабирования</li>
+          <li>Управление проектом, планирование развития продукта</li>
+        </ul>
+        <p>
+          <strong>Ключевое достижение:</strong> Создание работающего продукта с
+          потенциалом масштабирования на рынок Travel Tech.
+        </p>
+      </div>
      <h2>Опыт работы</h2>
      <div class="timeline">
        <div class="timeline-item">
@@ -224,7 +323,7 @@
        <div class="timeline-item">
          <h3>МТИ - Московский технлогический институт.</h3>
          <p>Разработка программиного обеспечения</p>
-          <p><strong>2025 - продаолжаю обучаться</strong></p>
+          <p><strong>2025 - ></strong></p>
        </div>
      </div>
    </div>
@@ -317,6 +416,10 @@
      </ul>
    </div>

+
+    <button id="backToTop" class="back-to-top">↑ddsfdf</button>
+
+
    <footer>
      <div class="footer-links">
        <div class="footer-box footer-link">Vacation</div>
@@ -32,3 +32,45 @@ END:VCARD`;
    // Освобождаем память
    URL.revokeObjectURL(url);
 }
+
+// ДОБАВЬТЕ В scripts.js
+document.addEventListener('DOMContentLoaded', function() {
+    // Плавная прокрутка для якорных ссылок
+    const anchorLinks = document.querySelectorAll('a[href^="#"]');
+    
+    anchorLinks.forEach(link => {
+        link.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 - 20,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+});
+
+// ДОБАВЬТЕ В scripts.js
+// Кнопка "Наверх"
+const backToTopButton = document.getElementById('backToTop');
+
+window.addEventListener('scroll', function() {
+    if (window.pageYOffset > 300) {
+        backToTopButton.classList.add('visible');
+    } else {
+        backToTopButton.classList.remove('visible');
+    }
+});
+
+backToTopButton.addEventListener('click', function() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
+});
@@ -2,6 +2,9 @@
@import url("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/up_button.css");

 :root {
  --primary: #2c3e50;
@@ -0,0 +1,98 @@
+/* Hero Section Styles */
+.hero {
+    background: linear-gradient(135deg, var(--primary) 0%, #1a535c 100%);
+    color: white;
+    padding: 4rem 2rem;
+    margin-bottom: 2rem;
+    border-radius: 10px;
+}
+
+.hero-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 3rem;
+}
+
+.hero-text {
+    flex: 1;
+}
+
+.hero-subtitle {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.highlight {
+    color: #ffd166; /* Яркий акцентный цвет */
+}
+
+.hero-description {
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
+    line-height: 1.6;
+}
+
+.hero-buttons {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.btn {
+    display: inline-block;
+    padding: 0.8rem 1.5rem;
+    border-radius: 5px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: all 0.3s ease;
+}
+
+.btn-primary {
+    background-color: var(--secondary);
+    color: white;
+}
+
+.btn-primary:hover {
+    background-color: #2980b9;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.btn-secondary {
+    background-color: transparent;
+    color: white;
+    border: 2px solid white;
+}
+
+.btn-secondary:hover {
+    background-color: white;
+    color: var(--primary);
+}
+
+.hero-image {
+    flex: 0 0 300px;
+    text-align: center;
+}
+
+.hero-image img {
+    width: 100%;
+    max-width: 300px;
+    border-radius: 10px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+
+/* Адаптивность для героя */
+@media (max-width: 768px) {
+    .hero-content {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .hero-buttons {
+        justify-content: center;
+    }
+}
@@ -21,14 +21,11 @@
 }

 .social_link {
-  border: 1px solid;
-  border-radius: 15%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
-  background-color: #92e6a8;

  -webkit-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 0px 0px 14px 0px rgba(34, 60, 80, 0.2);
@@ -0,0 +1,26 @@
+/* CSS для кнопки "Наверх" */
+.back-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: var(--secondary);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    font-size: 1.2rem;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.3s, transform 0.3s;
+    z-index: 1000;
+}
+
+.back-to-top.visible {
+    opacity: 1; 
+}
+
+.back-to-top:hover {
+    transform: translateY(-3px);
+    background-color: #2980b9;
+}
@@ -0,0 +1,53 @@
+/* Yalarba Investment Section */
+.yalarba-section {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border-left: 5px solid var(--secondary);
+}
+
+.yalarba-header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.yalarba-tagline {
+    font-size: 1.2rem;
+    color: var(--primary);
+    font-style: italic;
+}
+
+.yalarba-stats {
+    display: flex;
+    justify-content: space-around;
+    margin: 2rem 0;
+    flex-wrap: wrap;
+}
+
+.stat {
+    text-align: center;
+    padding: 1rem;
+}
+
+.stat h3 {
+    font-size: 2.5rem;
+    color: var(--secondary);
+    margin: 0;
+}
+
+.yalarba-value ul {
+    list-style: none;
+    padding: 0;
+}
+
+.yalarba-value li {
+    padding: 0.5rem 0;
+    font-size: 1.1rem;
+}
+
+.investment-cta {
+    text-align: center;
+    margin-top: 2rem;
+    padding: 2rem;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}