From c1295a33ba878fef0bd4e9303c7f974a15048403 Mon Sep 17 00:00:00 2001 From: Dan Date: Sun, 1 Feb 2026 15:25:55 +0000 Subject: [PATCH] Added homepage nav and update --- assets/sass/pages/homepage.scss | 37 +- assets/sass/partials/_crt-tv.scss | 2 + assets/sass/partials/_joystick.scss | 323 ++++++++++++++++++ assets/sass/style.scss | 1 + .../updates/2026-02-01-added-a-games-page.md | 10 + layouts/index.html | 7 + layouts/partials/elements/joystick.html | 7 + 7 files changed, 386 insertions(+), 1 deletion(-) create mode 100644 assets/sass/partials/_joystick.scss create mode 100644 content/updates/2026-02-01-added-a-games-page.md create mode 100644 layouts/partials/elements/joystick.html diff --git a/assets/sass/pages/homepage.scss b/assets/sass/pages/homepage.scss index 7bf4808..be627a1 100644 --- a/assets/sass/pages/homepage.scss +++ b/assets/sass/pages/homepage.scss @@ -214,7 +214,7 @@ grid-template-columns: 1fr 1fr; @include media-up(lg) { - grid-template-columns: repeat(6, 1fr); + grid-template-columns: repeat(7, 1fr); position: absolute; bottom: 5%; width: 100%; @@ -338,6 +338,41 @@ } } + .nav-joystick { + position: relative; + a { + width: 100%; + max-width: 250px; + } + //position: relative; + .nav-games-text { + position: absolute; + display: block; + bottom: 25%; + right: 25%; + color: white; + font-size: 20px; + font-weight: bold; + z-index: 8000; + transform: rotate(-20deg); + border: 1px solid #0f0; + padding: 2px; + padding-left: 5px; + padding-right: 5px; + border-radius: 5px; + background-color: rgba(0, 0, 0, 0.7); + opacity: 0; + transition: opacity 0.3s ease; + text-align: center; + } + + &:hover { + .nav-games-text { + opacity: 1; + } + } + } + .time-display { width: 150px; margin: auto; diff --git a/assets/sass/partials/_crt-tv.scss b/assets/sass/partials/_crt-tv.scss index 1061f97..ae6c976 100644 --- a/assets/sass/partials/_crt-tv.scss +++ b/assets/sass/partials/_crt-tv.scss @@ -8,6 +8,8 @@ position: relative; width: 200px; height: 135px; + max-width: 90%; + margin: auto; background: linear-gradient(145deg, #3a3a3a, #1a1a1a); border-radius: 8px 8px 12px 12px; box-shadow: diff --git a/assets/sass/partials/_joystick.scss b/assets/sass/partials/_joystick.scss new file mode 100644 index 0000000..e368b1d --- /dev/null +++ b/assets/sass/partials/_joystick.scss @@ -0,0 +1,323 @@ +// ============================================ +// STANDALONE ARCADE JOYSTICK ELEMENT +// Decorative joystick with neon arcade aesthetics +// ============================================ + +.joystick-element { + width: 100%; + aspect-ratio: 1 / 1; + container-type: inherit; + position: relative; + display: flex; + align-items: flex-end; + justify-content: center; + //padding: 10% 20%; + //margin: 2rem auto; + perspective: 800px; + max-width: 250px; + margin: auto; + + // Ground shadow for depth + &::before { + content: ""; + position: absolute; + bottom: 15%; + left: 50%; + transform: translateX(-50%); + width: 80%; + height: 20%; + background: radial-gradient( + ellipse at center, + rgba(0, 0, 0, 0.6) 0%, + rgba(0, 0, 0, 0.4) 40%, + transparent 70% + ); + border-radius: 50%; + filter: blur(0.5cqw); + z-index: -1; + } + + .joystick-housing { + position: absolute; + bottom: 25%; + left: 50%; + transform: translateX(-50%) rotateX(25deg); + transform-style: preserve-3d; + width: 50%; + height: 20%; + background: linear-gradient( + 180deg, + #0a0a0a 0%, + #1a1a1a 10%, + #2a2a2a 50%, + #3a3a3a 70%, + #4a4a4a 90% + ); + border-radius: 1.5cqw 1.5cqw 0.5cqw 0.5cqw; + box-shadow: + inset 0 0.8cqw 1.5cqw rgba(255, 255, 255, 0.08), + inset 0 -0.8cqw 1.5cqw rgba(0, 0, 0, 0.4); + z-index: 1; + + &::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 35%; + transform: rotateX(-55deg); + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0.03) 20%, + transparent 50%, + rgba(0, 0, 0, 0.2) 100% + ); + border-radius: 1cqw; + pointer-events: none; + } + } + + .joystick-base { + position: absolute; + bottom: 30%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + width: 20%; + height: 8%; + background: radial-gradient( + ellipse at center, + #3a3a3a 0%, + #2a2a2a 40%, + #1a1a1a 70%, + #0a0a0a 100% + ); + border-radius: 50%; + box-shadow: + 0 0 2cqw rgba(0, 255, 255, 0.2), + 0 0.8cqw 2cqw rgba(0, 0, 0, 0.8), + inset 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.9), + inset 0 -0.3cqw 0.8cqw rgba(255, 255, 255, 0.08); + z-index: 2; + + &::before { + content: none; + } + + // Mounting screws + &::after { + content: ""; + position: absolute; + top: 50%; + left: 15%; + transform: translateY(-50%); + width: 8%; + aspect-ratio: 1 / 1; + background: radial-gradient( + circle at 30% 30%, + #4a4a4a 0%, + #2a2a2a 50%, + #1a1a1a 100% + ); + border-radius: 50%; + box-shadow: + inset 0 0.15cqw 0.3cqw rgba(0, 0, 0, 0.9), + inset 0 -0.08cqw 0.15cqw rgba(255, 255, 255, 0.15); + } + } + + .joystick-stick { + position: absolute; + bottom: 37%; + left: 50%; + transform: translateX(-50%); + width: 5%; + height: 20%; + background: linear-gradient( + 90deg, + #5a5a5a 0%, + #4a4a4a 30%, + #3a3a3a 50%, + #2a2a2a 70%, + #1a1a1a 100% + ); + border-radius: 50% / 8%; + box-shadow: + -0.4cqw 0 1cqw rgba(0, 0, 0, 0.7), + 0.4cqw 0 0.8cqw rgba(255, 255, 255, 0.1), + inset 0.2cqw 0 0.5cqw rgba(255, 255, 255, 0.08), + inset -0.2cqw 0 0.5cqw rgba(0, 0, 0, 0.6); + transform-origin: bottom center; + animation: joystick-idle-sway 4s ease-in-out infinite; + z-index: 3; + } + + .joystick-ball { + position: absolute; + top: -30%; + left: 50%; + transform: translateX(-50%); + aspect-ratio: 1 / 1; + width: 300%; + height: auto; + background: radial-gradient( + circle at 35% 35%, + #7dffff 0%, + #00ffff 40%, + #00cccc 70%, + #00aaaa 100% + ); + border-radius: 50%; + box-shadow: + 0 0 2cqw rgba(0, 255, 255, 0.9), + 0 0 4cqw rgba(0, 255, 255, 0.7), + 0 0 6cqw rgba(0, 255, 255, 0.4), + 0 1cqw 2cqw rgba(0, 0, 0, 0.8), + inset -0.5cqw -0.5cqw 1cqw rgba(0, 0, 0, 0.6), + inset 0.5cqw 0.5cqw 1cqw rgba(125, 255, 255, 0.7); + animation: joystick-neon-pulse 3s ease-in-out infinite; + z-index: 4; + } + + // ============================================ + // ANIMATIONS + // ============================================ + + // Gentle swaying motion + @keyframes joystick-idle-sway { + 0%, + 100% { + transform: translateX(-50%) rotate(0deg); + } + 25% { + transform: translateX(-50%) rotate(-3deg); + } + 50% { + transform: translateX(-50%) rotate(0deg); + } + 75% { + transform: translateX(-50%) rotate(3deg); + } + } + + // Pulsing neon glow + @keyframes joystick-neon-pulse { + 0%, + 100% { + filter: brightness(1); + } + 50% { + filter: brightness(1.2); + } + } + + // Optional: Color cycling animation + @keyframes joystick-color-cycle { + 0%, + 100% { + background: radial-gradient( + circle at 35% 35%, + #7dffff 0%, + #00ffff 40%, + #00cccc 70%, + #00aaaa 100% + ); + box-shadow: + 0 0 1.5cqw rgba(0, 255, 255, 0.8), + 0 0 3cqw rgba(0, 255, 255, 0.6), + 0 0 5cqw rgba(0, 255, 255, 0.4), + 0 0.8cqw 1.5cqw rgba(0, 0, 0, 0.7), + inset -0.3cqw -0.3cqw 0.8cqw rgba(0, 0, 0, 0.5), + inset 0.3cqw 0.3cqw 0.8cqw rgba(125, 255, 255, 0.6); + } + 33% { + background: radial-gradient( + circle at 35% 35%, + #ff7dff 0%, + #ff00ff 40%, + #cc00cc 70%, + #aa00aa 100% + ); + box-shadow: + 0 0 1.5cqw rgba(255, 0, 255, 0.8), + 0 0 3cqw rgba(255, 0, 255, 0.6), + 0 0 5cqw rgba(255, 0, 255, 0.4), + 0 0.8cqw 1.5cqw rgba(0, 0, 0, 0.7), + inset -0.3cqw -0.3cqw 0.8cqw rgba(0, 0, 0, 0.5), + inset 0.3cqw 0.3cqw 0.8cqw rgba(255, 125, 255, 0.6); + } + 66% { + background: radial-gradient( + circle at 35% 35%, + #ffff7d 0%, + #ffff00 40%, + #cccc00 70%, + #aaaa00 100% + ); + box-shadow: + 0 0 1.5cqw rgba(255, 255, 0, 0.8), + 0 0 3cqw rgba(255, 255, 0, 0.6), + 0 0 5cqw rgba(255, 255, 0, 0.4), + 0 0.8cqw 1.5cqw rgba(0, 0, 0, 0.7), + inset -0.3cqw -0.3cqw 0.8cqw rgba(0, 0, 0, 0.5), + inset 0.3cqw 0.3cqw 0.8cqw rgba(255, 255, 125, 0.6); + } + } +} + +// ============================================ +// COLOR VARIANTS +// ============================================ + +.joystick-element.magenta .joystick-ball { + background: radial-gradient( + circle at 35% 35%, + #ff7dff 0%, + #ff00ff 40%, + #cc00cc 70%, + #aa00aa 100% + ); + box-shadow: + 0 0 1.5cqw rgba(255, 0, 255, 0.8), + 0 0 3cqw rgba(255, 0, 255, 0.6), + 0 0 5cqw rgba(255, 0, 255, 0.4), + 0 0.8cqw 1.5cqw rgba(0, 0, 0, 0.7), + inset -0.3cqw -0.3cqw 0.8cqw rgba(0, 0, 0, 0.5), + inset 0.3cqw 0.3cqw 0.8cqw rgba(255, 125, 255, 0.6); +} + +.joystick-element.yellow .joystick-ball { + background: radial-gradient( + circle at 35% 35%, + #ffff7d 0%, + #ffff00 40%, + #cccc00 70%, + #aaaa00 100% + ); + box-shadow: + 0 0 1.5cqw rgba(255, 255, 0, 0.8), + 0 0 3cqw rgba(255, 255, 0, 0.6), + 0 0 5cqw rgba(255, 255, 0, 0.4), + 0 0.8cqw 1.5cqw rgba(0, 0, 0, 0.7), + inset -0.3cqw -0.3cqw 0.8cqw rgba(0, 0, 0, 0.5), + inset 0.3cqw 0.3cqw 0.8cqw rgba(255, 255, 125, 0.6); +} + +// Apply color cycle animation to modifier class +.joystick-element.color-cycle .joystick-ball { + animation: + joystick-color-cycle 6s ease-in-out infinite, + joystick-neon-pulse 3s ease-in-out infinite; +} + +// ============================================ +// ACCESSIBILITY +// ============================================ + +@media (prefers-reduced-motion: reduce) { + .joystick-stick, + .joystick-ball { + animation: none; + } +} diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 53da605..ce5557b 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -18,6 +18,7 @@ @import "partials/crt-tv"; @import "partials/graphs"; @import "partials/companion-cube"; +@import "partials/joystick"; @import "partials/content-screens"; diff --git a/content/updates/2026-02-01-added-a-games-page.md b/content/updates/2026-02-01-added-a-games-page.md new file mode 100644 index 0000000..c300e1d --- /dev/null +++ b/content/updates/2026-02-01-added-a-games-page.md @@ -0,0 +1,10 @@ +--- +title: "2026 02 01 Added games page" +date: 2026-02-01T23:07:39Z +tags: [] +description: "" +build: + render: never +--- + +Added a new section to the site to house my current and future [games](/games). diff --git a/layouts/index.html b/layouts/index.html index ff1ffb7..6f838aa 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -285,6 +285,13 @@
{{ partial "elements/crt-tv.html" . }}
+ +
+ + {{ partial "elements/joystick.html" . }} +
Games
+ +
diff --git a/layouts/partials/elements/joystick.html b/layouts/partials/elements/joystick.html new file mode 100644 index 0000000..9e25a41 --- /dev/null +++ b/layouts/partials/elements/joystick.html @@ -0,0 +1,7 @@ +