535 lines
19 KiB
HTML
535 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<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 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 class="grid-overlay"></div>
|
||
|
||
<!-- Основной контент -->
|
||
<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>
|
||
|
||
<!-- О себе -->
|
||
<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>
|
||
|
||
<!-- Скрипт для скрытия сплеш-скрина -->
|
||
<script>
|
||
window.addEventListener('load', function() {
|
||
// Показываем сплеш минимум 2 секунды (чтобы анимация прогресс-бара завершилась)
|
||
setTimeout(function() {
|
||
document.getElementById('splash').classList.add('hidden');
|
||
}, 2800); // чуть меньше времени анимации, чтобы не было пустого ожидания
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |