Spaces:

pedrod8
/

full-stack-strategy-wizard

Running

App Files Files Community

pedrod8 commited on Nov 5, 2025

Commit

3398d18

verified ·

1 Parent(s): 5f296b4

make this 1000% better

Browse files

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Nathan Stower | Full-Stack Business Strategist & Fixer</title>
<meta name="description" content="Full-Stack Business Strategist & Fixer. CX • Product • Dev • Media • Engineering. One partner, from insight to implementation.">
<meta property="og:title" content="Nathan Stower | Full-Stack Business Strategist & Fixer">
<meta property="og:description" content="One partner, from insight to implementation. CX • Product • Dev • Media • Engineering">
<meta property="og:type" content="website">
<meta property="og:image" content="img/og-card.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="img/favicon.svg" type="image/svg+xml">


<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="//cdn.tailwindcss.com">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">


<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">


<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script>

<style>
:root {
--black: #000000;
--white: #ffffff;
--yellow: #FFFF00;
--yellow-bright: #FFD700;
--gray-light: #e5e5e5;
--gray-dark: #333333;
--gray-ultra-light: #f8f8f8;
--green: #00ff00;
--blue: #0066ff;

/* 3D Card Variables */
--card-width: 700px;
--card-height: 500px;
--card-radius: 28px;
--card-pad: 35px;
--curve: cubic-bezier(.68,-.55,.265,1.55);

/* Process Stage Gradients */
--stage-1-gradient: linear-gradient(135deg, #6366F1, #4839c5);
--stage-2-gradient: linear-gradient(135deg, #8B5CF6, #6d38d8);
--stage-3-gradient: linear-gradient(135deg, #EC4899, #c22267);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Inter', sans-serif;
background-color: var(--white);
color: var(--black);
overflow-x: hidden;
cursor: none;
}

/* ========== ACCESSIBILITY ========== */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 10000;
}

.skip-link:focus {
left: 1rem;
top: 1rem;
width: auto;
height: auto;
padding: 1rem 1.5rem;
background: var(--yellow);
color: var(--black);
border: 2px solid var(--black);
box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 1);
font-weight: 700;
font-family: 'JetBrains Mono', monospace;
}

/* ========== ANIMATIONS ========== */

@keyframes
glow {
0%, 100% { text-shadow: 0 0 5px var(--yellow); }
50% { text-shadow: 0 0 20px var(--yellow); }
}

@keyframes
float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

@keyframes
pulse-ring {
0% { transform: scale(0.95); opacity: 1; }
100% { transform: scale(1.3); opacity: 0; }
}

@keyframes
blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}

@keyframes
gridPulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.03); opacity: 1; }
}

/* ========== CUSTOM CURSOR ========== */
.cursor {
width: 20px;
height: 20px;
background: var(--yellow);
border-radius: 50%;
position: fixed;
pointer-events: none;
mix-blend-mode: difference;
z-index: 9999;
transition: transform 0.2s ease;
transform: translate(-50%, -50%);
}

.cursor-hover {
transform: translate(-50%, -50%) scale(2);
background: transparent;
border: 2px solid var(--yellow);
}

.cursor-trail {
width: 8px;
height: 8px;
background: var(--yellow-bright);
border-radius: 50%;
position: fixed;
pointer-events: none;
mix-blend-mode: difference;
z-index: 9998;
opacity: 0.7;
transition: all 0.15s ease;
transform: translate(-50%, -50%);
}

/* ========== 3D CUBE BACKGROUND ========== */
#cube-bg {
position: fixed;
inset: 0;
z-index: 0;
opacity: 0.85;
pointer-events: none;
width: 100vw;
height: 100vh;
}

#cube-bg canvas {
display: block;
width: 100% !important;
height: 100% !important;
}

/* ========== HERO BACKGROUND IMAGE ========== */
.hero-background {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}

.hero-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://cdn.midjourney.com/u/3c4e05aa-860d-483f-8ba3-70ab96882a5f/f7b58489d5ed82eba62a1ce4f19f7680a3491be7628ffed85eea683db1d0f195.png');
background-size: cover;
background-position: 65% top;
background-repeat: no-repeat;
opacity: 0.6;
filter: brightness(1.1) contrast(0.95);
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: var(--gray-ultra-light);
}

::-webkit-scrollbar-thumb {
background: var(--yellow);
border-radius: 10px;
}

/* ========== HORIZONTAL SCROLL SECTION ========== */
.horizontal-wrapper {
position: relative;
overflow: hidden;
}

.horizontal-sections {
display: flex;
width: fit-content;
height: 100vh;
will-change: transform;
}

.horizontal-section {
width: 100vw;
height: 100vh;
flex-shrink: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}

.h-content {
max-width: 1400px;
width: 100%;
padding: 0 3rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}

.h-text {
z-index: 10;
position: relative;
}

.h-text h1,
.h-text p {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.h-visual {
position: relative;
width: 100%;
height: 70vh;
border-radius: 1rem;
overflow: hidden;
border: 2px solid var(--yellow);
box-shadow: 0 0 30px rgba(255, 255, 0, 0.3);
z-index: 20;
background: rgba(0, 0, 0, 0.1);
}

.h-visual video {
width: 100%;
height: 100%;
object-fit: cover;
}

/* ========== NAVIGATION DOTS ========== */
.nav-dots {
position: fixed;
right: 2rem;
top: 50%;
transform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
gap: 1rem;
transition: opacity 0.3s ease;
}

.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: transparent;
border: 2px solid var(--black);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}

.nav-dot::after {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: var(--yellow);
border-radius: 50%;
transform: scale(0);
transition: transform 0.25s var(--curve);
}

.nav-dot.active {
background: var(--yellow);
border-color: var(--yellow);
transform: scale(1.5);
}

.nav-dot.active::after {
transform: scale

Files changed (2) hide show

README.md +7 -4
index.html +202 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Full Stack Strategy Wizard
-emoji: 🚀
-colorFrom: green
 colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Full-Stack Strategy Wizard ‍♂️
+colorFrom: pink
 colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,203 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wireframe Wormhole</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js" defer></script>
+    <script src="https://unpkg.com/feather-icons" defer></script>
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link rel="preconnect" href="https://unpkg.com">
+<style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            height: 100%;
+            will-change: transform, opacity;
+            contain: strict;
+        }
+        #vanta-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            contain: strict;
+            transform: translateZ(0);
+            backface-visibility: hidden;
+            image-rendering: -webkit-optimize-contrast;
+        }
+.content {
+            position: relative;
+            z-index: 1;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Better contrast */
+        }
+        @keyframes zoomInOut {
+            0% { transform: scale(1); }
+            100% { transform: scale(1.1); }
+        }
+        .content > * {
+            will-change: transform, opacity;
+            backface-visibility: hidden;
+        }
+</style>
+</head>
+<body class="bg-black text-white">
+    <div id="vanta-canvas">
+        </div>
+        <div id="followup" class="hidden w-full min-h-screen bg-black text-white pt-20 pb-32 px-8">
+            <div class="max-w-4xl mx-auto">
+                <h2 class="text-4xl font-bold mb-12 text-center">Journey Through the Wormhole</h2>
+                <div class="grid md:grid-cols-2 gap-12">
+                    <div class="space-y-6">
+                        <h3 class="text-2xl font-semibold">Depth Perception</h3>
+                        <p class="text-gray-300">Experience true three-dimensional depth with our layered wireframe technology.</p>
+                        <div class="h-64 bg-gradient-to-b from-gray-900 to-black border border-gray-800 rounded-lg"></div>
+                    </div>
+                    <div class="space-y-6">
+                        <h3 class="text-2xl font-semibold">Monochrome Space</h3>
+                        <p class="text-gray-300">Navigate through a stark black and white universe of pure geometry.</p>
+                        <div class="h-64 bg-gradient-to-b from-white to-gray-300 border border-gray-400 rounded-lg"></div>
+                    </div>
+                </div>
+                <div class="mt-20 text-center">
+                    <button id="returnBtn" class="px-8 py-4 bg-white text-black rounded-full text-xl font-semibold hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-white/30">
+                        Return to Entrance
+                    </button>
+                </div>
+            </div>
+        </div>
+<div class="content text-center px-4">
+        <h1 class="text-5xl md:text-7xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-pink-500">
+            Wireframe Wormhole
+        </h1>
+        <p class="text-xl md:text-2xl max-w-2xl mb-10 opacity-95">
+Dive into an infinite 3D wireframe universe that zooms endlessly into another dimension
+        </p>
+        <button id="enterBtn" class="px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full text-xl font-semibold hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-purple-500/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
+Enter the Wormhole
+        </button>
+    </div>
+    <div class="absolute bottom-6 left-0 right-0 text-center opacity-70 text-sm">
+        <p>Scroll or use arrow keys to navigate</p>
+        <i data-feather="arrow-down" class="animate-bounce mt-2 mx-auto"></i>
+    </div>
+    <script>
+        // Initialize Vanta.js after DOM is loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            initVanta();
+        });
+function initVanta() {
+            VANTA.NET({
+el: "#vanta-canvas",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x8a2be2,
+                backgroundColor: 0x000000,
+points: 18.00,
+            maxDistance: 30.00,
+            spacing: 22.00,
+            showDots: false,
+            lineWidth: 0.8,
+            color: 0xffffff,
+            backgroundColor: 0x000000,
+            pointSize: 1.5,
+            pointLight: true,
+            pointLightIntensity: 0.5,
+            pointLightColor: 0xffffff,
+            lineColor: 0xaaaaaa
+});
+        // Optimized click handler with passive listener
+        document.getElementById('enterBtn').addEventListener('click', function() {
+            const netEffect = VANTA.NET({
+el: "#vanta-canvas",
+                mouseControls: true,
+                touchControls: true,
+                gyroControls: false,
+                minHeight: 200.00,
+                minWidth: 200.00,
+                scale: 1.00,
+                scaleMobile: 1.00,
+                color: 0x7e3ff2,
+                backgroundColor: 0x000000,
+points: 18.00,
+                maxDistance: 30.00,
+                spacing: 22.00,
+                showDots: false,
+                lineWidth: 0.8,
+                color: 0xffffff,
+                backgroundColor: 0x000000,
+                pointSize: 1.5,
+                pointLight: true,
+                pointLightIntensity: 0.5,
+                pointLightColor: 0xffffff,
+                lineColor: 0xaaaaaa
+});
+            // Start zoom animation
+            let scale = 1;
+            const zoomStep = () => {
+                scale *= 1.02;
+                requestAnimationFrame(() => {
+                    netEffect.setOptions({
+spacing: 18.00 * scale,
+                    maxDistance: 25.00 * scale,
+                    points: 12.00 * scale
+                    });
+                });
+);
+                if (scale < 100) {
+                    requestAnimationFrame(zoomStep);
+                } else {
+// Here you would typically transition to another scene or page
+                    requestAnimationFrame(() => {
+                        document.querySelector('.content').classList.add('hidden');
+                        document.getElementById('followup').classList.remove('hidden');
+                    });
+                    // Optimized return button handler
+                    document.getElementById('returnBtn').addEventListener('click', function() {
+                        requestAnimationFrame(() => {
+document.querySelector('.content').classList.remove('hidden');
+                        document.getElementById('followup').classList.add('hidden');
+                        if (netEffect) {
+                            netEffect.setOptions({
+                                points: 18.00,
+                                maxDistance: 30.00,
+                                spacing: 22.00,
+                                lineWidth: 0.8,
+                                pointSize: 1.5
+                            });
+                        }
+});
+            });
+            zoomStep();
+        }
+        // Initialize feather icons
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+        });
+</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
 </html>