364 lines
18 KiB
HTML
364 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Торе — Продукт и Лидер</title>
|
||
<link rel="stylesheet" href="./design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="./design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="./design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="./design-system/kt-ai-page.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.hero-gradient { background: linear-gradient(135deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-card-bg) 100%); }
|
||
.skill-tag { display: inline-block; padding: 4px 12px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-bg-soft); font-size: var(--kt-ai-text-sm); margin: 4px; }
|
||
.timeline-item { position: relative; padding-left: 24px; margin-bottom: 16px; }
|
||
.timeline-item::before { content: ''; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--kt-ai-primary); }
|
||
.testimonial-card { border-left: 3px solid var(--kt-ai-primary); }
|
||
.contact-method { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--kt-ai-radius-xl); background: var(--kt-ai-bg-soft); margin-bottom: 12px; }
|
||
.contact-method svg { flex-shrink: 0; }
|
||
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--kt-ai-space-6); }
|
||
.stat-item { text-align: center; }
|
||
.stat-value { font-size: var(--kt-ai-text-3xl); font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-primary); }
|
||
.stat-label { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin-top: 4px; }
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app" data-kt-data-mode="demo">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<strong>Торе — Продукт</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#about">Обо мне</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#skills">Навыки</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#experience">Опыт</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Связаться</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero hero-gradient" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Торе — Создаю будущее сегодня</h1>
|
||
<p class="kt-ai-hero-sub" style="max-width:680px;margin:0 auto">
|
||
Лидер, инноватор и стратег с опытом трансформации бизнес-процессов.
|
||
Помогаю компаниям расти через технологии, данные и правильные решения.
|
||
</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#contacts">Обсудить проект</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#about">Узнать больше</a>
|
||
</div>
|
||
<div class="stats-row" style="margin-top:var(--kt-ai-space-10)">
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="stat-projects">0</div>
|
||
<div class="stat-label">Проектов</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="stat-years">0</div>
|
||
<div class="stat-label">Лет опыта</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="stat-clients">0</div>
|
||
<div class="stat-label">Клиентов</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="stat-ideas">0</div>
|
||
<div class="stat-label">Идей</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Кто я</h2>
|
||
<p>Личность, которая превращает сложные задачи в работающие решения</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile" style="grid-column: span 2">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/>
|
||
<circle cx="12" cy="12" r="3"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Стратегическое мышление</h3>
|
||
<p>Вижу картину целиком и нахожу точки роста там, где другие видят тупик.
|
||
Специализируюсь на трансформации процессов и выводе продуктов на новый уровень.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Инновации</h3>
|
||
<p>Внедряю современные технологии и подходы, которые дают измеримый результат.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||
<circle cx="9" cy="7" r="4"/>
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Лидерство</h3>
|
||
<p>Собираю и веду команды к результату через доверие и чёткие цели.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Продуктовый подход</h3>
|
||
<p>Мыслю категориями ценности для пользователя и бизнес-метрик.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<line x1="18" y1="20" x2="18" y2="10"/>
|
||
<line x1="12" y1="20" x2="12" y2="4"/>
|
||
<line x1="6" y1="20" x2="6" y2="14"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Аналитика данных</h3>
|
||
<p>Принимаю решения на основе данных, а не предположений.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="skills" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Навыки и компетенции</h2>
|
||
<p>Инструменты, которые я использую для достижения результатов</p>
|
||
</div>
|
||
<div class="kt-ai-card" style="padding:var(--kt-ai-space-8)">
|
||
<div style="display:flex;flex-wrap:wrap;gap:var(--kt-ai-space-4)">
|
||
<div style="flex:1;min-width:280px">
|
||
<h3 style="margin-bottom:var(--kt-ai-space-4)">Технические навыки</h3>
|
||
<div>
|
||
<span class="skill-tag">JavaScript / Node.js</span>
|
||
<span class="skill-tag">Python</span>
|
||
<span class="skill-tag">HTML / CSS</span>
|
||
<span class="skill-tag">REST API</span>
|
||
<span class="skill-tag">Базы данных</span>
|
||
<span class="skill-tag">Git / DevOps</span>
|
||
<span class="skill-tag">Telegram Bots</span>
|
||
<span class="skill-tag">Автоматизация</span>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;min-width:280px">
|
||
<h3 style="margin-bottom:var(--kt-ai-space-4)">Бизнес-навыки</h3>
|
||
<div>
|
||
<span class="skill-tag">Управление проектами</span>
|
||
<span class="skill-tag">Стратегическое планирование</span>
|
||
<span class="skill-tag">Анализ процессов</span>
|
||
<span class="skill-tag">Product Management</span>
|
||
<span class="skill-tag">Коммуникация</span>
|
||
<span class="skill-tag">Презентации</span>
|
||
<span class="skill-tag">Работа с данными</span>
|
||
<span class="skill-tag">Оптимизация</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="experience" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Опыт и достижения</h2>
|
||
<p>Ключевые этапы пути</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<h3>🎓 Образование</h3>
|
||
<div class="timeline-item">
|
||
<strong>AITU — Университет ИТ</strong>
|
||
<p style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Бакалавр, Информационные технологии</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong>Сертификаты</strong>
|
||
<p style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Product Management, Data Analytics, Leadership</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-tile" style="grid-column: span 2">
|
||
<h3>💼 Ключевые проекты</h3>
|
||
<div class="timeline-item">
|
||
<strong>Трансформация бизнес-процессов</strong>
|
||
<p style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Анализ и оптимизация процессов компании через интервью с ИИ-агентом</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong>Разработка цифровых продуктов</strong>
|
||
<p style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Создание веб-приложений и Telegram-ботов для автоматизации</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<strong>Аналитика данных</strong>
|
||
<p style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Внедрение data-driven подхода в принятие решений</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Что говорят о работе со мной</h2>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-card testimonial-card" style="padding:var(--kt-ai-space-6)">
|
||
<p style="font-style:italic;margin-bottom:var(--kt-ai-space-4)">«Торе умеет видеть суть проблемы и предлагать решения, которые действительно работают. С ним легко общаться и приятно работать.»</p>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div style="width:40px;height:40px;border-radius:50%;background:var(--kt-ai-primary);display:flex;align-items:center;justify-content:center;color:white;font-weight:bold">К</div>
|
||
<div>
|
||
<div style="font-weight:var(--kt-ai-weight-medium)">Коллега</div>
|
||
<div style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Project Manager</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card testimonial-card" style="padding:var(--kt-ai-space-6)">
|
||
<p style="font-style:italic;margin-bottom:var(--kt-ai-space-4)">«Профессиональный подход к решению сложных задач. Всегда доводит дело до конца и думает о результате.»</p>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div style="width:40px;height:40px;border-radius:50%;background:var(--kt-ai-primary);display:flex;align-items:center;justify-content:center;color:white;font-weight:bold">Р</div>
|
||
<div>
|
||
<div style="font-weight:var(--kt-ai-weight-medium)">Руководитель</div>
|
||
<div style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Team Lead</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<h2>Давайте работать вместе</h2>
|
||
<p style="margin-bottom:var(--kt-ai-space-8)">Открыт для интересных проектов и предложений. Свяжитесь со мной любым удобным способом.</p>
|
||
|
||
<div class="kt-ai-card" style="padding:var(--kt-ai-space-6);max-width:520px;margin:0 auto">
|
||
<div class="contact-method">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-primary)" stroke-width="2">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||
<polyline points="22,6 12,13 2,6"/>
|
||
</svg>
|
||
<div>
|
||
<div style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Email</div>
|
||
<div><a class="kt-ai-link" href="mailto:tore@example.kz">tore@example.kz</a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-method">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-primary)" stroke-width="2">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||
</svg>
|
||
<div>
|
||
<div style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Телефон</div>
|
||
<div><a class="kt-ai-link" href="tel:+77000000000">+7 (700) 000-00-00</a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-method">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-primary)" stroke-width="2">
|
||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||
<circle cx="12" cy="10" r="3"/>
|
||
</svg>
|
||
<div>
|
||
<div style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Локация</div>
|
||
<div>Астана, Казахстан</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top:var(--kt-ai-space-6);text-align:center">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="https://wa.me/77000000000?text=Здравствуйте!">Написать в WhatsApp</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Торе</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Создано с использованием KT AI Design System</span>
|
||
</footer>
|
||
|
||
<script>
|
||
// Демо-данные для анимации статистики
|
||
const STATS = { projects: 47, years: 5, clients: 32, ideas: 156 };
|
||
|
||
function animateValue(id, end) {
|
||
const el = document.getElementById(id);
|
||
let current = 0;
|
||
const step = Math.ceil(end / 50);
|
||
const timer = setInterval(() => {
|
||
current += step;
|
||
if (current >= end) {
|
||
current = end;
|
||
clearInterval(timer);
|
||
}
|
||
el.textContent = current;
|
||
}, 30);
|
||
}
|
||
|
||
// Анимация при загрузке
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
setTimeout(() => {
|
||
animateValue('stat-projects', STATS.projects);
|
||
animateValue('stat-years', STATS.years);
|
||
animateValue('stat-clients', STATS.clients);
|
||
animateValue('stat-ideas', STATS.ideas);
|
||
}, 300);
|
||
});
|
||
|
||
// Плавный скролл к якорям
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
});
|
||
});
|
||
|
||
// Сохранение темы в localStorage
|
||
const themeToggle = document.createElement('button');
|
||
themeToggle.className = 'kt-ai-btn';
|
||
themeToggle.dataset.variant = 'ghost';
|
||
themeToggle.style.position = 'fixed';
|
||
themeToggle.style.bottom = 'var(--kt-ai-space-6)';
|
||
themeToggle.style.right = 'var(--kt-ai-space-6)';
|
||
themeToggle.style.zIndex = '100';
|
||
themeToggle.innerHTML = '🌓';
|
||
themeToggle.title = 'Переключить тему';
|
||
|
||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||
|
||
themeToggle.addEventListener('click', () => {
|
||
const current = document.documentElement.getAttribute('data-theme');
|
||
const next = current === 'light' ? 'dark' : 'light';
|
||
document.documentElement.setAttribute('data-theme', next);
|
||
localStorage.setItem('theme', next);
|
||
});
|
||
|
||
document.body.appendChild(themeToggle);
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|