Spaces:

thetwistedpixie
/

neonnexus-agency

Running

App Files Files Community

thetwistedpixie commited on Nov 18, 2025

Commit

e68daf6

verified ·

1 Parent(s): d42ddd6

Make it better

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +245 -19
script.js +440 -0
style.css +252 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Neonnexus Agency
-emoji: 🐠
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: NeonNexus Agency 🚀
+colorFrom: red
+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,245 @@
-<!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" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NeonNexus Agency - Digital Alchemists</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>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f5f3ff',
+                            100: '#ede9fe',
+                            200: '#ddd6fe',
+                            300: '#c4b5fd',
+                            400: '#a78bfa',
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                            700: '#6d28d9',
+                            800: '#5b21b6',
+                            900: '#4c1d95',
+                        },
+                        secondary: {
+                            50: '#f0fdfa',
+                            100: '#ccfbf1',
+                            200: '#99f6e4',
+                            300: '#5eead4',
+                            400: '#2dd4bf',
+                            500: '#14b8a6',
+                            600: '#0d9488',
+                            700: '#0f766e',
+                            800: '#115e59',
+                            900: '#134e4a',
+                        }
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'glow': 'glow 2s ease-in-out infinite alternate',
+                        'slide-up': 'slideUp 0.6s ease-out forwards',
+                        'slide-down': 'slideDown 0.6s ease-out forwards',
+                        'fade-in': 'fadeIn 0.8s ease-out forwards',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-white transition-colors duration-300 dark-mode">
+    <!-- Loading Screen -->
+    <div id="loading-screen" class="fixed inset-0 bg-gray-900 z-50 flex items-center justify-center transition-opacity duration-500">
+        <div class="w-16 h-16 border-4 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
+    </div>
+    <!-- Theme Toggle -->
+    <button id="theme-toggle" class="fixed top-4 right-4 z-40 p-3 bg-gray-800 rounded-full shadow-lg hover:bg-gray-700 transition-colors duration-300">
+        <i data-feather="sun" class="w-5 h-5 text-yellow-400 dark-icon hidden"></i>
+        <i data-feather="moon" class="w-5 h-5 text-primary-400 light-icon"></i>
+    </button>
+    <!-- Navigation -->
+    <nav-bar></nav-bar>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center relative overflow-hidden px-4 pt-20">
+        <div class="absolute inset-0 bg-gradient-to-br from-primary-900/20 via-transparent to-secondary-900/20"></div>
+        <div class="absolute top-20 left-10 w-72 h-72 bg-primary-500 rounded-full filter blur-3xl opacity-20 animate-float"></div>
+        <div class="absolute bottom-20 right-10 w-96 h-96 bg-secondary-500 rounded-full filter blur-3xl opacity-20 animate-float" style="animation-delay: -3s;"></div>
+        <div class="container mx-auto max-w-6xl relative z-10">
+            <div class="text-center space-y-8">
+                <h1 class="text-5xl md:text-7xl font-bold leading-tight">
+                    <span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400 animate-glow">
+                        Digital Alchemists
+                    </span>
+                    <span class="block text-gray-300 mt-2">Crafting Tomorrow</span>
+                </h1>
+                <p class="text-xl md:text-2xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
+                    We transform pixels into experiences, code into art, and ideas into digital masterpieces that captivate and convert.
+                </p>
+                <div class="flex flex-wrap justify-center gap-4 pt-8">
+                    <a href="#portfolio" class="px-8 py-4 bg-primary-600 hover:bg-primary-500 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 hover:-translate-y-1 shadow-lg hover:shadow-primary-500/25">
+                        View Our Work
+                    </a>
+                    <a href="#contact" class="px-8 py-4 border-2 border-primary-500 hover:bg-primary-500 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 hover:-translate-y-1">
+                        Start Project
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <i data-feather="chevron-down" class="w-8 h-8 text-primary-400"></i>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="py-20 px-4">
+        <div class="container mx-auto max-w-6xl">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl md:text-5xl font-bold mb-4">
+                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400">
+                        Our Services
+                    </span>
+                </h2>
+                <p class="text-gray-400 text-lg max-w-2xl mx-auto">
+                    Full-spectrum digital solutions tailored to elevate your brand
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <service-card
+                    icon="code"
+                    title="Web Development"
+                    description="Custom-built, performant websites with cutting-edge technologies and pixel-perfect implementation."
+                ></service-card>
+                <service-card
+                    icon="layout"
+                    title="UI/UX Design"
+                    description="Intuitive interfaces that delight users and drive engagement through thoughtful design systems."
+                ></service-card>
+                <service-card
+                    icon="smartphone"
+                    title="Mobile Apps"
+                    description="Native and cross-platform mobile applications that deliver seamless user experiences."
+                ></service-card>
+                <service-card
+                    icon="zap"
+                    title="Brand Strategy"
+                    description="Comprehensive brand identity development that resonates with your target audience."
+                ></service-card>
+                <service-card
+                    icon="trending-up"
+                    title="Digital Marketing"
+                    description="Data-driven campaigns that amplify your reach and maximize ROI across all channels."
+                ></service-card>
+                <service-card
+                    icon="shield"
+                    title="Cybersecurity"
+                    description="Enterprise-grade security solutions to protect your digital assets and user data."
+                ></service-card>
+            </div>
+        </div>
+    </section>
+    <!-- Portfolio Section -->
+    <section id="portfolio" class="py-20 px-4 bg-gray-800/50">
+        <div class="container mx-auto max-w-6xl">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl md:text-5xl font-bold mb-4">
+                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400">
+                        Featured Work
+                    </span>
+                </h2>
+                <p class="text-gray-400 text-lg max-w-2xl mx-auto">
+                    A curated selection of our recent digital masterpieces
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="portfolio-grid">
+                <!-- Portfolio items will be injected here -->
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials Section -->
+    <section id="testimonials" class="py-20 px-4">
+        <div class="container mx-auto max-w-4xl">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl md:text-5xl font-bold mb-4">
+                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400">
+                        Client Testimonials
+                    </span>
+                </h2>
+                <p class="text-gray-400 text-lg">
+                    What our clients say about working with us
+                </p>
+            </div>
+            <div class="relative" id="testimonials-slider">
+                <!-- Testimonials will be injected here -->
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 px-4 bg-gray-800/50">
+        <div class="container mx-auto max-w-4xl">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl md:text-5xl font-bold mb-4">
+                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-400">
+                        Let's Create Magic
+                    </span>
+                </h2>
+                <p class="text-gray-400 text-lg">
+                    Ready to transform your vision into reality? Get in touch.
+                </p>
+            </div>
+            <form id="contact-form" class="space-y-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <input type="text" placeholder="Your Name" required
+                            class="w-full px-6 py-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-primary-500 transition-colors duration-300">
+                    </div>
+                    <div>
+                        <input type="email" placeholder="Your Email" required
+                            class="w-full px-6 py-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-primary-500 transition-colors duration-300">
+                    </div>
+                </div>
+                <div>
+                    <input type="text" placeholder="Project Type"
+                        class="w-full px-6 py-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-primary-500 transition-colors duration-300">
+                </div>
+                <div>
+                    <textarea rows="6" placeholder="Tell us about your project" required
+                        class="w-full px-6 py-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-primary-500 transition-colors duration-300 resize-none"></textarea>
+                </div>
+                <div class="text-center">
+                    <button type="submit"
+                        class="px-12 py-4 bg-primary-600 hover:bg-primary-500 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 hover:-translate-y-1 shadow-lg hover:shadow-primary-500/25">
+                        Send Message
+                    </button>
+                </div>
+            </form>
+        </div>
+    </section>
+    <!-- Footer -->
+    <site-footer></site-footer>
+    <!-- Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/service-card.js"></script>
+    <script src="components/portfolio-item.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,440 @@

+// Theme Management
+class ThemeManager {
+    constructor() {
+        this.themeToggle = document.getElementById('theme-toggle');
+        this.htmlElement = document.documentElement;
+        this.currentTheme = localStorage.getItem('theme') || 'dark';
+        this.init();
+    }
+    init() {
+        this.applyTheme(this.currentTheme);
+        this.themeToggle.addEventListener('click', () => this.toggleTheme());
+    }
+    applyTheme(theme) {
+        if (theme === 'light') {
+            this.htmlElement.classList.remove('dark-mode');
+            this.htmlElement.classList.add('light-mode');
+            document.body.classList.add('light-mode');
+        } else {
+            this.htmlElement.classList.remove('light-mode');
+            this.htmlElement.classList.add('dark-mode');
+            document.body.classList.remove('light-mode');
+        }
+        localStorage.setItem('theme', theme);
+        this.updateIcons(theme);
+    }
+    toggleTheme() {
+        const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
+        this.currentTheme = newTheme;
+        this.applyTheme(newTheme);
+        this.themeToggle.classList.add('animate-pulse-custom');
+        setTimeout(() => this.themeToggle.classList.remove('animate-pulse-custom'), 500);
+    }
+    updateIcons(theme) {
+        const darkIcon = this.themeToggle.querySelector('.dark-icon');
+        const lightIcon = this.themeToggle.querySelector('.light-icon');
+        if (theme === 'light') {
+            darkIcon.classList.remove('hidden');
+            lightIcon.classList.add('hidden');
+        } else {
+            darkIcon.classList.add('hidden');
+            lightIcon.classList.remove('hidden');
+        }
+    }
+}
+// Loading Screen
+class LoadingManager {
+    constructor() {
+        this.loadingScreen = document.getElementById('loading-screen');
+        this.init();
+    }
+    init() {
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                this.loadingScreen.style.opacity = '0';
+                setTimeout(() => {
+                    this.loadingScreen.style.display = 'none';
+                }, 500);
+            }, 1000);
+        });
+    }
+}
+// Smooth Scrolling
+class SmoothScroll {
+    constructor() {
+        this.links = document.querySelectorAll('a[href^="#"]');
+        this.init();
+    }
+    init() {
+        this.links.forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const targetId = link.getAttribute('href');
+                const targetSection = document.querySelector(targetId);
+                if (targetSection) {
+                    targetSection.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+    }
+}
+// Intersection Observer for Animations
+class ScrollAnimations {
+    constructor() {
+        this.sections = document.querySelectorAll('section');
+        this.init();
+    }
+    init() {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('section-visible');
+                    entry.target.classList.remove('section-hidden');
+                }
+            });
+        }, {
+            threshold: 0.15,
+            rootMargin: '0px 0px -100px 0px'
+        });
+        this.sections.forEach(section => {
+            section.classList.add('section-hidden');
+            observer.observe(section);
+        });
+    }
+}
+// Contact Form Handler
+class ContactForm {
+    constructor() {
+        this.form = document.getElementById('contact-form');
+        this.init();
+    }
+    init() {
+        if (this.form) {
+            this.form.addEventListener('submit', (e) => {
+                e.preventDefault();
+                this.handleSubmit();
+            });
+        }
+    }
+    async handleSubmit() {
+        const formData = new FormData(this.form);
+        const data = Object.fromEntries(formData);
+        // Show loading state
+        const submitButton = this.form.querySelector('button[type="submit"]');
+        const originalText = submitButton.innerHTML;
+        submitButton.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin inline-block"></i> Sending...';
+        feather.replace();
+        try {
+            // Simulate API call
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            // Show success message
+            this.showSuccess();
+            this.form.reset();
+        } catch (error) {
+            console.error('Form submission error:', error);
+        } finally {
+            submitButton.innerHTML = originalText;
+        }
+    }
+    showSuccess() {
+        const successDiv = document.createElement('div');
+        successDiv.className = 'success-message show';
+        successDiv.innerHTML = '🎉 Message sent successfully! We\'ll get back to you soon.';
+        this.form.appendChild(successDiv);
+        setTimeout(() => {
+            successDiv.classList.remove('show');
+            setTimeout(() => successDiv.remove(), 300);
+        }, 5000);
+    }
+}
+// Portfolio Data Loader
+class PortfolioLoader {
+    constructor() {
+        this.grid = document.getElementById('portfolio-grid');
+        this.init();
+    }
+    init() {
+        // Using static.photos for consistent placeholder images
+        const portfolioItems = [
+            {
+                title: "E-Commerce Revolution",
+                category: "Web Development",
+                image: "http://static.photos/technology/640x360/42",
+                description: "Built a scalable e-commerce platform with 300% conversion increase"
+            },
+            {
+                title: "Brand Identity Suite",
+                category: "Design",
+                image: "http://static.photos/workspace/640x360/133",
+                description: "Complete brand redesign for a Fortune 500 company"
+            },
+            {
+                title: "Mobile Banking App",
+                category: "Mobile Development",
+                image: "http://static.photos/abstract/640x360/99",
+                description: "Secure, intuitive banking app with biometric authentication"
+            },
+            {
+                title: "AI Dashboard",
+                category: "Data Visualization",
+                image: "http://static.photos/industry/640x360/77",
+                description: "Real-time analytics dashboard powered by machine learning"
+            },
+            {
+                title: "Social Campaign",
+                category: "Marketing",
+                image: "http://static.photos/people/640x360/21",
+                description: "Viral marketing campaign reaching 10M+ impressions"
+            },
+            {
+                title: "Secure Cloud Migration",
+                category: "Cybersecurity",
+                image: "http://static.photos/network/640x360/55",
+                description: "Zero-downtime migration with enhanced security protocols"
+            }
+        ];
+        this.renderPortfolio(portfolioItems);
+    }
+    renderPortfolio(items) {
+        items.forEach((item, index) => {
+            const portfolioElement = document.createElement('portfolio-item');
+            portfolioElement.setAttribute('title', item.title);
+            portfolioElement.setAttribute('category', item.category);
+            portfolioElement.setAttribute('image', item.image);
+            portfolioElement.setAttribute('description', item.description);
+            // Stagger animation
+            setTimeout(() => {
+                this.grid.appendChild(portfolioElement);
+            }, index * 100);
+        });
+    }
+}
+// Testimonials Loader
+class TestimonialsLoader {
+    constructor() {
+        this.container = document.getElementById('testimonials-slider');
+        this.currentIndex = 0;
+        this.testimonials = [];
+        this.init();
+    }
+    async init() {
+        try {
+            // Fetch real testimonials from JSONPlaceholder
+            const response = await fetch('https://jsonplaceholder.typicode.com/comments?_limit=5');
+            const data = await response.json();
+            this.testimonials = data.slice(0, 5).map(comment => ({
+                name: comment.name.split(' ').map(word =>
+                    word.charAt(0).toUpperCase() + word.slice(1)
+                ).join(' '),
+                text: comment.body.charAt(0).toUpperCase() + comment.body.slice(1),
+                role: ['CEO', 'Founder', 'CTO', 'Director', 'Product Manager'][Math.floor(Math.random() * 5)],
+                company: ['TechCorp', 'StartupX', 'Digital Dreams', 'FutureLabs', 'Innovate Inc'][Math.floor(Math.random() * 5)]
+            }));
+            this.renderTestimonials();
+            this.startAutoSlide();
+        } catch (error) {
+            console.error('Failed to load testimonials:', error);
+            this.renderFallbackTestimonials();
+        }
+    }
+    renderTestimonials() {
+        const testimonialHTML = this.testimonials.map((t, index) => `
+            <div class="testimonial-slide ${index === 0 ? 'active' : ''} bg-gray-800 p-8 rounded-2xl shadow-xl">
+                <div class="flex items-center mb-6">
+                    <div class="w-16 h-16 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-full flex items-center justify-center text-white font-bold text-xl mr-4">
+                        ${t.name.split(' ').map(n => n[0]).join('')}
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-lg">${t.name}</h4>
+                        <p class="text-primary-400 text-sm">${t.role} at ${t.company}</p>
+                    </div>
+                </div>
+                <blockquote class="text-gray-300 text-lg italic">
+                    <i data-feather="quote" class="w-8 h-8 text-primary-500 mb-4"></i>
+                    "${t.text}"
+                </blockquote>
+                <div class="flex mt-6">
+                    ${Array(5).fill().map(() => '<i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>').join('')}
+                </div>
+            </div>
+        `).join('');
+        this.container.innerHTML = `
+            <div class="relative">
+                ${testimonialHTML}
+                <div class="flex justify-center mt-8 space-x-4">
+                    ${this.testimonials.map((_, index) => `
+                        <button class="testimonial-dot w-4 h-4 rounded-full transition-all duration-300 ${index === 0 ? 'bg-primary-500' : 'bg-gray-600 hover:bg-gray-500'}" data-index="${index}"></button>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+        this.attachDotListeners();
+        feather.replace();
+    }
+    renderFallbackTestimonials() {
+        const fallback = [
+            {
+                name: "Sarah Johnson",
+                role: "CEO",
+                company: "TechVenture",
+                text: "NeonNexus transformed our digital presence completely. The results exceeded all expectations!"
+            }
+        ];
+        this.testimonials = fallback;
+        this.renderTestimonials();
+    }
+    attachDotListeners() {
+        const dots = this.container.querySelectorAll('.testimonial-dot');
+        dots.forEach(dot => {
+            dot.addEventListener('click', (e) => {
+                this.showTestimonial(parseInt(e.target.dataset.index));
+            });
+        });
+    }
+    showTestimonial(index) {
+        const slides = this.container.querySelectorAll('.testimonial-slide');
+        const dots = this.container.querySelectorAll('.testimonial-dot');
+        slides.forEach(slide => slide.classList.remove('active'));
+        dots.forEach(dot => {
+            dot.classList.remove('bg-primary-500');
+            dot.classList.add('bg-gray-600');
+        });
+        slides[index].classList.add('active');
+        dots[index].classList.remove('bg-gray-600');
+        dots[index].classList.add('bg-primary-500');
+        this.currentIndex = index;
+    }
+    startAutoSlide() {
+        setInterval(() => {
+            this.currentIndex = (this.currentIndex + 1) % this.testimonials.length;
+            this.showTestimonial(this.currentIndex);
+        }, 5000);
+    }
+}
+// Mobile Menu Handler
+class MobileMenuHandler {
+    constructor() {
+        this.isOpen = false;
+        this.init();
+    }
+    init() {
+        // This will be called from the navbar component
+        window.addEventListener('mobile-menu-toggle', (e) => {
+            this.isOpen = e.detail.isOpen;
+            document.body.style.overflow = this.isOpen ? 'hidden' : '';
+        });
+    }
+}
+// Custom Cursor
+class CustomCursor {
+    constructor() {
+        this.cursor = document.createElement('div');
+        this.cursor.className = 'custom-cursor';
+        this.init();
+    }
+    init() {
+        document.body.appendChild(this.cursor);
+        document.addEventListener('mousemove', (e) => {
+            this.cursor.style.left = e.clientX + 'px';
+            this.cursor.style.top = e.clientY + 'px';
+        });
+        document.addEventListener('mousedown', () => {
+            this.cursor.style.transform = 'scale(0.8)';
+        });
+        document.addEventListener('mouseup', () => {
+            this.cursor.style.transform = 'scale(1)';
+        });
+        // Hide on touch devices
+        if ('ontouchstart' in window) {
+            this.cursor.style.display = 'none';
+        }
+    }
+}
+// Initialize everything when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    // Core managers
+    new ThemeManager();
+    new LoadingManager();
+    new SmoothScroll();
+    new ScrollAnimations();
+    new ContactForm();
+    new MobileMenuHandler();
+    // Data loaders
+    new PortfolioLoader();
+    new TestimonialsLoader();
+    // Optional features
+    new CustomCursor();
+    // Add some interactive elements
+    initializeInteractiveEffects();
+});
+function initializeInteractiveEffects() {
+    // Add parallax effect to hero elements
+    window.addEventListener('scroll', () => {
+        const scrolled = window.pageYOffset;
+        const parallaxElements = document.querySelectorAll('.animate-float');
+        parallaxElements.forEach((element, index) => {
+            const speed = 0.5 + (index * 0.1);
+            element.style.transform = `translateY(${scrolled * speed}px) rotate(${scrolled * 0.05}deg)`;
+        });
+    });
+    // Add click ripple effect to buttons
+    document.querySelectorAll('button, .btn-primary').forEach

style.css CHANGED Viewed

@@ -1,28 +1,262 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom CSS Variables for Theme Management */
+:root {
+    --primary-500: #8b5cf6;
+    --secondary-500: #14b8a6;
+    --bg-primary: #111827;
+    --bg-secondary: #1f2937;
+    --text-primary: #ffffff;
+    --text-secondary: #9ca3af;
+}
+:root.light-mode {
+    --bg-primary: #f9fafb;
+    --bg-secondary: #ffffff;
+    --text-primary: #111827;
+    --text-secondary: #6b7280;
+}
+/* Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    transition: background-color 0.3s ease, color 0.3s ease;
+    overflow-x: hidden;
+}
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+}
+::-webkit-scrollbar-thumb {
+    background: var(--primary-500);
+    border-radius: 5px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--secondary-500);
+}
+/* Keyframe Animations */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0) rotate(0deg);
+    }
+    50% {
+        transform: translateY(-20px) rotate(180deg);
+    }
+}
+@keyframes glow {
+    0% {
+        filter: drop-shadow(0 0 10px var(--primary-500));
+    }
+    100% {
+        filter: drop-shadow(0 0 20px var(--secondary-500));
+    }
+}
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+}
+/* Animation Classes */
+.animate-float {
+    animation: float 6s ease-in-out infinite;
+}
+.animate-glow {
+    animation: glow 2s ease-in-out infinite alternate;
+}
+.animate-pulse-custom {
+    animation: pulse 0.5s ease-in-out;
+}
+/* Glassmorphism Effect */
+.glass {
+    background: rgba(31, 41, 55, 0.4);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(139, 92, 246, 0.2);
 }
+.light-mode .glass {
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(139, 92, 246, 0.1);
 }
+/* Gradient Overlay */
+.gradient-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
 }
+/* Hover Effects */
+.hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
+.hover-lift:hover {
+    transform: translateY(-10px) rotateX(5deg);
+    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
 }
+/* Custom Cursor */
+.custom-cursor {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--primary-500);
+    border-radius: 50%;
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    transition: transform 0.1s ease;
+    mix-blend-mode: difference;
+}
+/* Section Animations */
+.section-hidden {
+    opacity: 0;
+    transform: translateY(50px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+}
+.section-visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+/* Form Styles */
+input, textarea {
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+input:focus, textarea:focus {
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
+}
+/* Button Styles */
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
+    border: none;
+    color: white;
+    padding: 12px 32px;
+    border-radius: 50px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
+}
+/* Responsive Typography */
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2.5rem !important;
+    }
+    h2 {
+        font-size: 2rem !important;
+    }
+}
+/* Light Mode Specific Styles */
+.light-mode {
+    background-color: #f9fafb;
+    color: #111827;
+}
+.light-mode .bg-gray-800 {
+    background-color: #ffffff !important;
+}
+.light-mode .bg-gray-900 {
+    background-color: #f3f4f6 !important;
+}
+.light-mode .text-gray-400 {
+    color: #4b5563 !important;
+}
+.light-mode .border-gray-700 {
+    border-color: #e5e7eb !important;
+}
+/* Contact Form Success Message */
+.success-message {
+    background: linear-gradient(135deg, #10b981, #14b8a6);
+    color: white;
+    padding: 12px 24px;
+    border-radius: 8px;
+    margin-top: 16px;
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.success-message.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+/* Portfolio Grid Animation */
+.portfolio-item-enter {
+    opacity: 0;
+    transform: scale(0.9) rotateY(10deg);
+}
+.portfolio-item-enter-active {
+    opacity: 1;
+    transform: scale(1) rotateY(0);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+}