196 lines
6.8 KiB
HTML
196 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Алексей Петров — разработчик</title>
|
||
<style>
|
||
:root {
|
||
--ink: #0F1218;
|
||
--cyan: #00E5FF;
|
||
--cyan-50: #E8FCFF;
|
||
--white: #FFFFFF;
|
||
--gray-500: #5B6573;
|
||
--gray-100: #F2F4F7;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
||
color: var(--ink);
|
||
background: var(--white);
|
||
}
|
||
.container { max-width: 880px; margin: 0 auto; padding: 80px 24px; }
|
||
|
||
/* Hero */
|
||
.hero { background: linear-gradient(180deg, var(--cyan-50) 0%, var(--white) 100%); }
|
||
.hero .container { display: flex; align-items: center; gap: 48px; padding-top: 100px; padding-bottom: 100px; }
|
||
.avatar {
|
||
width: 160px; height: 160px; border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--cyan), #00b8d4);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 64px; flex-shrink: 0;
|
||
}
|
||
.hero-text h1 { font-size: 48px; font-weight: 800; line-height: 1.15; margin-bottom: 12px; }
|
||
.subtitle { font-size: 20px; color: var(--gray-500); margin-bottom: 24px; }
|
||
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.tag {
|
||
background: var(--white);
|
||
border: 1px solid #dde1e7;
|
||
padding: 6px 16px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
color: var(--gray-500);
|
||
}
|
||
|
||
/* Sections */
|
||
.section h2 {
|
||
font-size: 32px; font-weight: 700; margin-bottom: 24px;
|
||
position: relative; padding-left: 20px;
|
||
}
|
||
.section h2::before {
|
||
content: '';
|
||
position: absolute; left: 0; top: 8px; bottom: 8px;
|
||
width: 4px; background: var(--cyan); border-radius: 2px;
|
||
}
|
||
.section p { color: var(--gray-500); margin-bottom: 16px; }
|
||
|
||
/* Cards */
|
||
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
|
||
.card {
|
||
background: var(--gray-100);
|
||
border-radius: 16px;
|
||
padding: 28px;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,18,24,0.08); }
|
||
.card .icon { font-size: 28px; margin-bottom: 12px; }
|
||
.card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
|
||
.card p { font-size: 15px; color: var(--gray-500); line-height: 1.5; }
|
||
.card .tech { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
|
||
.card .tech span {
|
||
background: var(--white);
|
||
padding: 3px 10px;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
color: var(--gray-500);
|
||
}
|
||
|
||
/* Contacts */
|
||
.contacts { background: var(--gray-100); }
|
||
.contacts-grid { display: flex; gap: 16px; flex-wrap: wrap; }
|
||
.contact-link {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
background: var(--white);
|
||
padding: 14px 24px;
|
||
border-radius: 12px;
|
||
text-decoration: none;
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
transition: background 0.2s;
|
||
}
|
||
.contact-link:hover { background: var(--cyan-50); }
|
||
.contact-link .emoji { font-size: 22px; }
|
||
|
||
/* Footer */
|
||
.footer { text-align: center; padding: 32px 24px; font-size: 14px; color: var(--gray-500); }
|
||
|
||
@media (max-width: 640px) {
|
||
.hero .container { flex-direction: column; text-align: center; gap: 24px; padding-top: 60px; padding-bottom: 60px; }
|
||
.hero-text h1 { font-size: 36px; }
|
||
.section h2 { font-size: 26px; }
|
||
.container { padding: 48px 20px; }
|
||
.cards { grid-template-columns: 1fr; }
|
||
.contacts-grid { flex-direction: column; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="avatar">👨💻</div>
|
||
<div class="hero-text">
|
||
<h1>Алексей Петров</h1>
|
||
<p class="subtitle">Fullstack-разработчик. Создаю быстрые, удобные веб-приложения и помогаю командам расти.</p>
|
||
<div class="tags">
|
||
<span class="tag">TypeScript</span>
|
||
<span class="tag">React</span>
|
||
<span class="tag">Node.js</span>
|
||
<span class="tag">Python</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Обо мне</h2>
|
||
<p>Пишу код больше 5 лет. Начинал с backend на Python, потом ушёл в fullstack — React + Node.js. Люблю чистую архитектуру, понятные интерфейсы и перформанс.</p>
|
||
<p>Работал и в стартапах, и в крупных компаниях. Умею быстро вникать в новую предметную область и доносить сложное простыми словами. В свободное время веду пет-проекты и хожу на конференции.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Проекты и опыт</h2>
|
||
<div class="cards">
|
||
<div class="card">
|
||
<div class="icon">🛒</div>
|
||
<h3>Marketplace API</h3>
|
||
<p>Разработал REST API для маркетплейса с нуля. Микросервисы, gRPC, PostgreSQL.</p>
|
||
<div class="tech">
|
||
<span>Go</span><span>gRPC</span><span>PostgreSQL</span>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">📊</div>
|
||
<h3>Дашборд аналитики</h3>
|
||
<p>Интерактивная панель для визуализации метрик компании. Real-time обновление.</p>
|
||
<div class="tech">
|
||
<span>React</span><span>D3.js</span><span>WebSocket</span>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">🤖</div>
|
||
<h3>Telegram-бот для поддержки</h3>
|
||
<p>Автоматизировал первую линию поддержки — бот обрабатывает 70% обращений.</p>
|
||
<div class="tech">
|
||
<span>Python</span><span>Aiogram</span><span>Redis</span>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="icon">🚀</div>
|
||
<h3>Лендинг-конструктор</h3>
|
||
<p>Платформа для быстрого создания лендингов без кода. Drag & drop редактор.</p>
|
||
<div class="tech">
|
||
<span>Vue</span><span>Node.js</span><span>MongoDB</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section contacts">
|
||
<div class="container">
|
||
<h2>Контакты</h2>
|
||
<div class="contacts-grid">
|
||
<a class="contact-link" href="mailto:alexey@example.com">
|
||
<span class="emoji">📧</span> alexey@example.com
|
||
</a>
|
||
<a class="contact-link" href="https://t.me/alexey">
|
||
<span class="emoji">💬</span> Telegram
|
||
</a>
|
||
<a class="contact-link" href="https://github.com/alexey">
|
||
<span class="emoji">🐙</span> GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
© 2026 Алексей Петров
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|