index.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>