From bedd355b78c5e34e1e0b3e444baa1981aeea484b Mon Sep 17 00:00:00 2001
From: Nicholai <nicholaivogelfilms@gmail.com>
Date: Thu, 23 Oct 2025 02:09:48 -0600
Subject: [PATCH] refactor(ui): transform temp-placeholder into minimal card
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/app/globals.css                 |   1 +
 src/components/Temp-Placeholder.tsx | 177 +++++++++++++++-------------
 2 files changed, 93 insertions(+), 85 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 43d3bd0..3401477 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -180,6 +180,7 @@ body {
 html {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE and Edge */
+  scroll-behavior: smooth;
 }
 
 html::-webkit-scrollbar {
diff --git a/src/components/Temp-Placeholder.tsx b/src/components/Temp-Placeholder.tsx
index e79603a..59fc3ff 100644
--- a/src/components/Temp-Placeholder.tsx
+++ b/src/components/Temp-Placeholder.tsx
@@ -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>&gt; 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>&gt; 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>&gt; 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>&gt; 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>