:root {
--bg: #0b0f17;
--bg-elev: #0f1522;
--text: #e7ecf3;
--muted: #a7b1c2;
--brand: #8ab4ff;
--brand-2: #b388ff;
--card: rgba(255, 255, 255, .04);
--card-border: rgba(255, 255, 255, .08);
--radius: 18px;
--shadow: 0 10px 30px rgba(0, 0, 0, .35);
--container: 1200px;
--pad: 24px
}
* {
box-sizing: border-box
}
html,
body {
height: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
overflow-x: hidden
}
.bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: -2;
background: radial-gradient(1200px 600px at 20% -10%, rgba(138, 180, 255, .18), transparent 60%), radial-gradient(900px 600px at 120% 10%, rgba(179, 136, 255, .14), transparent 60%), radial-gradient(600px 600px at 50% 120%, rgba(138, 255, 210, .08), transparent 55%), var(--bg);
filter: saturate(120%);
animation: hue 18s linear infinite
}
@keyframes hue {
to {
filter: saturate(120%) hue-rotate(360deg)
}
}
.bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(transparent 70%, rgba(255, 255, 255, .03) 71%), linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, .03) 71%);
background-size: 32px 32px, 32px 32px;
mask-image: radial-gradient(1000px 600px at 50% 0%, rgba(0, 0, 0, .7), transparent 80%);
opacity: .35
}
.container {
width: min(var(--container), 100%);
margin: 0 auto;
padding: 0 var(--pad)
}
.section {
padding: 88px 20px;
position: relative
}
.section .sup {
display: inline-flex;
gap: 10px;
align-items: center;
color: var(--muted);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 12px
}
.section h2 {
margin: 12px 0 16px;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.2
}
.muted {
color: var(--muted)
}
header.site-header {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(8px);
background: linear-gradient(to bottom, rgba(11, 15, 23, .9), rgba(11, 15, 23, .65));
border-bottom: 1px solid var(--card-border)
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-weight: 800;
letter-spacing: .3px
}
.logo-mark {
width: 28px;
height: 28px;
border-radius: 8px;
background: conic-gradient(from 210deg, var(--brand), var(--brand-2), #5ff1b6, var(--brand));
box-shadow: 0 0 24px rgba(138, 180, 255, .35)
}
nav a {
color: var(--muted);
text-decoration: none;
margin-left: 18px;
font-weight: 600
}
nav a:hover {
color: var(--text)
}
.hero {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 36px;
align-items: center;
padding: 96px 20px 64px
}
.hero h1 {
font-size: clamp(36px, 6vw, 64px);
line-height: 1.1;
margin: 0 0 18px
}
.grad {
background: linear-gradient(90deg, var(--text), var(--brand));
-webkit-background-clip: text;
background-clip: text;
color: transparent
}
.hero p {
color: var(--muted);
font-size: clamp(16px, 2.2vw, 18px);
margin: 0 0 28px
}
.cta {
display: flex;
flex-wrap: wrap;
gap: 12px
}
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid var(--card-border);
text-decoration: none;
font-weight: 600
}
.btn.primary {
background: linear-gradient(180deg, rgba(138, 180, 255, .15), rgba(138, 180, 255, .08));
color: var(--text);
box-shadow: var(--shadow)
}
.btn.primary:hover {
border-color: rgba(138, 180, 255, .35)
}
.btn.ghost {
background: rgba(255, 255, 255, .02);
color: var(--text)
}
.btn.ghost:hover {
background: rgba(255, 255, 255, .05)
}
.hero-card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px;
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px
}
.hero-card .avatar {
width: 56px;
height: 56px;
border-radius: 14px;
background: radial-gradient(120% 120% at 20% 20%, rgba(138, 180, 255, .25), transparent 45%), radial-gradient(120% 120% at 80% 80%, rgba(179, 136, 255, .2), transparent 40%), #121826;
border: 1px solid var(--card-border);
display: flex;
justify-content: center;
align-items: center
}
.mono {
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
}
.stack {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 24px
}
.chip {
padding: 8px 12px;
border-radius: 999px;
border: 1px solid var(--card-border);
background: rgba(255, 255, 255, .03);
font-weight: 600;
font-size: 13px
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px
}
.card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
transition: transform .25s ease, border-color .25s ease
}
.card:hover {
transform: translateY(-4px);
border-color: rgba(138, 180, 255, .35)
}
.project {
display: flex;
flex-direction: column;
gap: 12px
}
.project .title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px
}
.project h3 {
margin: 0;
font-size: 20px
}
.project p {
margin: 0;
color: var(--muted)
}
.project .tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px
}
.tag {
text-align: center;
font-size: 12px;
padding: 6px 10px;
border-radius: 18px;
background: rgba(138, 180, 255, .12);
border: 1px solid rgba(138, 180, 255, .2);
color: #cfe0ff
}
.tag.warn {
background: rgba(255, 196, 0, .12);
border: 1px solid rgba(255, 196, 0, .25);
color: #ffe9a6
}
.span-6 {
grid-column: span 6
}
.span-4 {
grid-column: span 4
}
.span-8 {
grid-column: span 8
}
.span-3 {
grid-column: span 3
}
.skills {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 16px
}
.skill {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
border: 1px dashed var(--card-border);
background: rgba(255, 255, 255, .02)
}
.dot {
min-width: 8px;
min-height: 8px;
border-radius: 999px;
background: linear-gradient(180deg, var(--brand), var(--brand-2));
box-shadow: 0 0 18px rgba(138, 180, 255, .6)
}
.contact {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 18px;
align-items: start
}
.contact .list {
display: grid;
gap: 12px
}
.contact .item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px;
border-radius: 14px;
background: rgba(255, 255, 255, .03);
border: 1px solid var(--card-border)
}
.contact a {
color: var(--text);
text-decoration: none;
font-weight: 600
}
.contact a:hover {
color: #fff;
text-decoration: underline
}
footer {
padding: 28px 0 40px;
color: var(--muted);
border-top: 1px solid var(--card-border);
background: linear-gradient(to top, rgba(255, 255, 255, .02), transparent)
}
@media (max-width:1000px) {
.hero {
grid-template-columns: 1fr
}
.contact {
grid-template-columns: 1fr
}
.skills {
grid-template-columns: repeat(2, 1fr)
}
.span-6,
.span-8,
.span-4,
.span-3 {
grid-column: span 12
}
.grid {
grid-template-columns: repeat(12, 1fr)
}
}
@media (max-width:500px) {
.skills {
grid-template-columns: repeat(1, 1fr)
}
}
@media (prefers-reduced-motion:reduce) {
.bg {
animation: none
}
.card,
.btn {
transition: none
}
html {
scroll-behavior: auto
}
}
Веб‑разработка · Backend · DevOps
Привет! Я Layf1x — Full‑Stack разработчик
Делаю быстрые и надёжные веб-сервисы и инфраструктуру: от архитектуры и API до адаптивного фронтенда,
автоматизации деплоя и администрирования серверов.
Люблю чистый код, стабильные системы и метрики в Grafana.
PHP · Laravel
Node.js
Python · Aiogram
React · Tailwind
MySQL · Redis
Nginx · Cloudflare
Linux · Bash
Docker · CI/CD
Сейчас
Строю и поддерживаю веб‑продукты
API, платежи, боты, мониторинг, анти‑DDoS. Фокус на DX, стабильность и масштабируемость.
Реальные задачи
Избранные проекты
Подборка того, что хорошо отражает мой подход к архитектуре, качеству и UX.
LTVPN — VPN-сервис и Telegram-бот
Laravel · Redis · Celery · Python · Aiogram
Полноценная экосистема VPN: бэкенд с автоматизацией покупки/продления, генерацией конфигов и интеграциями с YooKassa/Cryptomus, а также Telegram-бот для управления услугами, балансом, автопродлением и сменой локаций. Очереди, алерты, метрики, интеграция с Redis и Cloudflare.
Nginx
Cloudflare
Automation
Payments
Security
LTCore CMS
В разработке
Лёгкая CMS без ограничений по функциям и подключениям серверов. Акцент на безопасность и производительность.
ACL Caching
Telegram анти‑флуд бот
Python · Aiogram
Мультимодерация, капча, фильтры ссылок/стикеров, синхронизация банов через Redis Pub/Sub, метрики в Grafana.
Redis Rate‑Limit
Minecraft инфраструктура
Java · Paper · Velocity
Плагины, анти‑cheat интеграции, защищённый прокси через TCPShield/Cloudflare, мониторинг TPS, оптимизации.
Perf Security
React-интерфейс магазина
React · Tailwind
Фронтенд с категориями, фильтрацией, адаптивным дизайном и интеграцией с Laravel API для управления товарами и заказами.
SPA Responsive
Система мониторинга и алертов
Python · Grafana
Сбор метрик с серверов и сервисов, построение дашбордов, алерты в Telegram при сбоях или повышенной нагрузке.
Monitoring Alerts
Технический профиль
Навыки и фокус
Backend: PHP/Laravel, Node.js, Python
Frontend: React, Tailwind, адаптив
Базы: MySQL, Redis, миграции
Интеграции: платежи, OAuth2
DevOps: Nginx, CI/CD, Cloudflare
Безопасность: анти‑DDoS, WAF
Мониторинг: Grafana, алерты
Чистый код, review, тесты
Системное администрирование: Linux, Docker, UFW, Fail2Ban
Сетевые сервисы: VPN, Proxy, SSL, DNS