Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCanvas Noir | Developer Portfolio</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <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> | |
| <link rel="stylesheet" href="style.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| dark: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| 950: '#020617' | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| 'fade-in': 'fadeIn 0.8s ease-in-out', | |
| 'slide-up': 'slideUp 0.8s ease-out' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-dark-950 text-dark-100 font-sans overflow-x-hidden"> | |
| <custom-navigation></custom-navigation> | |
| <main> | |
| <!-- Hero Section --> | |
| <section id="hero" class="min-h-screen flex items-center justify-center relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-dark-900 via-dark-950 to-dark-900"></div> | |
| <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-dark-800/20 via-dark-950 to-dark-950"></div> | |
| <div class="relative z-10 text-center px-6 max-w-4xl mx-auto"> | |
| <div class="animate-fade-in"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-dark-100 to-dark-300 bg-clip-text text-transparent"> | |
| Alex Chen | |
| </h1> | |
| <div class="animate-float"> | |
| <p class="text-xl md:text-2xl text-dark-400 mb-8 font-light tracking-wide"> | |
| Full-Stack Developer & Digital Craftsman | |
| </p> | |
| </div> | |
| <div class="flex justify-center space-x-4 animate-slide-up"> | |
| <a href="#projects" class="px-8 py-3 bg-dark-800/50 backdrop-blur-sm border border-dark-700 rounded-lg text-dark-200 hover:bg-dark-700/50 hover:border-dark-600 transition-all duration-300 hover:scale-105"> | |
| View Work | |
| </a> | |
| <a href="#contact" class="px-8 py-3 bg-dark-100 text-dark-950 rounded-lg font-medium hover:bg-dark-200 transition-all duration-300 hover:scale-105"> | |
| Get in Touch | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <i data-feather="chevron-down" class="text-dark-400 w-6 h-6"></i> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-6 bg-dark-900/50 backdrop-blur-sm"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16 animate-fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark-100 mb-4">About Me</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-dark-600 to-dark-400 mx-auto rounded-full"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="animate-slide-up"> | |
| <div class="bg-dark-800/30 backdrop-blur-sm rounded-2xl p-8 border border-dark-700/50 hover:border-dark-600/50 transition-all duration-500"> | |
| <p class="text-dark-300 text-lg leading-relaxed mb-6"> | |
| I craft digital experiences that blend technical precision with aesthetic elegance. | |
| With over 8 years in full-stack development, I specialize in creating scalable, | |
| performant applications that solve real-world problems. | |
| </p> | |
| <p class="text-dark-400 leading-relaxed"> | |
| My philosophy centers on clean architecture, intuitive design, and continuous learning. | |
| Every line of code is written with purpose and every pixel placed with intention. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="animate-slide-up" style="animation-delay: 0.2s;"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-dark-800/20 backdrop-blur-sm rounded-xl p-6 border border-dark-700/30 hover:border-dark-600/30 transition-all duration-300 group"> | |
| <i data-feather="code" class="w-8 h-8 text-dark-400 mb-3 group-hover:text-dark-300 transition-colors"></i> | |
| <h3 class="text-dark-200 font-semibold mb-2">Clean Code</h3> | |
| <p class="text-dark-500 text-sm">Readable, maintainable, and scalable solutions</p> | |
| </div> | |
| <div class="bg-dark-800/20 backdrop-blur-sm rounded-xl p-6 border border-dark-700/30 hover:border-dark-600/30 transition-all duration-300 group"> | |
| <i data-feather="layers" class="w-8 h-8 text-dark-400 mb-3 group-hover:text-dark-300 transition-colors"></i> | |
| <h3 class="text-dark-200 font-semibold mb-2">Full-Stack</h3> | |
| <p class="text-dark-500 text-sm">End-to-end development expertise</p> | |
| </div> | |
| <div class="bg-dark-800/20 backdrop-blur-sm rounded-xl p-6 border border-dark-700/30 hover:border-dark-600/30 transition-all duration-300 group"> | |
| <i data-feather="eye" class="w-8 h-8 text-dark-400 mb-3 group-hover:text-dark-300 transition-colors"></i> | |
| <h3 class="text-dark-200 font-semibold mb-2">UI/UX Focus</h3> | |
| <p class="text-dark-500 text-sm">User-centered design principles</p> | |
| </div> | |
| <div class="bg-dark-800/20 backdrop-blur-sm rounded-xl p-6 border border-dark-700/30 hover:border-dark-600/30 transition-all duration-300 group"> | |
| <i data-feather="zap" class="w-8 h-8 text-dark-400 mb-3 group-hover:text-dark-300 transition-colors"></i> | |
| <h3 class="text-dark-200 font-semibold mb-2">Performance</h3> | |
| <p class="text-dark-500 text-sm">Optimized for speed and efficiency</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 px-6 bg-dark-950"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16 animate-fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark-100 mb-4">Technical Skills</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-dark-600 to-dark-400 mx-auto rounded-full"></div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <!-- Frontend --> | |
| <div class="animate-slide-up group"> | |
| <div class="bg-dark-900/50 backdrop-blur-sm rounded-2xl p-8 border border-dark-800 hover:border-dark-700 transition-all duration-500 hover:scale-105"> | |
| <i data-feather="layout" class="w-12 h-12 text-dark-400 mb-4 group-hover:animate-glow"></i> | |
| <h3 class="text-dark-200 font-semibold mb-4">Frontend</h3> | |
| <div class="space-y-2"> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">React</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Vue.js</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">TypeScript</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Tailwind CSS</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Backend --> | |
| <div class="animate-slide-up group" style="animation-delay: 0.1s;"> | |
| <div class="bg-dark-900/50 backdrop-blur-sm rounded-2xl p-8 border border-dark-800 hover:border-dark-700 transition-all duration-500 hover:scale-105"> | |
| <i data-feather="server" class="w-12 h-12 text-dark-400 mb-4 group-hover:animate-glow"></i> | |
| <h3 class="text-dark-200 font-semibold mb-4">Backend</h3> | |
| <div class="space-y-2"> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Node.js</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Python</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">PostgreSQL</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Redis</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tools --> | |
| <div class="animate-slide-up group" style="animation-delay: 0.2s;"> | |
| <div class="bg-dark-900/50 backdrop-blur-sm rounded-2xl p-8 border border-dark-800 hover:border-dark-700 transition-all duration-500 hover:scale-105"> | |
| <i data-feather="tool" class="w-12 h-12 text-dark-400 mb-4 group-hover:animate-glow"></i> | |
| <h3 class="text-dark-200 font-semibold mb-4">Tools</h3> | |
| <div class="space-y-2"> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Docker</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Git</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">AWS</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">VSCode</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Design --> | |
| <div class="animate-slide-up group" style="animation-delay: 0.3s;"> | |
| <div class="bg-dark-900/50 backdrop-blur-sm rounded-2xl p-8 border border-dark-800 hover:border-dark-700 transition-all duration-500 hover:scale-105"> | |
| <i data-feather="pen-tool" class="w-12 h-12 text-dark-400 mb-4 group-hover:animate-glow"></i> | |
| <h3 class="text-dark-200 font-semibold mb-4">Design</h3> | |
| <div class="space-y-2"> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Figma</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Adobe XD</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Framer</span> | |
| <span class="block text-dark-500 hover:text-dark-400 transition-colors">Sketch</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 px-6 bg-dark-900/50 backdrop-blur-sm"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16 animate-fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark-100 mb-4">Featured Projects</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-dark-600 to-dark-400 mx-auto rounded-full"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="animate-slide-up project-card group"> | |
| <div class="bg-dark-800/30 backdrop-blur-sm rounded-2xl overflow-hidden border border-dark-700/50 hover:border-dark-600/50 transition-all duration-500 hover:scale-105"> | |
| <div class="h-48 bg-gradient-to-br from-dark-700 to-dark-800 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-dark-900/20"></div> | |
| <img src="http://static.photos/technology/640x360/1" alt="Nexus Platform" class="w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-dark-200 font-semibold text-xl mb-2">Nexus Platform</h3> | |
| <p class="text-dark-400 mb-4">Enterprise SaaS solution with real-time analytics</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-dark-700/50 rounded-full text-dark-300 text-sm">React</span> | |
| <span class="px-3 py-1 bg-dark-700/50 rounded-full text-dark-300 text-sm">Node.js</span> | |
| <span class="px-3 py-1 bg-dark-700/50 rounded-full text-dark-300 text-sm">PostgreSQL</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="animate-slide-up project-card group" style="animation-delay: 0.1s;"> | |
| <div class="bg-dark-800/30 backdrop-blur-sm rounded-2xl overflow-hidden border border-dark-700/50 hover:border-dark-600/50 transition-all duration-500 hover:scale-105"> | |
| <div class="h-48 bg-gradient-to-br from-dark-700 to-dark-800 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-dark-900/20"></div> | |
| <img src="http://static.photos/finance/640x360/2" alt="Quantum Finance" class="w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-dark-200 font-semibold text-xl mb-2">Quantum Finance</h3> | |
| <p class="text-dark-400 mb-4">AI-powered investment platform with predictive analytics</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-dark-700/50 rounded-full text-dark-300 text-sm">Vue.js</span> | |
| <span class="px-3 py-1 bg-dark-700/50 rounded-full text-dark-300 text-sm">Python</span> | |
| <span class="px-3 py-1 bg-dark-700/50 rounded-full text-dark-300 text-sm">TensorFlow</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="animate-slide-up project-card group" style="animation-delay: 0.2s;"> | |
| <div class="bg-dark-800/30 backdrop-blur-sm rounded-2xl overflow-hidden border border-dark-700/50 hover:border-dark-600/50 transition-all duration-500 hover:scale-105"> | |
| <div class="h-48 bg-gradient-to-br from-dark-700 to-dark-800 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-dark-900/20"></div> | |
| <img src="http://static.photos/workspace/640x360/3" alt="CodeCollab" class="w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-dark-200 font-semibold text-xl mb-2">CodeCollab</h3> | |
| <p class="text-dark-400 mb-4">Real-time collaborative coding environment</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-dark-700/50 rounded-full text-dark-300 text-sm">TypeScript</span> | |
| <span class="px-3 py-1 bg-dark-700/50 rounded-full text-dark-300 text-sm">WebSockets</span> | |
| <span class="px-3 py-1 bg-dark-700/50 rounded-full text-dark-300 text-sm">MongoDB</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-6 bg-dark-950"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="animate-fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark-100 mb-6">Let's Build Something Amazing</h2> | |
| <p class="text-dark-400 text-lg mb-8 max-w-2xl mx-auto"> | |
| Ready to bring your next big idea to life? Let's connect and discuss how we can create something extraordinary together. | |
| </p> | |
| <div class="flex justify-center space-x-6 mb-12"> | |
| <a href="mailto:[email protected]" class="group"> | |
| <div class="bg-dark-800/50 backdrop-blur-sm rounded-xl p-4 border border-dark-700 hover:border-dark-600 transition-all duration-300 hover:scale-110"> | |
| <i data-feather="mail" class="w-6 h-6 text-dark-400 group-hover:text-dark-300"></i> | |
| </div> | |
| </a> | |
| <a href="https://github.com" class="group"> | |
| <div class="bg-dark-800/50 backdrop-blur-sm rounded-xl p-4 border border-dark-700 hover:border-dark-600 transition-all duration-300 hover:scale-110"> | |
| <i data-feather="github" class="w-6 h-6 text-dark-400 group-hover:text-dark-300"></i> | |
| </div> | |
| </a> | |
| <a href="https://linkedin.com" class="group"> | |
| <div class="bg-dark-800/50 backdrop-blur-sm rounded-xl p-4 border border-dark-700 hover:border-dark-600 transition-all duration-300 hover:scale-110"> | |
| <i data-feather="linkedin" class="w-6 h-6 text-dark-400 group-hover:text-dark-300"></i> | |
| </div> | |
| </a> | |
| <a href="https://twitter.com" class="group"> | |
| <div class="bg-dark-800/50 backdrop-blur-sm rounded-xl p-4 border border-dark-700 hover:border-dark-600 transition-all duration-300 hover:scale-110"> | |
| <i data-feather="twitter" class="w-6 h-6 text-dark-400 group-hover:text-dark-300"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="animate-slide-up"> | |
| <a href="mailto:[email protected]" class="inline-block px-8 py-4 bg-dark-100 text-dark-950 rounded-xl font-semibold hover:bg-dark-200 transition-all duration-300 hover:scale-105 shadow-lg"> | |
| Start a Conversation | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navigation.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |