diff --git a/README.md b/README.md
index 5c55808..a8120f4 100644
--- a/README.md
+++ b/README.md
@@ -9,9 +9,10 @@ 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)
+- Two full-height screens with scroll-snap between them:
+ 1. **Home** — an animated glowing star (pure SVG + CSS) and "Mykolay Ponomarenko" centered on the page, with a "scroll for apps" cue at the bottom
+ 2. **Apps & Games** — cards linking to [worder](https://worder.shadoll.com), [wordweave](https://wordweave.shadoll.com), and [coshin](https://coshin.shadoll.com), each using that game's own icon (in `icons/`, copied from its source repo) and accent color
+- A footer at the bottom of the second screen, linking to [shadoll.dev](https://shadoll.dev)
## Running locally
diff --git a/icons/coshin.svg b/icons/coshin.svg
new file mode 100644
index 0000000..2012c6f
--- /dev/null
+++ b/icons/coshin.svg
@@ -0,0 +1,37 @@
+
diff --git a/icons/worder.svg b/icons/worder.svg
new file mode 100644
index 0000000..02ec5c4
--- /dev/null
+++ b/icons/worder.svg
@@ -0,0 +1,36 @@
+
diff --git a/icons/wordweave.svg b/icons/wordweave.svg
new file mode 100644
index 0000000..7813308
--- /dev/null
+++ b/icons/wordweave.svg
@@ -0,0 +1,57 @@
+
diff --git a/index.html b/index.html
index a30bdc1..d131f06 100644
--- a/index.html
+++ b/index.html
@@ -23,13 +23,25 @@
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 {
+ .page {
+ height: 100vh;
+ overflow-y: auto;
+ overflow-x: hidden;
+ scroll-snap-type: y mandatory;
+ }
+
+ .screen {
+ min-height: 100vh;
+ scroll-snap-align: start;
+ scroll-snap-stop: always;
+ display: flex;
+ flex-direction: column;
+ }
+
+ /* Screen 1 — hero */
+ #home main {
flex: 1;
display: flex;
flex-direction: column;
@@ -96,10 +108,152 @@
line-height: 1.25;
}
+ .scroll-cue {
+ display: flex;
+ justify-content: center;
+ padding: 0 0 1.75rem;
+ }
+
+ .scroll-cue a {
+ color: #8a8f98;
+ text-decoration: none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.35rem;
+ font-size: 0.75rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ transition: color 0.2s ease;
+ }
+
+ .scroll-cue a:hover {
+ color: #ffd666;
+ }
+
+ .scroll-cue svg {
+ width: 18px;
+ height: 18px;
+ animation: bob 1.8s ease-in-out infinite;
+ }
+
+ @keyframes bob {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(6px); }
+ }
+
+ /* Screen 2 — apps */
+ #apps {
+ justify-content: center;
+ align-items: center;
+ padding: 3.5rem 1.5rem 1.5rem;
+ background: linear-gradient(180deg, #05060a 0%, #0a0c14 100%);
+ }
+
+ .apps-header {
+ text-align: center;
+ margin-bottom: 2.25rem;
+ }
+
+ .apps-header h2 {
+ font-size: clamp(1.3rem, 3.5vw, 1.8rem);
+ font-weight: 600;
+ letter-spacing: 0.02em;
+ }
+
+ .apps-header p {
+ color: #8a8f98;
+ font-size: 0.95rem;
+ margin-top: 0.4rem;
+ }
+
+ .apps-grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 240px));
+ gap: 1.25rem;
+ width: 100%;
+ max-width: 62rem;
+ }
+
+ @media (max-width: 720px) {
+ .apps-grid {
+ grid-template-columns: minmax(0, 320px);
+ justify-content: center;
+ }
+ }
+
+ .app-card {
+ --accent: #ffd666;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+ padding: 1.5rem;
+ border-radius: 1.1rem;
+ background: #0d0f18;
+ border: 1px solid #1c1f2b;
+ text-decoration: none;
+ color: inherit;
+ transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+ }
+
+ .app-card:hover,
+ .app-card:focus-visible {
+ transform: translateY(-4px);
+ border-color: var(--accent);
+ box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--accent) 60%, transparent);
+ }
+
+ .app-icon {
+ width: 56px;
+ height: 56px;
+ border-radius: 14px;
+ overflow: hidden;
+ box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
+ }
+
+ .app-icon img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+
+ .app-card h3 {
+ font-size: 1.05rem;
+ font-weight: 600;
+ }
+
+ .app-card p {
+ color: #9a9fa8;
+ font-size: 0.85rem;
+ line-height: 1.45;
+ flex: 1;
+ }
+
+ .app-card .visit {
+ color: var(--accent);
+ font-size: 0.8rem;
+ font-weight: 600;
+ letter-spacing: 0.03em;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.3rem;
+ }
+
+ .app-card .visit svg {
+ width: 12px;
+ height: 12px;
+ transition: transform 0.2s ease;
+ }
+
+ .app-card:hover .visit svg {
+ transform: translate(2px, -2px);
+ }
+
footer {
display: flex;
justify-content: center;
- padding: 1.25rem 1rem;
+ padding: 2rem 1rem 1.25rem;
}
footer a {
@@ -115,34 +269,82 @@
}
@media (prefers-reduced-motion: reduce) {
- svg.star, .star-glow {
+ .page {
+ scroll-snap-type: none;
+ }
+ svg.star, .star-glow, .scroll-cue svg {
animation: none;
}
}
-
-
-
- Mykolay
- Ponomarenko
-
-
-
+
+
+
+
+
+ Mykolay
+ Ponomarenko
+
+
+
+
+
+
+
