refactor(ui): transform temp-placeholder into minimal card layout
- Removed gradient border wrapper and CursorDotBackground - Created centered dark card (#0a0a0a) on black background with subtle border - Added minimal navigation with smooth scroll to sections - Organized content into sections (about, work, studio, contact) - Added > prefixes to section headers for terminal aesthetic - Removed all glow effects and rounded corners - Kept only orange (#ff4d00), white, and black color palette - Preserved all Easter eggs (depth map, pigeon zone, video previews) - Added smooth scroll behavior to globals.css Inspired by minimal editorial layouts while maintaining the site's humor and personality. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
7b1acf5588
commit
bedd355b78
@ -180,6 +180,7 @@ body {
|
||||
html {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { CursorDotBackground } from "./CursorDotBackground";
|
||||
import { HorizontalAccordion } from "./HorizontalAccordion";
|
||||
import { InstagramFeed } from "./InstagramFeed";
|
||||
import { ScrollProgressBar } from "./ScrollProgressBar";
|
||||
@ -95,67 +94,73 @@ export function TempPlaceholder() {
|
||||
<>
|
||||
<ScrollProgressBar />
|
||||
<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="relative">
|
||||
<div className="relative rounded-[4px] bg-gradient-to-br from-[#1a0f24]/35 via-[#ff4d00]/30 to-[#1a0f24]/35 p-[1px]">
|
||||
<div className="relative rounded-[3px] bg-black/92">
|
||||
<div className="relative p-4 sm:p-6 md:p-8">
|
||||
<CursorDotBackground
|
||||
dotSize={2}
|
||||
dotSpacing={20}
|
||||
fadeDistance={80}
|
||||
opacity={0.25}
|
||||
className="rounded"
|
||||
/>
|
||||
<motion.div
|
||||
className="relative z-10"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{
|
||||
staggerChildren: 0.1,
|
||||
delayChildren: 0.1,
|
||||
}}
|
||||
>
|
||||
<motion.p
|
||||
className="text-sm text-gray-500 mb-6"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
Last updated: 10-12-2025
|
||||
</motion.p>
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[900px]">
|
||||
{/* Navigation */}
|
||||
<nav className="mb-12 md:mb-16">
|
||||
<div className="flex justify-between items-center py-6 border-b border-white/10">
|
||||
<div className="text-lg font-mono tracking-tight">BIOHAZARD</div>
|
||||
<div className="flex gap-6 text-sm">
|
||||
<a href="#about" className="hover:text-[#ff4d00] transition-colors">About</a>
|
||||
<a href="#work" className="hover:text-[#ff4d00] transition-colors">Work</a>
|
||||
<a href="#studio" className="hover:text-[#ff4d00] transition-colors">Studio</a>
|
||||
<a href="#contact" className="hover:text-[#ff4d00] transition-colors">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<motion.h1
|
||||
ref={titleRef}
|
||||
className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 leading-tight"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<span ref={titleInnerRef} className="inline-block">
|
||||
You've gotta be <em className="text-gray-400">shittin'</em> me.
|
||||
</span>
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
className="text-base sm:text-lg mb-2 text-gray-300"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
This is the 20th time this has happened.
|
||||
</motion.p>
|
||||
<motion.p
|
||||
className="text-base sm:text-lg mb-6 md:mb-8 text-gray-400"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<em>Nicholai broke the website, again.</em>
|
||||
</motion.p>
|
||||
{/* Main Card Container */}
|
||||
<div className="relative bg-[#0a0a0a] border border-white/5 p-6 sm:p-8 md:p-12">
|
||||
<motion.div
|
||||
className="relative"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{
|
||||
staggerChildren: 0.1,
|
||||
delayChildren: 0.1,
|
||||
}}
|
||||
>
|
||||
{/* About Section */}
|
||||
<section id="about" className="mb-16 md:mb-20">
|
||||
<motion.p
|
||||
className="text-sm text-gray-500 mb-6"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
Last updated: 10-12-2025
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="mb-8"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<HorizontalAccordion trigger="How did we get here?">
|
||||
<motion.h1
|
||||
ref={titleRef}
|
||||
className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 leading-tight"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<span ref={titleInnerRef} className="inline-block">
|
||||
You've gotta be <em className="text-gray-400">shittin'</em> me.
|
||||
</span>
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
className="text-base sm:text-lg mb-2 text-gray-300"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
This is the 20th time this has happened.
|
||||
</motion.p>
|
||||
<motion.p
|
||||
className="text-base sm:text-lg mb-6 md:mb-8 text-gray-400"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<em>Nicholai broke the website, again.</em>
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="mb-8"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<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>
|
||||
@ -236,7 +241,7 @@ export function TempPlaceholder() {
|
||||
className="z-50 w-[90vw] max-w-[350px]"
|
||||
onMouseLeave={() => setIsEasterEggOpen(false)}
|
||||
>
|
||||
<div className="relative bg-black rounded-lg overflow-hidden shadow-2xl">
|
||||
<div className="relative bg-black overflow-hidden shadow-2xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
@ -287,7 +292,7 @@ export function TempPlaceholder() {
|
||||
className="z-50 w-[90vw] max-w-[400px]"
|
||||
onMouseLeave={() => setIsPigeonEggOpen(false)}
|
||||
>
|
||||
<div className="relative bg-black rounded-lg overflow-hidden shadow-2xl">
|
||||
<div className="relative bg-black overflow-hidden shadow-2xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
@ -312,7 +317,7 @@ export function TempPlaceholder() {
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<motion.p
|
||||
<motion.p
|
||||
className="mb-6 md:mb-8 text-base sm:text-lg text-gray-300"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
@ -320,24 +325,24 @@ export function TempPlaceholder() {
|
||||
<strong>Who we are:</strong> artists and technical people, we're
|
||||
better at VFX than we are at web design, I promise.
|
||||
</motion.p>
|
||||
</section>
|
||||
|
||||
<SectionDivider />
|
||||
|
||||
<motion.p
|
||||
{/* Work Section */}
|
||||
<section id="work" className="mb-16 md:mb-20">
|
||||
<motion.p
|
||||
className="mb-4 text-base sm:text-lg"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<strong>Here's our reel:</strong>{" "}
|
||||
<strong>> Here's our reel:</strong>{" "}
|
||||
<motion.a
|
||||
href="https://f.io/Wgx3EAHu"
|
||||
className="inline-block break-words relative"
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{
|
||||
textShadow: '0 0 8px rgba(255, 77, 0, 0.6)',
|
||||
}}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
@ -356,12 +361,12 @@ export function TempPlaceholder() {
|
||||
|
||||
<SectionDivider />
|
||||
|
||||
<motion.p
|
||||
<motion.p
|
||||
className="mb-4 md:mb-6 text-base sm:text-lg"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<strong>Some projects we've worked on:</strong>
|
||||
<strong>> Some projects we've worked on:</strong>
|
||||
</motion.p>
|
||||
|
||||
<motion.ul
|
||||
@ -381,9 +386,7 @@ export function TempPlaceholder() {
|
||||
style={{ color: '#ff4d00' }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{
|
||||
textShadow: '0 0 8px rgba(255, 77, 0, 0.6)',
|
||||
}}
|
||||
whileHover={{ opacity: 0.8 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
@ -604,28 +607,34 @@ export function TempPlaceholder() {
|
||||
</HoverCard>
|
||||
</motion.li>
|
||||
</motion.ul>
|
||||
</section>
|
||||
|
||||
<SectionDivider />
|
||||
|
||||
<motion.div
|
||||
{/* Studio Section */}
|
||||
<section id="studio" className="mb-16 md:mb-20">
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<InstagramFeed />
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<SectionDivider />
|
||||
|
||||
<motion.div
|
||||
{/* Contact Section */}
|
||||
<section id="contact">
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
<motion.p
|
||||
<motion.p
|
||||
className="mb-4 text-sm sm:text-base text-gray-300"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
Contact us:{" "}
|
||||
<strong>> Contact us:</strong>{" "}
|
||||
<motion.a
|
||||
href="mailto:contact@biohazardvfx.com"
|
||||
className="break-words inline-block relative"
|
||||
@ -650,12 +659,12 @@ export function TempPlaceholder() {
|
||||
</span>
|
||||
</motion.a>
|
||||
</motion.p>
|
||||
<motion.p
|
||||
className="text-sm sm:text-base text-gray-300 pb-6 border-b border-gray-800"
|
||||
<motion.p
|
||||
className="text-sm sm:text-base text-gray-300 pb-6 border-b border-white/10"
|
||||
variants={itemVariants}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
File a complaint:{" "}
|
||||
<strong>> File a complaint:</strong>{" "}
|
||||
<motion.a
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
className="break-words inline-block relative"
|
||||
@ -692,13 +701,11 @@ export function TempPlaceholder() {
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
|
||||
>
|
||||
No pigeons allowed in this zone
|
||||
No pigeons allowed in this zone
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user