ecaa3bbf6a
Replaces the Crush landing page with a single-screen hero (no scroll): gradient sky, particle orb with corona, 'Welcome to dangrubb.net' title, top-left DG logo and a numbered menu. Raw WebGL (no three.js), self-hosted Instrument Sans + Geist Mono. ~10 KB of JS.
98 lines
3.7 KiB
Plaintext
98 lines
3.7 KiB
Plaintext
---
|
|
import '@fontsource/instrument-sans/latin-400.css';
|
|
import '@fontsource/instrument-sans/latin-500.css';
|
|
import '@fontsource/geist-mono/latin-500.css';
|
|
import '../styles/radiance.css';
|
|
|
|
const nav = [
|
|
{ label: 'Intelligence Platform', href: 'https://ai.dangrubb.net' },
|
|
{ label: 'Exclusive Music', href: '/music' },
|
|
{ label: 'Multimedia Entertainment', href: 'https://pi.dangrubb.net/jellyfin' },
|
|
{ label: 'Crypto', href: '#' },
|
|
{ label: 'Storage Solutions', href: 'https://pi.dangrubb.net/nextcloud' },
|
|
];
|
|
const links = [
|
|
{ label: 'Blog', href: '/blog' },
|
|
{ label: 'CV', href: '/cv' },
|
|
{ label: 'Git', href: 'https://pi.dangrubb.net/dangit' },
|
|
];
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>dangrubb.net</title>
|
|
<meta name="description" content="Welcome to dangrubb.net" />
|
|
<meta name="theme-color" content="#fff6f4" />
|
|
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" />
|
|
<link rel="preload" as="image" href="/src/img/DanGrubbLogoWhite.png" />
|
|
</head>
|
|
<body class="is-loading">
|
|
<div class="loader" id="loader" aria-hidden="true">
|
|
<div class="loader__stage">
|
|
<div class="scene">
|
|
<div class="cube">
|
|
<div class="cube__face cube__face--front"><img src="/src/img/DanGrubbLogoWhite.png" alt="" width="140" height="140" /></div>
|
|
<div class="cube__face cube__face--back"><img src="/src/img/DanGrubbLogoWhite.png" alt="" width="140" height="140" /></div>
|
|
<div class="cube__face cube__face--right"></div>
|
|
<div class="cube__face cube__face--left"></div>
|
|
<div class="cube__face cube__face--top"></div>
|
|
<div class="cube__face cube__face--bottom"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="loader__count" id="loader-count">000%</p>
|
|
</div>
|
|
|
|
<header class="bar">
|
|
<a class="bar__logo" href="/">
|
|
<span class="sr-only">dangrubb.net home</span>
|
|
<img src="/src/img/DanGrubbLogoDark.png" alt="" width="48" height="48" />
|
|
</a>
|
|
|
|
<nav class="menu" id="menu" aria-label="Site">
|
|
<button class="menu__btn" id="menu-btn" type="button" aria-expanded="false" aria-controls="menu-panel">
|
|
<span class="sr-only">Site navigation</span>
|
|
<svg class="menu__icon menu__icon--open" viewBox="0 0 18 14" width="18" height="14" aria-hidden="true">
|
|
<path d="M0 1h2M5 1h13M0 7h10M13 7h5M0 13h2M5 13h13" stroke="currentColor" stroke-width="1.5" fill="none" />
|
|
</svg>
|
|
<svg class="menu__icon menu__icon--close" viewBox="0 0 18 18" width="18" height="18" aria-hidden="true">
|
|
<path d="M1 1l16 16M17 1L1 17" stroke="currentColor" stroke-width="1.5" fill="none" />
|
|
</svg>
|
|
</button>
|
|
<div class="menu__panel" id="menu-panel">
|
|
<ul class="menu__list">
|
|
{nav.map((item, i) => (
|
|
<li>
|
|
<a href={item.href}>
|
|
<span class="menu__num">{String(i + 1).padStart(2, '0')}</span>
|
|
<span class="menu__label">{item.label}</span>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div class="menu__links">
|
|
{links.map((l) => (
|
|
<a class="menu__link" href={l.href}><span>{l.label}</span></a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="hero">
|
|
<canvas class="hero__orb" id="orb" aria-hidden="true"></canvas>
|
|
<h1 class="hero__title" id="title">Welcome to dangrubb.net</h1>
|
|
</main>
|
|
|
|
<script>
|
|
import { startOrb } from '../scripts/orb.js';
|
|
import { initUI } from '../scripts/ui.js';
|
|
|
|
initUI(startOrb);
|
|
</script>
|
|
</body>
|
|
</html>
|