mirror of
https://github.com/shadoll/m5y.git
synced 2026-08-28 11:33:21 +00:00
initial project
This commit is contained in:
@@ -0,0 +1,26 @@
|
|||||||
|
# m5y.p9o.uk
|
||||||
|
|
||||||
|
A minimal, single-page personal startpage.
|
||||||
|
|
||||||
|
Live at [m5y.p9o.uk](https://m5y.p9o.uk).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## What it is
|
||||||
|
|
||||||
|
- A single `index.html`, no build step, no dependencies
|
||||||
|
- An animated glowing star (pure SVG + CSS)
|
||||||
|
- "Mykolay Ponomarenko" centered on the page
|
||||||
|
- A footer pinned to the bottom, linking to [shadoll.dev](https://shadoll.dev)
|
||||||
|
|
||||||
|
## Running locally
|
||||||
|
|
||||||
|
```sh
|
||||||
|
python3 -m http.server 8787
|
||||||
|
```
|
||||||
|
|
||||||
|
Then open [http://localhost:8787](http://localhost:8787).
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
|
||||||
|
Served via GitHub Pages. The custom domain is configured through the `CNAME` file, and `.nojekyll` disables Jekyll processing since this is a plain static site.
|
||||||
+148
@@ -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>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Reference in New Issue
Block a user