Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kim YG | Creative Developer</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 src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#7c3aed', // Violet-600 | |
| secondary: '#2dd4bf', // Teal-400 | |
| dark: '#0f172a', // Slate-900 | |
| darker: '#020617', // Slate-950 | |
| surface: '#1e293b', // Slate-800 | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-darker text-slate-200 font-sans antialiased selection:bg-primary selection:text-white overflow-x-hidden"> | |
| <!-- Background Elements --> | |
| <div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none"> | |
| <div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 rounded-full blur-[120px] animate-pulse"></div> | |
| <div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/10 rounded-full blur-[120px]"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Main Content --> | |
| <main class="relative z-10"> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center px-6 pt-20"> | |
| <div class="max-w-5xl w-full grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-6 fade-in-section"> | |
| <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-surface/50 border border-white/10 text-sm text-secondary font-medium"> | |
| <span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span> | |
| Available for hire | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold tracking-tight text-white"> | |
| Building <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">Digital</span> Experiences. | |
| </h1> | |
| <p class="text-lg text-slate-400 max-w-lg leading-relaxed"> | |
| I'm Kim YG, a passionate Front-End Developer & UI/UX Designer. I transform ideas into elegant, responsive, and user-centric websites. | |
| </p> | |
| <div class="flex flex-wrap gap-4 pt-4"> | |
| <a href="#projects" class="px-8 py-3 bg-primary hover:bg-violet-700 text-white font-semibold rounded-lg shadow-lg shadow-primary/25 transition-all hover:-translate-y-1"> | |
| View My Work | |
| </a> | |
| <a href="#contact" class="px-8 py-3 bg-surface hover:bg-slate-700 border border-white/10 text-white font-semibold rounded-lg transition-all hover:-translate-y-1"> | |
| Contact Me | |
| </a> | |
| </div> | |
| </div> | |
| <div class="relative flex justify-center fade-in-section delay-100"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80"> | |
| <div class="absolute inset-0 bg-gradient-to-tr from-primary to-secondary rounded-full blur-2xl opacity-40 animate-pulse"></div> | |
| <img src="http://static.photos/people/640x640/12" alt="Profile" class="relative w-full h-full object-cover rounded-full border-4 border-surface/50 shadow-2xl"> | |
| <!-- Floating Badge --> | |
| <div class="absolute -bottom-4 -right-4 bg-surface border border-white/10 p-4 rounded-xl shadow-xl flex items-center gap-3 animate-bounce"> | |
| <div class="bg-green-500/20 p-2 rounded-lg text-green-400"> | |
| <i data-feather="code"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-slate-400">Experience</p> | |
| <p class="font-bold text-white">5+ Years</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-24 px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16 fade-in-section"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">About Me</h2> | |
| <div class="h-1 w-20 bg-gradient-to-r from-primary to-secondary mx-auto rounded-full"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center bg-surface/30 backdrop-blur-sm border border-white/5 p-8 md:p-12 rounded-3xl fade-in-section"> | |
| <div> | |
| <img src="http://static.photos/workspace/1024x576/45" alt="Workspace" class="rounded-2xl shadow-lg border border-white/10 w-full object-cover h-64 md:h-80"> | |
| </div> | |
| <div class="space-y-6"> | |
| <h3 class="text-2xl font-bold text-white">Who am I?</h3> | |
| <p class="text-slate-400 leading-relaxed"> | |
| I am a dedicated developer with a keen eye for design. My journey began with a curiosity for how things work on the web, which quickly turned into a passion for creating seamless user interfaces. | |
| </p> | |
| <p class="text-slate-400 leading-relaxed"> | |
| I specialize in JavaScript frameworks, modern CSS, and creating accessible interfaces. When I'm not coding, I'm exploring new design trends or contributing to open-source projects. | |
| </p> | |
| <!-- Stats --> | |
| <div class="grid grid-cols-3 gap-4 pt-4"> | |
| <div class="text-center p-4 bg-darker/50 rounded-xl border border-white/5"> | |
| <span class="block text-3xl font-bold text-primary">50+</span> | |
| <span class="text-xs text-slate-500 uppercase tracking-wider">Projects</span> | |
| </div> | |
| <div class="text-center p-4 bg-darker/50 rounded-xl border border-white/5"> | |
| <span class="block text-3xl font-bold text-secondary">20+</span> | |
| <span class="text-xs text-slate-500 uppercase tracking-wider">Clients</span> | |
| </div> | |
| <div class="text-center p-4 bg-darker/50 rounded-xl border border-white/5"> | |
| <span class="block text-3xl font-bold text-white">100%</span> | |
| <span class="text-xs text-slate-500 uppercase tracking-wider">Commitment</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section class="py-24 px-6 bg-darker/50 relative"> | |
| <div class="max-w-6xl mx-auto fade-in-section"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Tech Stack</h2> | |
| <div class="h-1 w-20 bg-gradient-to-r from-primary to-secondary mx-auto rounded-full"></div> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-4" id="skills-container"> | |
| <!-- Skills will be injected here via JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-24 px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6 fade-in-section"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Featured Projects</h2> | |
| <div class="h-1 w-20 bg-gradient-to-r from-primary to-secondary rounded-full"></div> | |
| </div> | |
| <a href="https://github.com/kimyg119?tab=repositories" target="_blank" class="flex items-center gap-2 text-slate-400 hover:text-white transition-colors"> | |
| View GitHub <i data-feather="github" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <!-- Projects Grid (Populated by JS for dynamic feel, using Web Components for structure) --> | |
| <div id="projects-grid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Example Project Card (Static for Fallback/Design) --> | |
| <custom-project-card | |
| title="E-Commerce Dashboard" | |
| desc="A full-featured admin dashboard with real-time analytics and inventory management." | |
| image="http://static.photos/technology/640x360/10" | |
| tags="React, Tailwind, Node.js" | |
| link="#" | |
| ></custom-project-card> | |
| <custom-project-card | |
| title="Finance Tracker App" | |
| desc="Mobile-first application to track expenses and visualize spending habits." | |
| image="http://static.photos/finance/640x360/22" | |
| tags="Vue.js, Firebase, D3.js" | |
| link="#" | |
| ></custom-project-card> | |
| <custom-project-card | |
| title="Travel Agency Landing" | |
| desc="High-performance landing page with immersive animations and booking forms." | |
| image="http://static.photos/travel/640x360/35" | |
| tags="HTML, GSAP, CSS" | |
| link="#" | |
| ></custom-project-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-24 px-6 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-primary/5 skew-y-3 transform origin-top-left -z-10"></div> | |
| <div class="max-w-4xl mx-auto text-center fade-in-section"> | |
| <h2 class="text-3xl md:text-5xl font-bold text-white mb-6">Let's Work Together</h2> | |
| <p class="text-slate-400 text-lg mb-10 max-w-2xl mx-auto"> | |
| Have a project in mind? I'm currently available for freelance projects and open to full-time opportunities. | |
| </p> | |
| <div class="bg-surface/50 backdrop-blur-md border border-white/10 p-8 md:p-12 rounded-3xl shadow-2xl"> | |
| <form onsubmit="event.preventDefault();" class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6 text-left"> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300 ml-1">Name</label> | |
| <input type="text" class="w-full bg-darker/50 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder="John Doe"> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300 ml-1">Email</label> | |
| <input type="email" class="w-full bg-darker/50 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder="john@example.com"> | |
| </div> | |
| </div> | |
| <div class="space-y-2 text-left"> | |
| <label class="text-sm font-medium text-slate-300 ml-1">Message</label> | |
| <textarea rows="4" class="w-full bg-darker/50 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder="Tell me about your project..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-4 bg-gradient-to-r from-primary to-violet-700 hover:to-violet-600 text-white font-bold rounded-xl shadow-lg shadow-primary/20 transform hover:-translate-y-1 transition-all"> | |
| Send Message | |
| </button> | |
| </form> | |
| <div class="mt-10 flex justify-center gap-6"> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-white/5 hover:bg-primary hover:text-white text-slate-400 transition-all border border-white/10"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-white/5 hover:bg-blue-500 hover:text-white text-slate-400 transition-all border border-white/10"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-white/5 hover:bg-sky-400 hover:text-white text-slate-400 transition-all border border-white/10"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-white/5 hover:bg-red-500 hover:text-white text-slate-400 transition-all border border-white/10"> | |
| <i data-feather="mail"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <!-- Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/project-card.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |