269 lines
11 KiB
TypeScript
269 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { CursorDotBackground } from "./CursorDotBackground";
|
|
import { HorizontalAccordion } from "./HorizontalAccordion";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
export function TempPlaceholder() {
|
|
const titleRef = useRef<HTMLHeadingElement | null>(null);
|
|
const titleInnerRef = useRef<HTMLSpanElement | null>(null);
|
|
const bioTextRef = useRef<HTMLSpanElement | null>(null);
|
|
const [titleWidth, setTitleWidth] = useState<number | null>(null);
|
|
const [bioFontSizePx, setBioFontSizePx] = useState<number | null>(null);
|
|
const baseBioFontSizeRef = useRef<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
const measure = () => {
|
|
const measuredTitleWidth = titleInnerRef.current?.offsetWidth ?? null;
|
|
setTitleWidth(measuredTitleWidth);
|
|
|
|
if (measuredTitleWidth && bioTextRef.current) {
|
|
const element = bioTextRef.current;
|
|
if (baseBioFontSizeRef.current === null) {
|
|
const initialFontSize = parseFloat(getComputedStyle(element).fontSize);
|
|
baseBioFontSizeRef.current = isNaN(initialFontSize) ? 16 : initialFontSize;
|
|
}
|
|
|
|
// Temporarily ensure we measure at base font size
|
|
const baseFontSize = baseBioFontSizeRef.current ?? 16;
|
|
const previousInlineFontSize = element.style.fontSize;
|
|
element.style.fontSize = `${baseFontSize}px`;
|
|
const bioNaturalWidth = element.offsetWidth;
|
|
// Restore previous inline style before we set state (will update after render)
|
|
element.style.fontSize = previousInlineFontSize;
|
|
|
|
if (bioNaturalWidth > 0) {
|
|
// On mobile, use a more conservative scaling to prevent cramped text
|
|
const isMobile = window.innerWidth < 640; // sm breakpoint
|
|
const isTablet = window.innerWidth < 1024; // lg breakpoint
|
|
|
|
let maxScale;
|
|
if (isMobile) {
|
|
maxScale = 0.8; // Limit scaling on mobile
|
|
} else if (isTablet) {
|
|
maxScale = 1.2; // Allow more scaling on tablet
|
|
} else {
|
|
maxScale = 1.8; // Allow much more scaling on desktop
|
|
}
|
|
|
|
const scale = Math.min(measuredTitleWidth / bioNaturalWidth, maxScale);
|
|
setBioFontSizePx(baseFontSize * scale);
|
|
}
|
|
}
|
|
};
|
|
measure();
|
|
window.addEventListener("resize", measure);
|
|
return () => window.removeEventListener("resize", measure);
|
|
}, []);
|
|
return (
|
|
<section className="py-8 md:py-16 bg-black text-white min-h-screen">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
|
|
<div className="p-4 sm:p-6 md:p-8 relative">
|
|
<CursorDotBackground
|
|
dotSize={2}
|
|
dotSpacing={20}
|
|
fadeDistance={80}
|
|
opacity={0.5}
|
|
className="rounded"
|
|
/>
|
|
<div className="relative z-10">
|
|
<p className="text-sm text-gray-500 mb-6">10-12-2025</p>
|
|
|
|
<h1 ref={titleRef} className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 leading-tight">
|
|
<span ref={titleInnerRef} className="inline-block">
|
|
You've gotta be <em className="text-gray-400">fucking</em> me.
|
|
</span>
|
|
</h1>
|
|
<p className="text-base sm:text-lg mb-2 text-gray-300">This is the 20th fucking time this has happened.</p>
|
|
<p className="text-base sm:text-lg mb-6 md:mb-8 text-gray-400">
|
|
<em>Nicholai broke the website, again.</em>
|
|
</p>
|
|
|
|
<div className="mb-8">
|
|
<HorizontalAccordion trigger="How did we get here?">
|
|
<div className="w-full">
|
|
<p className="mb-4 text-gray-400 text-sm">
|
|
<em>(TLDR: perfectionism is the mind killer)</em>
|
|
</p>
|
|
<ol className="list-decimal list-inside space-y-3 text-gray-300 leading-relaxed break-words">
|
|
<li>We needed a website (circa January 2023)</li>
|
|
<li>We tried to build one on squarespace (that shit sucks)</li>
|
|
<li>
|
|
Nicholai figured "I know some html and javascript, why not just{" "}
|
|
<em>make</em> one."
|
|
</li>
|
|
<li>
|
|
But of course, <strong>the html site sucked</strong> and was
|
|
difficult to host.
|
|
</li>
|
|
<li>
|
|
And naturally, the website for some reason <em>needed</em> to look
|
|
good.
|
|
</li>
|
|
<li>
|
|
So then began a longwinded journey of Nicholai learning <em>react</em>
|
|
</li>
|
|
<li>Nicholai should've stuck to python.</li>
|
|
</ol>
|
|
</div>
|
|
</HorizontalAccordion>
|
|
</div>
|
|
|
|
<p className="mb-6 md:mb-8 text-gray-400 text-sm sm:text-base">Anyway, heres all you assholes need for right now:</p>
|
|
|
|
<h1
|
|
className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl xl:text-9xl font-black mb-4 md:mb-6 font-exo-2 text-center mx-auto leading-none"
|
|
style={{
|
|
color: '#000000',
|
|
textShadow: '2px 2px 0px #ff4d00, 4px 4px 0px #ff4d00',
|
|
width: titleWidth ? `${titleWidth}px` : undefined
|
|
}}
|
|
>
|
|
<span ref={bioTextRef} className="inline-block" style={{ fontSize: bioFontSizePx ? `${bioFontSizePx}px` : undefined }}>
|
|
BIOHAZARD
|
|
</span>
|
|
</h1>
|
|
<p className="mb-6 md:mb-8 text-base sm:text-lg text-gray-300">
|
|
<strong>Who we are:</strong> artists and technical people, we're
|
|
better at VFX than we are at web design, I promise.
|
|
</p>
|
|
|
|
<p className="mb-4 text-base sm:text-lg">
|
|
<strong>Here's our reel:</strong>{" "}
|
|
<a
|
|
href="https://f.io/Wgx3EAHu"
|
|
className="hover:underline transition-all duration-300 hover:brightness-110 hover:scale-105 inline-block break-words"
|
|
style={{ color: '#ff4d00' }}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Biohazard Reel Mar 2025 - Frame.io
|
|
</a>
|
|
</p>
|
|
<p className="mb-6 md:mb-8 text-sm sm:text-base text-gray-400">
|
|
(it's lightly outdated because we're a small studio that prefers to
|
|
spend our time <em>actually working on our clients projects</em> and
|
|
not working on bullshit like editing our reel, marketing, or building
|
|
websites.)
|
|
</p>
|
|
|
|
<p className="mb-4 md:mb-6 text-base sm:text-lg">
|
|
<strong>Some projects we've worked on:</strong>
|
|
</p>
|
|
|
|
<ul className="mb-6 md:mb-8 space-y-3 md:space-y-4 text-sm sm:text-base">
|
|
<li className="flex items-start">
|
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
|
<a
|
|
href="https://www.instagram.com/p/DMykfRxssMR/?utm_source=ig_web_copy_link&igsh=Nmg0YXFuOG9yNGE2"
|
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
|
style={{ color: '#ff4d00' }}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Gstar Raw - Pommelhorse
|
|
</a>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
|
<a
|
|
href="https://www.youtube.com/watch?v=4QIZE708gJ4"
|
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
|
style={{ color: '#ff4d00' }}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Post Malone - I Had Some Help<br className="sm:hidden" />
|
|
<span className="sm:hidden">(feat. Morgan Wallen)</span>
|
|
<span className="hidden sm:inline"> (feat. Morgan Wallen)</span>
|
|
</a>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
|
<a
|
|
href="https://www.youtube.com/watch?v=z2tUpLHdd4M"
|
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
|
style={{ color: '#ff4d00' }}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
The Wait Is Over | OFFICIAL TRAILER
|
|
</a>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
|
<a
|
|
href="https://www.youtube.com/watch?v=RCZ9wl1Up40"
|
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
|
style={{ color: '#ff4d00' }}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
2hollis Star Album Trailer
|
|
</a>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
|
<a
|
|
href="https://www.youtube.com/watch?v=yLxoVrFpLmQ"
|
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
|
style={{ color: '#ff4d00' }}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Thanksgiving With Kai, Kevin & Druski
|
|
</a>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-gray-400 mr-3 mt-1">•</span>
|
|
<a
|
|
href="https://www.youtube.com/watch?v=a2Zqdo9RbNs"
|
|
className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
|
|
style={{ color: '#ff4d00' }}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
ENHYPEN (엔하이픈) Bad Desire<br className="sm:hidden" />
|
|
<span className="sm:hidden">(With or Without You) Official MV</span>
|
|
<span className="hidden sm:inline"> (With or Without You) Official MV</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<p className="mb-4 md:mb-6 text-base sm:text-lg">
|
|
<strong>
|
|
Here's our{" "}
|
|
<a
|
|
href="https://www.instagram.com/biohazardvfx/"
|
|
className="hover:underline transition-all duration-200 hover:brightness-105 inline-block break-words"
|
|
style={{ color: '#ff4d00' }}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Instagram
|
|
</a>
|
|
</strong>
|
|
</p>
|
|
|
|
<p className="mb-2 text-sm sm:text-base text-gray-300">
|
|
<strong>Questions, comments, concerns and inquiries:</strong>{" "}
|
|
<span className="break-all">contact@biohazardvfx.com</span>
|
|
</p>
|
|
<p className="text-sm sm:text-base text-gray-300">
|
|
File a complaint:{" "}
|
|
<a
|
|
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
|
className="hover:underline break-words inline-block"
|
|
style={{ color: '#ff4d00' }}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
help@biohazardvfx.com
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |