Nana

README.md

@@ -1,10 +1,13 @@
 ---
-title: Nana S Nebula
-emoji: 🐨
-colorFrom: purple
-colorTo: pink
+title: Nana's Nebula 🌌
+colorFrom: green
+colorTo: purple
+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,121 @@
+class FooterComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: rgba(15, 23, 42, 0.9);
+          border-top: 1px solid rgba(148, 163, 184, 0.1);
+          padding: 3rem 0;
+          margin-top: 4rem;
+        }
+        
+        .footer-content {
+          max-width: 72rem;
+          margin: 0 auto;
+          padding: 0 1rem;
+          text-align: center;
+        }
+        
+        .social-links {
+          display: flex;
+          justify-content: center;
+          gap: 1.5rem;
+          margin-bottom: 2rem;
+        }
+        
+        .social-link {
+          width: 3rem;
+          height: 3rem;
+          border-radius: 9999px;
+          background: rgba(30, 41, 59, 0.5);
+          border: 1px solid rgba(148, 163, 184, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #94a3b8;
+          text-decoration: none;
+          transition: all 0.3s ease;
+        }
+        
+        .social-link:hover {
+          background: linear-gradient(135deg, #6366f1, #a855f7);
+          color: white;
+          border-color: transparent;
+          transform: translateY(-3px);
+        }
+        
+        .social-link svg {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+        
+        .copyright {
+          color: #64748b;
+          font-size: 0.875rem;
+        }
+        
+        .copyright a {
+          color: #94a3b8;
+          text-decoration: none;
+          transition: color 0.3s ease;
+        }
+        
+        .copyright a:hover {
+          color: #6366f1;
+        }
+        
+        .heart {
+          display: inline-block;
+          color: #ef4444;
+          animation: heartbeat 1.5s ease-in-out infinite;
+        }
+        
+        @keyframes heartbeat {
+          0%, 100% { transform: scale(1); }
+          50% { transform: scale(1.1); }
+        }
+      </style>
+      
+      <footer>
+        <div class="footer-content">
+          <div class="social-links">
+            <a href="#" class="social-link" aria-label="GitHub">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+              </svg>
+            </a>
+            <a href="#" class="social-link" aria-label="LinkedIn">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                <rect x="2" y="9" width="4" height="12"></rect>
+                <circle cx="4" cy="4" r="2"></circle>
+              </svg>
+            </a>
+            <a href="#" class="social-link" aria-label="Twitter">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
+              </svg>
+            </a>
+            <a href="#" class="social-link" aria-label="Dribbble">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63.82-8.67 3.67"></path>
+              </svg>
+            </a>
+          </div>
+          
+          <div class="copyright">
+            <p>&copy; 2024 Nana. All rights reserved. | Made with <span class="heart">❤️</span> and <a href="#">Coffee</a></p>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('footer-component', FooterComponent);

components/navbar.js

@@ -0,0 +1,171 @@
+class NavComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 100;
+        }
+        
+        nav {
+          background: rgba(15, 23, 42, 0.8);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+          transition: all 0.3s ease;
+        }
+        
+        .nav-container {
+          max-width: 72rem;
+          margin: 0 auto;
+          padding: 0 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 5rem;
+        }
+        
+        .logo {
+          font-size: 1.5rem;
+          font-weight: bold;
+          background: linear-gradient(135deg, #6366f1, #a855f7);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+        }
+        
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+          align-items: center;
+        }
+        
+        .nav-link {
+          color: #94a3b8;
+          text-decoration: none;
+          font-weight: 500;
+          padding: 0.5rem 0;
+          position: relative;
+          transition: color 0.3s ease;
+        }
+        
+        .nav-link:hover, .nav-link.active {
+          color: #6366f1;
+        }
+        
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: linear-gradient(90deg, #6366f1, #a855f7);
+          transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover::after, .nav-link.active::after {
+          width: 100%;
+        }
+        
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: #94a3b8;
+          cursor: pointer;
+          padding: 0.5rem;
+        }
+        
+        .mobile-menu-btn:hover {
+          color: #6366f1;
+        }
+        
+        .mobile-menu {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          background: rgba(15, 23, 42, 0.95);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+          padding: 1.5rem;
+          display: none;
+        }
+        
+        .mobile-menu:not(.hidden) {
+          display: block;
+        }
+        
+        .mobile-links {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        
+        .mobile-links a {
+          color: #e2e8f0;
+          text-decoration: none;
+          font-size: 1.125rem;
+          padding: 0.5rem 0;
+          transition: color 0.3s ease;
+        }
+        
+        .mobile-links a:hover {
+          color: #6366f1;
+        }
+        
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+          
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      
+      <nav>
+        <div class="nav-container">
+          <a href="#home" class="logo">🌌 Nana</a>
+          
+          <div class="nav-links">
+            <a href="#about" class="nav-link">About</a>
+            <a href="#skills" class="nav-link">Skills</a>
+            <a href="#projects" class="nav-link">Projects</a>
+            <a href="#contact" class="nav-link">Contact</a>
+          </div>
+          
+          <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="3" y1="12" x2="21" y2="12"></line>
+              <line x1="3" y1="6" x2="21" y2="6"></line>
+              <line x1="3" y1="18" x2="21" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        
+        <div id="mobile-menu" class="mobile-menu hidden">
+          <div class="mobile-links">
+            <a href="#about" onclick="toggleMobileMenu()">About</a>
+            <a href="#skills" onclick="toggleMobileMenu()">Skills</a>
+            <a href="#projects" onclick="toggleMobileMenu()">Projects</a>
+            <a href="#contact" onclick="toggleMobileMenu()">Contact</a>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+
+customElements.define('nav-component', NavComponent);

components/project-card.js

@@ -0,0 +1,188 @@
+class ProjectCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes() {
+    return ['title', 'description', 'image', 'tags', 'demo-url', 'code-url'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const title = this.getAttribute('title') || '';
+    const description = this.getAttribute('description') || '';
+    const image = this.getAttribute('image') || '';
+    const tags = JSON.parse(this.getAttribute('tags') || '[]');
+    const demoUrl = this.getAttribute('demo-url') || '#';
+    const codeUrl = this.getAttribute('code-url') || '#';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          animation: fadeInUp 0.6s ease-out both;
+        }
+        
+        .project-card {
+          position: relative;
+          background: rgba(30, 41, 59, 0.5);
+          border: 1px solid rgba(148, 163, 184, 0.1);
+          border-radius: 1.5rem;
+          overflow: hidden;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .project-card:hover {
+          transform: translateY(-8px) scale(1.02);
+          border-color: rgba(99, 102, 241, 0.3);
+          box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
+        }
+        
+        .project-image {
+          width: 100%;
+          height: 200px;
+          object-fit: cover;
+          transition: transform 0.4s ease;
+        }
+        
+        .project-card:hover .project-image {
+          transform: scale(1.05);
+        }
+        
+        .project-content {
+          padding: 1.5rem;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
+        
+        .project-title {
+          font-size: 1.25rem;
+          font-weight: 600;
+          margin-bottom: 0.75rem;
+          color: #f1f5f9;
+        }
+        
+        .project-description {
+          color: #94a3b8;
+          margin-bottom: 1rem;
+          flex: 1;
+          line-height: 1.6;
+        }
+        
+        .project-tags {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+          margin-bottom: 1.5rem;
+        }
+        
+        .tag {
+          padding: 0.25rem 0.75rem;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          font-weight: 500;
+          background: rgba(99, 102, 241, 0.1);
+          color: #c7d2fe;
+          border: 1px solid rgba(99, 102, 241, 0.2);
+        }
+        
+        .project-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: auto;
+        }
+        
+        .project-link {
+          flex: 1;
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
+          text-decoration: none;
+          font-weight: 500;
+          font-size: 0.875rem;
+          text-align: center;
+          transition: all 0.3s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+        }
+        
+        .demo-link {
+          background: linear-gradient(135deg, #6366f1, #a855f7);
+          color: white;
+        }
+        
+        .demo-link:hover {
+          opacity: 0.9;
+          transform: translateY(-1px);
+        }
+        
+        .code-link {
+          background: rgba(30, 41, 59, 0.8);
+          color: #c7d2fe;
+          border: 1px solid rgba(99, 102, 241, 0.3);
+        }
+        
+        .code-link:hover {
+          background: rgba(99, 102, 241, 0.1);
+          color: #e0e7ff;
+        }
+        
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      </style>
+      
+      <div class="project-card">
+        <img src="${image}" alt="${title}" class="project-image">
+        
+        <div class="project-content">
+          <h3 class="project-title">${title}</h3>
+          <p class="project-description">${description}</p>
+          
+          <div class="project-tags">
+            ${tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+          </div>
+          
+          <div class="project-links">
+            <a href="${demoUrl}" class="project-link demo-link">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                <polyline points="15 3 21 3 21 9"></polyline>
+                <line x1="10" y1="14" x2="21" y2="3"></line>
+              </svg>
+              Live Demo
+            </a>
+            <a href="${codeUrl}" class="project-link code-link">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+              </svg>
+              Code
+            </a>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('project-card', ProjectCard);

components/skill-chip.js

@@ -0,0 +1,85 @@
+class SkillChip extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes() {
+    return ['name', 'color'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  getColorClasses(color) {
+    const colorMap = {
+      blue: { bg: 'bg-blue-500/10', text: 'text-blue-400', border: 'border-blue-500/20' },
+      indigo: { bg: 'bg-indigo-500/10', text: 'text-indigo-400', border: 'border-indigo-500/20' },
+      purple: { bg: 'bg-purple-500/10', text: 'text-purple-400', border: 'border-purple-500/20' },
+      pink: { bg: 'bg-pink-500/10', text: 'text-pink-400', border: 'border-pink-500/20' },
+      green: { bg: 'bg-green-500/10', text: 'text-green-400', border: 'border-green-500/20' },
+      yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', border: 'border-yellow-500/20' },
+      red: { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/20' },
+      orange: { bg: 'bg-orange-500/10', text: 'text-orange-400', border: 'border-orange-500/20' },
+      cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400', border: 'border-cyan-500/20' },
+      emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/20' },
+      slate: { bg: 'bg-slate-500/10', text: 'text-slate-400', border: 'border-slate-500/20' },
+      default: { bg: 'bg-slate-500/10', text: 'text-slate-400', border: 'border-slate-500/20' }
+    };
+    
+    return colorMap[color] || colorMap.default;
+  }
+
+  render() {
+    const name = this.getAttribute('name') || '';
+    const color = this.getAttribute('color') || 'slate';
+    const colors = this.getColorClasses(color);
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          animation: fadeIn 0.5s ease-out both;
+        }
+        
+        .chip {
+          padding: 0.375rem 0.875rem;
+          border-radius: 9999px;
+          font-size: 0.875rem;
+          font-weight: 500;
+          transition: all 0.3s ease;
+          cursor: default;
+          border-width: 1px;
+          backdrop-filter: blur(4px);
+        }
+        
+        .chip:hover {
+          transform: translateY(-2px);
+          filter: brightness(1.2);
+        }
+        
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: scale(0.8);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+      </style>
+      
+      <span class="chip ${colors.bg} ${colors.text} ${colors.border}">
+        ${name}
+      </span>
+    `;
+  }
+}
+
+customElements.define('skill-chip', SkillChip);

index.html

@@ -1,19 +1,275 @@
-<!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>Nana | Creative Developer</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌌</text></svg>">
+    <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>
+</head>
+<body class="bg-slate-900 text-white antialiased overflow-x-hidden">
+    <!-- Loading Screen -->
+    <div id="loader" class="fixed inset-0 bg-slate-900 z-50 flex items-center justify-center transition-opacity duration-500">
+        <div class="relative">
+            <div class="w-16 h-16 rounded-full border-4 border-indigo-500/20 border-t-indigo-500 animate-spin"></div>
+            <div class="absolute inset-0 w-16 h-16 rounded-full border-4 border-transparent border-t-purple-500 animate-spin" style="animation-duration: 1.5s;"></div>
+        </div>
+    </div>
+
+    <!-- Animated Background -->
+    <div class="fixed inset-0 -z-10 opacity-30">
+        <div id="particles" class="w-full h-full"></div>
+    </div>
+
+    <!-- Navigation -->
+    <nav-component></nav-component>
+
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center px-4 pt-20">
+        <div class="max-w-6xl w-full grid lg:grid-cols-2 gap-12 items-center">
+            <div class="space-y-8 fade-in-up">
+                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/10 border border-indigo-500/20 backdrop-blur-sm">
+                    <div class="w-2 h-2 bg-indigo-500 rounded-full animate-pulse"></div>
+                    <span class="text-indigo-400 text-sm font-medium">Available for freelance</span>
+                </div>
+                <h1 class="text-5xl md:text-7xl font-bold leading-tight">
+                    <span class="gradient-text">Nana</span>
+                    <br />
+                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-slate-300 to-slate-400">Crafts Digital</span>
+                    <br />
+                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">Experiences</span>
+                </h1>
+                <p class="text-slate-400 text-lg max-w-lg">
+                    Full-stack developer & UI/UX enthusiast creating beautiful, functional web applications 
+                    that bridge the gap between design and technology.
+                </p>
+                <div class="flex flex-wrap gap-4">
+                    <a href="#projects" class="group relative overflow-hidden px-8 py-3 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 font-medium transition-all duration-300 hover:shadow-lg hover:shadow-indigo-500/25">
+                        <span class="relative z-10 flex items-center gap-2">
+                            View Projects
+                            <i data-feather="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
+                        </span>
+                    </a>
+                    <a href="#contact" class="group px-8 py-3 rounded-full border border-slate-600 font-medium transition-all duration-300 hover:border-indigo-500 hover:bg-indigo-500/5 flex items-center gap-2">
+                        <i data-feather="message-circle" class="w-4 h-4"></i>
+                        Get in Touch
+                    </a>
+                </div>
+            </div>
+            <div class="relative fade-in-up" style="animation-delay: 0.2s;">
+                <div class="floating">
+                    <img src="http://static.photos/people/640x360/42" alt="Nana Portrait" 
+                         class="w-full max-w-lg mx-auto rounded-3xl border border-slate-700 shadow-2xl shadow-indigo-500/20">
+                </div>
+                <div class="absolute -top-4 -right-4 w-72 h-72 bg-indigo-500/20 rounded-full blur-3xl -z-10"></div>
+                <div class="absolute -bottom-4 -left-4 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl -z-10"></div>
+            </div>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="py-32 px-4">
+        <div class="max-w-6xl mx-auto">
+            <div class="text-center mb-16 fade-in-on-scroll">
+                <h2 class="text-4xl md:text-6xl font-bold mb-4">
+                    <span class="gradient-text">About Me</span>
+                </h2>
+                <p class="text-slate-400 max-w-2xl mx-auto">
+                    Passionate developer with a love for clean code and stunning interfaces
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="md:col-span-1 fade-in-on-scroll">
+                    <div class="sticky top-24">
+                        <img src="http://static.photos/workspace/640x360/88" alt="Workspace" 
+                             class="rounded-2xl border border-slate-700 shadow-xl">
+                        <div class="mt-6 space-y-4">
+                            <div class="flex items-center gap-3 text-slate-400">
+                                <i data-feather="map-pin" class="w-5 h-5 text-indigo-500"></i>
+                                <span>San Francisco, CA</span>
+                            </div>
+                            <div class="flex items-center gap-3 text-slate-400">
+                                <i data-feather="calendar" class="w-5 h-5 text-indigo-500"></i>
+                                <span>5+ Years Experience</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="md:col-span-2 space-y-6 fade-in-on-scroll">
+                    <p class="text-slate-300 text-lg leading-relaxed">
+                        Hi! I'm Nana, a creative developer who believes code is art. My journey started with a 
+                        curiosity about how things work on the internet, which led me down the rabbit hole of 
+                        web development.
+                    </p>
+                    <p class="text-slate-400 leading-relaxed">
+                        I specialize in building performant, accessible, and visually stunning applications. 
+                        My stack includes React, Node.js, TypeScript, and a passion for CSS animations. When 
+                        I'm not coding, you'll find me exploring new design trends, contributing to open-source, 
+                        or capturing moments through photography.
+                    </p>
+                    <div class="grid sm:grid-cols-2 gap-4 pt-4">
+                        <div class="p-4 rounded-xl bg-slate-800/50 border border-slate-700 backdrop-blur-sm">
+                            <div class="text-3xl font-bold gradient-text">50+</div>
+                            <div class="text-slate-400">Projects Completed</div>
+                        </div>
+                        <div class="p-4 rounded-xl bg-slate-800/50 border border-slate-700 backdrop-blur-sm">
+                            <div class="text-3xl font-bold gradient-text">30+</div>
+                            <div class="text-slate-400">Happy Clients</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Skills Section -->
+    <section id="skills" class="py-32 px-4 bg-slate-800/30">
+        <div class="max-w-6xl mx-auto">
+            <div class="text-center mb-16 fade-in-on-scroll">
+                <h2 class="text-4xl md:text-6xl font-bold mb-4">
+                    <span class="gradient-text">Skills & Tools</span>
+                </h2>
+                <p class="text-slate-400 max-w-2xl mx-auto">
+                    Technologies I work with to bring ideas to life
+                </p>
+            </div>
+            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="skill-category fade-in-on-scroll">
+                    <h3 class="text-xl font-semibold mb-4 text-indigo-400 flex items-center gap-2">
+                        <i data-feather="code" class="w-5 h-5"></i>
+                        Frontend
+                    </h3>
+                    <div class="flex flex-wrap gap-2">
+                        <skill-chip name="React" color="blue"></skill-chip>
+                        <skill-chip name="TypeScript" color="indigo"></skill-chip>
+                        <skill-chip name="Next.js" color="slate"></skill-chip>
+                        <skill-chip name="Tailwind" color="cyan"></skill-chip>
+                    </div>
+                </div>
+                <div class="skill-category fade-in-on-scroll">
+                    <h3 class="text-xl font-semibold mb-4 text-purple-400 flex items-center gap-2">
+                        <i data-feather="server" class="w-5 h-5"></i>
+                        Backend
+                    </h3>
+                    <div class="flex flex-wrap gap-2">
+                        <skill-chip name="Node.js" color="green"></skill-chip>
+                        <skill-chip name="PostgreSQL" color="blue"></skill-chip>
+                        <skill-chip name="Python" color="yellow"></skill-chip>
+                        <skill-chip name="Redis" color="red"></skill-chip>
+                    </div>
+                </div>
+                <div class="skill-category fade-in-on-scroll">
+                    <h3 class="text-xl font-semibold mb-4 text-pink-400 flex items-center gap-2">
+                        <i data-feather="tool" class="w-5 h-5"></i>
+                        Tools
+                    </h3>
+                    <div class="flex flex-wrap gap-2">
+                        <skill-chip name="Git" color="orange"></skill-chip>
+                        <skill-chip name="Docker" color="blue"></skill-chip>
+                        <skill-chip name="Figma" color="purple"></skill-chip>
+                        <skill-chip name="AWS" color="yellow"></skill-chip>
+                    </div>
+                </div>
+                <div class="skill-category fade-in-on-scroll">
+                    <h3 class="text-xl font-semibold mb-4 text-emerald-400 flex items-center gap-2">
+                        <i data-feather="zap" class="w-5 h-5"></i>
+                        Other
+                    </h3>
+                    <div class="flex flex-wrap gap-2">
+                        <skill-chip name="GraphQL" color="pink"></skill-chip>
+                        <skill-chip name="WebGL" color="indigo"></skill-chip>
+                        <skill-chip name="Three.js" color="slate"></skill-chip>
+                        <skill-chip name="Motion" color="red"></skill-chip>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Projects Section -->
+    <section id="projects" class="py-32 px-4">
+        <div class="max-w-6xl mx-auto">
+            <div class="text-center mb-16 fade-in-on-scroll">
+                <h2 class="text-4xl md:text-6xl font-bold mb-4">
+                    <span class="gradient-text">Featured Projects</span>
+                </h2>
+                <p class="text-slate-400 max-w-2xl mx-auto">
+                    A selection of recent work I'm proud of
+                </p>
+            </div>
+            <div id="projects-grid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Projects will be injected here by JavaScript -->
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact" class="py-32 px-4 bg-gradient-to-b from-slate-900 to-slate-800">
+        <div class="max-w-4xl mx-auto text-center">
+            <div class="fade-in-on-scroll">
+                <h2 class="text-4xl md:text-6xl font-bold mb-4">
+                    <span class="gradient-text">Let's Connect</span>
+                </h2>
+                <p class="text-slate-400 mb-12">
+                    Have a project in mind? Let's create something amazing together.
+                </p>
+                <div class="grid sm:grid-cols-3 gap-8 mb-12">
+                    <a href="mailto:hello@nana.dev" class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700 backdrop-blur-sm hover:border-indigo-500 transition-all duration-300 hover:-translate-y-1">
+                        <i data-feather="mail" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                        <div class="font-medium">Email</div>
+                        <div class="text-slate-400 text-sm group-hover:text-indigo-400 transition-colors">hello@nana.dev</div>
+                    </a>
+                    <a href="#" class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700 backdrop-blur-sm hover:border-indigo-500 transition-all duration-300 hover:-translate-y-1">
+                        <i data-feather="github" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                        <div class="font-medium">GitHub</div>
+                        <div class="text-slate-400 text-sm group-hover:text-indigo-400 transition-colors">@nana-dev</div>
+                    </a>
+                    <a href="#" class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700 backdrop-blur-sm hover:border-indigo-500 transition-all duration-300 hover:-translate-y-1">
+                        <i data-feather="linkedin" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                        <div class="font-medium">LinkedIn</div>
+                        <div class="text-slate-400 text-sm group-hover:text-indigo-400 transition-colors">nana-creative</div>
+                    </a>
+                </div>
+                <a href="mailto:hello@nana.dev" class="group inline-flex items-center gap-2 px-8 py-4 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 font-medium text-lg transition-all duration-300 hover:shadow-lg hover:shadow-indigo-500/25">
+                    Start a Project
+                    <i data-feather="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer-component></footer-component>
+
+    <!-- Floating Action Button -->
+    <button id="theme-toggle" class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-slate-800 border border-slate-700 backdrop-blur-sm flex items-center justify-center hover:border-indigo-500 transition-all duration-300 hover:scale-110 z-40">
+        <i data-feather="moon" class="w-5 h-5 text-indigo-400 hidden dark-icon"></i>
+        <i data-feather="sun" class="w-5 h-5 text-yellow-400 light-icon"></i>
+    </button>
+
+    <!-- Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/project-card.js"></script>
+    <script src="components/skill-chip.js"></script>
+    <script src="script.js"></script>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        
+        // Hide loader after page loads
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                document.getElementById('loader').style.opacity = '0';
+                setTimeout(() => {
+                    document.getElementById('loader').style.display = 'none';
+                }, 500);
+            }, 1000);
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,199 @@
+// Theme Management
+const themeToggle = document.getElementById('theme-toggle');
+const htmlElement = document.documentElement;
+const darkIcon = document.querySelector('.dark-icon');
+const lightIcon = document.querySelector('.light-icon');
+
+// Check for saved theme preference or default to dark
+const currentTheme = localStorage.getItem('theme') || 'dark';
+if (currentTheme === 'light') {
+  htmlElement.classList.add('light');
+  darkIcon.classList.remove('hidden');
+  lightIcon.classList.add('hidden');
+}
+
+themeToggle.addEventListener('click', () => {
+  const isLight = htmlElement.classList.contains('light');
+  
+  if (isLight) {
+    htmlElement.classList.remove('light');
+    darkIcon.classList.add('hidden');
+    lightIcon.classList.remove('hidden');
+    localStorage.setItem('theme', 'dark');
+  } else {
+    htmlElement.classList.add('light');
+    darkIcon.classList.remove('hidden');
+    lightIcon.classList.add('hidden');
+    localStorage.setItem('theme', 'light');
+  }
+});
+
+// Intersection Observer for scroll animations
+const observerOptions = {
+  threshold: 0.1,
+  rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.classList.add('visible');
+    }
+  });
+}, observerOptions);
+
+// Observe all fade-in elements
+document.addEventListener('DOMContentLoaded', () => {
+  const fadeElements = document.querySelectorAll('.fade-in-on-scroll');
+  fadeElements.forEach(el => observer.observe(el));
+});
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  anchor.addEventListener('click', function (e) {
+    e.preventDefault();
+    const target = document.querySelector(this.getAttribute('href'));
+    if (target) {
+      target.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+      
+      // Update URL without jumping
+      history.pushState(null, null, this.getAttribute('href'));
+    }
+  });
+});
+
+// Mock Projects Data (In real app, fetch from API)
+const mockProjects = [
+  {
+    title: "Cosmic Dashboard",
+    description: "A real-time analytics dashboard with stunning visualizations and smooth animations.",
+    image: "http://static.photos/technology/640x360/123",
+    tags: ["React", "D3.js", "Node.js"],
+    demoUrl: "#",
+    codeUrl: "#"
+  },
+  {
+    title: "Nebula Commerce",
+    description: "Modern e-commerce platform with AR product preview and AI recommendations.",
+    image: "http://static.photos/retail/640x360/456",
+    tags: ["Next.js", "Stripe", "PostgreSQL"],
+    demoUrl: "#",
+    codeUrl: "#"
+  },
+  {
+    title: "Stellar Chat",
+    description: "Real-time messaging app with end-to-end encryption and video calls.",
+    image: "http://static.photos/people/640x360/789",
+    tags: ["TypeScript", "WebRTC", "Socket.io"],
+    demoUrl: "#",
+    codeUrl: "#"
+  },
+  {
+    title: "Aurora CMS",
+    description: "Headless CMS with visual content modeling and GraphQL API.",
+    image: "http://static.photos/office/640x360/101",
+    tags: ["Vue.js", "GraphQL", "MongoDB"],
+    demoUrl: "#",
+    codeUrl: "#"
+  },
+  {
+    title: "Lunar Tasks",
+    description: "Minimalist task manager with focus mode and productivity insights.",
+    image: "http://static.photos/minimal/640x360/202",
+    tags: ["React", "PWA", "Firebase"],
+    demoUrl: "#",
+    codeUrl: "#"
+  },
+  {
+    title: "Quantum Blog",
+    description: "Lightning-fast blog platform with MDX support and theme switching.",
+    image: "http://static.photos/nature/640x360/303",
+    tags: ["Remix", "Prisma", "Tailwind"],
+    demoUrl: "#",
+    codeUrl: "#"
+  }
+];
+
+// Inject projects into the grid
+function loadProjects() {
+  const projectsGrid = document.getElementById('projects-grid');
+  
+  mockProjects.forEach((project, index) => {
+    const projectCard = document.createElement('project-card');
+    projectCard.setAttribute('title', project.title);
+    projectCard.setAttribute('description', project.description);
+    projectCard.setAttribute('image', project.image);
+    projectCard.setAttribute('tags', JSON.stringify(project.tags));
+    projectCard.setAttribute('demo-url', project.demoUrl);
+    projectCard.setAttribute('code-url', project.codeUrl);
+    projectCard.style.animationDelay = `${index * 0.1}s`;
+    projectsGrid.appendChild(projectCard);
+  });
+}
+
+// Initialize projects when DOM is ready
+document.addEventListener('DOMContentLoaded', loadProjects);
+
+// Add parallax effect to hero section
+window.addEventListener('scroll', () => {
+  const scrolled = window.pageYOffset;
+  const parallax = document.querySelector('#particles');
+  if (parallax) {
+    parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
+  }
+});
+
+// Add active state to nav links based on scroll position
+window.addEventListener('scroll', () => {
+  const sections = document.querySelectorAll('section[id]');
+  const navLinks = document.querySelectorAll('.nav-link');
+  
+  let current = '';
+  sections.forEach(section => {
+    const sectionTop = section.offsetTop;
+    const sectionHeight = section.clientHeight;
+    if (scrollY >= sectionTop - 200) {
+      current = section.getAttribute('id');
+    }
+  });
+  
+  navLinks.forEach(link => {
+    link.classList.remove('active');
+    if (link.getAttribute('href') === `#${current}`) {
+      link.classList.add('active');
+    }
+  });
+});
+
+// Create dynamic particles
+function createParticles() {
+  const container = document.getElementById('particles');
+  if (!container) return;
+  
+  for (let i = 0; i < 50; i++) {
+    const particle = document.createElement('div');
+    particle.style.position = 'absolute';
+    particle.style.width = Math.random() * 4 + 'px';
+    particle.style.height = particle.style.width;
+    particle.style.backgroundColor = Math.random() > 0.5 ? 'rgba(99, 102, 241, 0.5)' : 'rgba(168, 85, 247, 0.5)';
+    particle.style.borderRadius = '50%';
+    particle.style.left = Math.random() * 100 + '%';
+    particle.style.top = Math.random() * 100 + '%';
+    particle.style.animation = `float ${Math.random() * 10 + 10}s infinite ease-in-out`;
+    particle.style.animationDelay = Math.random() * 5 + 's';
+    container.appendChild(particle);
+  }
+}
+
+// Initialize particles
+document.addEventListener('DOMContentLoaded', createParticles);
+
+// Mobile menu toggle (for navbar component)
+window.toggleMobileMenu = function() {
+  const menu = document.getElementById('mobile-menu');
+  menu.classList.toggle('hidden');
+  menu.classList.toggle('mobile-menu-enter');
+};

style.css

@@ -1,28 +1,175 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom Animations & Effects */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  body {
+    @apply bg-slate-900 text-white antialiased;
+  }
+}
+
+@layer components {
+  .gradient-text {
+    @apply text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-purple-500;
+  }
+  
+  .fade-in-up {
+    animation: fadeInUp 0.8s ease-out both;
+  }
+  
+  .fade-in-on-scroll {
+    @apply opacity-0 translate-y-8;
+    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .fade-in-on-scroll.visible {
+    @apply opacity-100 translate-y-0;
+  }
+  
+  .floating {
+    animation: float 6s ease-in-out infinite;
+  }
+  
+  .skill-category {
+    @apply p-6 rounded-2xl bg-slate-800/50 border border-slate-700 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-indigo-500/50;
+  }
+}
+
+/* Particle Background */
+#particles {
+  background-image: 
+    radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
+  animation: particleFloat 20s infinite ease-in-out;
+}
+
+/* Keyframes */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes particleFloat {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(-20px, -30px) scale(1.05);
+  }
+  66% {
+    transform: translate(20px, -10px) scale(0.95);
+  }
+}
+
+/* Glassmorphism Enhancement */
+.glass {
+  background: rgba(30, 41, 59, 0.4);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(15, 23, 42, 0.5);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #6366f1, #a855f7);
+  border-radius: 5px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #818cf8, #c084fc);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Text Selection */
+::selection {
+  background: rgba(99, 102, 241, 0.3);
+  color: #e2e8f0;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Focus Styles */
+a:focus, button:focus {
+  outline: 2px solid rgba(99, 102, 241, 0.5);
+  outline-offset: 2px;
 }
+
+/* Mobile Menu Animation */
+.mobile-menu-enter {
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Project Card Hover Effects */
+.project-card {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.project-card:hover {
+  transform: translateY(-8px) scale(1.02);
+}
+
+.project-card .project-overlay {
+  opacity: 0;
+  transition: all 0.4s ease;
+}
+
+.project-card:hover .project-overlay {
+  opacity: 1;
+}
+
+/* Theme Toggle Animation */
+#theme-toggle i {
+  transition: all 0.3s ease;
+}
+
+#theme-toggle:hover i {
+  transform: rotate(180deg);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .gradient-text {
+    font-size: 3rem;
+  }
+  
+  .skill-category {
+    @apply p-4;
+  }
+}