Spaces:
Running
Running
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Engineer Portfolio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.css" rel="stylesheet" type="text/css" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .tech-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .tech-icon:hover { | |
| transform: translateY(-5px); | |
| } | |
| .project-card { | |
| transition: all 0.3s ease; | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); | |
| } | |
| .neon-border { | |
| position: relative; | |
| } | |
| .neon-border::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 0.5rem; | |
| padding: 2px; | |
| background: linear-gradient(45deg, #3b82f6, #8b5cf6); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .animated-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(-45deg, #3b82f6, #8b5cf6, #ec4899, #f43f5e); | |
| background-size: 400% 400%; | |
| animation: gradient 15s ease infinite; | |
| opacity: 0.1; | |
| z-index: -1; | |
| } | |
| @keyframes gradient { | |
| 0% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| 100% { | |
| background-position: 0% 50%; | |
| } | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: 0.15em solid #3b82f6; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: 0.15em; | |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #3b82f6 } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-base-100 text-gray-100"> | |
| <div class="animated-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="navbar sticky top-0 z-50 bg-base-100/80 backdrop-blur-md shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex-1"> | |
| <a href="#" class="btn btn-ghost normal-case text-xl font-bold gradient-text">AI PORTFOLIO</a> | |
| </div> | |
| <div class="flex-none hidden md:block"> | |
| <ul class="menu menu-horizontal px-1 space-x-2"> | |
| <li><a href="#home" class="hover:text-primary">Home</a></li> | |
| <li><a href="#about" class="hover:text-primary">About</a></li> | |
| <li><a href="#skills" class="hover:text-primary">Skills</a></li> | |
| <li><a href="#projects" class="hover:text-primary">Projects</a></li> | |
| <li><a href="#contact" class="hover:text-primary">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="md:hidden"> | |
| <div class="dropdown dropdown-end"> | |
| <label tabindex="0" class="btn btn-ghost btn-circle"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </label> | |
| <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#skills">Skills</a></li> | |
| <li><a href="#projects">Projects</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center px-4"> | |
| <div class="container mx-auto text-center"> | |
| <div class="avatar mb-8"> | |
| <div class="w-40 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2 mx-auto"> | |
| <img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1180&q=80" alt="AI Engineer" /> | |
| </div> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-4"> | |
| <span class="gradient-text">Alex Chen</span> | |
| </h1> | |
| <div class="typewriter mb-6"> | |
| <h2 class="text-2xl md:text-3xl font-semibold">AI & Machine Learning Engineer</h2> | |
| </div> | |
| <p class="text-lg md:text-xl max-w-2xl mx-auto mb-8"> | |
| Building intelligent systems that learn, adapt, and transform industries through cutting-edge artificial intelligence. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#projects" class="btn btn-primary px-8">View Work</a> | |
| <a href="#contact" class="btn btn-outline px-8">Contact Me</a> | |
| </div> | |
| <div class="mt-12 flex justify-center space-x-6"> | |
| <a href="#" class="text-2xl hover:text-primary"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-2xl hover:text-primary"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-2xl hover:text-primary"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-2xl hover:text-primary"><i class="fab fa-kaggle"></i></a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <h2 class="text-4xl font-bold text-center mb-16 gradient-text">About Me</h2> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <div class="mockup-code neon-border"> | |
| <pre data-prefix="$"><code>class AI_Engineer:</code></pre> | |
| <pre data-prefix=">" class="text-warning"><code>def __init__(self):</code></pre> | |
| <pre data-prefix=">" class="text-success"><code> self.name = "Alex Chen"</code></pre> | |
| <pre data-prefix=">" class="text-success"><code> self.specialization = "Machine Learning"</code></pre> | |
| <pre data-prefix=">" class="text-success"><code> self.experience = "5+ years"</code></pre> | |
| <pre data-prefix=">" class="text-success"><code> self.education = "MSc in AI, Stanford"</code></pre> | |
| <pre data-prefix=">" class="text-success"><code> self.passion = "Solving complex problems with AI"</code></pre> | |
| <pre data-prefix="$"><code> def transform_ideas_to_ai_solutions(self):</code></pre> | |
| <pre data-prefix=">" class="text-info"><code> return "Innovative AI products"</code></pre> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-3xl font-semibold mb-6">Transforming Data Into Intelligence</h3> | |
| <p class="text-lg mb-6"> | |
| I'm an AI Engineer with a passion for creating intelligent systems that solve real-world problems. | |
| With expertise in machine learning, deep learning, and natural language processing, I bridge the gap | |
| between cutting-edge research and practical applications. | |
| </p> | |
| <p class="text-lg mb-6"> | |
| My journey in AI began during my graduate studies at Stanford, where I focused on neural networks | |
| and their applications in computer vision. Since then, I've worked with startups and Fortune 500 | |
| companies to implement AI solutions that drive business value. | |
| </p> | |
| <div class="stats shadow bg-base-200/50 mb-6"> | |
| <div class="stat"> | |
| <div class="stat-figure text-primary"> | |
| <i class="fas fa-project-diagram text-3xl"></i> | |
| </div> | |
| <div class="stat-title">Projects Completed</div> | |
| <div class="stat-value text-primary">42+</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-figure text-secondary"> | |
| <i class="fas fa-brain text-3xl"></i> | |
| </div> | |
| <div class="stat-title">AI Models Trained</div> | |
| <div class="stat-value text-secondary">150+</div> | |
| </div> | |
| </div> | |
| <a href="#" class="btn btn-primary">Download Resume</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 px-4 bg-base-200/30"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <h2 class="text-4xl font-bold text-center mb-16 gradient-text">Technical Skills</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"> | |
| <div class="tech-icon text-center p-6 rounded-xl bg-base-200/50 hover:bg-base-200/80 transition-all"> | |
| <i class="fab fa-python text-6xl mb-4 text-blue-500"></i> | |
| <h3 class="text-xl font-semibold">Python</h3> | |
| <div class="radial-progress text-primary mt-2" style="--value:95; --size:3rem;">95%</div> | |
| </div> | |
| <div class="tech-icon text-center p-6 rounded-xl bg-base-200/50 hover:bg-base-200/80 transition-all"> | |
| <i class="fas fa-robot text-6xl mb-4 text-purple-500"></i> | |
| <h3 class="text-xl font-semibold">TensorFlow</h3> | |
| <div class="radial-progress text-secondary mt-2" style="--value:90; --size:3rem;">90%</div> | |
| </div> | |
| <div class="tech-icon text-center p-6 rounded-xl bg-base-200/50 hover:bg-base-200/80 transition-all"> | |
| <i class="fas fa-network-wired text-6xl mb-4 text-red-500"></i> | |
| <h3 class="text-xl font-semibold">PyTorch</h3> | |
| <div class="radial-progress text-accent mt-2" style="--value:88; --size:3rem;">88%</div> | |
| </div> | |
| <div class="tech-icon text-center p-6 rounded-xl bg-base-200/50 hover:bg-base-200/80 transition-all"> | |
| <i class="fas fa-database text-6xl mb-4 text-green-500"></i> | |
| <h3 class="text-xl font-semibold">SQL</h3> | |
| <div class="radial-progress text-info mt-2" style="--value:85; --size:3rem;">85%</div> | |
| </div> | |
| </div> | |
| <div class="mb-12"> | |
| <h3 class="text-2xl font-semibold mb-6">AI/ML Expertise</h3> | |
| <div class="flex flex-wrap gap-2 mb-8"> | |
| <span class="badge badge-primary badge-lg">Deep Learning</span> | |
| <span class="badge badge-primary badge-lg">Computer Vision</span> | |
| <span class="badge badge-primary badge-lg">NLP</span> | |
| <span class="badge badge-primary badge-lg">Generative AI</span> | |
| <span class="badge badge-primary badge-lg">Reinforcement Learning</span> | |
| <span class="badge badge-primary badge-lg">Time Series Analysis</span> | |
| <span class="badge badge-primary badge-lg">Model Optimization</span> | |
| <span class="badge badge-primary badge-lg">MLOps</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6">Other Technologies</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="badge badge-outline badge-lg">Docker</span> | |
| <span class="badge badge-outline badge-lg">Kubernetes</span> | |
| <span class="badge badge-outline badge-lg">AWS</span> | |
| <span class="badge badge-outline badge-lg">GCP</span> | |
| <span class="badge badge-outline badge-lg">Azure</span> | |
| <span class="badge badge-outline badge-lg">Git</span> | |
| <span class="badge badge-outline badge-lg">CI/CD</span> | |
| <span class="badge badge-outline badge-lg">FastAPI</span> | |
| <span class="badge badge-outline badge-lg">Flask</span> | |
| <span class="badge badge-outline badge-lg">JavaScript</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 px-4"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <h2 class="text-4xl font-bold text-center mb-16 gradient-text">Featured Projects</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card card bg-base-200 shadow-xl"> | |
| <figure><img src="https://images.unsplash.com/photo-1655720828012-58a1a8419f0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Medical AI" /></figure> | |
| <div class="card-body"> | |
| <h3 class="card-title">MediScan AI</h3> | |
| <p>Deep learning system for early detection of diseases from medical imaging with 94% accuracy.</p> | |
| <div class="card-actions justify-end mt-4"> | |
| <span class="badge badge-primary">Computer Vision</span> | |
| <span class="badge badge-primary">Healthcare</span> | |
| </div> | |
| <div class="mt-4"> | |
| <a href="#" class="link link-primary">View Case Study →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card card bg-base-200 shadow-xl"> | |
| <figure><img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1586&q=80" alt="Chatbot" /></figure> | |
| <div class="card-body"> | |
| <h3 class="card-title">NeuroChat</h3> | |
| <p>Conversational AI assistant with contextual understanding and emotional intelligence capabilities.</p> | |
| <div class="card-actions justify-end mt-4"> | |
| <span class="badge badge-primary">NLP</span> | |
| <span class="badge badge-primary">LLMs</span> | |
| </div> | |
| <div class="mt-4"> | |
| <a href="#" class="link link-primary">View Demo →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card card bg-base-200 shadow-xl"> | |
| <figure><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Finance AI" /></figure> | |
| <div class="card-body"> | |
| <h3 class="card-title">FinPredict</h3> | |
| <p>AI-powered financial forecasting system that predicts market trends with 87% accuracy.</p> | |
| <div class="card-actions justify-end mt-4"> | |
| <span class="badge badge-primary">Time Series</span> | |
| <span class="badge badge-primary">Finance</span> | |
| </div> | |
| <div class="mt-4"> | |
| <a href="#" class="link link-primary">View Research →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="project-card card bg-base-200 shadow-xl"> | |
| <figure><img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Autonomous Vehicle" /></figure> | |
| <div class="card-body"> | |
| <h3 class="card-title">AutoDrive</h3> | |
| <p>Computer vision system for autonomous vehicles with real-time object detection and path planning.</p> | |
| <div class="card-actions justify-end mt-4"> | |
| <span class="badge badge-primary">CV</span> | |
| <span class="badge badge-primary">Robotics</span> | |
| </div> | |
| <div class="mt-4"> | |
| <a href="#" class="link link-primary">View Code →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="project-card card bg-base-200 shadow-xl"> | |
| <figure><img src="https://images.unsplash.com/photo-1622473590773-f588134b6ce7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1670&q=80" alt="Generative AI" /></figure> | |
| <div class="card-body"> | |
| <h3 class="card-title">ArtGenius</h3> | |
| <p>Generative AI platform that creates unique digital artworks based on style and content prompts.</p> | |
| <div class="card-actions justify-end mt-4"> | |
| <span class="badge badge-primary">GANs</span> | |
| <span class="badge badge-primary">Creative AI</span> | |
| </div> | |
| <div class="mt-4"> | |
| <a href="#" class="link link-primary">View Gallery →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="project-card card bg-base-200 shadow-xl"> | |
| <figure><img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Recommendation System" /></figure> | |
| <div class="card-body"> | |
| <h3 class="card-title">RecoMind</h3> | |
| <p>Personalized recommendation engine that increases user engagement by 35% through deep learning.</p> | |
| <div class="card-actions justify-end mt-4"> | |
| <span class="badge badge-primary">Recommendation</span> | |
| <span class="badge badge-primary">Personalization</span> | |
| </div> | |
| <div class="mt-4"> | |
| <a href="#" class="link link-primary">View Results →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <a href="#" class="btn btn-primary btn-wide">View All Projects</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 bg-base-200/30"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <h2 class="text-4xl font-bold text-center mb-16 gradient-text">Get In Touch</h2> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl font-semibold mb-6">Let's Collaborate</h3> | |
| <p class="mb-8 text-lg"> | |
| Interested in working together or have questions about my work? | |
| Feel free to reach out through the form or connect with me on social media. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="avatar"> | |
| <div class="w-12 rounded-full bg-primary text-primary-content"> | |
| <i class="fas fa-envelope text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-semibold">Email</p> | |
| <a href="mailto:alex@aiengineer.com" class="link link-primary">alex@aiengineer.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="avatar"> | |
| <div class="w-12 rounded-full bg-secondary text-secondary-content"> | |
| <i class="fas fa-phone-alt text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-semibold">Phone</p> | |
| <a href="tel:+11234567890" class="link link-secondary">+1 (123) 456-7890</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="avatar"> | |
| <div class="w-12 rounded-full bg-accent text-accent-content"> | |
| <i class="fas fa-map-marker-alt text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-semibold">Location</p> | |
| <p>San Francisco, CA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-xl font-semibold mb-4">Connect With Me</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="btn btn-circle btn-primary"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="btn btn-circle btn-primary"><i class="fab fa-github"></i></a> | |
| <a href="#" class="btn btn-circle btn-primary"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="btn btn-circle btn-primary"><i class="fab fa-kaggle"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="card bg-base-100 shadow-xl"> | |
| <div class="card-body"> | |
| <form id="contactForm" class="space-y-4"> | |
| <div class="form-control"> | |
| <label class="label"> | |
| <span class="label-text">Name</span> | |
| </label> | |
| <input type="text" placeholder="Your name" class="input input-bordered" required /> | |
| </div> | |
| <div class="form-control"> | |
| <label class="label"> | |
| <span class="label-text">Email</span> | |
| </label> | |
| <input type="email" placeholder="Your email" class="input input-bordered" required /> | |
| </div> | |
| <div class="form-control"> | |
| <label class="label"> | |
| <span class="label-text">Subject</span> | |
| </label> | |
| <input type="text" placeholder="Subject" class="input input-bordered" required /> | |
| </div> | |
| <div class="form-control"> | |
| <label class="label"> | |
| <span class="label-text">Message</span> | |
| </label> | |
| <textarea class="textarea textarea-bordered h-32" placeholder="Your message" required></textarea> | |
| </div> | |
| <div class="form-control mt-6"> | |
| <button type="submit" class="btn btn-primary">Send Message</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="footer p-10 bg-base-200 text-base-content"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <a href="#" class="btn btn-ghost normal-case text-xl font-bold gradient-text">AI PORTFOLIO</a> | |
| <p>Alex Chen<br>AI & Machine Learning Engineer</p> | |
| </div> | |
| <div> | |
| <div class="grid grid-flow-col gap-4 mb-4"> | |
| <a href="#"><i class="fab fa-github text-2xl"></i></a> | |
| <a href="#"><i class="fab fa-linkedin text-2xl"></i></a> | |
| <a href="#"><i class="fab fa-twitter text-2xl"></i></a> | |
| <a href="#"><i class="fab fa-kaggle text-2xl"></i></a> | |
| </div> | |
| <p>© 2023 Alex Chen. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple form submission handler | |
| document.getElementById('contactForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // In a real application, you would send the form data to a server | |
| // Here we just show a success message | |
| const submitBtn = this.querySelector('button[type="submit"]'); | |
| const originalText = submitBtn.textContent; | |
| submitBtn.innerHTML = '<span class="loading loading-spinner"></span> Sending...'; | |
| // Simulate API call | |
| setTimeout(() => { | |
| submitBtn.textContent = 'Message Sent!'; | |
| // Reset form and button | |
| setTimeout(() => { | |
| this.reset(); | |
| submitBtn.textContent = originalText; | |
| // Show success toast | |
| const toast = document.createElement('div'); | |
| toast.className = 'toast toast-top toast-center'; | |
| toast.innerHTML = ` | |
| <div class="alert alert-success"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| <span>Your message has been sent successfully!</span> | |
| </div> | |
| `; | |
| document.body.appendChild(toast); | |
| setTimeout(() => { | |
| toast.remove(); | |
| }, 3000); | |
| }, 1000); | |
| }, 1500); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Theme toggle functionality | |
| const themeToggle = document.createElement('div'); | |
| themeToggle.className = 'fixed bottom-4 right-4 z-50'; | |
| themeToggle.innerHTML = ` | |
| <button class="btn btn-circle btn-primary swap swap-rotate"> | |
| <input type="checkbox" id="theme-toggle" /> | |
| <svg class="swap-on fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/> | |
| </svg> | |
| <svg class="swap-off fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/> | |
| </svg> | |
| </button> | |
| `; | |
| document.body.appendChild(themeToggle); | |
| document.getElementById('theme-toggle').addEventListener('change', function() { | |
| if (this.checked) { | |
| document.documentElement.setAttribute('data-theme', 'light'); | |
| } else { | |
| document.documentElement.setAttribute('data-theme', 'dark'); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Asif-code/portfolio-projects" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |