This doesn't work

README.md

@@ -1,10 +1,13 @@
 ---
-title: Codecanvas Creations
-emoji: 🏃
-colorFrom: green
-colorTo: purple
+title: CodeCanvas Creations 🎨
+colorFrom: red
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,47 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .social-icon {
+          transition: transform 0.3s ease, background-color 0.3s ease;
+        }
+        .social-icon:hover {
+          transform: translateY(-3px);
+          background-color: #e0e7ff;
+        }
+        .dark .social-icon:hover {
+          background-color: #3730a3;
+        }
+      </style>
+      <footer class="bg-gray-100 dark:bg-gray-800 py-8">
+        <div class="container mx-auto px-4">
+          <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="mb-4 md:mb-0">
+              <p class="text-gray-600 dark:text-gray-400">&copy; ${new Date().getFullYear()} PixelPerfect Portfolio. All rights reserved.</p>
+            </div>
+            <div class="flex space-x-4">
+              <a href="#" class="social-icon p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-indigo-600 dark:text-indigo-400">
+                <i data-feather="twitter"></i>
+              </a>
+              <a href="#" class="social-icon p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-indigo-600 dark:text-indigo-400">
+                <i data-feather="linkedin"></i>
+              </a>
+              <a href="#" class="social-icon p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-indigo-600 dark:text-indigo-400">
+                <i data-feather="dribbble"></i>
+              </a>
+              <a href="#" class="social-icon p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-indigo-600 dark:text-indigo-400">
+                <i data-feather="github"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `;
+    // Initialize feather icons after content is loaded
+    document.addEventListener('DOMContentLoaded', () => {
+      feather.replace();
+    });
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,101 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .nav-link {
+          position: relative;
+        }
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 2px;
+          bottom: -2px;
+          left: 0;
+          background-color: #6366f1;
+          transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        .dark .nav-link:hover::after {
+          background-color: #818cf8;
+        }
+      </style>
+      <nav class="fixed w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-md z-50 border-b border-gray-200 dark:border-gray-800">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+          <a href="#home" class="text-xl font-bold text-indigo-600 dark:text-indigo-400">PixelPerfect</a>
+          <div class="hidden md:flex items-center space-x-8">
+            <a href="#home" class="nav-link">Home</a>
+            <a href="#about" class="nav-link">About</a>
+            <a href="#work" class="nav-link">Work</a>
+            <a href="#contact" class="nav-link">Contact</a>
+            <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition">
+              <i data-feather="moon" class="hidden dark:block"></i>
+              <i data-feather="sun" class="dark:hidden"></i>
+            </button>
+          </div>
+          <button class="md:hidden p-2" id="mobileMenuButton">
+            <i data-feather="menu"></i>
+          </button>
+        </div>
+        <div id="mobileMenu" class="hidden md:hidden bg-white dark:bg-gray-900 px-4 py-2 border-t border-gray-200 dark:border-gray-800">
+          <div class="flex flex-col space-y-3 py-2">
+            <a href="#home" class="nav-link">Home</a>
+            <a href="#about" class="nav-link">About</a>
+            <a href="#work" class="nav-link">Work</a>
+            <a href="#contact" class="nav-link">Contact</a>
+            <button id="darkModeToggleMobile" class="flex items-center nav-link">
+              <span class="mr-2">Toggle Theme</span>
+              <i data-feather="moon" class="hidden dark:block w-4 h-4"></i>
+              <i data-feather="sun" class="dark:hidden w-4 h-4"></i>
+            </button>
+          </div>
+        </div>
+      </nav>
+    `;
+
+    // Mobile menu toggle
+    const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
+    const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
+    
+    if (mobileMenuButton && mobileMenu) {
+      mobileMenuButton.addEventListener('click', () => {
+        mobileMenu.classList.toggle('hidden');
+        const icon = mobileMenuButton.querySelector('i');
+        if (mobileMenu.classList.contains('hidden')) {
+          icon.setAttribute('data-feather', 'menu');
+        } else {
+          icon.setAttribute('data-feather', 'x');
+        }
+        feather.replace();
+      });
+    }
+
+    // Dark mode toggle for mobile
+    const darkModeToggleMobile = this.shadowRoot.getElementById('darkModeToggleMobile');
+    if (darkModeToggleMobile) {
+      darkModeToggleMobile.addEventListener('click', () => {
+        document.documentElement.classList.toggle('dark');
+        localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+        feather.replace();
+      });
+    }
+
+    // Dark mode toggle for desktop
+    const darkModeToggle = this.shadowRoot.getElementById('darkModeToggle');
+    if (darkModeToggle) {
+      darkModeToggle.addEventListener('click', () => {
+        document.documentElement.classList.toggle('dark');
+        localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+        feather.replace();
+      });
+    }
+    // Initialize feather icons after content is loaded
+    document.addEventListener('DOMContentLoaded', () => {
+      feather.replace();
+    });
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/project-card.js

@@ -0,0 +1,57 @@
+class CustomProjectCard extends HTMLElement {
+  static get observedAttributes() {
+    return ['title', 'description', 'tags', 'image'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (this.shadowRoot) {
+      this.render();
+    }
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+  }
+
+  render() {
+    const title = this.getAttribute('title') || 'Project Title';
+    const description = this.getAttribute('description') || 'Project description goes here';
+    const tags = this.getAttribute('tags') || 'Design, Development';
+    const image = this.getAttribute('image') || 'http://static.photos/technology/640x360/1';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        .card {
+          transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .tag {
+          transition: background-color 0.3s ease;
+        }
+      </style>
+      <div class="card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
+        <div class="h-48 overflow-hidden">
+          <img src="${image}" alt="${title}" class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
+        </div>
+        <div class="p-6">
+          <h3 class="text-xl font-bold mb-2">${title}</h3>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">${description}</p>
+          <div class="flex flex-wrap gap-2">
+            ${tags.split(',').map(tag => `
+              <span class="tag px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">${tag.trim()}</span>
+            `).join('')}
+          </div>
+          <a href="#" class="mt-4 inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition">
+            View Project
+            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+          </a>
+        </div>
+      </div>
+    `;
+    // Initialize feather icons after content is loaded
+    document.addEventListener('DOMContentLoaded', () => {
+      feather.replace();
+    });
+  }
+}
+customElements.define('custom-project-card', CustomProjectCard);

index.html

@@ -1,19 +1,181 @@
-<!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>PixelPerfect Portfolio | Creative Showcase</title>
+    <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 src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/project-card.js"></script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
+    <custom-navbar></custom-navbar>
+
+    <main class="container mx-auto px-4 py-8 md:py-12">
+        <!-- Hero Section -->
+        <section id="home" class="min-h-[80vh] flex flex-col justify-center items-center text-center py-12">
+            <div class="w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border-4 border-indigo-500 mb-6">
+                <img src="http://static.photos/people/320x240/42" alt="Profile" class="w-full h-full object-cover">
+            </div>
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-indigo-600 dark:text-indigo-400">Alex</span></h1>
+            <h2 class="text-xl md:text-2xl text-gray-600 dark:text-gray-400 mb-6">UI/UX Designer & Frontend Developer</h2>
+            <div class="flex gap-4">
+                <a href="#work" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">View My Work</a>
+                <a href="#contact" class="px-6 py-3 border border-indigo-600 text-indigo-600 dark:text-indigo-400 rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition">Contact Me</a>
+            </div>
+        </section>
+
+        <!-- About Section -->
+        <section id="about" class="py-12 md:py-20">
+            <div class="max-w-4xl mx-auto">
+                <h2 class="text-3xl font-bold mb-8 text-center">About Me</h2>
+                <div class="grid md:grid-cols-2 gap-8 items-center">
+                    <div>
+                        <p class="mb-4 text-lg">I'm a passionate designer and developer with 5+ years of experience creating beautiful, functional digital experiences.</p>
+                        <p class="mb-6">My approach combines aesthetic sensibility with technical expertise to deliver solutions that users love. I specialize in responsive design, accessibility, and performance optimization.</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">UI Design</span>
+                            <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">UX Research</span>
+                            <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">HTML/CSS</span>
+                            <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">JavaScript</span>
+                            <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">React</span>
+                            <span class="px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">Figma</span>
+                        </div>
+                    </div>
+                    <div class="relative">
+                        <div class="bg-indigo-500 w-full h-80 rounded-xl overflow-hidden">
+                            <img src="http://static.photos/workspace/640x360/12" alt="Working" class="w-full h-full object-cover">
+                        </div>
+                        <div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg w-3/4">
+                            <h3 class="font-bold mb-2">Currently working at</h3>
+                            <p class="text-indigo-600 dark:text-indigo-400">Digital Creative Agency</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Work Section -->
+        <section id="work" class="py-12 md:py-20 bg-gray-100 dark:bg-gray-800 rounded-xl">
+            <div class="max-w-6xl mx-auto px-4">
+                <h2 class="text-3xl font-bold mb-8 text-center">Featured Projects</h2>
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <custom-project-card 
+                        title="E-commerce Redesign" 
+                        description="Complete UI/UX overhaul for fashion retailer" 
+                        tags="UI Design, UX Research, React"
+                        image="http://static.photos/retail/640x360/1">
+                    </custom-project-card>
+                    <custom-project-card 
+                        title="Health App" 
+                        description="Mobile application for fitness tracking" 
+                        tags="Mobile Design, Prototyping"
+                        image="http://static.photos/wellness/640x360/2">
+                    </custom-project-card>
+                    <custom-project-card 
+                        title="Corporate Website" 
+                        description="Responsive website for tech startup" 
+                        tags="Web Design, Development"
+                        image="http://static.photos/technology/640x360/3">
+                    </custom-project-card>
+                </div>
+                <div class="text-center mt-10">
+                    <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition">
+                        View All Projects
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Contact Section -->
+        <section id="contact" class="py-12 md:py-20">
+            <div class="max-w-4xl mx-auto">
+                <h2 class="text-3xl font-bold mb-8 text-center">Get In Touch</h2>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div>
+                        <h3 class="text-xl font-semibold mb-4">Contact Information</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-center">
+                                <i data-feather="mail" class="mr-4 text-indigo-600 dark:text-indigo-400"></i>
+                                <span>hello@example.com</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i data-feather="phone" class="mr-4 text-indigo-600 dark:text-indigo-400"></i>
+                                <span>+1 (555) 123-4567</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i data-feather="map-pin" class="mr-4 text-indigo-600 dark:text-indigo-400"></i>
+                                <span>San Francisco, CA</span>
+                            </div>
+                        </div>
+                        <div class="mt-8">
+                            <h3 class="text-xl font-semibold mb-4">Follow Me</h3>
+                            <div class="flex gap-4">
+                                <a href="#" class="p-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-indigo-100 dark:hover:bg-indigo-900 transition">
+                                    <i data-feather="twitter" class="text-indigo-600 dark:text-indigo-400"></i>
+                                </a>
+                                <a href="#" class="p-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-indigo-100 dark:hover:bg-indigo-900 transition">
+                                    <i data-feather="linkedin" class="text-indigo-600 dark:text-indigo-400"></i>
+                                </a>
+                                <a href="#" class="p-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-indigo-100 dark:hover:bg-indigo-900 transition">
+                                    <i data-feather="dribbble" class="text-indigo-600 dark:text-indigo-400"></i>
+                                </a>
+                                <a href="#" class="p-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-indigo-100 dark:hover:bg-indigo-900 transition">
+                                    <i data-feather="github" class="text-indigo-600 dark:text-indigo-400"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <form class="space-y-4">
+                            <div>
+                                <label for="name" class="block mb-1">Name</label>
+                                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                            </div>
+                            <div>
+                                <label for="email" class="block mb-1">Email</label>
+                                <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                            </div>
+                            <div>
+                                <label for="message" class="block mb-1">Message</label>
+                                <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
+                            </div>
+                            <button type="submit" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition w-full">Send Message</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            feather.replace();
+            
+            // Dark mode toggle
+const darkModeToggle = document.getElementById('darkModeToggle');
+        if (darkModeToggle) {
+            darkModeToggle.addEventListener('click', () => {
+                document.documentElement.classList.toggle('dark');
+                localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+            });
+        }
+
+        // Check for saved dark mode preference
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.documentElement.classList.add('dark');
+            // Check for saved dark mode preference
+            if (localStorage.getItem('darkMode') === 'true') {
+                document.documentElement.classList.add('dark');
+            }
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,44 @@
+
+// Intersection Observer for section animations
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+        }
+    });
+}, {
+    threshold: 0.1
+});
+document.querySelectorAll('section').forEach(section => {
+    observer.observe(section);
+});
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        const targetId = this.getAttribute('href');
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+            targetElement.scrollIntoView({
+                behavior: 'smooth'
+            });
+        }
+    });
+});
+
+// Close mobile menu when clicking a link
+document.addEventListener('click', function(e) {
+    if (e.target.matches('a[href^="#"]')) {
+        const mobileMenu = document.querySelector('custom-navbar').shadowRoot.getElementById('mobileMenu');
+        if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
+            mobileMenu.classList.add('hidden');
+            const menuButton = document.querySelector('custom-navbar').shadowRoot.getElementById('mobileMenuButton');
+            if (menuButton) {
+                const icon = menuButton.querySelector('i');
+                icon.setAttribute('data-feather', 'menu');
+                feather.replace();
+            }
+        }
+    }
+});

style.css

@@ -1,28 +1,63 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
+}
+
+/* Smooth scrolling for anchor links */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+.dark ::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+    background: #444;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #666;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Animation for sections */
+section {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+section.visible {
+    opacity: 1;
+    transform: translateY(0);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Project card hover effect */
+.custom-project-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
+
+.dark .custom-project-card:hover {
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+}