JL Kruger
e57d2b0a72
- Images/images.html: hub page linking all 4 collections - Images/wayback.html, nomad-soul.html, myster-wizzard.html, exopraxist.html: collection galleries - 429 thumbnails (360px) committed across 4 collections - Gallery renders from baked filename arrays (no on-load fetch) - Lightbox lazy-fetches FileBrowser for full-res on click, falls back to thumbnail - .gitignore: allow Images/*/thumbnails/, anchor /GEMINI.md to root only, add .venv/ - index.html: wire Images star node to Images/images.html Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
268 lines
8.6 KiB
HTML
268 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Images | Singular Particular Space</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Protest+Revolution&family=Lora:ital,wght@0,400..700;1,400..700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg-void: #04060b;
|
||
--bg-deep: #050810;
|
||
--bg-warm: #0d1320;
|
||
--fire-amber: #e8943a;
|
||
--fire-coral: #d4654a;
|
||
--neon-green: #32dc8c;
|
||
--neon-teal: #2ac4b3;
|
||
--deep-red: #8b2020;
|
||
--blue-magenta: #6b3fa0;
|
||
--orchid: #c558d9;
|
||
--paradise: #ff7f3f;
|
||
--toucan: #ffcf40;
|
||
--fairy-pink: #f472b6;
|
||
--waterfall: #3fbfaf;
|
||
--phosphor: #00ff41;
|
||
--text-warm: #e8d5b8;
|
||
--text-muted: #6a7a8a;
|
||
--accent: var(--fire-amber);
|
||
--accent-glow: rgba(232, 148, 58, 0.25);
|
||
--transition: 100ms ease;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg-void);
|
||
color: var(--text-warm);
|
||
font-family: 'Lora', serif;
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
header {
|
||
padding: 4rem 2rem 2rem;
|
||
text-align: center;
|
||
border-bottom: 2px solid var(--accent);
|
||
box-shadow: 0 4px 15px var(--accent-glow);
|
||
margin-bottom: 3rem;
|
||
background: linear-gradient(to bottom, var(--bg-deep), var(--bg-void));
|
||
}
|
||
|
||
h1 {
|
||
font-family: 'Protest Revolution', system-ui;
|
||
font-size: 5rem;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
text-shadow: 4px 4px 0px var(--bg-void), 0 0 20px var(--accent-glow);
|
||
}
|
||
|
||
.nav-back {
|
||
display: inline-block;
|
||
margin-top: 1.5rem;
|
||
font-family: 'Share Tech Mono', monospace;
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
text-transform: uppercase;
|
||
border: 1px solid var(--text-muted);
|
||
padding: 0.5rem 1.5rem;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.nav-back:hover {
|
||
color: var(--accent);
|
||
border-color: var(--accent);
|
||
background: var(--accent-glow);
|
||
box-shadow: 0 0 10px var(--accent-glow);
|
||
}
|
||
|
||
main {
|
||
flex: 1;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 2rem 4rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 2.5rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
h1 {
|
||
font-size: 3rem;
|
||
}
|
||
}
|
||
|
||
.card {
|
||
border: 2px solid var(--text-muted);
|
||
background: var(--bg-deep);
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: var(--transition);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card:hover {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 20px var(--accent-glow);
|
||
background: var(--bg-warm);
|
||
z-index: 10;
|
||
}
|
||
|
||
.card-image {
|
||
aspect-ratio: 16/9;
|
||
background: var(--bg-warm);
|
||
border-bottom: 2px solid var(--text-muted);
|
||
transition: var(--transition);
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.card-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
filter: grayscale(0.5) contrast(1.1);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.card:hover .card-image {
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.card:hover .card-image img {
|
||
filter: grayscale(0) contrast(1);
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.card-content {
|
||
padding: 2.5rem;
|
||
}
|
||
|
||
.card-years {
|
||
font-family: 'Share Tech Mono', monospace;
|
||
font-size: 1rem;
|
||
color: var(--accent);
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.card-title {
|
||
font-family: 'Protest Revolution', system-ui;
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--text-warm);
|
||
line-height: 1;
|
||
}
|
||
|
||
.card-subtitle {
|
||
font-size: 1.1rem;
|
||
color: var(--text-muted);
|
||
font-style: italic;
|
||
}
|
||
|
||
footer {
|
||
padding: 3rem;
|
||
text-align: center;
|
||
border-top: 1px solid var(--bg-warm);
|
||
font-family: 'Share Tech Mono', monospace;
|
||
font-size: 0.9rem;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.2em;
|
||
}
|
||
|
||
.accent-coral { --accent: var(--fire-coral); --accent-glow: rgba(212, 101, 74, 0.3); }
|
||
.accent-waterfall { --accent: var(--waterfall); --accent-glow: rgba(63, 191, 175, 0.3); }
|
||
.accent-orchid { --accent: var(--orchid); --accent-glow: rgba(197, 88, 217, 0.3); }
|
||
.accent-phosphor { --accent: var(--phosphor); --accent-glow: rgba(0, 255, 65, 0.3); }
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Images</h1>
|
||
<a href="../index.html" class="nav-back">← Back to Space</a>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="grid">
|
||
<a href="wayback.html" class="card accent-coral">
|
||
<div class="card-image">
|
||
<img src="WayBack/thumbnails/BreakermanAvatar1.jpg" alt="WayBack Preview">
|
||
</div>
|
||
<div class="card-content">
|
||
<span class="card-years">2010–2014</span>
|
||
<h2 class="card-title">WayBack</h2>
|
||
<p class="card-subtitle">From way back in the way back</p>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="nomad-soul.html" class="card accent-waterfall">
|
||
<div class="card-image">
|
||
<img src="YourNomadSoul/thumbnails/13F18846-DE0A-4241-9871-918FEE42E99C.jpg" alt="YourNomadSoul Preview">
|
||
</div>
|
||
<div class="card-content">
|
||
<span class="card-years">2015–2021</span>
|
||
<h2 class="card-title">YourNomadSoul</h2>
|
||
<p class="card-subtitle">Scattered about the social internets</p>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="myster-wizzard.html" class="card accent-orchid">
|
||
<div class="card-image">
|
||
<img src="MysterWizzard/thumbnails/20241127_195824.jpg" alt="MysterWizzard Preview">
|
||
</div>
|
||
<div class="card-content">
|
||
<span class="card-years">2022–2025</span>
|
||
<h2 class="card-title">MysterWizzard</h2>
|
||
<p class="card-subtitle">Time spent in the real world, learning about community</p>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="exopraxist.html" class="card accent-phosphor">
|
||
<div class="card-image">
|
||
<img src="Exopraxist/thumbnails/jl_wallpaper_desktop_F.jpg" alt="Exopraxist Preview">
|
||
</div>
|
||
<div class="card-content">
|
||
<span class="card-years">2026–present</span>
|
||
<h2 class="card-title">Exopraxist</h2>
|
||
<p class="card-subtitle">Stepping up, stepping forth. Step by step we dance and we do</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>SINGULAR PARTICULAR SPACE // IMAGES HUB</p>
|
||
</footer>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
console.log('Images Hub initialized');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|