initial project

2026-08-28 03:27:16 +00:00 · 2026-07-20 16:37:35 +03:00
commit 9f157e48ac
5 changed files with 175 additions and 0 deletions
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Mykolay Ponomarenko</title>
+<style>
+  :root {
+    color-scheme: dark;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html, body {
+    height: 100%;
+  }
+
+  body {
+    background: #05060a;
+    color: #f5f5f7;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 1.5rem;
+    padding: 2rem 1rem;
+  }
+
+  .star-wrap {
+    width: min(40vw, 220px);
+    height: min(40vw, 220px);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .star-glow {
+    position: absolute;
+    inset: -30%;
+    background: radial-gradient(circle, rgba(255, 214, 102, 0.35) 0%, rgba(255, 214, 102, 0) 70%);
+    filter: blur(6px);
+    animation: pulse 3.2s ease-in-out infinite;
+  }
+
+  svg.star {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform-origin: center;
+    animation: spin 12s linear infinite, twinkle 3.2s ease-in-out infinite;
+    filter: drop-shadow(0 0 12px rgba(255, 214, 102, 0.8));
+  }
+
+  svg.star polygon {
+    fill: url(#starGradient);
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes twinkle {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.08); opacity: 0.85; }
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 0.6; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.15); }
+  }
+
+  .name {
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  .name .line {
+    display: block;
+    font-size: clamp(1.6rem, 5vw, 2.75rem);
+    line-height: 1.25;
+  }
+
+  footer {
+    display: flex;
+    justify-content: center;
+    padding: 1.25rem 1rem;
+  }
+
+  footer a {
+    color: #8a8f98;
+    text-decoration: none;
+    font-size: 0.9rem;
+    letter-spacing: 0.03em;
+    transition: color 0.2s ease;
+  }
+
+  footer a:hover {
+    color: #ffd666;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    svg.star, .star-glow {
+      animation: none;
+    }
+  }
+</style>
+</head>
+<body>
+  <main>
+    <div class="star-wrap">
+      <div class="star-glow"></div>
+      <svg class="star" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="starGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#fff6d9"/>
+            <stop offset="50%" stop-color="#ffd666"/>
+            <stop offset="100%" stop-color="#ff9f43"/>
+          </linearGradient>
+        </defs>
+        <polygon points="50,3 61,37 97,37 68,58 79,92 50,71 21,92 32,58 3,37 39,37"/>
+      </svg>
+    </div>
+    <div class="name">
+      <span class="line">Mykolay</span>
+      <span class="line">Ponomarenko</span>
+    </div>
+  </main>
+  <footer>
+    <a href="https://shadoll.dev" target="_blank" rel="noopener noreferrer">shadoll</a>
+  </footer>
+</body>
+</html>