Change the website function what to do with it and i want you toi do what you like the website to be as anything you want i give you full permpermission to do it

components/footer.js

@@ -89,54 +89,54 @@ class CryptoFooter extends HTMLElement {
                 <div class="footer-content">
                     <div class="footer-grid">
                         <div>
-                            <div class="footer-logo">DXN1</div>
+                            <div class="footer-logo">NEXUS</div>
                             <p class="footer-description">
-                                The next generation decentralized finance platform built on cutting-edge blockchain technology. 
-                                Join the revolution and be part of the future.
+                                A creative studio pushing the boundaries of digital art and interactive media. 
+                                We transform ideas into stunning visual experiences.
                             </p>
                             <div class="social-links">
                                 <a href="#" class="social-link">
-                                    <i data-feather="twitter"></i>
+                                    <i data-feather="instagram"></i>
                                 </a>
                                 <a href="#" class="social-link">
-                                    <i data-feather="github"></i>
+                                    <i data-feather="dribbble"></i>
                                 </a>
                                 <a href="#" class="social-link">
-                                    <i data-feather="discord"></i>
+                                    <i data-feather="behance"></i>
                                 </a>
                                 <a href="#" class="social-link">
-                                    <i data-feather="telegram"></i>
+                                    <i data-feather="linkedin"></i>
                                 </a>
                             </div>
                         </div>
                         
                         <div>
-                            <h4 class="footer-heading">Product</h4>
+                            <h4 class="footer-heading">Services</h4>
                             <div class="footer-links">
-                                <a href="#" class="footer-link">Exchange</a>
-                                <a href="#" class="footer-link">Wallet</a>
-                                <a href="#" class="footer-link">Staking</a>
-                                <a href="#" class="footer-link">NFT Marketplace</a>
+                                <a href="#" class="footer-link">Digital Art</a>
+                                <a href="#" class="footer-link">Interactive Media</a>
+                                <a href="#" class="footer-link">Motion Graphics</a>
+                                <a href="#" class="footer-link">Web Design</a>
                             </div>
                         </div>
                         
                         <div>
-                            <h4 class="footer-heading">Company</h4>
+                            <h4 class="footer-heading">Studio</h4>
                             <div class="footer-links">
-                                <a href="#" class="footer-link">About</a>
-                                <a href="#" class="footer-link">Team</a>
-                                <a href="#" class="footer-link">Careers</a>
-                                <a href="#" class="footer-link">Blog</a>
+                                <a href="#" class="footer-link">About Us</a>
+                                <a href="#" class="footer-link">Our Team</a>
+                                <a href="#" class="footer-link">Process</a>
+                                <a href="#" class="footer-link">Testimonials</a>
                             </div>
                         </div>
                         
                         <div>
-                            <h4 class="footer-heading">Support</h4>
+                            <h4 class="footer-heading">Connect</h4>
                             <div class="footer-links">
-                                <a href="#" class="footer-link">Help Center</a>
                                 <a href="#" class="footer-link">Contact</a>
-                                <a href="#" class="footer-link">Documentation</a>
-                                <a href="#" class="footer-link">API</a>
+                                <a href="#" class="footer-link">Collaborate</a>
+                                <a href="#" class="footer-link">Portfolio</a>
+                                <a href="#" class="footer-link">Blog</a>
                             </div>
                         </div>
                     </div>
@@ -144,7 +144,7 @@ class CryptoFooter extends HTMLElement {
                     <div class="footer-bottom">
                         <p>&copy; 2024 DXN1 Crypto Nexus. All rights reserved.</p>
                     </div>
-                </div>
+</div>
             </footer>
         `;
     }

components/navbar.js

@@ -30,6 +30,7 @@ class CryptoNavbar extends HTMLElement {
                     color: white;
                     text-decoration: none;
                 }
+                
                 .nav-links {
                     display: flex;
                     gap: 2rem;
@@ -46,7 +47,8 @@ class CryptoNavbar extends HTMLElement {
                 .nav-link:hover {
                     color: #3b82f6;
                 }
-.mobile-menu-btn {
+                
+                .mobile-menu-btn {
                     display: none;
                     background: none;
                     border: none;
@@ -65,23 +67,21 @@ class CryptoNavbar extends HTMLElement {
                 }
             </style>
             <nav class="navbar">
-                <a href="/" class="logo">DXN1</a>
+                <a href="/" class="logo">NEXUS</a>
                 <div class="nav-links">
-                    <a href="/" class="nav-link">Home</a>
-                    <a href="bar.html" class="nav-link">Bar</a>
-                    <a href="#features" class="nav-link">Features</a>
+                    <a href="#portfolio" class="nav-link">Portfolio</a>
+                    <a href="#services" class="nav-link">Services</a>
                     <a href="#about" class="nav-link">About</a>
-                    <a href="#tokenomics" class="nav-link">Tokenomics</a>
-                    <a href="#roadmap" class="nav-link">Roadmap</a>
-                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-300">
-                        Connect Wallet
+                    <a href="#gallery" class="nav-link">Gallery</a>
+                    <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-300">
+                        Start Project
                     </button>
                 </div>
-<button class="mobile-menu-btn">
+                <button class="mobile-menu-btn">
                     <i data-feather="menu"></i>
                 </button>
 </nav>
-        `;
+`;
     }
 }
 

index.html

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DXN1 - Crypto Nexus</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <title>Nexus Creative Studio - Digital Art & Interactive Media</title>
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -22,59 +22,98 @@
         <!-- Hero Content -->
         <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
             <h1 class="text-6xl md:text-8xl font-bold text-white mb-6">
-                DXN1
+                NEXUS
             </h1>
-            <p class="text-xl md:text-2xl text-blue-300 mb-8">
-                The Future of Decentralized Finance
+            <p class="text-xl md:text-2xl text-purple-300 mb-8">
+                Creative Studio & Digital Art Collective
             </p>
             <p class="text-lg text-gray-300 mb-12 max-w-2xl mx-auto">
-                Experience the next generation of cryptocurrency with our innovative blockchain technology. 
-                Connect, trade, and grow in the decentralized ecosystem.
+                Where imagination meets technology. We create immersive digital experiences, 
+                stunning visual art, and interactive media that captivates and inspires.
             </p>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105">
-                    Get Started
+                <button class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105">
+                    View Portfolio
                 </button>
-                <button class="border-2 border-blue-500 text-blue-400 hover:bg-blue-500 hover:text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300">
-                    Learn More
+                <button class="border-2 border-purple-500 text-purple-400 hover:bg-purple-500 hover:text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300">
+                    Our Work
                 </button>
             </div>
-        </div>
+</div>
     </section>
-
-    <!-- Features Section -->
-    <section class="py-20 px-4">
+    <!-- Creative Showcase Section -->
+    <section class="py-20 px-4" id="portfolio">
         <div class="max-w-6xl mx-auto">
             <h2 class="text-4xl md:text-5xl font-bold text-white text-center mb-16">
-                Why Choose DXN1?
+                Our Creative Magic
             </h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-gray-800 rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
-                    <div class="text-blue-400 mb-4">
-                        <i data-feather="shield" class="w-12 h-12"></i>
+                <div class="bg-gradient-to-br from-purple-900 to-indigo-900 rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300 border border-purple-500/20">
+                    <div class="text-purple-400 mb-4">
+                        <i data-feather="palette" class="w-12 h-12"></i>
                     </div>
-                    <h3 class="text-2xl font-bold text-white mb-4">Secure</h3>
-                    <p class="text-gray-300">Military-grade encryption and decentralized architecture ensure your assets are always safe.</p>
+                    <h3 class="text-2xl font-bold text-white mb-4">Digital Art</h3>
+                    <p class="text-gray-300">Breathtaking visual narratives, surreal landscapes, and abstract compositions that push creative boundaries.</p>
                 </div>
-                <div class="bg-gray-800 rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
+                <div class="bg-gradient-to-br from-blue-900 to-cyan-900 rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300 border border-blue-500/20">
                     <div class="text-blue-400 mb-4">
-                        <i data-feather="zap" class="w-12 h-12"></i>
+                        <i data-feather="cpu" class="w-12 h-12"></i>
                     </div>
-                    <h3 class="text-2xl font-bold text-white mb-4">Fast</h3>
-                    <p class="text-gray-300">Lightning-fast transactions with near-zero fees across our global network.</p>
+                    <h3 class="text-2xl font-bold text-white mb-4">Interactive Media</h3>
+                    <p class="text-gray-300">Immersive web experiences, interactive installations, and responsive digital environments.</p>
                 </div>
-                <div class="bg-gray-800 rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
-                    <div class="text-blue-400 mb-4">
-                        <i data-feather="users" class="w-12 h-12"></i>
+                <div class="bg-gradient-to-br from-pink-900 to-red-900 rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300 border border-pink-500/20">
+                    <div class="text-pink-400 mb-4">
+                        <i data-feather="film" class="w-12 h-12"></i>
                     </div>
-                    <h3 class="text-2xl font-bold text-white mb-4">Community</h3>
-                    <p class="text-gray-300">Join a thriving community of developers, traders, and blockchain enthusiasts.</p>
+                    <h3 class="text-2xl font-bold text-white mb-4">Motion Design</h3>
+                    <p class="text-gray-300">Dynamic animations, cinematic sequences, and visual storytelling that brings ideas to life.</p>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- Footer Component -->
+    <!-- Gallery Preview Section -->
+    <section class="py-20 px-4 bg-gray-800/50">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-4xl md:text-5xl font-bold text-white text-center mb-16">
+                Featured Works
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="relative group overflow-hidden rounded-xl bg-gradient-to-br from-purple-600 to-pink-600 h-64">
+                    <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <span class="text-white font-semibold">Neon Dreams</span>
+                    </div>
+                </div>
+                <div class="relative group overflow-hidden rounded-xl bg-gradient-to-br from-blue-600 to-cyan-600 h-64">
+                    <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <span class="text-white font-semibold">Digital Horizons</span>
+                    </div>
+                </div>
+                <div class="relative group overflow-hidden rounded-xl bg-gradient-to-br from-green-600 to-emerald-600 h-64">
+                    <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <span class="text-white font-semibold">Nature Code</span>
+                    </div>
+                </div>
+                <div class="relative group overflow-hidden rounded-xl bg-gradient-to-br from-orange-600 to-red-600 h-64">
+                    <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <span class="text-white font-semibold">Urban Pulse</span>
+                    </div>
+                </div>
+                <div class="relative group overflow-hidden rounded-xl bg-gradient-to-br from-indigo-600 to-purple-600 h-64">
+                    <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <span class="text-white font-semibold">Cosmic Dance</span>
+                    </div>
+                </div>
+                <div class="relative group overflow-hidden rounded-xl bg-gradient-to-br from-teal-600 to-blue-600 h-64">
+                    <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <span class="text-white font-semibold">Liquid Thoughts</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+<!-- Footer Component -->
     <crypto-footer></crypto-footer>
 
     <!-- Web Components -->

script.js

@@ -1,11 +1,13 @@
-// Network Animation for DXN1 Crypto Nexus
-class NetworkAnimation {
+
+// Creative Studio Animation for Nexus
+class CreativeParticleAnimation {
     constructor(canvas) {
         this.canvas = canvas;
         this.ctx = canvas.getContext('2d');
         this.particles = [];
-        this.connections = [];
-        this.mouse = { x: 0, y: 0, radius: 150 };
+        this.flowField = [];
+        this.mouse = { x: 0, y: 0, radius: 200 };
+        this.time = 0;
         
         this.init();
         this.animate();
@@ -14,21 +16,42 @@ class NetworkAnimation {
 
     init() {
         this.resizeCanvas();
+        this.createFlowField();
         
-        // Create particles
-        const particleCount = Math.min(50, Math.floor(window.innerWidth / 20));
+        // Create creative particles with artistic properties
+        const particleCount = Math.min(80, Math.floor(window.innerWidth / 15));
         for (let i = 0; i < particleCount; i++) {
             this.particles.push({
                 x: Math.random() * this.canvas.width,
                 y: Math.random() * this.canvas.height,
-                vx: (Math.random() - 0.5) * 2,
-                vy: (Math.random() - 0.5) * 2,
-                radius: Math.random() * 3 + 2,
-                originalRadius: Math.random() * 3 + 2
+                vx: (Math.random() - 0.5) * 3,
+                vy: (Math.random() - 0.5) * 3,
+                radius: Math.random() * 4 + 1,
+                hue: Math.random() * 360,
+                saturation: 70 + Math.random() * 30,
+                lightness: 50 + Math.random() * 30,
+                life: Math.random() * 100,
+                maxLife: 100 + Math.random() * 50
             });
         }
     }
 
+    createFlowField() {
+        const cols = Math.floor(this.canvas.width / 50);
+        const rows = Math.floor(this.canvas.height / 50);
+        
+        for (let x = 0; x < cols; x++) {
+            this.flowField[x] = [];
+            for (let y = 0; y < rows; y++) {
+                const angle = Math.sin(x * 0.01 + this.time * 0.001) * Math.cos(y * 0.01 + this.time * 0.001);
+                this.flowField[x][y] = {
+                    angle: angle,
+                    strength: Math.sin(angle) * 2
+                };
+            }
+        }
+    }
+
     resizeCanvas() {
         this.canvas.width = window.innerWidth;
         this.canvas.height = window.innerHeight;
@@ -50,131 +73,148 @@ class NetworkAnimation {
 
     animate() {
         requestAnimationFrame(() => this.animate());
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         
+        // Create trailing effect
+        this.ctx.fillStyle = 'rgba(17, 24, 39, 0.1)';
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        
+        this.time += 1;
         this.updateParticles();
+        this.drawParticleTrails();
         this.drawConnections();
-        this.drawParticles();
-        this.checkForDNDFormation();
+        this.drawArtisticElements();
     }
 
     updateParticles() {
-        this.particles.forEach(particle => {
-            // Move particles
-            particle.x += particle.vx;
-            particle.y += particle.vy;
-
-            // Bounce off walls
-            if (particle.x < 0 || particle.x > this.canvas.width) particle.vx *= -1;
-            if (particle.y < 0 || particle.y > this.canvas.height) particle.vy *= -1;
+        this.particles.forEach((particle, index) => {
+            // Flow field influence
+            const col = Math.floor(particle.x / 50);
+            const row = Math.floor(particle.y / 50);
+            
+            if (this.flowField[col] && this.flowField[col][row]) {
+                const field = this.flowField[col][row];
+                particle.vx += Math.cos(field.angle) * field.strength * 0.1;
+                particle.vy += Math.sin(field.angle) * field.strength * 0.1;
+            }
 
-            // Mouse interaction
+            // Mouse interaction - attract particles
             if (this.mouse.x && this.mouse.y) {
-                const dx = particle.x - this.mouse.x;
-                const dy = particle.y - this.mouse.y;
+                const dx = this.mouse.x - particle.x;
+                const dy = this.mouse.y - particle.y;
                 const distance = Math.sqrt(dx * dx + dy * dy);
                 
                 if (distance < this.mouse.radius) {
-                    const angle = Math.atan2(dy, dx);
                     const force = (this.mouse.radius - distance) / this.mouse.radius;
+                    const angle = Math.atan2(dy, dx);
+                    
+                    particle.vx += Math.cos(angle) * force * 0.8;
+                    particle.vy += Math.sin(angle) * force * 0.8;
                     
-                    particle.vx += Math.cos(angle) * force * 0.5;
-                    particle.vy += Math.sin(angle) * force * 0.5;
+                    // Color shift on interaction
+                    particle.hue = (particle.hue + force * 20) % 360;
                 }
             }
 
-            // Apply friction
-            particle.vx *= 0.99;
-            particle.vy *= 0.99;
+            // Natural movement
+            particle.x += particle.vx;
+            particle.y += particle.vy;
+            particle.vx *= 0.98;
+            particle.vy *= 0.98;
+
+            // Boundary bounce with creative wrapping
+            if (particle.x < 0 || particle.x > this.canvas.width) particle.vx *= -0.8;
+            if (particle.y < 0 || particle.y > this.canvas.height) particle.vy *= -0.8;
+
+            // Keep particles in bounds
+            particle.x = Math.max(0, Math.min(this.canvas.width, particle.x));
+            particle.y = Math.max(0, Math.min(this.canvas.height, particle.y));
+
+            // Particle life cycle
+            particle.life += 1;
+            if (particle.life > particle.maxLife) {
+                // Respawn with new properties
+                particle.x = Math.random() * this.canvas.width;
+                particle.y = Math.random() * this.canvas.height;
+                particle.life = 0;
+                particle.hue = Math.random() * 360;
+            }
         });
     }
 
-    drawParticles() {
+    drawParticleTrails() {
         this.particles.forEach(particle => {
+            // Draw particle trail
             this.ctx.beginPath();
             this.ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
             
-            // Create gradient for particles
-            const gradient = this.ctx.createRadialGradient(
-                particle.x, particle.y, 0,
-                particle.x, particle.y, particle.radius
-            );
-            gradient.addColorStop(0, 'rgba(59, 130, 246, 1)');
-            gradient.addColorStop(1, 'rgba(59, 130, 246, 0.3)');
+            const alpha = (particle.maxLife - particle.life) / particle.maxLife;
+            const color = `hsla(${particle.hue}, ${particle.saturation}%, ${particle.lightness}%, ${alpha})`;
             
-            this.ctx.fillStyle = gradient;
+            this.ctx.fillStyle = color;
+            this.ctx.fill();
+
+            // Add glow effect
+            this.ctx.shadowColor = color;
+            this.ctx.shadowBlur = 10;
             this.ctx.fill();
+            this.ctx.shadowBlur = 0;
         });
     }
 
     drawConnections() {
-        this.ctx.strokeStyle = 'rgba(59, 130, 246, 0.3)';
-        this.ctx.lineWidth = 1;
-
         for (let i = 0; i < this.particles.length; i++) {
             for (let j = i + 1; j < this.particles.length; j++) {
                 const dx = this.particles[i].x - this.particles[j].x;
                 const dy = this.particles[i].y - this.particles[j].y;
                 const distance = Math.sqrt(dx * dx + dy * dy);
 
-                if (distance < 150) {
+                if (distance < 120) {
+                    const opacity = 1 - (distance / 120);
+                    const hue = (this.particles[i].hue + this.particles[j].hue) / 2;
+                    
+                    this.ctx.strokeStyle = `hsla(${hue}, 80%, 60%, ${opacity * 0.3})`;
+                    this.ctx.lineWidth = 1;
                     this.ctx.beginPath();
                     this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
                     this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
-                    
-                    // Adjust opacity based on distance
-                    const opacity = 1 - (distance / 150);
-                    this.ctx.strokeStyle = `rgba(59, 130, 246, ${opacity * 0.3})`;
                     this.ctx.stroke();
                 }
             }
         }
     }
 
-    checkForDNDFormation() {
-        // Check if particles are forming a DND pattern (clustered in center)
-        let centerX = this.canvas.width / 2;
-        let centerY = this.canvas.height / 2;
-        let clusterRadius = 200;
-        let particlesInCluster = 0;
-
-        this.particles.forEach(particle => {
-            const dx = particle.x - centerX;
-            const dy = particle.y - centerY;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            
-            if (distance < clusterRadius) {
-                particlesInCluster++;
-            }
-        });
-
-        // If enough particles are clustered, show DND effect
-        if (particlesInCluster > this.particles.length * 0.7) {
-            this.showDNDEffect();
+    drawArtisticElements() {
+        // Draw abstract geometric shapes
+        if (this.time % 300 === 0) {
+            this.drawGeometricShape();
         }
     }
 
-    showDNDEffect() {
-        // Create a temporary DND visualization
+    drawGeometricShape() {
+        const centerX = this.canvas.width / 2;
+        const centerY = this.canvas.height / 2;
+        const size = 50 + Math.sin(this.time * 0.01) * 30;
+        
         this.ctx.save();
-        this.ctx.globalAlpha = 0.8;
-        this.ctx.fillStyle = 'rgba(59, 130, 246, 0.1)';
-        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.translate(centerX, centerY);
+        this.ctx.rotate(this.time * 0.001);
+        
+        // Draw rotating polygon
+        this.ctx.beginPath();
+        for (let i = 0; i < 6; i++) {
+            const angle = (i / 6) * Math.PI * 2;
+            const x = Math.cos(angle) * size;
+            const y = Math.sin(angle) * size;
+            if (i === 0) this.ctx.moveTo(x, y);
+            else this.ctx.lineTo(x, y);
+        }
+        this.ctx.closePath();
+        
+        this.ctx.strokeStyle = `hsla(${(this.time * 0.5) % 360}, 70%, 70%, 0.5)`;
+        this.ctx.lineWidth = 2;
+        this.ctx.stroke();
         
-        // Draw DND text in the center
-        this.ctx.font = 'bold 48px Inter';
-        this.ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
-        this.ctx.textAlign = 'center';
-        this.ctx.fillText('DND', this.canvas.width / 2, this.canvas.height / 2);
         this.ctx.restore();
-
-        // Reset after showing effect
-        setTimeout(() => {
-            this.particles.forEach(particle => {
-                particle.vx = (Math.random() - 0.5) * 4;
-                particle.vy = (Math.random() - 0.5) * 4;
-            });
-        }, 1000);
     }
 }
 
@@ -182,158 +222,38 @@ class NetworkAnimation {
 document.addEventListener('DOMContentLoaded', function() {
     const canvas = document.getElementById('networkCanvas');
     if (canvas) {
-        new NetworkAnimation(canvas);
+        new CreativeParticleAnimation(canvas);
     }
+    
+    // Add interactive gallery effects
+    addGalleryInteractions();
 });
-// Crypto Bar Data Fetching
-class CryptoBar {
-    constructor() {
-        this.cryptoDataContainer = document.getElementById('cryptoData');
-        this.tradingPairsContainer = document.getElementById('tradingPairs');
-        this.marketStatsContainer = document.getElementById('marketStats');
-        
-        if (this.cryptoDataContainer) {
-            this.init();
-        }
-    }
-
-    async init() {
-        await this.fetchCryptoData();
-        await this.fetchTradingPairs();
-        await this.fetchMarketStats();
-    }
 
-    async fetchCryptoData() {
-        try {
-            // Using CoinGecko API for cryptocurrency data
-            const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin,ethereum,binancecoin,ripple&order=market_cap_desc&per_page=4&page=1&sparkline=false');
-            const data = await response.json();
-            
-            this.renderCryptoData(data);
-        } catch (error) {
-            console.error('Error fetching crypto data:', error);
-            this.renderError(this.cryptoDataContainer, 'Failed to load market data');
-        }
-    }
-
-    async fetchTradingPairs() {
-        try {
-            // Using Binance API for trading pairs (fallback to static data if CORS issues)
-            const tradingPairs = [
-                { pair: 'BTC/USDT', price: '$65,432.10', change: '+2.34%', volume: '$28.5B' },
-                { pair: 'ETH/USDT', price: '$3,456.78', change: '+1.23%', volume: '$15.2B' },
-                { pair: 'BNB/USDT', price: '$567.89', change: '-0.56%', volume: '$3.8B' },
-                { pair: 'XRP/USDT', price: '$0.5678', change: '+3.45%', volume: '$2.1B' },
-                { pair: 'ADA/USDT', price: '$0.4567', change: '+1.89%', volume: '$1.2B' }
-            ];
-            
-            this.renderTradingPairs(tradingPairs);
-        } catch (error) {
-            console.error('Error fetching trading pairs:', error);
-            this.renderError(this.tradingPairsContainer, 'Failed to load trading pairs');
-        }
-    }
-
-    async fetchMarketStats() {
-        try {
-            // Using CoinGecko API for global market data
-            const response = await fetch('https://api.coingecko.com/api/v3/global');
-            const data = await response.json();
-            
-            this.renderMarketStats(data.data);
-        } catch (error) {
-            console.error('Error fetching market stats:', error);
-            this.renderError(this.marketStatsContainer, 'Failed to load market statistics');
-        }
-    }
-
-    renderCryptoData(data) {
-        this.cryptoDataContainer.innerHTML = data.map(coin => `
-            <div class="bg-gray-700 rounded-lg p-4 hover:transform hover:scale-105 transition-all duration-300 glow-on-hover">
-                <div class="flex items-center justify-between mb-3">
-                    <div class="flex items-center">
-                        <img src="${coin.image}" alt="${coin.name}" class="w-8 h-8 rounded-full mr-3">
-                        <span class="text-white font-semibold">${coin.symbol.toUpperCase()}</span>
-                    </div>
-                    <span class="text-blue-400 font-bold">${coin.current_price.toLocaleString()}</span>
-                </div>
-                <div class="flex justify-between items-center">
-                    <span class="text-sm ${coin.price_change_percentage_24h >= 0 ? 'text-green-400' : 'text-red-400'}">
-                        ${coin.price_change_percentage_24h >= 0 ? '+' : ''}${coin.price_change_percentage_24h.toFixed(2)}%
-                    </span>
-                    <span class="text-gray-300 text-sm">24h</span>
-                </div>
-            </div>
-        `).join('');
-    }
-
-    renderTradingPairs(pairs) {
-        this.tradingPairsContainer.innerHTML = pairs.map(pair => `
-            <tr class="border-b border-gray-600 hover:bg-gray-700 transition-colors">
-                <td class="py-4 font-semibold">${pair.pair}</td>
-                <td class="py-4 text-right">${pair.price}</td>
-                <td class="py-4 text-right ${pair.change.includes('+') ? 'text-green-400' : 'text-red-400'}">${pair.change}</td>
-                <td class="py-4 text-right text-gray-300">${pair.volume}</td>
-            </tr>
-        `).join('');
-    }
-
-    renderMarketStats(stats) {
-        this.marketStatsContainer.innerHTML = `
-            <div class="bg-gray-700 rounded-lg p-6 text-center">
-                <div class="text-blue-400 mb-3">
-                    <i data-feather="dollar-sign" class="w-10 h-10 mx-auto"></i>
-                </div>
-                <h3 class="text-xl font-semibold text-white mb-2">Total Market Cap</h3>
-                <p class="text-2xl font-bold text-white">${(stats.total_market_cap.usd / 1e12).toFixed(2)}T</p>
-            </div>
-            <div class="bg-gray-700 rounded-lg p-6 text-center">
-                <div class="text-blue-400 mb-3">
-                    <i data-feather="trending-up" class="w-10 h-10 mx-auto"></i>
-                </div>
-                <h3 class="text-xl font-semibold text-white mb-2">24h Volume</h3>
-                <p class="text-2xl font-bold text-white">${(stats.total_volume.usd / 1e9).toFixed(2)}B</p>
-            </div>
-            <div class="bg-gray-700 rounded-lg p-6 text-center">
-                <div class="text-blue-400 mb-3">
-                    <i data-feather="activity" class="w-10 h-10 mx-auto"></i>
-                </div>
-                <h3 class="text-xl font-semibold text-white mb-2">Market Cap Change</h3>
-                <p class="text-2xl font-bold ${stats.market_cap_change_percentage_24h_usd >= 0 ? 'text-green-400' : 'text-red-400'}">${stats.market_cap_change_percentage_24h_usd.toFixed(2)}%</p>
-            </div>
-        `;
+// Gallery interaction effects
+function addGalleryInteractions() {
+    const galleryItems = document.querySelectorAll('.grid > div');
+    
+    galleryItems.forEach((item, index) => {
+        item.addEventListener('mouseenter', function() {
+            this.style.transform = 'scale(1.05) rotate(2deg)';
+            this.style.zIndex = '10';
+        });
         
-        // Re-initialize feather icons for the new content
-        if (feather) {
-            feather.replace();
-        }
-    }
-
-    renderError(container, message) {
-        container.innerHTML = `
-            <div class="text-center p-4 bg-red-900/20 rounded-lg border border-red-500/30">
-                <div class="text-red-400 mb-2">
-                    <i data-feather="alert-circle" class="w-8 h-8 mx-auto"></i>
-                </div>
-                <p class="text-red-300">${message}</p>
-            </div>
-        `;
-    }
+        item.addEventListener('mouseleave', function() {
+            this.style.transform = 'scale(1) rotate(0deg)';
+            this.style.zIndex = '1';
+        });
+        
+        // Add click effect
+        item.addEventListener('click', function() {
+            this.classList.add('animate-pulse');
+            setTimeout(() => {
+                this.classList.remove('animate-pulse');
+            }, 1000);
+        });
+    });
 }
 
-// Initialize crypto bar when DOM is loaded
-document.addEventListener('DOMContentLoaded', function() {
-    const canvas = document.getElementById('networkCanvas');
-    if (canvas) {
-        new NetworkAnimation(canvas);
-    }
-    
-    // Initialize crypto bar if on bar page
-    if (document.getElementById('cryptoData')) {
-        new CryptoBar();
-    }
-});
-
 // Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
@@ -347,3 +267,13 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         }
     });
 });
+
+// Add scroll-based animations
+window.addEventListener('scroll', function() {
+    const scrolled = window.pageYOffset;
+    const parallax = document.querySelector('#networkCanvas');
+    
+    if (parallax) {
+        parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
+    }
+});