| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Xerox Will — Bio</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| |
| --md-sys-color-primary: #FFB786; |
| --md-sys-color-on-primary: #4F2500; |
| --md-sys-color-primary-container: #6F3B0A; |
| --md-sys-color-on-primary-container: #FFDCC7; |
| |
| --md-sys-color-surface: #141218; |
| --md-sys-color-surface-container: #211F26; |
| --md-sys-color-surface-container-high: #2B2930; |
| --md-sys-color-surface-container-highest: #36343B; |
| |
| --md-sys-color-on-surface: #E6E0E9; |
| --md-sys-color-on-surface-variant: #CAC4D0; |
| --md-sys-color-outline: #938F99; |
| --md-sys-color-outline-variant: #49454F; |
| |
| --md-sys-color-error: #F2B8B5; |
| --md-sys-color-error-container: #93000A; |
| --md-sys-color-on-error-container: #FFDAD6; |
| |
| --md-elevation-1: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15); |
| --md-elevation-2: 0 4px 6px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.1); |
| --md-elevation-3: 0 10px 15px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.1); |
| |
| --radius-sm: 8px; |
| --radius-md: 12px; |
| --radius-lg: 16px; |
| --radius-xl: 28px; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Inter', system-ui, -apple-system, sans-serif; |
| background-color: var(--md-sys-color-surface); |
| color: var(--md-sys-color-on-surface); |
| min-height: 100vh; |
| overflow-x: hidden; |
| position: relative; |
| line-height: 1.5; |
| } |
| |
| |
| |
| |
| .petals-bg { |
| position: fixed; |
| inset: 0; |
| z-index: 0; |
| pointer-events: none; |
| overflow: hidden; |
| } |
| |
| .petal { |
| position: absolute; |
| border-radius: 50% 0 50% 50%; |
| background: radial-gradient( |
| circle at 30% 30%, |
| rgba(255, 140, 0, 0.35), |
| rgba(255, 87, 34, 0.08) 70% |
| ); |
| will-change: transform; |
| backface-visibility: hidden; |
| transform: translateZ(0); |
| filter: blur(1px); |
| } |
| |
| .petal:nth-child(1) { width: 140px; height: 140px; top: -20px; left: 10%; animation: float 18s ease-in-out infinite; } |
| .petal:nth-child(2) { width: 100px; height: 100px; top: 15%; right: 5%; animation: float 22s ease-in-out infinite 1s; border-radius: 0 50% 50% 50%; } |
| .petal:nth-child(3) { width: 180px; height: 180px; bottom: 20%; left: -5%; animation: float 25s ease-in-out infinite 2s; opacity: 0.6; } |
| .petal:nth-child(4) { width: 90px; height: 90px; top: 50%; right: 15%; animation: float 20s ease-in-out infinite 0.5s; border-radius: 50% 50% 0 50%; } |
| .petal:nth-child(5) { width: 160px; height: 160px; bottom: -30px; right: 25%; animation: float 24s ease-in-out infinite 3s; opacity: 0.5; } |
| .petal:nth-child(6) { width: 70px; height: 70px; top: 8%; left: 45%; animation: float 19s ease-in-out infinite 1.5s; border-radius: 50% 0 50% 50%; opacity: 0.4; } |
| .petal:nth-child(7) { width: 120px; height: 120px; bottom: 35%; right: -10px; animation: float 21s ease-in-out infinite 2.5s; opacity: 0.45; } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0) rotate(0deg) translateZ(0); } |
| 33% { transform: translateY(-15px) rotate(8deg) translateZ(0); } |
| 66% { transform: translateY(8px) rotate(-5deg) translateZ(0); } |
| } |
| |
| |
| |
| |
| .container { |
| position: relative; |
| z-index: 1; |
| max-width: 680px; |
| margin: 0 auto; |
| padding: 48px 24px; |
| display: flex; |
| flex-direction: column; |
| gap: 24px; |
| } |
| |
| |
| |
| |
| .profile-header { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| text-align: center; |
| gap: 16px; |
| margin-bottom: 8px; |
| } |
| |
| .avatar { |
| width: 120px; |
| height: 120px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #FF8C00 0%, #FF5722 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 48px; |
| font-weight: 700; |
| color: var(--md-sys-color-surface); |
| box-shadow: 0 8px 24px rgba(255, 87, 34, 0.3); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .avatar::after { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| border-radius: 50%; |
| border: 3px solid rgba(255, 255, 255, 0.15); |
| } |
| |
| .display-name { |
| font-size: 32px; |
| font-weight: 700; |
| letter-spacing: -0.5px; |
| color: var(--md-sys-color-on-surface); |
| } |
| |
| .username { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| background: var(--md-sys-color-surface-container); |
| color: var(--md-sys-color-on-surface-variant); |
| padding: 8px 16px; |
| border-radius: 100px; |
| font-size: 14px; |
| font-weight: 500; |
| border: 1px solid var(--md-sys-color-outline-variant); |
| font-family: 'Courier New', monospace; |
| } |
| |
| .username::before { |
| content: '@'; |
| color: var(--md-sys-color-primary); |
| font-weight: 700; |
| } |
| |
| .bio-text { |
| color: var(--md-sys-color-on-surface-variant); |
| font-size: 16px; |
| line-height: 1.6; |
| max-width: 480px; |
| text-align: center; |
| } |
| |
| .chip-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| justify-content: center; |
| margin-top: 4px; |
| } |
| |
| .chip { |
| background: var(--md-sys-color-primary-container); |
| color: var(--md-sys-color-on-primary-container); |
| padding: 6px 14px; |
| border-radius: 100px; |
| font-size: 12px; |
| font-weight: 600; |
| letter-spacing: 0.3px; |
| text-transform: uppercase; |
| } |
| |
| |
| |
| |
| .section-title { |
| font-size: 14px; |
| font-weight: 600; |
| color: var(--md-sys-color-on-surface-variant); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| margin: 8px 0 4px 16px; |
| } |
| |
| .card { |
| background: rgba(33, 31, 38, 0.7); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| border: 1px solid var(--md-sys-color-outline-variant); |
| border-radius: var(--radius-lg); |
| padding: 20px; |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| cursor: pointer; |
| position: relative; |
| overflow: hidden; |
| text-decoration: none; |
| color: inherit; |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| } |
| |
| .card::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 140, 0, 0.06), transparent 40%); |
| opacity: 0; |
| transition: opacity 0.3s; |
| pointer-events: none; |
| } |
| |
| .card:hover::before { |
| opacity: 1; |
| } |
| |
| .card:hover { |
| transform: translateY(-2px); |
| box-shadow: var(--md-elevation-3); |
| border-color: var(--md-sys-color-outline); |
| } |
| |
| .card:active { |
| transform: scale(0.98); |
| } |
| |
| .card-icon { |
| width: 48px; |
| height: 48px; |
| border-radius: var(--radius-md); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 24px; |
| flex-shrink: 0; |
| } |
| |
| .card-content { |
| flex: 1; |
| min-width: 0; |
| } |
| |
| .card-title { |
| font-size: 16px; |
| font-weight: 600; |
| color: var(--md-sys-color-on-surface); |
| margin-bottom: 2px; |
| } |
| |
| .card-desc { |
| font-size: 13px; |
| color: var(--md-sys-color-on-surface-variant); |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .card-arrow { |
| color: var(--md-sys-color-outline); |
| font-size: 20px; |
| transition: transform 0.2s; |
| } |
| |
| .card:hover .card-arrow { |
| transform: translateX(4px); |
| color: var(--md-sys-color-primary); |
| } |
| |
| |
| .tg-card .card-icon { |
| background: linear-gradient(135deg, #2AABEE, #229ED9); |
| color: white; |
| box-shadow: 0 4px 12px rgba(42, 171, 238, 0.25); |
| } |
| |
| |
| |
| |
| .red-card { |
| background: linear-gradient(135deg, rgba(147, 0, 10, 0.85), rgba(179, 20, 18, 0.9)); |
| backdrop-filter: blur(24px); |
| -webkit-backdrop-filter: blur(24px); |
| border: 1px solid rgba(255, 100, 100, 0.3); |
| box-shadow: 0 8px 32px rgba(211, 47, 47, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); |
| } |
| |
| .red-card::before { |
| background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 80, 80, 0.15), transparent 40%); |
| } |
| |
| .red-card .card-icon { |
| background: rgba(255, 255, 255, 0.15); |
| color: #FFDAD6; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| |
| .red-card .card-title { |
| color: #FFDAD6; |
| } |
| |
| .red-card .card-desc { |
| color: rgba(255, 218, 214, 0.8); |
| } |
| |
| .red-card .card-arrow { |
| color: rgba(255, 218, 214, 0.7); |
| } |
| |
| .red-card:hover .card-arrow { |
| color: #FFDAD6; |
| } |
| |
| .red-badge { |
| position: absolute; |
| top: 12px; |
| right: 12px; |
| background: rgba(255, 255, 255, 0.15); |
| color: #FFDAD6; |
| font-size: 10px; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| padding: 4px 10px; |
| border-radius: 100px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| |
| |
| |
| |
| .details-card { |
| background: rgba(33, 31, 38, 0.6); |
| backdrop-filter: blur(16px); |
| border: 1px solid var(--md-sys-color-outline-variant); |
| border-radius: var(--radius-lg); |
| padding: 24px; |
| } |
| |
| .details-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); |
| gap: 16px; |
| margin-top: 16px; |
| } |
| |
| .detail-item { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
| |
| .detail-label { |
| font-size: 11px; |
| text-transform: uppercase; |
| letter-spacing: 0.8px; |
| color: var(--md-sys-color-on-surface-variant); |
| font-weight: 600; |
| } |
| |
| .detail-value { |
| font-size: 14px; |
| color: var(--md-sys-color-on-surface); |
| font-weight: 500; |
| } |
| |
| .divider { |
| height: 1px; |
| background: var(--md-sys-color-outline-variant); |
| margin: 20px 0; |
| } |
| |
| |
| |
| |
| .footer { |
| text-align: center; |
| padding: 24px; |
| color: var(--md-sys-color-outline); |
| font-size: 12px; |
| font-weight: 500; |
| } |
| |
| |
| |
| |
| @keyframes fadeInUp { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-in { |
| animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; |
| opacity: 0; |
| } |
| |
| .delay-1 { animation-delay: 0.1s; } |
| .delay-2 { animation-delay: 0.2s; } |
| .delay-3 { animation-delay: 0.3s; } |
| .delay-4 { animation-delay: 0.4s; } |
| |
| |
| .ripple { |
| position: absolute; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.15); |
| transform: scale(0); |
| animation: ripple-anim 0.6s linear; |
| pointer-events: none; |
| } |
| |
| @keyframes ripple-anim { |
| to { transform: scale(4); opacity: 0; } |
| } |
| |
| |
| @media (max-width: 480px) { |
| .container { padding: 32px 16px; } |
| .display-name { font-size: 26px; } |
| .avatar { width: 100px; height: 100px; font-size: 40px; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <div class="petals-bg" aria-hidden="true"> |
| <div class="petal"></div> |
| <div class="petal"></div> |
| <div class="petal"></div> |
| <div class="petal"></div> |
| <div class="petal"></div> |
| <div class="petal"></div> |
| <div class="petal"></div> |
| </div> |
|
|
| <main class="container"> |
| |
| <header class="profile-header animate-in"> |
| <div class="avatar">XW</div> |
| <h1 class="display-name">Xerox Will</h1> |
| <div class="username">dev_dolbaeb</div> |
| <p class="bio-text"> |
| Разработчик, энтузиаст ретро-технологий и создатель экспериментальных проектов. |
| Люблю чистый код, стабильные системы и эстетичные интерфейсы. |
| </p> |
| <div class="chip-row"> |
| <span class="chip">Dev</span> |
| <span class="chip">Design</span> |
| <span class="chip">Retro</span> |
| <span class="chip">Android</span> |
| </div> |
| </header> |
|
|
| |
| <div class="animate-in delay-1"> |
| <h2 class="section-title">Каналы</h2> |
| |
| <a href="https://t.me/xeroxwill" target="_blank" class="card tg-card" style="margin-bottom: 12px;"> |
| <div class="card-icon"> |
| <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M21.198 2.433a2.242 2.242 0 0 0-1.022.215l-16.5 6.498a2.25 2.25 0 0 0-.106 4.03l3.697 1.197 1.443 4.695a1.125 1.125 0 0 0 1.96.456l3.08-3.727 4.797 3.727a2.25 2.25 0 0 0 3.598-1.8V4.68a2.25 2.25 0 0 0-2.052-2.247z"/> |
| </svg> |
| </div> |
| <div class="card-content"> |
| <div class="card-title">@xeroxwill</div> |
| <div class="card-desc">Основной канал — проекты, код, мысли</div> |
| </div> |
| <div class="card-arrow">→</div> |
| </a> |
|
|
| <a href="https://t.me/MetroProjectile" target="_blank" class="card red-card"> |
| <span class="red-badge">Приватный</span> |
| <div class="card-icon">🔒</div> |
| <div class="card-content"> |
| <div class="card-title">@MetroProjectile</div> |
| <div class="card-desc">Закрытый канал для своих</div> |
| </div> |
| <div class="card-arrow">→</div> |
| </a> |
| </div> |
|
|
| |
| <div class="details-card animate-in delay-2"> |
| <h2 class="section-title" style="margin: 0 0 4px 0;">Детали</h2> |
| <div class="divider"></div> |
| <div class="details-grid"> |
| <div class="detail-item"> |
| <span class="detail-label">Никнейм</span> |
| <span class="detail-value">Xerox Will</span> |
| </div> |
| <div class="detail-item"> |
| <span class="detail-label">Username</span> |
| <span class="detail-value" style="font-family: monospace; font-size: 13px;">@dev_dolbaeb</span> |
| </div> |
| <div class="detail-item"> |
| <span class="detail-label">Платформа</span> |
| <span class="detail-value">Android / Web / Linux</span> |
| </div> |
| <div class="detail-item"> |
| <span class="detail-label">Статус</span> |
| <span class="detail-value" style="color: var(--md-sys-color-primary);">● Онлайн</span> |
| </div> |
| <div class="detail-item"> |
| <span class="detail-label">Стек</span> |
| <span class="detail-value">Processing, HTML/CSS, Bash</span> |
| </div> |
| <div class="detail-item"> |
| <span class="detail-label">Локация</span> |
| <span class="detail-value">Termux / APDE / Code-Server</span> |
| </div> |
| </div> |
| </div> |
|
|
| <footer class="footer animate-in delay-3"> |
| Сделано в стиле Material Design 3 · Xerox Will |
| </footer> |
| </main> |
|
|
| <script> |
| |
| document.querySelectorAll('.card').forEach(card => { |
| card.addEventListener('mousemove', (e) => { |
| const rect = card.getBoundingClientRect(); |
| const x = e.clientX - rect.left; |
| const y = e.clientY - rect.top; |
| card.style.setProperty('--mouse-x', `${x}px`); |
| card.style.setProperty('--mouse-y', `${y}px`); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.card').forEach(card => { |
| card.addEventListener('click', function(e) { |
| const ripple = document.createElement('span'); |
| ripple.classList.add('ripple'); |
| const rect = this.getBoundingClientRect(); |
| const size = Math.max(rect.width, rect.height); |
| ripple.style.width = ripple.style.height = size + 'px'; |
| ripple.style.left = (e.clientX - rect.left - size / 2) + 'px'; |
| ripple.style.top = (e.clientY - rect.top - size / 2) + 'px'; |
| this.appendChild(ripple); |
| setTimeout(() => ripple.remove(), 600); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
