Spaces:

tls124
/

aurora-dimension-forge

Running

App Files Files Community

tls124 commited on Oct 16, 2025

Commit

56972dd

verified ·

1 Parent(s): 1d9ded4

Of course. Here is a comprehensive prompt curated to generate the entire frontend of your website as a single HTML file, using only HTML, CSS, and JavaScript, just as you asked. This prompt includes the detailed "Aurora Beam Navbar" and placeholder sections for the rest of your homepage.

Browse files

The Prompt
You are an expert frontend developer. Your task is to generate a complete, single-page HTML file for a portfolio website. The file must be self-contained, using only plain HTML, CSS, and JavaScript.

Technical Requirements:

Structure: A single index.html file.

Styling: Use the Tailwind CSS CDN for utility classes. All custom CSS must be embedded within a <style> tag in the <head>.

JavaScript: All JavaScript must be embedded within a <script> tag at the end of the <body>. Use the GSAP CDN for all animations to ensure they are smooth and high-performance.

Part 1: Overall Design & Global Elements
Theme: The overall theme is "Aurora Beam." The aesthetic should be dark, futuristic, and professional.

Background: The body should have a deep navy to midnight gradient (#0b0e18 to #101828).

Particle Effect: Implement a full-screen, subtle particle animation using an HTML <canvas> element and JavaScript. These particles should drift slowly in the background to create a sense of depth.

Part 2: The "Aurora Beam" Navigation Bar
This is the main feature. It must be created with the following specifications:

Layout:

Logo: The logo image (path: images/logo.png) is on the left. It should have a subtle glowing effect.

Center Links: The navigation links ("Home", "Projects", "Blog", "Store", "About") must be arranged along a gentle arc in the center, as if on a digital horizon.

Contact Button: A "Contact" button on the right with a neon, glowing, and gently pulsing effect.

Visual Style:

"Beam" Effect: A translucent, glass-like horizontal beam must run behind the navigation links.

Hover Effects: When a navigation link is hovered, it should emit a small, circular ripple effect (like a sonar wave). The contact button should expand slightly and glow brighter on hover.

Interaction:

The entire navbar must fade in smoothly on page load using GSAP.

It should have a subtle parallax effect on scroll, moving at a slightly different speed than the page content.

Responsiveness: On mobile, the center links and contact button must be hidden. A hamburger menu icon should appear on the right to toggle a full-screen, animated mobile navigation menu.

Part 3: Homepage Content Sections
Below the navbar, include these static placeholder sections:

Hero Section: A full-screen section with the main headline "Transcending Digital. Crafting Dimensions." and a sub-headline. Include placeholder buttons for "View Projects" and "Get in Touch." All text elements should animate into view on page load.

Featured Projects Section: A grid layout with at least three placeholder project cards. Each card should have an image container, a title, and a short description.

Footer: A simple footer at the bottom of the page with placeholder text for copyright and social media links.

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Aurora Dimension Forge
-emoji: 👀
 colorFrom: green
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Aurora Dimension Forge ✨
 colorFrom: green
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,435 @@
-<!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>Aurora Dimension Forge</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Exo 2', sans-serif;
+            background: linear-gradient(135deg, #0b0e18 0%, #101828 100%);
+            color: #e2e8f0;
+            overflow-x: hidden;
+            min-height: 100vh;
+        }
+        .orbitron {
+            font-family: 'Orbitron', sans-serif;
+        }
+        #particles-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .aurora-beam {
+            background: rgba(16, 24, 40, 0.7);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(56, 189, 248, 0.2);
+            box-shadow: 0 0 60px rgba(56, 189, 248, 0.1);
+        }
+        .nav-link {
+            position: relative;
+            transition: all 0.3s ease;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 50%;
+            width: 0;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #38bdf8, transparent);
+            transition: all 0.3s ease;
+            transform: translateX(-50%);
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .ripple {
+            position: absolute;
+            border-radius: 50%;
+            background: rgba(56, 189, 248, 0.3);
+            transform: scale(0);
+            animation: ripple 0.6s linear;
+            pointer-events: none;
+        }
+        @keyframes ripple {
+            to {
+                transform: scale(4);
+                opacity: 0;
+            }
+        }
+        .contact-btn {
+            background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
+            box-shadow: 0 0 30px rgba(56, 189, 248, 0.4);
+            animation: pulse-glow 2s infinite;
+        }
+        @keyframes pulse-glow {
+            0%, 100% { box-shadow: 0 0 30px rgba(56, 189, 248, 0.4); }
+            50% { box-shadow: 0 0 50px rgba(56, 189, 248, 0.8); }
+        }
+        .project-card {
+            background: rgba(16, 24, 40, 0.6);
+            border: 1px solid rgba(56, 189, 248, 0.1);
+            transition: all 0.3s ease;
+        }
+        .project-card:hover {
+            transform: translateY(-10px);
+            border-color: rgba(56, 189, 248, 0.3);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+        .mobile-menu {
+            background: rgba(11, 14, 24, 0.95);
+            backdrop-filter: blur(20px);
+        }
+        .hero-gradient {
+            background: radial-gradient(circle at center, rgba(56, 189, 248, 0.1) 0%, transparent 70%);
+        }
+    </style>
+</head>
+<body>
+    <!-- Particles Background -->
+    <canvas id="particles-canvas"></canvas>
+    <!-- Aurora Beam Navigation -->
+    <nav class="aurora-beam fixed top-0 left-0 w-full z-50 py-4 px-6 lg:px-12">
+        <div class="max-w-7xl mx-auto flex items-center justify-between">
+            <!-- Logo -->
+            <div class="flex items-center">
+                <div class="w-10 h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center shadow-lg">
+                    <span class="orbitron text-white font-bold text-lg">ADF</span>
+                </div>
+            </div>
+            <!-- Center Navigation Links (Arc Layout) -->
+            <div class="hidden lg:flex relative">
+                <div class="absolute -top-4 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-400/30 to-transparent rounded-full"></div>
+                <div class="flex space-x-8 relative">
+                    <a href="#" class="nav-link text-cyan-100 hover:text-white font-medium transition-all duration-300">Home</a>
+                    <a href="#" class="nav-link text-cyan-100 hover:text-white font-medium transition-all duration-300">Projects</a>
+                    <a href="#" class="nav-link text-cyan-100 hover:text-white font-medium transition-all duration-300">Blog</a>
+                    <a href="#" class="nav-link text-cyan-100 hover:text-white font-medium transition-all duration-300">Store</a>
+                    <a href="#" class="nav-link text-cyan-100 hover:text-white font-medium transition-all duration-300">About</a>
+                </div>
+            </div>
+            <!-- Contact Button -->
+            <div class="hidden lg:block">
+                <button class="contact-btn text-white font-semibold py-2 px-6 rounded-full transition-all duration-300 hover:scale-105">
+                    Contact
+                </button>
+            </div>
+            <!-- Mobile Menu Button -->
+            <button id="mobile-menu-btn" class="lg:hidden text-cyan-300 hover:text-white transition-colors">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="mobile-menu fixed inset-0 z-40 hidden lg:hidden">
+        <div class="flex flex-col items-center justify-center h-full space-y-8">
+            <a href="#" class="text-2xl text-cyan-100 hover:text-white font-medium transition-colors">Home</a>
+            <a href="#" class="text-2xl text-cyan-100 hover:text-white font-medium transition-colors">Projects</a>
+            <a href="#" class="text-2xl text-cyan-100 hover:text-white font-medium transition-colors">Blog</a>
+            <a href="#" class="text-2xl text-cyan-100 hover:text-white font-medium transition-colors">Store</a>
+            <a href="#" class="text-2xl text-cyan-100 hover:text-white font-medium transition-colors">About</a>
+            <button class="contact-btn text-white font-semibold py-3 px-8 rounded-full text-lg mt-4">
+                Contact
+            </button>
+            <button id="close-mobile-menu" class="absolute top-6 right-6 text-cyan-300 hover:text-white">
+                <i data-feather="x"></i>
+            </button>
+        </div>
+    </div>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center relative px-6 pt-20">
+        <div class="hero-gradient absolute inset-0 pointer-events-none"></div>
+        <div class="max-w-4xl mx-auto text-center z-10">
+            <h1 class="orbitron text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-cyan-300 via-blue-400 to-purple-400 bg-clip-text text-transparent">
+                Transcending Digital.<br>Crafting Dimensions.
+            </h1>
+            <p class="text-xl md:text-2xl text-cyan-100 mb-12 max-w-2xl mx-auto leading-relaxed">
+                Where innovation meets imagination. We build digital experiences that transcend boundaries and create new realities.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-semibold py-3 px-8 rounded-full hover:scale-105 transition-transform duration-300 shadow-lg">
+                    View Projects
+                </button>
+                <button class="border border-cyan-400 text-cyan-300 font-semibold py-3 px-8 rounded-full hover:bg-cyan-400/10 transition-all duration-300">
+                    Get in Touch
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Featured Projects Section -->
+    <section class="py-20 px-6">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="orbitron text-3xl md:text-4xl font-bold text-center mb-16 bg-gradient-to-r from-cyan-300 to-blue-400 bg-clip-text text-transparent">
+                Featured Dimensions
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Project Card 1 -->
+                <div class="project-card rounded-2xl p-6">
+                    <div class="h-48 bg-gradient-to-br from-cyan-500/20 to-blue-600/20 rounded-xl mb-4 flex items-center justify-center">
+                    </div>
+                    <h3 class="orbitron text-xl font-bold text-cyan-200 mb-2">Quantum Interface</h3>
+                    <p class="text-cyan-100/80">Next-gen user experience platform with neural integration capabilities.</p>
+                </div>
+                <!-- Project Card 2 -->
+                <div class="project-card rounded-2xl p-6">
+                    <div class="h-48 bg-gradient-to-br from-purple-500/20 to-pink-600/20 rounded-xl mb-4 flex items-center justify-center">
+                    </div>
+                    <h3 class="orbitron text-xl font-bold text-cyan-200 mb-2">Aether Network</h3>
+                    <p class="text-cyan-100/80">Decentralized communication protocol for seamless cross-dimensional data transfer.</p>
+                </div>
+                <!-- Project Card 3 -->
+                <div class="project-card rounded-2xl p-6">
+                    <div class="h-48 bg-gradient-to-br from-blue-500/20 to-cyan-600/20 rounded-xl mb-4 flex items-center justify-center">
+                    </div>
+                    <h3 class="orbitron text-xl font-bold text-cyan-200 mb-2">Nova Engine</h3>
+                    <p class="text-cyan-100/80">Real-time rendering system that creates photorealistic virtual environments.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="border-t border-cyan-800/30 py-12 px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-6 md:mb-0">
+                    <div class="flex items-center space-x-2">
+                        <div class="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center">
+                            <span class="orbitron text-white font-bold">ADF</span>
+                        </div>
+                        <span class="orbitron text-cyan-300">Aurora Dimension Forge</span>
+                    </div>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-cyan-300 hover:text-white transition-colors">
+                        <i data-feather="github"></i>
+                    </a>
+                    <a href="#" class="text-cyan-300 hover:text-white transition-colors">
+                        <i data-feather="twitter"></i>
+                    </a>
+                    <a href="#" class="text-cyan-300 hover:text-white transition-colors">
+                        <i data-feather="linkedin"></i>
+                    </a>
+                    <a href="#" class="text-cyan-300 hover:text-white transition-colors">
+                        <i data-feather="instagram"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="text-center mt-8 text-cyan-500/60">
+                <p>&copy; 2024 Aurora Dimension Forge. Crafting realities beyond imagination.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        // Particle System
+        const canvas = document.getElementById('particles-canvas');
+        const ctx = canvas.getContext('2d');
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+        const particles = [];
+        const particleCount = 80;
+        class Particle {
+            constructor() {
+                this.x = Math.random() * canvas.width;
+                this.y = Math.random() * canvas.height;
+                this.size = Math.random() * 2 + 0.5;
+                this.speedX = Math.random() * 0.5 - 0.25;
+                this.speedY = Math.random() * 0.5 - 0.25;
+                this.color = `rgba(56, 189, 248, ${Math.random() * 0.5 + 0.1})`;
+            }
+            update() {
+                this.x += this.speedX;
+                this.y += this.speedY;
+                if (this.x > canvas.width) this.x = 0;
+                if (this.x < 0) this.x = canvas.width;
+                if (this.y > canvas.height) this.y = 0;
+                if (this.y < 0) this.y = canvas.height;
+            }
+            draw() {
+                ctx.fillStyle = this.color;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        function initParticles() {
+            for (let i = 0; i < particleCount; i++) {
+                particles.push(new Particle());
+            }
+        }
+        function animateParticles() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (let particle of particles) {
+                particle.update();
+                particle.draw();
+            }
+            requestAnimationFrame(animateParticles);
+        }
+        initParticles();
+        animateParticles();
+        // Navbar Animations
+        gsap.from('nav', {
+            duration: 1,
+            y: -100,
+            opacity: 0,
+            ease: "power3.out"
+        });
+        // Hero Section Animations
+        gsap.from('h1', {
+            duration: 1.2,
+            y: 50,
+            opacity: 0,
+            delay: 0.5,
+            ease: "power3.out"
+        });
+        gsap.from('section p', {
+            duration: 1,
+            y: 30,
+            opacity: 0,
+            delay: 0.8,
+            ease: "power3.out"
+        });
+        gsap.from('section button', {
+            duration: 1,
+            y: 30,
+            opacity: 0,
+            delay: 1.1,
+            stagger: 0.2,
+            ease: "power3.out"
+        });
+        // Ripple Effect for Nav Links
+        document.querySelectorAll('.nav-link').forEach(link => {
+            link.addEventListener('click', function(e) {
+                const ripple = document.createElement('span');
+                ripple.classList.add('ripple');
+                this.appendChild(ripple);
+                const x = e.clientX - this.getBoundingClientRect().left;
+                const y = e.clientY - this.getBoundingClientRect().top;
+                ripple.style.left = `${x}px`;
+                ripple.style.top = `${y}px`;
+                setTimeout(() => {
+                    ripple.remove();
+                }, 600);
+            });
+        });
+        // Mobile Menu Functionality
+        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+        const closeMobileMenu = document.getElementById('close-mobile-menu');
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenuBtn.addEventListener('click', () => {
+            mobileMenu.classList.remove('hidden');
+            gsap.fromTo(mobileMenu,
+                { opacity: 0, scale: 0.8 },
+                { opacity: 1, scale: 1, duration: 0.3, ease: "power2.out" }
+            );
+        });
+        closeMobileMenu.addEventListener('click', () => {
+            gsap.to(mobileMenu, {
+                opacity: 0,
+                scale: 0.8,
+                duration: 0.3,
+                ease: "power2.in",
+                onComplete: () => mobileMenu.classList.add('hidden')
+            });
+        });
+        // Parallax Effect for Navbar
+        window.addEventListener('scroll', () => {
+            const scrolled = window.pageYOffset;
+            const parallaxSpeed = 0.3;
+            const nav = document.querySelector('nav');
+            gsap.to(nav, {
+                y: -scrolled * parallaxSpeed,
+                ease: "none"
+            });
+        });
+        // Project Card Animations on Scroll
+        gsap.utils.toArray('.project-card').forEach((card, i) => {
+            gsap.from(card, {
+                scrollTrigger: {
+                    trigger: card,
+                    start: "top 80%",
+                    end: "bottom 20%",
+                    toggleActions: "play none none reverse"
+                },
+                y: 50,
+                opacity: 0,
+                duration: 0.8,
+                delay: i * 0.1,
+                ease: "power3.out"
+            });
+        });
+    </script>
+</body>
 </html>