Add static landing page
This commit is contained in:
parent
9437ff368c
commit
dbf0601e96
5 changed files with 491 additions and 0 deletions
1
.well-known/matrix/client
Normal file
1
.well-known/matrix/client
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"m.homeserver":{"base_url":"https://matrix.rastus01.com"}}
|
||||||
1
.well-known/matrix/server
Normal file
1
.well-known/matrix/server
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"m.server":"matrix.rastus01.com:443"}
|
||||||
71
index.html
Normal file
71
index.html
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Persoenliche Selfhosting-Domain von rastus01.com fuer Home Lab, Matrix und private Dienste."
|
||||||
|
>
|
||||||
|
<title>rastus01.com</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-shell">
|
||||||
|
<header class="hero" aria-labelledby="site-title">
|
||||||
|
<canvas class="network-canvas" id="network-canvas" aria-hidden="true"></canvas>
|
||||||
|
<div class="signal-grid" aria-hidden="true">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="eyebrow">Personal Node</p>
|
||||||
|
<h1 id="site-title">rastus01.com</h1>
|
||||||
|
<p class="subtitle">Home Lab · Matrix · Selfhosting</p>
|
||||||
|
<p class="intro">
|
||||||
|
Dies ist meine persönliche Selfhosting-Domain. Einige Dienste laufen
|
||||||
|
hier privat oder experimentell.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="service-grid" aria-label="Dienste">
|
||||||
|
<section class="service-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="status-dot status-live" aria-hidden="true"></span>
|
||||||
|
<h2>Matrix Homeserver</h2>
|
||||||
|
</div>
|
||||||
|
<p>Matrix läuft unter matrix.rastus01.com</p>
|
||||||
|
<a class="button-link" href="https://matrix.rastus01.com">
|
||||||
|
Matrix öffnen
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="service-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="status-dot status-idle" aria-hidden="true"></span>
|
||||||
|
<h2>Git / Projekte</h2>
|
||||||
|
</div>
|
||||||
|
<p>Eigene Projekte und Experimente folgen später.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="service-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="status-dot status-build" aria-hidden="true"></span>
|
||||||
|
<h2>Status</h2>
|
||||||
|
</div>
|
||||||
|
<p>Website im Aufbau.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<span>r01</span>
|
||||||
|
<span>Static endpoint active</span>
|
||||||
|
<span id="current-year">2026</span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
90
script.js
Normal file
90
script.js
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
const yearElement = document.querySelector("#current-year");
|
||||||
|
const canvas = document.querySelector("#network-canvas");
|
||||||
|
|
||||||
|
if (yearElement) {
|
||||||
|
yearElement.textContent = new Date().getFullYear().toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (canvas) {
|
||||||
|
const context = canvas.getContext("2d");
|
||||||
|
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||||
|
let animationFrame = null;
|
||||||
|
const nodes = Array.from({ length: 42 }, (_, index) => ({
|
||||||
|
x: (index * 97) % 100,
|
||||||
|
y: (index * 53) % 100,
|
||||||
|
speed: 0.08 + (index % 5) * 0.015,
|
||||||
|
phase: index * 0.7,
|
||||||
|
}));
|
||||||
|
|
||||||
|
function resizeCanvas() {
|
||||||
|
const ratio = Math.min(window.devicePixelRatio || 1, 2);
|
||||||
|
const { width, height } = canvas.getBoundingClientRect();
|
||||||
|
|
||||||
|
canvas.width = Math.max(1, Math.floor(width * ratio));
|
||||||
|
canvas.height = Math.max(1, Math.floor(height * ratio));
|
||||||
|
context.setTransform(ratio, 0, 0, ratio, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawNetwork(time = 0) {
|
||||||
|
const { width, height } = canvas.getBoundingClientRect();
|
||||||
|
const points = nodes.map((node) => {
|
||||||
|
const drift = prefersReducedMotion.matches ? 0 : time * 0.001 * node.speed;
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: ((node.x + Math.sin(node.phase + drift) * 5 + 100) % 100) * width / 100,
|
||||||
|
y: ((node.y + Math.cos(node.phase + drift) * 5 + 100) % 100) * height / 100,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
context.clearRect(0, 0, width, height);
|
||||||
|
context.fillStyle = "#070a0f";
|
||||||
|
context.fillRect(0, 0, width, height);
|
||||||
|
|
||||||
|
context.lineWidth = 1;
|
||||||
|
for (let index = 0; index < points.length; index += 1) {
|
||||||
|
for (let nextIndex = index + 1; nextIndex < points.length; nextIndex += 1) {
|
||||||
|
const first = points[index];
|
||||||
|
const second = points[nextIndex];
|
||||||
|
const distance = Math.hypot(first.x - second.x, first.y - second.y);
|
||||||
|
|
||||||
|
if (distance < 170) {
|
||||||
|
const alpha = (1 - distance / 170) * 0.22;
|
||||||
|
context.strokeStyle = `rgba(103, 232, 249, ${alpha})`;
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(first.x, first.y);
|
||||||
|
context.lineTo(second.x, second.y);
|
||||||
|
context.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const point of points) {
|
||||||
|
context.fillStyle = "rgba(124, 247, 182, 0.88)";
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(point.x, point.y, 2.2, 0, Math.PI * 2);
|
||||||
|
context.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!prefersReducedMotion.matches) {
|
||||||
|
animationFrame = window.requestAnimationFrame(drawNetwork);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeCanvas();
|
||||||
|
drawNetwork();
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
resizeCanvas();
|
||||||
|
|
||||||
|
if (prefersReducedMotion.matches) {
|
||||||
|
drawNetwork();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
prefersReducedMotion.addEventListener("change", () => {
|
||||||
|
if (animationFrame) {
|
||||||
|
window.cancelAnimationFrame(animationFrame);
|
||||||
|
animationFrame = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
drawNetwork();
|
||||||
|
});
|
||||||
|
}
|
||||||
328
style.css
Normal file
328
style.css
Normal file
|
|
@ -0,0 +1,328 @@
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
--bg: #070a0f;
|
||||||
|
--bg-soft: #0d141d;
|
||||||
|
--panel: rgba(16, 24, 34, 0.78);
|
||||||
|
--panel-strong: rgba(22, 33, 46, 0.92);
|
||||||
|
--text: #ecf4ff;
|
||||||
|
--muted: #9badc0;
|
||||||
|
--line: rgba(142, 245, 255, 0.18);
|
||||||
|
--cyan: #67e8f9;
|
||||||
|
--green: #7cf7b6;
|
||||||
|
--pink: #ff5ea8;
|
||||||
|
--amber: #ffd166;
|
||||||
|
--shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
min-height: 100%;
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text);
|
||||||
|
font-family:
|
||||||
|
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
|
"Segoe UI", sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
background:
|
||||||
|
linear-gradient(145deg, #070a0f 0%, #0b1018 44%, #101018 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -1;
|
||||||
|
pointer-events: none;
|
||||||
|
content: "";
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
|
||||||
|
background-size: 48px 48px;
|
||||||
|
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0 0 28px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 66svh;
|
||||||
|
padding: clamp(32px, 7vw, 76px) max(20px, calc((100vw - 1120px) / 2));
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
background: linear-gradient(180deg, rgba(7, 10, 15, 0.1), rgba(7, 10, 15, 0.82));
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before,
|
||||||
|
.hero::after {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(255, 255, 255, 0.045) 0,
|
||||||
|
rgba(255, 255, 255, 0.045) 1px,
|
||||||
|
transparent 1px,
|
||||||
|
transparent 14px
|
||||||
|
);
|
||||||
|
opacity: 0.42;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::after {
|
||||||
|
right: -12%;
|
||||||
|
bottom: -28%;
|
||||||
|
width: 520px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border: 1px solid rgba(103, 232, 249, 0.22);
|
||||||
|
border-radius: 50%;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg, transparent 49%, rgba(103, 232, 249, 0.24) 50%, transparent 51%),
|
||||||
|
linear-gradient(0deg, transparent 49%, rgba(103, 232, 249, 0.24) 50%, transparent 51%);
|
||||||
|
opacity: 0.34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-canvas {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal-grid {
|
||||||
|
position: absolute;
|
||||||
|
top: 24px;
|
||||||
|
right: 24px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 12px);
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal-grid span {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border: 1px solid rgba(103, 232, 249, 0.5);
|
||||||
|
background: rgba(103, 232, 249, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow,
|
||||||
|
.subtitle,
|
||||||
|
.intro,
|
||||||
|
h1 {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin: 0 0 14px;
|
||||||
|
color: var(--green);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(3rem, 8vw, 7rem);
|
||||||
|
line-height: 0.92;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin: 18px 0 0;
|
||||||
|
color: var(--cyan);
|
||||||
|
font-size: clamp(1rem, 2vw, 1.35rem);
|
||||||
|
font-weight: 650;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
max-width: 680px;
|
||||||
|
margin: 22px 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 1.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-grid {
|
||||||
|
width: min(1120px, calc(100% - 32px));
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
min-height: 220px;
|
||||||
|
padding: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||||
|
border-radius: 8px;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
|
||||||
|
var(--panel-strong);
|
||||||
|
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.08rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 22px currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-live {
|
||||||
|
color: var(--green);
|
||||||
|
background: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-idle {
|
||||||
|
color: var(--cyan);
|
||||||
|
background: var(--cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-build {
|
||||||
|
color: var(--amber);
|
||||||
|
background: var(--amber);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card p {
|
||||||
|
margin: 18px 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link {
|
||||||
|
margin-top: auto;
|
||||||
|
min-height: 44px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid rgba(103, 232, 249, 0.45);
|
||||||
|
border-radius: 6px;
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: 700;
|
||||||
|
text-decoration: none;
|
||||||
|
background: rgba(103, 232, 249, 0.09);
|
||||||
|
transition:
|
||||||
|
border-color 180ms ease,
|
||||||
|
background 180ms ease,
|
||||||
|
transform 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link:hover,
|
||||||
|
.button-link:focus-visible {
|
||||||
|
border-color: var(--cyan);
|
||||||
|
background: rgba(103, 232, 249, 0.17);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link:focus-visible {
|
||||||
|
outline: 3px solid rgba(103, 232, 249, 0.3);
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
width: min(1120px, calc(100% - 32px));
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2px 4px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
color: rgba(236, 244, 255, 0.58);
|
||||||
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.page-shell {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
min-height: 62svh;
|
||||||
|
padding: 32px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-grid {
|
||||||
|
width: min(100% - 24px, 680px);
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
width: min(100% - 24px, 680px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 520px) {
|
||||||
|
.page-shell {
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
min-height: 58svh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal-grid {
|
||||||
|
top: 18px;
|
||||||
|
right: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue