Compare commits
2 Commits
main
...
testing-te
| Author | SHA1 | Date | |
|---|---|---|---|
| 04d41ad5f7 | |||
| 54a2159dca |
614
index.html
614
index.html
@@ -3,383 +3,533 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Evgeniy Spirin | DevOps Engineer</title>
|
<title>Evgeniy Spirin | DevOps</title>
|
||||||
<!-- Подключаем шрифт Inter -->
|
<!-- Моноширинный шрифт -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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;14..32,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||||||
<!-- Font Awesome для иконок (бесплатно) -->
|
<!-- Font Awesome -->
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<style>
|
<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;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', sans-serif;
|
background-color: #0b0f0b;
|
||||||
background-color: #0a0a0a; /* тёмный фон */
|
font-family: 'JetBrains Mono', monospace;
|
||||||
color: #f5f5f5;
|
color: #c3ffc3;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
padding: 2rem 1rem;
|
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 {
|
.container {
|
||||||
max-width: 1100px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: #111;
|
background: rgba(10, 20, 10, 0.7);
|
||||||
border-radius: 24px;
|
backdrop-filter: blur(4px);
|
||||||
padding: 2.5rem 2rem;
|
border: 2px solid #00cc44;
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
|
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 {
|
.profile {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 2rem;
|
gap: 2.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
|
border: 1px solid #00cc44;
|
||||||
|
padding: 2rem;
|
||||||
|
background: rgba(0, 20, 0, 0.4);
|
||||||
}
|
}
|
||||||
.profile-avatar {
|
.profile-avatar {
|
||||||
width: 140px;
|
width: 150px;
|
||||||
height: 140px;
|
height: 150px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border: 3px solid #3b82f6;
|
border: 3px solid #00ff99;
|
||||||
box-shadow: 0 8px 20px rgba(59,130,246,0.3);
|
box-shadow: 0 0 25px #00ff99;
|
||||||
|
filter: grayscale(100%) contrast(1.2);
|
||||||
}
|
}
|
||||||
.profile-info h1 {
|
.profile-info h1 {
|
||||||
font-size: 2.5rem;
|
font-size: 3rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: 2px;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.5rem;
|
||||||
|
text-shadow: 0 0 10px #0f0;
|
||||||
}
|
}
|
||||||
.profile-info .title {
|
.profile-info .title {
|
||||||
font-size: 1.25rem;
|
font-size: 1.3rem;
|
||||||
color: #9ca3af;
|
color: #a0ffa0;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
.profile-info .location {
|
.location {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
color: #9ca3af;
|
color: #00cc44;
|
||||||
font-size: 0.95rem;
|
font-size: 1rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
border: 1px dashed #00cc44;
|
||||||
.profile-info .location i {
|
padding: 0.4rem 1rem;
|
||||||
color: #3b82f6;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
.contacts {
|
.contacts {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 1.5rem;
|
gap: 2rem;
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
}
|
||||||
.contacts a {
|
.contacts a {
|
||||||
color: #f5f5f5;
|
color: #b3ffb3;
|
||||||
font-size: 1rem;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
transition: color 0.2s;
|
font-size: 1rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.3rem 0.8rem;
|
||||||
|
transition: 0.2s;
|
||||||
}
|
}
|
||||||
.contacts a:hover {
|
.contacts a:hover {
|
||||||
color: #3b82f6;
|
border-color: #00ff99;
|
||||||
|
box-shadow: 0 0 15px #00ff99;
|
||||||
|
background: rgba(0, 255, 65, 0.1);
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
.contacts i {
|
.contacts i {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
|
color: #00ff99;
|
||||||
}
|
}
|
||||||
/* Разделы */
|
.about {
|
||||||
section {
|
margin-bottom: 3rem;
|
||||||
margin-bottom: 2.5rem;
|
border-left: 4px solid #00cc44;
|
||||||
|
padding-left: 1.5rem;
|
||||||
}
|
}
|
||||||
h2 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
h2:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: -8px;
|
|
||||||
width: 60px;
|
|
||||||
height: 4px;
|
|
||||||
background: #3b82f6;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
/* О себе */
|
|
||||||
.about p {
|
.about p {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
color: #d1d5db;
|
color: #d0ffd0;
|
||||||
max-width: 800px;
|
|
||||||
}
|
}
|
||||||
/* Навыки (теги) */
|
.skills-grid {
|
||||||
.skills-list {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.75rem;
|
gap: 1rem;
|
||||||
list-style: none;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
.skills-list li {
|
.skill-item {
|
||||||
background: #1f2937;
|
background: #1a2a1a;
|
||||||
padding: 0.5rem 1.2rem;
|
border: 1px solid #00cc44;
|
||||||
border-radius: 40px;
|
padding: 0.6rem 1.5rem;
|
||||||
font-size: 0.95rem;
|
font-size: 1rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #e5e7eb;
|
color: #b3ffb3;
|
||||||
border: 1px solid #374151;
|
box-shadow: 0 0 5px #00cc44;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
}
|
|
||||||
.skills-list li:hover {
|
|
||||||
border-color: #3b82f6;
|
|
||||||
background: #2d3748;
|
|
||||||
}
|
|
||||||
/* Проекты (карточки) */
|
|
||||||
.projects-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
.project-card {
|
|
||||||
background: #1a1a1a;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 1.5rem;
|
|
||||||
border: 1px solid #2a2a2a;
|
|
||||||
transition: transform 0.2s, border-color 0.2s;
|
|
||||||
}
|
|
||||||
.project-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
border-color: #3b82f6;
|
|
||||||
}
|
|
||||||
.project-card h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
.project-card h3 i {
|
.skill-item i {
|
||||||
color: #3b82f6;
|
color: #00ff99;
|
||||||
font-size: 1.4rem;
|
}
|
||||||
|
.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 {
|
.project-card p {
|
||||||
color: #9ca3af;
|
color: #b0ffb0;
|
||||||
font-size: 0.95rem;
|
margin-bottom: 1.5rem;
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
}
|
||||||
.project-tech {
|
.project-tech {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.5rem;
|
gap: 0.6rem;
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
}
|
||||||
.project-tech span {
|
.project-tech span {
|
||||||
background: #2d3748;
|
background: #1f331f;
|
||||||
padding: 0.25rem 0.75rem;
|
border: 1px solid #1e6d1e;
|
||||||
border-radius: 20px;
|
padding: 0.2rem 1rem;
|
||||||
font-size: 0.8rem;
|
font-size: 0.85rem;
|
||||||
color: #d1d5db;
|
color: #b3ffb3;
|
||||||
}
|
}
|
||||||
.project-link {
|
.project-link {
|
||||||
margin-top: 1.2rem;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: #3b82f6;
|
margin-top: 1.5rem;
|
||||||
|
color: #00ff99;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dotted #00ff99;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.project-link i {
|
.project-link i {
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
.project-link:hover i {
|
.project-link:hover i {
|
||||||
transform: translateX(4px);
|
transform: translateX(5px);
|
||||||
}
|
}
|
||||||
/* Опыт работы */
|
.experience-list {
|
||||||
.experience-item {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 2rem;
|
||||||
margin-bottom: 2rem;
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
border-bottom: 1px solid #2a2a2a;
|
|
||||||
}
|
}
|
||||||
.experience-item:last-child {
|
.exp-item {
|
||||||
border-bottom: none;
|
border: 1px solid #1e6d1e;
|
||||||
padding-bottom: 0;
|
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 {
|
.exp-date {
|
||||||
min-width: 100px;
|
color: #00cc44;
|
||||||
font-weight: 600;
|
font-size: 1rem;
|
||||||
color: #3b82f6;
|
border: 1px solid #1e6d1e;
|
||||||
}
|
|
||||||
.exp-content {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.exp-content h3 {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
.exp-content .company {
|
|
||||||
color: #9ca3af;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
display: inline-block;
|
|
||||||
background: #1f2937;
|
|
||||||
padding: 0.2rem 1rem;
|
padding: 0.2rem 1rem;
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
}
|
||||||
.exp-duties {
|
.exp-company {
|
||||||
list-style-type: disc;
|
color: #a0ffa0;
|
||||||
padding-left: 1.5rem;
|
margin-bottom: 1rem;
|
||||||
color: #d1d5db;
|
font-size: 1rem;
|
||||||
|
display: inline-block;
|
||||||
|
background: #1a2a1a;
|
||||||
|
padding: 0.2rem 1rem;
|
||||||
}
|
}
|
||||||
.exp-duties li {
|
.exp-desc {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.exp-desc li {
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
/* Футер */
|
.exp-desc li:before {
|
||||||
.footer-note {
|
content: '>';
|
||||||
text-align: center;
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: #00ff99;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
color: #6b7280;
|
border-top: 2px solid #00cc44;
|
||||||
font-size: 0.9rem;
|
padding-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
color: #00cc44;
|
||||||
}
|
}
|
||||||
/* Адаптация для мобильных */
|
.footer .cursor {
|
||||||
@media (max-width: 600px) {
|
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; }
|
.container { padding: 1.5rem; }
|
||||||
.profile { flex-direction: column; text-align: center; }
|
.profile { flex-direction: column; text-align: center; }
|
||||||
.profile-info .location { justify-content: center; }
|
.location { margin-left: auto; margin-right: auto; }
|
||||||
.contacts { justify-content: center; }
|
|
||||||
h2:after { left: 50%; transform: translateX(-50%); width: 80px; }
|
|
||||||
.experience-item { flex-direction: column; gap: 0.5rem; }
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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="container">
|
||||||
<!-- Шапка профиля -->
|
<!-- Профиль -->
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<!-- Аватар (замените на своё фото) -->
|
<img src="https://i.imgur.com/p5kRCHS.jpeg" alt="Avatar" class="profile-avatar"> <!-- замените на своё фото -->
|
||||||
<img src="https://i.imgur.com/p5kRCHS.jpeg" alt="Avatar" class="profile-avatar">
|
|
||||||
<div class="profile-info">
|
<div class="profile-info">
|
||||||
<h1>Evgeniy Spirin</h1>
|
<h1>Evgeniy Spirin</h1>
|
||||||
<div class="title">DevOps Engineer</div>
|
<div class="title">DevOps// Splinter Cell fan</div>
|
||||||
<div class="location">
|
<div class="location">
|
||||||
<i class="fas fa-map-marker-alt"></i> Нижний Новгород, Россия
|
<i class="fas fa-map-marker-alt"></i> Нижний Новгород, Россия
|
||||||
</div>
|
</div>
|
||||||
<!-- Контакты (замените ссылки) -->
|
|
||||||
<div class="contacts">
|
<div class="contacts">
|
||||||
<a href="mailto:oit_vpn@grenu4.ru"><i class="fas fa-envelope"></i> oit_vpn@grenu4.ru</a>
|
<a href="mailto:oit_vpn@grenu4.ru"><i class="fas fa-envelope"></i> oit_vpn@grenu4.ru</a>
|
||||||
<a href="https://t.me/y0zhyck" target="_blank"><i class="fab fa-telegram"></i> Telegram</a>
|
<a href="https://t.me/y0zhyck"><i class="fab fa-telegram"></i> @Y0zhyck</a>
|
||||||
<a href="https://git.grenu4.ru/y0zhyck" target="_blank"><i class="fab fa-github"></i> My GIT</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- О себе -->
|
<!-- О себе -->
|
||||||
<section class="about">
|
<section class="about">
|
||||||
<h2>О себе</h2>
|
<h2 class="section-title">Досье</h2>
|
||||||
<p>DevOps Engineer. Увлекаюсь автоматизацией, Kubernetes и Go. Open-source энтузиаст, автор нескольких полезных утилит для мониторинга и оптимизации инфраструктуры. Постоянно изучаю новые технологии и делюсь знаниями с сообществом.</p>
|
<p>Специалист по инфраструктуре с опытом работы в режиме полной скрытности. Обеспечиваю надёжность и безопасность систем, автоматизирую всё, что движется. Владею арсеналом DevOps-инструментов, как Сэм Фишер – своими гаджетами.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Навыки (список можно редактировать) -->
|
<!-- Навыки (инвентарь) -->
|
||||||
<section>
|
<section>
|
||||||
<h2>Навыки</h2>
|
<h2 class="section-title">Инвентарь</h2>
|
||||||
<ul class="skills-list">
|
<div class="skills-grid">
|
||||||
<li>CI/CD (GitLab CI, GitHub Actions)</li>
|
<div class="skill-item"><i class="fas fa-terminal"></i> CI/CD (GitLab, GitHub)</div>
|
||||||
<li>Kubernetes</li>
|
<div class="skill-item"><i class="fas fa-cubes"></i> Kubernetes</div>
|
||||||
<li>Docker</li>
|
<div class="skill-item"><i class="fab fa-docker"></i> Docker</div>
|
||||||
<li>Terraform</li>
|
<div class="skill-item"><i class="fas fa-code-branch"></i> Terraform</div>
|
||||||
<li>Ansible</li>
|
<div class="skill-item"><i class="fas fa-cog"></i> Ansible</div>
|
||||||
<li>Golang</li>
|
<div class="skill-item"><i class="fab fa-golang"></i> Golang</div>
|
||||||
<li>Python</li>
|
<div class="skill-item"><i class="fas fa-chart-line"></i> Prometheus/Grafana</div>
|
||||||
<li>Prometheus / Grafana</li>
|
<div class="skill-item"><i class="fas fa-lock"></i> Security (Vault, mTLS)</div>
|
||||||
<li>Linux</li>
|
</div>
|
||||||
<li>Bash</li>
|
|
||||||
<li>Helm</li>
|
|
||||||
<li>Istio</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Проекты (замените на свои) -->
|
<!-- Проекты (операции) -->
|
||||||
<section>
|
<section>
|
||||||
<h2>Проекты</h2>
|
<h2 class="section-title">Секретные операции</h2>
|
||||||
<div class="projects-grid">
|
<div class="projects-grid">
|
||||||
<!-- Карточка 1 -->
|
|
||||||
<div class="project-card">
|
<div class="project-card">
|
||||||
<h3><i class="fas fa-network-wired"></i> Cloud VPN</h3>
|
<h3>◉ Cloud VPN</h3>
|
||||||
<p>Масштабируемый VPN-сервис. Поддержка VLESS, Trojan, Shadowsocks.</p>
|
<p>Распределённая VPN-сеть на базе K8s. Мультипротокольность: VLESS, Trojan, Shadowsocks.</p>
|
||||||
<div class="project-tech">
|
<div class="project-tech">
|
||||||
<span>Kubernetes</span>
|
<span>K8s</span><span>Xray</span><span>Prometheus</span>
|
||||||
<span>Xray</span>
|
|
||||||
<span>Prometheus</span>
|
|
||||||
</div>
|
</div>
|
||||||
<a href="#" class="project-link">Подробнее <i class="fas fa-arrow-right"></i></a>
|
<a href="#" class="project-link">Раскрыть детали <i class="fas fa-arrow-right"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<!-- Карточка 2 -->
|
|
||||||
<div class="project-card">
|
<div class="project-card">
|
||||||
<h3><i class="fas fa-coins"></i> K8s Cost Optimizer</h3>
|
<h3>◉ K8s Cost Optimizer</h3>
|
||||||
<p>Инструмент для анализа и оптимизации затрат в Kubernetes. Интеграция с AWS, GCP, Azure.</p>
|
<p>Инструмент скрытого наблюдения за затратами в кластере. Поддержка AWS, GCP, Azure.</p>
|
||||||
<div class="project-tech">
|
<div class="project-tech">
|
||||||
<span>Golang</span>
|
<span>Golang</span><span>Prometheus</span><span>Cloud APIs</span>
|
||||||
<span>Prometheus</span>
|
|
||||||
<span>Cloud APIs</span>
|
|
||||||
</div>
|
</div>
|
||||||
<a href="#" class="project-link">Подробнее <i class="fas fa-arrow-right"></i></a>
|
<a href="#" class="project-link">Раскрыть детали <i class="fas fa-arrow-right"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<!-- Карточка 3 -->
|
|
||||||
<div class="project-card">
|
<div class="project-card">
|
||||||
<h3><i class="fas fa-chart-line"></i> Speedtest Exporter</h3>
|
<h3>◉ Torrent Blocker</h3>
|
||||||
<p>Prometheus-экспортер для измерения скорости интернета до множества глобальных точек.</p>
|
<p>Система обнаружения и блокировки торрент-трафика на VPN-серверах. Автоматическое внесение в чёрный список.</p>
|
||||||
<div class="project-tech">
|
<div class="project-tech">
|
||||||
<span>Golang</span>
|
<span>Python</span><span>iptables</span><span>Telegram API</span>
|
||||||
<span>Prometheus</span>
|
|
||||||
<span>Docker</span>
|
|
||||||
</div>
|
</div>
|
||||||
<a href="#" class="project-link">Подробнее <i class="fas fa-arrow-right"></i></a>
|
<a href="#" class="project-link">Раскрыть детали <i class="fas fa-arrow-right"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Опыт работы -->
|
<!-- Опыт работы (послужной список) -->
|
||||||
<section>
|
<section>
|
||||||
<h2>Опыт работы</h2>
|
<h2 class="section-title">Послужной список</h2>
|
||||||
|
<div class="experience-list">
|
||||||
<div class="experience-item">
|
<div class="exp-item">
|
||||||
<div class="exp-date">2022 — 2023</div>
|
<div class="exp-header">
|
||||||
<div class="exp-content">
|
|
||||||
<h3>DevOps Engineer</h3>
|
<h3>DevOps Engineer</h3>
|
||||||
<span class="company">Гарда технологии, Москва (гибрид)</span>
|
<span class="exp-date">2025 — н.в.</span>
|
||||||
<ul class="exp-duties">
|
</div>
|
||||||
<li>Миграция монолитных приложений в Kubernetes, внедрение GitOps (ArgoCD).</li>
|
<div class="exp-company">Ziteh, Nizhniy Novgorod (скрытый отдел)</div>
|
||||||
<li>Оптимизация CI/CD пайплайнов (сокращение времени сборки на 40%).</li>
|
<ul class="exp-desc">
|
||||||
<li>Настройка Service Mesh (Istio) для безопасного взаимодействия микросервисов.</li>
|
<li>Миграция монолитов в Kubernetes (архитектура нулевого доверия).</li>
|
||||||
<li>Менторство 3 джуниоров, проведение внутренних воркшопов.</li>
|
<li>Оптимизация CI/CD pipelines – сокращение времени сборки на 40%.</li>
|
||||||
|
<li>Внедрение Service Mesh (Istio) для безопасной связи микросервисов.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="exp-item">
|
||||||
|
<div class="exp-header">
|
||||||
|
<h3>System Administrator (спецподразделение)</h3>
|
||||||
|
<span class="exp-date">2019 — 2024</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="exp-company">Renaissance Heavy Industries, Tobolsk</div>
|
||||||
<div class="experience-item">
|
<ul class="exp-desc">
|
||||||
<div class="exp-date">2023 — настоящее время</div>
|
<li>Обеспечение бесперебойной работы инфраструктуры крупного промышленного комплекса.</li>
|
||||||
<div class="exp-content">
|
<li>Настройка сетей и систем мониторинга, достижение 99.9% аптайма.</li>
|
||||||
<h3>DevOps Engineer</h3>
|
|
||||||
<span class="company">Зитех, удалённо</span>
|
|
||||||
<ul class="exp-duties">
|
|
||||||
<li>Разработка инфраструктуры на AWS (Terraform, Ansible).</li>
|
|
||||||
<li>Внедрение мониторинга на базе Prometheus + Grafana, настройка алертов.</li>
|
|
||||||
<li>Автоматизация резервного копирования баз данных и восстановления.</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Небольшой футер -->
|
<!-- Подвал в стиле командной строки -->
|
||||||
<div class="footer-note">
|
<div class="footer">
|
||||||
© 2022-2030 Евгений Спирин. Сделано с <i class="fas fa-heart" style="color: #ef4444;"></i> для портфолио.
|
<div class="prompt">ready for orders <span class="cursor"></span></div>
|
||||||
|
<div>© 2026-2030 Evgeniy Spirin // Третий эшелон</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Скрипт для скрытия сплеш-скрина -->
|
||||||
|
<script>
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
// Показываем сплеш минимум 2 секунды (чтобы анимация прогресс-бара завершилась)
|
||||||
|
setTimeout(function() {
|
||||||
|
document.getElementById('splash').classList.add('hidden');
|
||||||
|
}, 2800); // чуть меньше времени анимации, чтобы не было пустого ожидания
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user