JL Kruger
2f5c06fee8
Fonts (display/heading only — body untouched): - Cringe Pit: Bebas Neue → Protest Revolution - Renegade: Bebas Neue → Ribeye Marrow, Barlow Condensed → Faculty Glyphic (headings), Rambla (body) - Nomad Soul: Bebas Neue → Trade Winds, Rye → Babylonica - Hub: Bebas Neue → Workbench Lightbox fixes (3 collection pages): - window.onload → DOMContentLoaded (fires before iframes load, fixes slow mobile) - lightbox-content: max-height 90vh + overflow-y auto (fixes off-screen on small viewports) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
356 lines
12 KiB
HTML
356 lines
12 KiB
HTML
<!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=Protest+Revolution&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: 'Protest Revolution', 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: 'Protest Revolution', 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);
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
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: 'Protest Revolution', 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');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if (!localStorage.getItem('cringe_pit_visited')) {
|
|
document.getElementById('welcome-gate').classList.add('active');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|