BiohazardVFX/biohazard-vfx-website
Template
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed mobile scaling

Browse Source
This commit is contained in:
NicholaiVogel 2025-10-12 18:55:09 -06:00
parent f48786b20b
commit 9733cc8ad6
1 changed files with 64 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/Temp-Placeholder.tsx
View File

@ -33,7 +33,20 @@ export function TempPlaceholder() {
element.style.fontSize = previousInlineFontSize; element.style.fontSize = previousInlineFontSize;
if (bioNaturalWidth > 0) { if (bioNaturalWidth > 0) {
const scale = measuredTitleWidth / bioNaturalWidth; // 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); setBioFontSizePx(baseFontSize * scale);
} }
} }
@ -43,9 +56,9 @@ export function TempPlaceholder() {
return () => window.removeEventListener("resize", measure); return () => window.removeEventListener("resize", measure);
}, []); }, []);
return ( return (
<section className="py-16 bg-black text-white min-h-screen"> <section className="py-8 md:py-16 bg-black text-white min-h-screen">
<div className="container mx-auto px-4 max-w-3xl"> <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
<div className="p-8 relative"> <div className="p-4 sm:p-6 md:p-8 relative">
<CursorDotBackground <CursorDotBackground
dotSize={2} dotSize={2}
dotSpacing={20} dotSpacing={20}
@ -56,13 +69,13 @@ export function TempPlaceholder() {
<div className="relative z-10"> <div className="relative z-10">
<p className="text-sm text-gray-500 mb-6">10-12-2025</p> <p className="text-sm text-gray-500 mb-6">10-12-2025</p>
<h1 ref={titleRef} className="text-5xl font-bold mb-4 leading-tight"> <h1 ref={titleRef} className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 leading-tight">
<span ref={titleInnerRef} className="inline-block"> <span ref={titleInnerRef} className="inline-block">
You've gotta be <em className="text-gray-400">fucking</em> me. You've gotta be <em className="text-gray-400">fucking</em> me.
</span> </span>
</h1> </h1>
<p className="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-2 text-gray-300">This is the 20th fucking time this has happened.</p>
<p className="text-lg mb-8 text-gray-400"> <p className="text-base sm:text-lg mb-6 md:mb-8 text-gray-400">
<em>Nicholai broke the website, again.</em> <em>Nicholai broke the website, again.</em>
</p> </p>
@ -96,10 +109,10 @@ export function TempPlaceholder() {
</HorizontalAccordion> </HorizontalAccordion>
</div> </div>
<p className="mb-8 text-gray-400">Anyway, heres all you assholes need for right now:</p> <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 <h1
className="text-5xl font-black mb-6 font-exo-2 text-center mx-auto leading-none" 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={{ style={{
color: '#000000', color: '#000000',
textShadow: '2px 2px 0px #ff4d00, 4px 4px 0px #ff4d00', textShadow: '2px 2px 0px #ff4d00, 4px 4px 0px #ff4d00',
@ -110,16 +123,16 @@ export function TempPlaceholder() {
BIOHAZARD BIOHAZARD
</span> </span>
</h1> </h1>
<p className="mb-8 text-lg text-gray-300"> <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 <strong>Who we are:</strong> artists and technical people, we're
better at VFX than we are at web design, I promise. better at VFX than we are at web design, I promise.
</p> </p>
<p className="mb-4 text-lg"> <p className="mb-4 text-base sm:text-lg">
<strong>Here's our reel:</strong>{" "} <strong>Here's our reel:</strong>{" "}
<a <a
href="https://f.io/Wgx3EAHu" href="https://f.io/Wgx3EAHu"
className="hover:underline transition-all duration-300 hover:brightness-110 hover:scale-105 inline-block" className="hover:underline transition-all duration-300 hover:brightness-110 hover:scale-105 inline-block break-words"
style={{ color: '#ff4d00' }} style={{ color: '#ff4d00' }}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@ -127,92 +140,102 @@ export function TempPlaceholder() {
Biohazard Reel Mar 2025 - Frame.io Biohazard Reel Mar 2025 - Frame.io
</a> </a>
</p> </p>
<p className="mb-8 text-gray-400"> <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 (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 spend our time <em>actually working on our clients projects</em> and
not working on bullshit like editing our reel, marketing, or building not working on bullshit like editing our reel, marketing, or building
websites.) websites.)
</p> </p>
<p className="mb-6 text-lg"> <p className="mb-4 md:mb-6 text-base sm:text-lg">
<strong>Some projects we've worked on:</strong> <strong>Some projects we've worked on:</strong>
</p> </p>
<ul className="list-disc list-inside mb-8 space-y-3 text-gray-300"> <ul className="mb-6 md:mb-8 space-y-3 md:space-y-4 text-sm sm:text-base">
<li> <li className="flex items-start">
<span className="text-gray-400 mr-3 mt-1">•</span>
<a <a
href="https://www.instagram.com/p/DMykfRxssMR/?utm_source=ig_web_copy_link&igsh=Nmg0YXFuOG9yNGE2" 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 inline-block" className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
style={{ color: '#ff4d00' }} style={{ color: '#ff4d00' }}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
Gstar Raw - Pommelhorse Gstar Raw - Pommelhorse
</a> </a>
</li> </li>
<li> <li className="flex items-start">
<span className="text-gray-400 mr-3 mt-1">•</span>
<a <a
href="https://www.youtube.com/watch?v=4QIZE708gJ4" href="https://www.youtube.com/watch?v=4QIZE708gJ4"
className="hover:underline transition-all duration-200 hover:brightness-105 inline-block" className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
style={{ color: '#ff4d00' }} style={{ color: '#ff4d00' }}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
Post Malone - I Had Some Help (feat. Morgan Wallen) 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> </a>
</li> </li>
<li> <li className="flex items-start">
<span className="text-gray-400 mr-3 mt-1">•</span>
<a <a
href="https://www.youtube.com/watch?v=z2tUpLHdd4M" href="https://www.youtube.com/watch?v=z2tUpLHdd4M"
className="hover:underline transition-all duration-200 hover:brightness-105 inline-block" className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
style={{ color: '#ff4d00' }} style={{ color: '#ff4d00' }}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
The Wait Is Over | OFFICIAL TRAILER The Wait Is Over | OFFICIAL TRAILER
</a> </a>
</li> </li>
<li> <li className="flex items-start">
<span className="text-gray-400 mr-3 mt-1">•</span>
<a <a
href="https://www.youtube.com/watch?v=RCZ9wl1Up40" href="https://www.youtube.com/watch?v=RCZ9wl1Up40"
className="hover:underline transition-all duration-200 hover:brightness-105 inline-block" className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
style={{ color: '#ff4d00' }} style={{ color: '#ff4d00' }}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
2hollis Star Album Trailer 2hollis Star Album Trailer
</a> </a>
</li> </li>
<li> <li className="flex items-start">
<span className="text-gray-400 mr-3 mt-1">•</span>
<a <a
href="https://www.youtube.com/watch?v=yLxoVrFpLmQ" href="https://www.youtube.com/watch?v=yLxoVrFpLmQ"
className="hover:underline transition-all duration-200 hover:brightness-105 inline-block" className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
style={{ color: '#ff4d00' }} style={{ color: '#ff4d00' }}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
Thanksgiving With Kai, Kevin &amp; Druski Thanksgiving With Kai, Kevin &amp; Druski
</a> </a>
</li> </li>
<li> <li className="flex items-start">
<span className="text-gray-400 mr-3 mt-1">•</span>
<a <a
href="https://www.youtube.com/watch?v=a2Zqdo9RbNs" href="https://www.youtube.com/watch?v=a2Zqdo9RbNs"
className="hover:underline transition-all duration-200 hover:brightness-105 inline-block" className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
style={{ color: '#ff4d00' }} style={{ color: '#ff4d00' }}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
ENHYPEN (엔하이픈) Bad Desire (With or Without You) Official MV 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> </a>
</li> </li>
</ul> </ul>
<p className="mb-6 text-lg"> <p className="mb-4 md:mb-6 text-base sm:text-lg">
<strong> <strong>
Here's our{" "} Here's our{" "}
<a <a
href="https://www.instagram.com/biohazardvfx/" href="https://www.instagram.com/biohazardvfx/"
className="hover:underline transition-all duration-200 hover:brightness-105 inline-block" className="hover:underline transition-all duration-200 hover:brightness-105 inline-block break-words"
style={{ color: '#ff4d00' }} style={{ color: '#ff4d00' }}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@ -222,15 +245,15 @@ export function TempPlaceholder() {
</strong> </strong>
</p> </p>
<p className="mb-2 text-gray-300"> <p className="mb-2 text-sm sm:text-base text-gray-300">
<strong>Questions, comments, concerns and inquiries:</strong>{" "} <strong>Questions, comments, concerns and inquiries:</strong>{" "}
contact@biohazardvfx.com <span className="break-all">contact@biohazardvfx.com</span>
</p> </p>
<p className="text-gray-300"> <p className="text-sm sm:text-base text-gray-300">
File a complaint:{" "} File a complaint:{" "}
<a <a
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
className="hover:underline" className="hover:underline break-words inline-block"
style={{ color: '#ff4d00' }} style={{ color: '#ff4d00' }}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"