now page design pretty much finished
This commit is contained in:
Dan
parent
4812920bc0
commit
b2f436d553
8 changed files with 199 additions and 114 deletions
|
|
@ -1,9 +1,9 @@
|
|||
// Server Room - Horizontal Scrolling Now/Uses Page
|
||||
|
||||
// Color variables
|
||||
$color-green: #0f0;
|
||||
$color-green: greenyellow;
|
||||
$color-amber: #ff9900;
|
||||
$color-blue: #0ff;
|
||||
$color-blue: #00ffff;
|
||||
$color-red: #f00;
|
||||
|
||||
$dark-bg-1: #1a1a1a;
|
||||
|
|
@ -770,7 +770,6 @@ $dark-bg-3: #0a0a0a;
|
|||
.graph-container {
|
||||
height: 200px;
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -1020,7 +1019,9 @@ $dark-bg-3: #0a0a0a;
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
@include scrollbar-custom(#8b7355, 5px);
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 20% 30%,
|
||||
|
|
@ -1254,7 +1255,7 @@ $dark-bg-3: #0a0a0a;
|
|||
min-height: 90px;
|
||||
padding: 10px;
|
||||
font-family: "Caveat", cursive;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -1290,6 +1291,10 @@ $dark-bg-3: #0a0a0a;
|
|||
0 1px 2px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.wb-note-content {
|
||||
|
|
@ -1368,6 +1373,7 @@ $dark-bg-3: #0a0a0a;
|
|||
.wb-media-cover {
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1686,7 +1692,7 @@ $dark-bg-3: #0a0a0a;
|
|||
height: 280px;
|
||||
background: linear-gradient(145deg, #e8e0c8, #c4b89a);
|
||||
border-radius: 8px;
|
||||
padding: 15px 20px 30px 20px;
|
||||
padding: 8px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
|
|
@ -1710,7 +1716,7 @@ $dark-bg-3: #0a0a0a;
|
|||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
opacity: 0.3;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
animation: ambient-pulse 4s ease-in-out infinite;
|
||||
|
||||
|
|
@ -1718,7 +1724,7 @@ $dark-bg-3: #0a0a0a;
|
|||
background: $color-green;
|
||||
}
|
||||
&.blue {
|
||||
background: #00f;
|
||||
background: $color-blue;
|
||||
}
|
||||
&.amber {
|
||||
background: $color-amber;
|
||||
|
|
@ -1728,11 +1734,11 @@ $dark-bg-3: #0a0a0a;
|
|||
@keyframes ambient-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
opacity: 0.1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
opacity: 0.3;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1743,7 +1749,7 @@ $dark-bg-3: #0a0a0a;
|
|||
top: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 150;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -1775,7 +1781,8 @@ $dark-bg-3: #0a0a0a;
|
|||
}
|
||||
|
||||
.sign-title {
|
||||
font-family: "Courier New", monospace;
|
||||
//font-family: "Courier New", monospace;
|
||||
font-family: "DSEG14-Classic";
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: $color-green;
|
||||
|
|
@ -1789,13 +1796,32 @@ $dark-bg-3: #0a0a0a;
|
|||
}
|
||||
|
||||
.sign-subtitle {
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.server-rack-1 {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
.lava-lamp-on-top {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 20px;
|
||||
|
||||
.lava-lamp-container {
|
||||
height: 100px !important;
|
||||
width: 60px !important;
|
||||
|
||||
.lamp-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sign-flicker {
|
||||
0%,
|
||||
100% {
|
||||
|
|
|
|||
|
|
@ -12,4 +12,4 @@ sticky_notes:
|
|||
**Tinkering with:**
|
||||
|
||||
- ritual.sh - This website! I've been exploring the indieweb movement and working on this site to carve out my own little digital garden to tend. I'm having a lot of fun making art using pure CSS.
|
||||
- After years of using Linux exclusively for servers, Microsoft's relentless [enshittification](https://en.wikipedia.org/wiki/Enshittification) of Windows finally pushed me to migrate my actual workstations. Now running Linux on most machines (currently experimenting with Bazzite) and MacOS on the rest. Customising my desktop has been pretty fun.
|
||||
- After years of using Linux exclusively for servers, Microsoft's relentless [enshittification](https://en.wikipedia.org/wiki/Enshittification) of Windows finally pushed me to migrate my actual workstations. Now running Linux on most machines (currently experimenting with Bazzite and Pop!_OS) and MacOS on the rest. Customising my desktop has been pretty fun.
|
||||
|
|
|
|||
21
content/now/hardware.md
Normal file
21
content/now/hardware.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
title: Other Hardware
|
||||
width: 400px
|
||||
height: 500px
|
||||
sticky_notes:
|
||||
- text: "Can you really have too many computers?"
|
||||
color: "yellow"
|
||||
---
|
||||
|
||||
**Server Rack:**
|
||||
|
||||
- 2x Unraid servers for files, docker, and VMs
|
||||
- Intel NUC running PiHole and Unifi Controller
|
||||
- Various Unifi switches and APs
|
||||
- UPS
|
||||
- Custom mini monitors
|
||||
- Full page on my homelabbing coming soon...
|
||||
|
||||
**Other Computers:**
|
||||
|
||||
- M4 Mac Mini
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
---
|
||||
title: Homelab Architecture
|
||||
width: 550px
|
||||
height: 600px
|
||||
order: 4
|
||||
---
|
||||
|
||||
**Network Topology:**
|
||||
|
||||
```
|
||||
Internet
|
||||
|
|
||||
+-- Firewall
|
||||
|
|
||||
+-- Core Switch
|
||||
|
|
||||
+-- PROD Servers
|
||||
+-- DEV Environment
|
||||
+-- Storage/NAS
|
||||
+-- Services
|
||||
```
|
||||
|
||||
**Self-Hosted Services:**
|
||||
|
||||
- Git server, CI/CD
|
||||
- Media server
|
||||
- Home automation
|
||||
- Monitoring stack
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
title: Learning Queue
|
||||
width: 400px
|
||||
height: 500px
|
||||
order: 2
|
||||
---
|
||||
|
||||
**2025 Goals:**
|
||||
|
||||
- Master Rust programming
|
||||
- Build a complete homelab
|
||||
- Contribute to FOSS projects
|
||||
- Advanced photography
|
||||
- Music production basics
|
||||
- Kubernetes certification
|
||||
|
||||
**Books in Progress:**
|
||||
|
||||
- The Rust Programming Language
|
||||
- Designing Data-Intensive Applications
|
||||
- The Phoenix Project
|
||||
19
content/now/software.md
Normal file
19
content/now/software.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
title: Things I Use Regularly
|
||||
width: 550px
|
||||
height: 600px
|
||||
order: 4
|
||||
---
|
||||
|
||||
**Software:**
|
||||
|
||||
- **Browser** - [Zen](https://zen-browser.app/)
|
||||
- **Code Editor** - VS Code
|
||||
- **Audio** - High Tide & Turntable
|
||||
- **Password Manager** - 1password
|
||||
|
||||
**Hardware:**
|
||||
|
||||
- **Keyboard** - Ducky One 3 Classic 65% w/ Cherry Red switches
|
||||
- **Mouse** - Razer Naga X
|
||||
- **Microphone** - Marantz MPM-1000
|
||||
10
content/updates/2025-12-30-now.md
Normal file
10
content/updates/2025-12-30-now.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "2025 12 30 Now"
|
||||
date: 2025-12-30T14:09:08Z
|
||||
tags: []
|
||||
description: ""
|
||||
build:
|
||||
render: never
|
||||
---
|
||||
|
||||
Added a now/uses page!
|
||||
|
|
@ -5,34 +5,38 @@
|
|||
<div class="sign-frame">
|
||||
<div class="sign-content">
|
||||
<div class="sign-title">/NOW</div>
|
||||
<div class="sign-subtitle">Updated {{ now.Format "02/01/2006" }}</div>
|
||||
<div class="sign-subtitle">Updated 30/12/2025</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="server-room-container">
|
||||
<!-- Server Rack 1: Production Infrastructure -->
|
||||
|
||||
<div class="server-rack-1">
|
||||
<!-- prettier-ignore -->
|
||||
{{ partial "elements/server-rack.html"
|
||||
(dict "height" "650px" "title" "PROD-RACK-01"
|
||||
"units" (slice
|
||||
(dict "type" "switch" "label" "Core-SW-01" "ports" 24)
|
||||
(dict "type" "spacer")
|
||||
(dict "type" "server" "label" "WEB-01" "led1" "green" "led2" "green" "drives" 1)
|
||||
(dict "type" "server" "label" "WEB-02" "led1" "green" "led2" "amber" "drives" 1)
|
||||
(dict "type" "server" "label" "DB-01" "led1" "green" "led2" "green" "drives" 2)
|
||||
(dict "type" "spacer")
|
||||
(dict "type" "switch" "label" "" "ports" 24)
|
||||
(dict "type" "blank")
|
||||
(dict "type" "server" "label" "API-01" "led1" "green" "led2" "blue" "drives" 1)
|
||||
(dict "type" "server" "label" "Cache-01" "led1" "green" "led2" "green" "drives" 1)
|
||||
) ) }}
|
||||
<div class="lava-lamp-on-top">
|
||||
{{ partial "elements/lavalamp.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
{{ partial "elements/server-rack.html"
|
||||
(dict "height" "650px" "title" "PROD-RACK-01"
|
||||
"units" (slice
|
||||
(dict "type" "switch" "label" "Core-SW-01" "ports" 24)
|
||||
(dict "type" "spacer")
|
||||
(dict "type" "server" "label" "WEB-01" "led1" "green" "led2" "green" "drives" 1)
|
||||
(dict "type" "server" "label" "WEB-02" "led1" "green" "led2" "amber" "drives" 1)
|
||||
(dict "type" "server" "label" "DB-01" "led1" "green" "led2" "green" "drives" 2)
|
||||
(dict "type" "spacer")
|
||||
(dict "type" "patch-panel" "ports" 24)
|
||||
(dict "type" "blank")
|
||||
(dict "type" "server" "label" "API-01" "led1" "green" "led2" "blue" "drives" 1)
|
||||
(dict "type" "server" "label" "Cache-01" "led1" "green" "led2" "green" "drives" 1)
|
||||
) ) }}
|
||||
{{ partial "elements/whiteboard.html" (dict "file" "currently.md" "context" .) }}
|
||||
|
||||
<!-- Whiteboard: Currently -->
|
||||
{{ partial "elements/whiteboard.html" (dict "file" "currently.md" "context"
|
||||
.) }}
|
||||
|
||||
<!-- Server Rack 2: Storage & Backup -->
|
||||
<!-- prettier-ignore -->
|
||||
{{ partial "elements/server-rack.html"
|
||||
(dict "height" "650px" "title" "STORAGE-01"
|
||||
|
|
@ -40,6 +44,7 @@
|
|||
(dict "type" "server" "label" "NAS-01" "led1" "green" "led2" "green" "drives" 1 "size" 1)
|
||||
(dict "type" "spacer")
|
||||
(dict "type" "storage" "label" "SAN-Primary" "drives" 20 "size" 3)
|
||||
(dict "type" "switch" "label" "" "ports" 24)
|
||||
(dict "type" "spacer")
|
||||
(dict "type" "server" "label" "BACKUP-01" "led1" "blue" "led2" "amber" "drives" 1)
|
||||
(dict "type" "blank")
|
||||
|
|
@ -48,9 +53,10 @@
|
|||
<!-- Terminal Desk -->
|
||||
<div class="terminal-desk">
|
||||
<div class="terminal-monitor">
|
||||
<div class="terminal-screen">
|
||||
<div style="color: #0f0; text-shadow: 0 0 5px #0f0">
|
||||
<p>$ neofetch</p>
|
||||
<div class="crt-screen">
|
||||
<div class="crt" style="padding: 5px;">
|
||||
<div class="">
|
||||
<p>$ fastfetch</p>
|
||||
<p><strong>NERV</strong></p>
|
||||
<p>---</p>
|
||||
<p><strong>CPU</strong>: AMD Ryzen 7 9800X3D @ 5.46 Ghz</p>
|
||||
|
|
@ -61,6 +67,8 @@
|
|||
<br />
|
||||
<p><strong>Usage</strong>: Main gaming and development machine</p>
|
||||
<p><span class="cursor-blink">_</span></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,52 +92,102 @@
|
|||
(dict "type" "server" "label" "DEV-01" "led1" "green" "led2" "amber" "drives" 1)
|
||||
(dict "type" "server" "label" "DEV-02" "led1" "blue" "led2" "green" "drives" 1)
|
||||
(dict "type" "server" "label" "TEST-01" "led1" "green" "led2" "red" "drives" 1)
|
||||
(dict "type" "switch" "label" "" "ports" 24)
|
||||
(dict "type" "spacer")
|
||||
(dict "type" "server" "label" "CI/CD" "led1" "green" "led2" "green" "drives" 2)
|
||||
(dict "type" "server" "label" "CICD-01" "led1" "green" "led2" "green" "drives" 1)
|
||||
(dict "type" "blank")
|
||||
(dict "type" "server" "label" "MONITOR" "led1" "blue" "led2" "amber" "drives" 1)
|
||||
)) }}
|
||||
|
||||
<!-- Whiteboard: Learning Queue -->
|
||||
{{ partial "elements/whiteboard.html" (dict "file" "learning-queue.md"
|
||||
"context" .) }}
|
||||
<div class="terminal-desk">
|
||||
<div class="terminal-monitor">
|
||||
<div class="crt-screen">
|
||||
<div class="crt" style="padding: 5px;">
|
||||
<div class="">
|
||||
<p>$ fastfetch</p>
|
||||
<p><strong>BALTHASAR</strong></p>
|
||||
<p>---</p>
|
||||
<p><strong>CPU</strong>: Intel i5-8250U @ 3.40 GHz</p>
|
||||
<p><strong>GPU</strong>: Questionable</p>
|
||||
<p><strong>RAM</strong>: 16 GiB</p>
|
||||
<br />
|
||||
<p><strong>OS</strong>: Pop!_OS 24.04 LTS</p>
|
||||
<br />
|
||||
<p><strong>Usage</strong>: Thinkpad T480s laptop, mostly for coding from bed.</p>
|
||||
<p><span class="cursor-blink">_</span></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desk-surface"></div>
|
||||
<div
|
||||
class="ambient-light green"
|
||||
style="bottom: 100px; left: 0; width: 400px; height: 320px; z-index: -1"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
{{ partial "elements/whiteboard.html" (dict "file" "hardware.md" "context" .) }}
|
||||
|
||||
<!-- Server Rack 4: Power & Network -->
|
||||
<!-- prettier-ignore -->
|
||||
{{ partial "elements/server-rack.html"
|
||||
(dict "height" "550px" "title" "INFRA-01" "units" (slice
|
||||
(dict "type" "ups" "label" "UPS-Primary" "capacity" "98" "size" 2)
|
||||
(dict "type" "ups" "label" "UPS-01" "capacity" "98" "size" 2)
|
||||
(dict "type" "spacer")
|
||||
(dict "type" "switch" "label" "Edge-SW-01" "ports" 24)
|
||||
(dict "type" "server" "label" "Firewall" "led1" "green" "led2" "green" "drives" 1)
|
||||
(dict "type" "switch" "label" "EDGE-SW-01" "ports" 24)
|
||||
(dict "type" "switch" "label" "CORE-SW-01" "ports" 24)
|
||||
(dict "type" "server" "label" "FW-01" "led1" "green" "led2" "green" "drives" 1)
|
||||
(dict "type" "server" "label" "DHCP" "led1" "green" "led2" "blue" "drives" 1)
|
||||
(dict "type" "blank")
|
||||
(dict "type" "blank")
|
||||
) ) }}
|
||||
|
||||
<!-- Whiteboard: Homelab Architecture -->
|
||||
{{ partial "elements/whiteboard.html" (dict "file" "homelab.md" "context" .)
|
||||
}}
|
||||
|
||||
{{ partial "elements/whiteboard.html" (dict "file" "software.md" "context" .) }}
|
||||
|
||||
<!-- Monitor: System Metrics -->
|
||||
{{ partial "elements/monitor-screen.html" (dict "width" "400px" "height"
|
||||
"350px" "type" "metrics" "title" "WEB-01 - METRICS" "color" "green" ) }}
|
||||
|
||||
<!-- Monitor: Live Graph -->
|
||||
{{ partial "elements/monitor-screen.html" (dict "width" "450px" "height"
|
||||
"380px" "type" "graph" "title" "NETWORK TRAFFIC" "color" "blue" ) }}
|
||||
<div class="terminal-desk">
|
||||
<div class="terminal-monitor" style="height:290px">
|
||||
<div class="crt-screen">
|
||||
<div class="crt screen-display cyan" style="padding: 5px;">
|
||||
<div class="metrics-header">NET</div>
|
||||
<div class="graph-container">
|
||||
<div class="graph-wrapper">
|
||||
<!-- First instance of the graph -->
|
||||
<svg class="graph-svg graph-instance" viewBox="0 0 300 150" preserveAspectRatio="none">
|
||||
<polyline class="graph-line graph-line-blue"
|
||||
points="0,35 10,75 20,85 30,78 40,65 50,70 60,60 70,55 80,65 90,58 100,45 110,50 120,40 130,35 140,45 150,38 160,25 170,30 180,20 190,15 200,25 210,18 220,12 230,20 240,15 250,25 260,22 270,28 280,25 290,35 300,35"
|
||||
fill="none" />
|
||||
<polyline class="graph-fill graph-fill-blue"
|
||||
points="0,35 10,75 20,85 30,78 40,65 50,70 60,60 70,55 80,65 90,58 100,45 110,50 120,40 130,35 140,45 150,38 160,25 170,30 180,20 190,15 200,25 210,18 220,12 230,20 240,15 250,25 260,22 270,28 280,25 290,35 300,35 300,150 0,150"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Second instance (duplicate for seamless loop) -->
|
||||
<svg class="graph-svg graph-instance" viewBox="0 0 300 150" preserveAspectRatio="none">
|
||||
<polyline class="graph-line graph-line-blue"
|
||||
points="0,35 10,75 20,85 30,78 40,65 50,70 60,60 70,55 80,65 90,58 100,45 110,50 120,40 130,35 140,45 150,38 160,25 170,30 180,20 190,15 200,25 210,18 220,12 230,20 240,15 250,25 260,22 270,28 280,25 290,35 300,35"
|
||||
fill="none" />
|
||||
<polyline class="graph-fill graph-fill-blue"
|
||||
points="0,35 10,75 20,85 30,78 40,65 50,70 60,60 70,55 80,65 90,58 100,45 110,50 120,40 130,35 140,45 150,38 160,25 170,30 180,20 190,15 200,25 210,18 220,12 230,20 240,15 250,25 260,22 270,28 280,25 290,35 300,35 300,150 0,150"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="graph-grid"></div>
|
||||
</div>
|
||||
<div class="graph-legend">
|
||||
<span class="graph-legend-item">▲ Throughput: 2.4 GB/s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Monitor: System Logs -->
|
||||
{{ partial "elements/monitor-screen.html" (dict "width" "420px" "height"
|
||||
"400px" "type" "logs" "title" "SYSTEM LOGS" "color" "green" ) }}
|
||||
|
||||
<!-- Monitor: Network Stats -->
|
||||
{{ partial "elements/monitor-screen.html" (dict "width" "380px" "height"
|
||||
"380px" "type" "network" "title" "BANDWIDTH MONITOR" "color" "amber" ) }}
|
||||
|
||||
<!-- Monitor: Terminal -->
|
||||
{{ partial "elements/monitor-screen.html" (dict "width" "400px" "height"
|
||||
"320px" "type" "terminal" "title" "db-primary.local" "color" "green" ) }}
|
||||
<div class="desk-surface"></div>
|
||||
<div
|
||||
class="ambient-light blue"
|
||||
style="bottom: 100px; left: 0; width: 400px; height: 320px; z-index: -1"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue