jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Videos section — hub + 3 collection pages, wire nav star

Browse Source 
- Videos/index.html: hub page with 3 collection cards (Cringe Pit, Renegade, Nomad Soul)
- cringe-pit, renegade-storyteller, nomad-soul: new fonts (Bebas Neue, Space Mono, Barlow Condensed, Rye), vibrant palette aligned with homepage, full iframe allow attributes
- Nomad Soul entry 1 placeholder converted to linked card → anomadsoul3791 channel
- index.html: Videos star href wired to Videos/index.html

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
JL Kruger
2026-03-27 15:26:19 +02:00
parent 09e47ccf81
commit 608077131a
5 changed files with 1376 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
Videos/cringe-pit.html Normal file
View File

@@ -0,0 +1,353 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THE CRINGE PIT // Singular Particular</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
<style>
:root {
--background: #04060b;
--surface: #04060b;
--surface-container: #0a0714;
--surface-container-high: #130f1f;
--surface-container-highest: #1c1529;
--surface-container-lowest: #000000;
--primary: #ff1ae0;
--primary-dim: #cc00b0;
--on-primary: #3d0036;
--secondary: #00f1fd;
--on-secondary: #004145;
--tertiary: #ffcf40;
--outline: #6b3fa0;
--outline-variant: #3a1a5e;
--on-surface: #ede0ff;
--on-surface-variant: #9b87b8;
--space-2: 0.5rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background);
color: var(--on-surface);
font-family: 'Space Mono', monospace;
line-height: 1.5;
overflow-x: hidden;
min-height: 100vh;
}
h1, h2, h3, h4 {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.label-sm {
font-family: 'JetBrains Mono', monospace;
font-weight: 300;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--on-surface-variant);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-12) var(--space-6);
}
header {
margin-bottom: var(--space-12);
border-left: 4px solid var(--secondary);
padding-left: var(--space-6);
}
header h1 {
font-size: clamp(4.5rem, 16vw, 8rem);
line-height: 0.85;
color: var(--primary);
text-shadow: 0 0 40px rgba(255, 26, 224, 0.55), 0 0 90px rgba(255, 26, 224, 0.2);
margin-bottom: var(--space-2);
}
.video-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-12);
}
@media (min-width: 768px) {
.video-grid {
grid-template-columns: repeat(2, 1fr);
}
.video-card:nth-child(even) {
margin-top: var(--space-12);
}
}
.video-card {
background-color: var(--surface-container);
position: relative;
transition: background-color 100ms ease;
}
.video-card:hover {
background-color: var(--surface-container-high);
}
.video-card .aspect-ratio {
position: relative;
padding-bottom: 56.25%;
background-color: var(--surface-container-lowest);
overflow: hidden;
}
.video-card iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.video-content {
padding: var(--space-4);
border-bottom: 2px solid var(--primary-dim);
}
.video-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.7rem;
letter-spacing: 0.06em;
margin-bottom: var(--space-2);
color: var(--on-surface);
}
/* Welcome Gate */
#welcome-gate {
position: fixed;
inset: 0;
background-color: rgba(4, 6, 11, 0.97);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease, visibility 200ms ease;
}
#welcome-gate.active {
opacity: 1;
visibility: visible;
}
.lightbox-content {
max-width: 600px;
background-color: var(--surface-container-high);
padding: var(--space-8);
position: relative;
border-left: 3px solid var(--primary);
box-shadow: 0 0 60px rgba(255, 26, 224, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.5);
}
.lightbox-content::after {
content: '';
position: absolute;
inset: 4px;
border: 1px solid var(--outline-variant);
pointer-events: none;
opacity: 0.5;
}
.lightbox-quote {
font-size: 0.9rem;
font-style: italic;
margin-bottom: var(--space-6);
color: var(--on-surface);
line-height: 1.8;
}
.lightbox-close {
background: var(--primary);
color: var(--on-primary);
border: none;
padding: var(--space-2) var(--space-6);
font-family: 'Bebas Neue', sans-serif;
font-size: 1.2rem;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 100ms ease, box-shadow 100ms ease;
}
.lightbox-close:hover {
background: var(--primary-dim);
box-shadow: 0 0 24px rgba(255, 26, 224, 0.6);
}
/* Glow Effects */
.glow-primary {
position: fixed;
top: -5%;
right: -5%;
width: 55vw;
height: 55vw;
background: radial-gradient(circle, rgba(255, 26, 224, 0.18) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
}
.glow-secondary {
position: fixed;
bottom: -5%;
left: -5%;
width: 40vw;
height: 40vw;
background: radial-gradient(circle, rgba(0, 241, 253, 0.1) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--primary-dim); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
</style>
</head>
<body>
<div class="glow-primary"></div>
<div class="glow-secondary"></div>
<div id="welcome-gate">
<div class="lightbox-content">
<p class="label-sm" style="margin-bottom: var(--space-4); color: var(--secondary);">Transmitting Origin...</p>
<p class="lightbox-quote">
"We all start somewhere. The videos I made in high school are thankfully lost to time, but my stumbling and humbling journey of learning the hard lessons of craft were accompanied by a tangentially documented series of either beautiful, or interesting, failures. I have learned much. The me that made these is not the me that I am, but we would recognize each other. Here is my Cringe Pit, for those who might find hope in my obvious humanity."
</p>
<p class="label-sm" style="margin-bottom: var(--space-6); text-align: right; color: var(--tertiary);">— JL</p>
<button class="lightbox-close" onclick="closeGate()">Enter the Pit</button>
</div>
</div>
<main class="container">
<header>
<p class="label-sm" style="color: var(--secondary);">Archive Segment // #CRINGE</p>
<h1>THE CRINGE PIT</h1>
</header>
<div class="video-grid">
<!-- Video 1 -->
<div class="video-card">
<div class="aspect-ratio">
<iframe src="https://www.youtube.com/embed/phI39jYJcQ8" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="video-content">
<p class="label-sm">Data Segment: 2011-2014</p>
<h2 class="video-title">Julian L Kruger - Showreel</h2>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="aspect-ratio">
<iframe src="https://www.youtube.com/embed/nrHaB5SRGec" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="video-content">
<p class="label-sm">Data Segment: REFA 2nd Year</p>
<h2 class="video-title">Dial Direct - LEMON (Test Commercial)</h2>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="aspect-ratio">
<iframe src="https://www.youtube.com/embed/o2xFvSDrSZc" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="video-content">
<p class="label-sm">Data Segment: REFA 2011</p>
<h2 class="video-title">Danger Close</h2>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="aspect-ratio">
<iframe src="https://www.youtube.com/embed/qR6RcrLn5vs" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="video-content">
<p class="label-sm">Data Segment: REFA Archive</p>
<h2 class="video-title">Inner Voice</h2>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="aspect-ratio">
<iframe src="https://www.youtube.com/embed/DI64iXE4yTA" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="video-content">
<p class="label-sm">Data Segment: REFA 2011</p>
<h2 class="video-title">Inkunzi Short Film</h2>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="aspect-ratio">
<iframe src="https://www.youtube.com/embed/impSCU-LL5Q" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="video-content">
<p class="label-sm">Data Segment: REFA 2012</p>
<h2 class="video-title">Searching for Something</h2>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="aspect-ratio">
<iframe src="https://www.youtube.com/embed/P0oHi8_tzRk" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="video-content">
<p class="label-sm">Data Segment: REFA 2012</p>
<h2 class="video-title">Savage Post</h2>
</div>
</div>
</div>
</main>
<script>
function closeGate() {
const gate = document.getElementById('welcome-gate');
gate.classList.remove('active');
localStorage.setItem('cringe_pit_visited', 'true');
}
window.onload = () => {
if (!localStorage.getItem('cringe_pit_visited')) {
document.getElementById('welcome-gate').classList.add('active');
}
};
</script>
</body>
</html>