Spinter Cell
This commit is contained in:
764
index.html
764
index.html
@@ -1,259 +1,535 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Екатерина Иванова — Product Manager</title>
|
||||
<!-- Google Fonts + Font Awesome -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f4f6f9;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #1e293b;
|
||||
line-height: 1.5;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.resume {
|
||||
max-width: 1050px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Левая панель */
|
||||
.sidebar {
|
||||
background: #f8fafc;
|
||||
padding: 2rem 1.5rem;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
}
|
||||
.avatar {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 4px solid white;
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.05);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.sidebar h1 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.sidebar .title {
|
||||
color: #475569;
|
||||
font-weight: 500;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #334155;
|
||||
}
|
||||
.info-item i {
|
||||
width: 20px;
|
||||
color: #3b82f6;
|
||||
}
|
||||
.info-item a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.info-item a:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
.skills-side h3 {
|
||||
font-size: 1.1rem;
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
.skill-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.skill-tags span {
|
||||
background: white;
|
||||
padding: 0.3rem 1rem;
|
||||
border-radius: 40px;
|
||||
font-size: 0.85rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* Правая панель */
|
||||
.main {
|
||||
padding: 2rem 2rem 2rem 1.5rem;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.section h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.2rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.section h2:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -6px;
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: #3b82f6;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.exp-item {
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
.exp-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.exp-header h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.exp-date {
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.exp-company {
|
||||
color: #3b82f6;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.exp-desc {
|
||||
color: #334155;
|
||||
font-size: 0.95rem;
|
||||
list-style-type: disc;
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
.exp-desc li {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.project-card {
|
||||
background: #f8fafc;
|
||||
border-radius: 16px;
|
||||
padding: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.project-card h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.project-card h3 i {
|
||||
color: #3b82f6;
|
||||
}
|
||||
.project-tech {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
.project-tech span {
|
||||
background: white;
|
||||
padding: 0.2rem 0.8rem;
|
||||
border-radius: 30px;
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.resume { grid-template-columns: 1fr; }
|
||||
.sidebar { border-right: none; border-bottom: 1px solid #e2e8f0; }
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Evgeniy Spirin | DevOps</title>
|
||||
<!-- Моноширинный шрифт -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<style>
|
||||
/* Стили для сплеш-скрина (экран загрузки) */
|
||||
#splash {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #0a0f0a;
|
||||
color: #00ff99;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: opacity 1s ease;
|
||||
opacity: 1;
|
||||
pointer-events: none; /* чтобы не мешать кликам после скрытия */
|
||||
}
|
||||
#splash.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.splash-content {
|
||||
max-width: 600px;
|
||||
padding: 2rem;
|
||||
border: 2px solid #00cc44;
|
||||
box-shadow: 0 0 40px #00ff99;
|
||||
background: rgba(0, 10, 0, 0.8);
|
||||
}
|
||||
.splash-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
text-shadow: 0 0 10px #0f0;
|
||||
}
|
||||
.splash-text {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: #b3ffb3;
|
||||
}
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #1a3a1a;
|
||||
margin: 1rem 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-fill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: #00ff99;
|
||||
animation: fill 2.5s ease-out forwards;
|
||||
}
|
||||
@keyframes fill {
|
||||
0% { width: 0%; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
.dots {
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
text-align: left;
|
||||
}
|
||||
.dots::after {
|
||||
content: '...';
|
||||
animation: dots 1.5s steps(3, end) infinite;
|
||||
}
|
||||
@keyframes dots {
|
||||
0%, 20% { content: '.'; }
|
||||
40% { content: '..'; }
|
||||
60%, 100% { content: '...'; }
|
||||
}
|
||||
|
||||
/* Основные стили (как в предыдущей версии) */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background-color: #0b0f0b;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: #c3ffc3;
|
||||
line-height: 1.6;
|
||||
padding: 2rem 1rem;
|
||||
background-image: radial-gradient(circle at 10% 20%, rgba(0, 255, 65, 0.02) 0%, transparent 30%);
|
||||
}
|
||||
.grid-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 255, 0, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 255, 0, 0.02) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: rgba(10, 20, 10, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
border: 2px solid #00cc44;
|
||||
box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
|
||||
padding: 2.5rem;
|
||||
border-radius: 0px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: #00ff99;
|
||||
text-shadow: 0 0 8px #00ff99;
|
||||
border-bottom: 2px solid #00cc44;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.section-title:before {
|
||||
content: '>';
|
||||
margin-right: 10px;
|
||||
color: #00ff99;
|
||||
}
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2.5rem;
|
||||
align-items: center;
|
||||
margin-bottom: 3rem;
|
||||
border: 1px solid #00cc44;
|
||||
padding: 2rem;
|
||||
background: rgba(0, 20, 0, 0.4);
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid #00ff99;
|
||||
box-shadow: 0 0 25px #00ff99;
|
||||
filter: grayscale(100%) contrast(1.2);
|
||||
}
|
||||
.profile-info h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow: 0 0 10px #0f0;
|
||||
}
|
||||
.profile-info .title {
|
||||
font-size: 1.3rem;
|
||||
color: #a0ffa0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #00cc44;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px dashed #00cc44;
|
||||
padding: 0.4rem 1rem;
|
||||
width: fit-content;
|
||||
}
|
||||
.contacts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
.contacts a {
|
||||
color: #b3ffb3;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.3rem 0.8rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.contacts a:hover {
|
||||
border-color: #00ff99;
|
||||
box-shadow: 0 0 15px #00ff99;
|
||||
background: rgba(0, 255, 65, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
.contacts i {
|
||||
font-size: 1.2rem;
|
||||
color: #00ff99;
|
||||
}
|
||||
.about {
|
||||
margin-bottom: 3rem;
|
||||
border-left: 4px solid #00cc44;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.about p {
|
||||
font-size: 1.1rem;
|
||||
color: #d0ffd0;
|
||||
}
|
||||
.skills-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.skill-item {
|
||||
background: #1a2a1a;
|
||||
border: 1px solid #00cc44;
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #b3ffb3;
|
||||
box-shadow: 0 0 5px #00cc44;
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.skill-item i {
|
||||
color: #00ff99;
|
||||
}
|
||||
.skill-item:hover {
|
||||
background: #2a3a2a;
|
||||
box-shadow: 0 0 20px #00ff99;
|
||||
border-color: #00ff99;
|
||||
}
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.project-card {
|
||||
background: #0f1a0f;
|
||||
border: 2px solid #1e4d1e;
|
||||
padding: 1.8rem;
|
||||
transition: 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
.project-card:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border: 1px dashed #00cc44;
|
||||
pointer-events: none;
|
||||
}
|
||||
.project-card:hover {
|
||||
border-color: #00ff99;
|
||||
box-shadow: 0 0 30px rgba(0, 255, 65, 0.4);
|
||||
}
|
||||
.project-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #00ff99;
|
||||
}
|
||||
.project-card p {
|
||||
color: #b0ffb0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.project-tech {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.project-tech span {
|
||||
background: #1f331f;
|
||||
border: 1px solid #1e6d1e;
|
||||
padding: 0.2rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
color: #b3ffb3;
|
||||
}
|
||||
.project-link {
|
||||
display: inline-block;
|
||||
margin-top: 1.5rem;
|
||||
color: #00ff99;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted #00ff99;
|
||||
font-weight: 500;
|
||||
}
|
||||
.project-link i {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.project-link:hover i {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
.experience-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
.exp-item {
|
||||
border: 1px solid #1e6d1e;
|
||||
padding: 1.5rem;
|
||||
background: rgba(0, 20, 0, 0.3);
|
||||
}
|
||||
.exp-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
.exp-header h3 {
|
||||
font-size: 1.4rem;
|
||||
color: #90ff90;
|
||||
}
|
||||
.exp-date {
|
||||
color: #00cc44;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #1e6d1e;
|
||||
padding: 0.2rem 1rem;
|
||||
}
|
||||
.exp-company {
|
||||
color: #a0ffa0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
background: #1a2a1a;
|
||||
padding: 0.2rem 1rem;
|
||||
}
|
||||
.exp-desc {
|
||||
list-style-type: none;
|
||||
}
|
||||
.exp-desc li {
|
||||
margin-bottom: 0.5rem;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
.exp-desc li:before {
|
||||
content: '>';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #00ff99;
|
||||
font-weight: bold;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 3rem;
|
||||
border-top: 2px solid #00cc44;
|
||||
padding-top: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
color: #00cc44;
|
||||
}
|
||||
.footer .cursor {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
background: #00ff99;
|
||||
animation: blink 1s infinite;
|
||||
margin-left: 5px;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
.footer .prompt:before {
|
||||
content: 'guest@sc-cell:~$';
|
||||
color: #00ff99;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.container { padding: 1.5rem; }
|
||||
.profile { flex-direction: column; text-align: center; }
|
||||
.location { margin-left: auto; margin-right: auto; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="resume">
|
||||
<!-- Левая колонка -->
|
||||
<div class="sidebar">
|
||||
<img src="https://via.placeholder.com/140" alt="avatar" class="avatar">
|
||||
<h1>Екатерина Иванова</h1>
|
||||
<div class="title">Product Manager / Tech Lead</div>
|
||||
<div class="info-item"><i class="fas fa-map-marker-alt"></i> Санкт-Петербург</div>
|
||||
<div class="info-item"><i class="fas fa-envelope"></i> <a href="mailto:ek@example.dev">ek@example.dev</a></div>
|
||||
<div class="info-item"><i class="fas fa-phone-alt"></i> <a href="tel:+78121234567">+7 812 123-45-67</a></div>
|
||||
<div class="info-item"><i class="fab fa-github"></i> <a href="#">/ekaterina-dev</a></div>
|
||||
<div class="info-item"><i class="fab fa-linkedin"></i> <a href="#">/in/ekaterina</a></div>
|
||||
|
||||
<div class="skills-side">
|
||||
<h3>Технические навыки</h3>
|
||||
<div class="skill-tags">
|
||||
<span>Product Strategy</span><span>Agile</span><span>User Research</span>
|
||||
<span>Python</span><span>SQL</span><span>Tableau</span><span>A/B testing</span>
|
||||
<span>Jira</span><span>Confluence</span><span>Figma</span>
|
||||
<!-- Сплеш-скрин (загрузочный экран) -->
|
||||
<div id="splash">
|
||||
<div class="splash-content">
|
||||
<div class="splash-title">█ ВЗЛОМ █</div>
|
||||
<div class="splash-text">
|
||||
Производится взлом системы<span class="dots"></span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
<div style="font-size:0.9rem; color:#0f0;">Доступ разрешён через 3...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Правая колонка -->
|
||||
<div class="main">
|
||||
<section class="section">
|
||||
<h2>О себе</h2>
|
||||
<p>Продуктовый менеджер с инженерным бэкграундом. 7+ лет опыта в разработке и управлении цифровыми продуктами. Умею выявлять потребности пользователей, формулировать гипотезы и доводить продукты до релиза.</p>
|
||||
</section>
|
||||
<!-- Фоновая сетка -->
|
||||
<div class="grid-overlay"></div>
|
||||
|
||||
<section class="section">
|
||||
<h2>Опыт работы</h2>
|
||||
<div class="exp-item">
|
||||
<div class="exp-header">
|
||||
<h3>Senior Product Manager</h3>
|
||||
<span class="exp-date">2021 — наст. время</span>
|
||||
</div>
|
||||
<div class="exp-company">SkyEng, удалённо</div>
|
||||
<ul class="exp-desc">
|
||||
<li>Управление платформой для онлайн-обучения (MAU 2M). Рост конверсии в платёж на 18%.</li>
|
||||
<li>Запуск мобильного приложения с нуля: аналитика, прототипы, работа с командой разработки.</li>
|
||||
<li>Внедрение системы аналитики Amplitude и дашбордов для продуктовых метрик.</li>
|
||||
</ul>
|
||||
<!-- Основной контент -->
|
||||
<div class="container">
|
||||
<!-- Профиль -->
|
||||
<div class="profile">
|
||||
<img src="https://i.imgur.com/p5kRCHS.jpeg" alt="Avatar" class="profile-avatar"> <!-- замените на своё фото -->
|
||||
<div class="profile-info">
|
||||
<h1>Evgeniy Spirin</h1>
|
||||
<div class="title">DevOps// Splinter Cell fan</div>
|
||||
<div class="location">
|
||||
<i class="fas fa-map-marker-alt"></i> Нижний Новгород, Россия
|
||||
</div>
|
||||
<div class="contacts">
|
||||
<a href="mailto:oit_vpn@grenu4.ru"><i class="fas fa-envelope"></i> oit_vpn@grenu4.ru</a>
|
||||
<a href="https://t.me/y0zhyck"><i class="fab fa-telegram"></i> @Y0zhyck</a>
|
||||
<a href="https://git.grenu4.ru/y0zhyck"><i class="fab fa-github"></i> My private GIT</a>
|
||||
<a href="#"><i class="fas fa-shield-alt"></i> secure</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<div class="exp-header">
|
||||
<h3>Product Owner</h3>
|
||||
<span class="exp-date">2018 — 2021</span>
|
||||
</div>
|
||||
<div class="exp-company">Тинькофф, Москва</div>
|
||||
<ul class="exp-desc">
|
||||
<li>Развитие интернет-банка для юридических лиц, приоритизация бэклога.</li>
|
||||
<li>Проведение пользовательских интервью и юзабилити-тестирований.</li>
|
||||
<li>Координация трёх scrum-команд, релиз каждые две недели.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Проекты</h2>
|
||||
<div class="project-card">
|
||||
<h3><i class="fas fa-chart-pie"></i> Дашборд метрик продукта</h3>
|
||||
<p>Разработала прототип и ТЗ для внутреннего дашборда, который объединил данные из нескольких источников. Внедрение сократило время подготовки отчётов на 70%.</p>
|
||||
<div class="project-tech"><span>SQL</span><span>Tableau</span><span>Redash</span></div>
|
||||
<!-- О себе -->
|
||||
<section class="about">
|
||||
<h2 class="section-title">Досье</h2>
|
||||
<p>Специалист по инфраструктуре с опытом работы в режиме полной скрытности. Обеспечиваю надёжность и безопасность систем, автоматизирую всё, что движется. Владею арсеналом DevOps-инструментов, как Сэм Фишер – своими гаджетами.</p>
|
||||
</section>
|
||||
|
||||
<!-- Навыки (инвентарь) -->
|
||||
<section>
|
||||
<h2 class="section-title">Инвентарь</h2>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-item"><i class="fas fa-terminal"></i> CI/CD (GitLab, GitHub)</div>
|
||||
<div class="skill-item"><i class="fas fa-cubes"></i> Kubernetes</div>
|
||||
<div class="skill-item"><i class="fab fa-docker"></i> Docker</div>
|
||||
<div class="skill-item"><i class="fas fa-code-branch"></i> Terraform</div>
|
||||
<div class="skill-item"><i class="fas fa-cog"></i> Ansible</div>
|
||||
<div class="skill-item"><i class="fab fa-golang"></i> Golang</div>
|
||||
<div class="skill-item"><i class="fas fa-chart-line"></i> Prometheus/Grafana</div>
|
||||
<div class="skill-item"><i class="fas fa-lock"></i> Security (Vault, mTLS)</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Проекты (операции) -->
|
||||
<section>
|
||||
<h2 class="section-title">Секретные операции</h2>
|
||||
<div class="projects-grid">
|
||||
<div class="project-card">
|
||||
<h3>◉ Cloud VPN</h3>
|
||||
<p>Распределённая VPN-сеть на базе K8s. Мультипротокольность: VLESS, Trojan, Shadowsocks.</p>
|
||||
<div class="project-tech">
|
||||
<span>K8s</span><span>Xray</span><span>Prometheus</span>
|
||||
</div>
|
||||
<a href="#" class="project-link">Раскрыть детали <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<h3>◉ K8s Cost Optimizer</h3>
|
||||
<p>Инструмент скрытого наблюдения за затратами в кластере. Поддержка AWS, GCP, Azure.</p>
|
||||
<div class="project-tech">
|
||||
<span>Golang</span><span>Prometheus</span><span>Cloud APIs</span>
|
||||
</div>
|
||||
<a href="#" class="project-link">Раскрыть детали <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<h3>◉ Torrent Blocker</h3>
|
||||
<p>Система обнаружения и блокировки торрент-трафика на VPN-серверах. Автоматическое внесение в чёрный список.</p>
|
||||
<div class="project-tech">
|
||||
<span>Python</span><span>iptables</span><span>Telegram API</span>
|
||||
</div>
|
||||
<a href="#" class="project-link">Раскрыть детали <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Опыт работы (послужной список) -->
|
||||
<section>
|
||||
<h2 class="section-title">Послужной список</h2>
|
||||
<div class="experience-list">
|
||||
<div class="exp-item">
|
||||
<div class="exp-header">
|
||||
<h3>DevOps Engineer</h3>
|
||||
<span class="exp-date">2025 — н.в.</span>
|
||||
</div>
|
||||
<div class="exp-company">Ziteh, Nizhniy Novgorod (скрытый отдел)</div>
|
||||
<ul class="exp-desc">
|
||||
<li>Миграция монолитов в Kubernetes (архитектура нулевого доверия).</li>
|
||||
<li>Оптимизация CI/CD pipelines – сокращение времени сборки на 40%.</li>
|
||||
<li>Внедрение Service Mesh (Istio) для безопасной связи микросервисов.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<div class="exp-header">
|
||||
<h3>System Administrator (спецподразделение)</h3>
|
||||
<span class="exp-date">2019 — 2024</span>
|
||||
</div>
|
||||
<div class="exp-company">Renaissance Heavy Industries, Tobolsk</div>
|
||||
<ul class="exp-desc">
|
||||
<li>Обеспечение бесперебойной работы инфраструктуры крупного промышленного комплекса.</li>
|
||||
<li>Настройка сетей и систем мониторинга, достижение 99.9% аптайма.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Подвал в стиле командной строки -->
|
||||
<div class="footer">
|
||||
<div class="prompt">ready for orders <span class="cursor"></span></div>
|
||||
<div>© 2026-2030 Evgeniy Spirin // Третий эшелон</div>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<h3><i class="fas fa-robot"></i> Чат-бот для поддержки</h3>
|
||||
<p>Инициировала и курировала создание бота, который обрабатывает 60% типовых обращений. Интеграция с CRM и базами знаний.</p>
|
||||
<div class="project-tech"><span>Python</span><span>Dialogflow</span><span>API</span></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Скрипт для скрытия сплеш-скрина -->
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
// Показываем сплеш минимум 2 секунды (чтобы анимация прогресс-бара завершилась)
|
||||
setTimeout(function() {
|
||||
document.getElementById('splash').classList.add('hidden');
|
||||
}, 2800); // чуть меньше времени анимации, чтобы не было пустого ожидания
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user