Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mike Designs | Digital Designer & Developer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <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=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #00f0ff; | |
| --secondary: #ff00f0; | |
| --dark: #0a0a0f; | |
| --darker: #050508; | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background-color: var(--dark); | |
| color: #e0e0e0; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4, .orbitron { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.8; | |
| } | |
| .glitch::before { | |
| color: var(--secondary); | |
| z-index: -1; | |
| animation: glitch-effect 3s infinite; | |
| } | |
| .glitch::after { | |
| color: var(--primary); | |
| z-index: -2; | |
| animation: glitch-effect 2s reverse infinite; | |
| } | |
| @keyframes glitch-effect { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-3px, 3px); } | |
| 40% { transform: translate(-3px, -3px); } | |
| 60% { transform: translate(3px, 3px); } | |
| 80% { transform: translate(3px, -3px); } | |
| 100% { transform: translate(0); } | |
| } | |
| .neon-border { | |
| position: relative; | |
| } | |
| .neon-border::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: inherit; | |
| padding: 1px; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 20px var(--primary); | |
| } | |
| .neon-text-secondary { | |
| text-shadow: 0 0 5px var(--secondary), 0 0 10px var(--secondary), 0 0 20px var(--secondary); | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| } | |
| .hover-glow:hover { | |
| box-shadow: 0 0 15px var(--primary); | |
| transition: box-shadow 0.3s ease; | |
| } | |
| .terminal { | |
| background-color: rgba(0, 0, 0, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .terminal-header { | |
| background: linear-gradient(90deg, var(--darker), #1a1a2e); | |
| border-top-left-radius: 8px; | |
| border-top-right-radius: 8px; | |
| } | |
| .terminal-body { | |
| min-height: 200px; | |
| } | |
| .blink { | |
| animation: blink-animation 1s steps(2, start) infinite; | |
| } | |
| @keyframes blink-animation { | |
| to { visibility: hidden; } | |
| } | |
| .project-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 25px rgba(0, 240, 255, 0.3); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .animate-spin-slow { | |
| animation: spin 20s linear infinite; | |
| } | |
| .animate-spin-reverse { | |
| animation: spin 25s linear infinite reverse; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="grid-pattern"> | |
| <!-- Cursor Trailer --> | |
| <div id="cursor-trailer" class="fixed w-8 h-8 rounded-full bg-white mix-blend-difference pointer-events-none transform -translate-x-1/2 -translate-y-1/2 z-50 opacity-0 transition-opacity duration-300"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-40 backdrop-blur-md bg-black/50 border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex items-center space-x-2"> | |
| <span class="text-2xl font-bold gradient-text orbitron">Mike Designs</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#home" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium neon-text hover:neon-text-secondary transition-all">HOME</a> | |
| <a href="#about" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium neon-text hover:neon-text-secondary transition-all">ABOUT</a> | |
| <a href="#work" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium neon-text hover:neon-text-secondary transition-all">WORK</a> | |
| <a href="#skills" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium neon-text hover:neon-text-secondary transition-all">SKILLS</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium neon-text hover:neon-text-secondary transition-all">CONTACT</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black/95 border-t border-gray-800"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">HOME</a> | |
| <a href="#about" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">ABOUT</a> | |
| <a href="#work" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">WORK</a> | |
| <a href="#skills" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">SKILLS</a> | |
| <a href="#contact" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">CONTACT</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-16"> | |
| <div class="absolute inset-0 z-0 overflow-hidden"> | |
| <!-- Starfield Background --> | |
| <div id="starfield" class="absolute inset-0"></div> | |
| <!-- Nebula Gradient --> | |
| <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 via-blue-900/20 to-black/80"></div> | |
| <!-- Subtle Space Texture --> | |
| <div class="absolute inset-0 opacity-10" style=" | |
| background-image: radial-gradient(circle at center, | |
| rgba(255,255,255,0.8) 0%, | |
| transparent 70%); | |
| background-size: 200% 200%; | |
| animation: gradientPulse 30s infinite alternate; | |
| "></div> | |
| <!-- Shooting Stars --> | |
| <div class="shooting-star" style="top: 10%; left: 20%;"></div> | |
| <div class="shooting-star" style="top: 30%; left: 80%; animation-delay: 3s;"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center"> | |
| <div class="mb-8"> | |
| <span class="text-sm uppercase tracking-wider text-gray-400">Welcome to my digital realm</span> | |
| <h1 class="mt-4 text-5xl md:text-7xl font-bold glitch" data-text="MIKE DESIGNS"> | |
| <span class="gradient-text">MIKE DESIGNS</span> | |
| </h1> | |
| <div class="mt-6 max-w-3xl mx-auto"> | |
| <p class="text-xl text-gray-300">Foward facing creative technologist with a focus on user empowerment and data ownership.</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#work" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full font-bold text-white hover:shadow-lg hover:shadow-cyan-500/30 transition-all duration-300 transform hover:scale-105"> | |
| View My Work | |
| </a> | |
| <a href="#contact" class="px-8 py-3 border border-cyan-400 rounded-full font-bold text-cyan-400 hover:bg-cyan-400/10 transition-all duration-300 transform hover:scale-105"> | |
| Contact Me | |
| </a> | |
| </div> | |
| <div class="mt-16"> | |
| <a href="#about" class="inline-block animate-bounce"> | |
| <div class="w-10 h-16 border-4 border-cyan-400 rounded-full flex justify-center"> | |
| <div class="w-2 h-2 bg-cyan-400 rounded-full mt-2"></div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-black/50 backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold glitch" data-text="ABOUT ME"> | |
| <span class="gradient-text">ABOUT ME</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto mt-4"></div> | |
| </div> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/3 relative"> | |
| <div class="neon-border rounded-full p-1 hover-glow w-64 h-64 mx-auto"> | |
| <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full"> | |
| <defs> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#00f0ff" /> | |
| <stop offset="100%" stop-color="#ff00f0" /> | |
| </linearGradient> | |
| <filter id="glow"> | |
| <feGaussianBlur stdDeviation="2" result="blur" /> | |
| <feComposite in="SourceGraphic" in2="blur" operator="over" /> | |
| </filter> | |
| </defs> | |
| <circle cx="100" cy="100" r="80" fill="none" stroke="url(#gradient)" stroke-width="4" class="animate-spin-slow" /> | |
| <path d="M100,20 A80,80 0 0 1 180,100 A80,80 0 0 1 100,180 A80,80 0 0 1 20,100 A80,80 0 0 1 100,20 Z" | |
| fill="none" stroke="url(#gradient)" stroke-width="2" stroke-dasharray="10,5" class="animate-spin-reverse" /> | |
| <circle cx="100" cy="100" r="60" fill="none" stroke="url(#gradient)" stroke-width="3" stroke-dasharray="15,10" class="animate-pulse" /> | |
| <circle cx="100" cy="100" r="40" fill="none" stroke="url(#gradient)" stroke-width="2" class="group-hover:stroke-[5px] transition-all duration-300" /> | |
| <text x="100" y="110" text-anchor="middle" font-size="24" fill="url(#gradient)" font-family="Orbitron" class="font-bold">MD</text> | |
| </svg> | |
| </div> | |
| <div class="absolute -bottom-5 -right-5 bg-gray-900 p-3 rounded-full border border-gray-700"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-full flex items-center justify-center text-2xl"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-2/3"> | |
| <h3 class="text-2xl font-bold mb-4 neon-text">Digital Alchemist & Creative Technologist</h3> | |
| <p class="text-gray-300 mb-6 leading-relaxed"> | |
| I'm a multidisciplinary designer and developer with a passion for creating boundary-pushing digital experiences. With over 8 years in the industry, I've worked at the intersection of design, technology, and user experience to craft solutions that are not only visually stunning but also functionally robust. | |
| </p> | |
| <p class="text-gray-300 mb-6 leading-relaxed"> | |
| My approach combines meticulous attention to detail with a deep understanding of emerging technologies. I fixate on Web3 interfaces, immersive AI/UX experiences, and AI-driven design systems that adapt to user behavior in real-time. | |
| </p> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-8"> | |
| <div class="bg-gray-900/50 p-4 rounded-lg border border-gray-800 hover:border-cyan-400 transition-all"> | |
| <div class="text-cyan-400 text-2xl mb-2"> | |
| <i class="fas fa-cubes"></i> | |
| </div> | |
| <h4 class="font-bold">Web3 Design</h4> | |
| <p class="text-sm text-gray-400">Web based interfaces & dApps</p> | |
| </div> | |
| <div class="bg-gray-900/50 p-4 rounded-lg border border-gray-800 hover:border-blue-400 transition-all"> | |
| <div class="text-blue-400 text-2xl mb-2"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h4 class="font-bold">Mobile First Experiences</h4> | |
| <p class="text-sm text-gray-400">iOS/Android Development</p> | |
| </div> | |
| <div class="bg-gray-900/50 p-4 rounded-lg border border-gray-800 hover:border-purple-400 transition-all"> | |
| <div class="text-purple-400 text-2xl mb-2"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h4 class="font-bold">AI Integration</h4> | |
| <p class="text-sm text-gray-400">ML-powered interfaces</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Work Section --> | |
| <section id="work" class="py-20 bg-gradient-to-b from-black/50 to-black/80"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold glitch" data-text="MY WORK"> | |
| <span class="gradient-text">MY WORK</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto mt-4"></div> | |
| <p class="mt-6 max-w-2xl mx-auto text-gray-300">Selected projects that showcase my expertise across various domains</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card bg-gray-900/50 rounded-xl overflow-hidden border border-gray-800 hover:border-cyan-400 transition-all duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop" alt="Project 1" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> | |
| <span class="absolute top-4 right-4 bg-cyan-500/20 text-cyan-400 text-xs px-3 py-1 rounded-full">WEB3</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 neon-text">Decentralized Ideas Exchange Prototype</h3> | |
| <p class="text-gray-400 mb-4">User friendly interface for a cross-chain decentralized ideas exchange with real-time analytics and token economy.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-gray-800 text-cyan-400 px-3 py-1 rounded-full">React</span> | |
| <span class="text-xs bg-gray-800 text-purple-400 px-3 py-1 rounded-full">Ethereum</span> | |
| <span class="text-xs bg-gray-800 text-blue-400 px-3 py-1 rounded-full">Web3.js</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card bg-gray-900/50 rounded-xl overflow-hidden border border-gray-800 hover:border-blue-400 transition-all duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop" alt="Project 2" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> | |
| <span class="absolute top-4 right-4 bg-blue-500/20 text-blue-400 text-xs px-3 py-1 rounded-full">AI/UX</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 neon-text-secondary">ML Powered Journaling App</h3> | |
| <p class="text-gray-400 mb-4">Private Journaling App powered by Claude API to deliver custom insight dashboard and semantic insight.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-gray-800 text-blue-400 px-3 py-1 rounded-full">Flutter</span> | |
| <span class="text-xs bg-gray-800 text-green-400 px-3 py-1 rounded-full">Claude API</span> | |
| <span class="text-xs bg-gray-800 text-yellow-400 px-3 py-1 rounded-full">iOS/Android Development</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card bg-gray-900/50 rounded-xl overflow-hidden border border-gray-800 hover:border-purple-400 transition-all duration-300"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop" alt="Project 3" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> | |
| <span class="absolute top-4 right-4 bg-purple-500/20 text-purple-400 text-xs px-3 py-1 rounded-full">AI/UI</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 neon-text-secondary">Adaptive Design System for Spiral Journal</h3> | |
| <p class="text-gray-400 mb-4">Machine learning-powered UI that evolves based on user behavior patterns.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs bg-gray-800 text-purple-400 px-3 py-1 rounded-full">TensorFlow</span> | |
| <span class="text-xs bg-gray-800 text-pink-400 px-3 py-1 rounded-full">Material Design 3</span> | |
| <span class="text-xs bg-gray-800 text-red-400 px-3 py-1 rounded-full">Claude API</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Past & Current Clients Section --> | |
| <section class="py-16 bg-black/80"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold glitch" data-text="Past & Current Clients"> | |
| <span class="gradient-text">Past & Current Clients</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-6 text-center"> | |
| <div class="p-4 rounded-lg bg-gray-900/50 border border-gray-800 hover:border-cyan-400 transition-colors"> | |
| <h3 class="font-bold text-lg">Shaw Inc.</h3> | |
| <p class="text-sm text-gray-400">Enterprise Solutions</p> | |
| </div> | |
| <div class="p-4 rounded-lg bg-gray-900/50 border border-gray-800 hover:border-blue-400 transition-colors"> | |
| <h3 class="font-bold text-lg">Berkshire Hathaway</h3> | |
| <p class="text-sm text-gray-400">Financial Services</p> | |
| </div> | |
| <div class="p-4 rounded-lg bg-gray-900/50 border border-gray-800 hover:border-purple-400 transition-colors"> | |
| <h3 class="font-bold text-lg">Novus Home Mortgage</h3> | |
| <p class="text-sm text-gray-400">Fintech</p> | |
| </div> | |
| <div class="p-4 rounded-lg bg-gray-900/50 border border-gray-800 hover:border-green-400 transition-colors"> | |
| <h3 class="font-bold text-lg">Nvisia</h3> | |
| <p class="text-sm text-gray-400">Technology Consulting</p> | |
| </div> | |
| <div class="p-4 rounded-lg bg-gray-900/50 border border-gray-800 hover:border-pink-400 transition-colors"> | |
| <h3 class="font-bold text-lg">Barre Milwaukee</h3> | |
| <p class="text-sm text-gray-400">Fitness Tech</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 bg-black/70 backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold glitch" data-text="MY SKILLS"> | |
| <span class="gradient-text">MY SKILLS</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto mt-4"></div> | |
| <p class="mt-6 max-w-2xl mx-auto text-gray-300">Technologies and methodologies I've mastered over the years</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> | |
| <!-- Skill 1 --> | |
| <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:border-cyan-400 transition-all text-center"> | |
| <div class="w-16 h-16 bg-cyan-400/10 rounded-full flex items-center justify-center mx-auto mb-4 text-3xl text-cyan-400"> | |
| <i class="fas fa-paint-brush"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">UX Design</h3> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-cyan-400 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 2 --> | |
| <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:border-blue-400 transition-all text-center"> | |
| <div class="w-16 h-16 bg-blue-400/10 rounded-full flex items-center justify-center mx-auto mb-4 text-3xl text-blue-400"> | |
| <i class="fas fa-object-group"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">UI Design</h3> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-blue-400 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 3 --> | |
| <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:border-purple-400 transition-all text-center"> | |
| <div class="w-16 h-16 bg-purple-400/10 rounded-full flex items-center justify-center mx-auto mb-4 text-3xl text-purple-400"> | |
| <i class="fas fa-laptop-code"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Front-end</h3> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-purple-400 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 4 --> | |
| <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:border-green-400 transition-all text-center"> | |
| <div class="w-16 h-16 bg-green-400/10 rounded-full flex items-center justify-center mx-auto mb-4 text-3xl text-green-400"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Deep Research</h3> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-green-400 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <!-- Skill 5 --> | |
| <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:border-pink-400 transition-all text-center"> | |
| <div class="w-16 h-16 bg-pink-400/10 rounded-full flex items-center justify-center mx-auto mb-4 text-3xl text-pink-400"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">AI/ML</h3> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-pink-400 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="terminal rounded-lg overflow-hidden"> | |
| <div class="terminal-header p-3 flex items-center"> | |
| <div class="flex space-x-2 mr-4"> | |
| <span class="w-3 h-3 rounded-full bg-red-500"></span> | |
| <span class="w-3 h-3 rounded-full bg-yellow-500"></span> | |
| <span class="w-3 h-3 rounded-full bg-green-500"></span> | |
| </div> | |
| <span class="text-sm text-gray-400">terminal — zsh</span> | |
| </div> | |
| <div class="terminal-body p-4 font-mono text-sm"> | |
| <div class="mb-2"> | |
| <span class="text-green-400">$</span> <span class="text-cyan-400">whoami</span> | |
| </div> | |
| <div class="mb-4 text-gray-300"> | |
| digital_creator<br> | |
| ui_architect<br> | |
| code_alchemist | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-green-400">$</span> <span class="text-cyan-400">skills --list</span> | |
| </div> | |
| <div class="text-gray-300"> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div>> UX Design</div> | |
| <div>> UI Design</div> | |
| <div>> Front-end Development</div> | |
| <div>> Deep Research</div> | |
| <div>> AI Integration</div> | |
| <div>> Motion Design</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-green-400">$</span> <span class="text-cyan-400 blink">_</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6 neon-text">Methodologies & Approach</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 bg-cyan-400/10 rounded-full flex items-center justify-center text-cyan-400"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-lg mb-1">Atomic Design</h4> | |
| <p class="text-gray-400">Building systems from foundational components that combine to form complex interfaces.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 bg-purple-400/10 rounded-full flex items-center justify-center text-purple-400"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-lg mb-1">Design Systems</h4> | |
| <p class="text-gray-400">Creating scalable, consistent design languages that evolve with product needs.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 bg-blue-400/10 rounded-full flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-lg mb-1">AI-First Design</h4> | |
| <p class="text-gray-400">Leveraging machine learning to create adaptive, personalized user experiences.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gradient-to-b from-black/80 to-black"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold glitch" data-text="GET IN TOUCH"> | |
| <span class="gradient-text">GET IN TOUCH</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto mt-4"></div> | |
| <p class="mt-6 max-w-2xl mx-auto text-gray-300">Let's collaborate on something extraordinary</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Name</label> | |
| <input type="text" id="name" class="w-full bg-gray-900/50 border border-gray-700 focus:border-cyan-400 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-400/30 transition-all" placeholder="Your name"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full bg-gray-900/50 border border-gray-700 focus:border-cyan-400 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-400/30 transition-all" placeholder="your@email.com"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-300 mb-1">Subject</label> | |
| <input type="text" id="subject" class="w-full bg-gray-900/50 border border-gray-700 focus:border-cyan-400 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-400/30 transition-all" placeholder="What's this about?"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label> | |
| <textarea id="message" rows="5" class="w-full bg-gray-900/50 border border-gray-700 focus:border-cyan-400 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-400/30 transition-all" placeholder="Tell me about your project..."></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:shadow-lg hover:shadow-cyan-500/30 transition-all transform hover:scale-[1.02]"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div> | |
| <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 h-full"> | |
| <h3 class="text-2xl font-bold mb-6 neon-text">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-cyan-400/10 rounded-full flex items-center justify-center text-cyan-400"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-300">Email</h4> | |
| <a href="mailto:hello@mikedesigns.dev" class="text-cyan-400 hover:text-cyan-300">mikejarce@icloud.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-blue-400/10 rounded-full flex items-center justify-center text-blue-400"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-300">Location</h4> | |
| <p class="text-gray-400">The Casa • UTC±0</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 bg-purple-400/10 rounded-full flex items-center justify-center text-purple-400"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-300">Availability</h4> | |
| <p class="text-gray-400">Currently accepting new projects</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 bg-black/90 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-6 md:mb-0"> | |
| <span class="text-2xl font-bold gradient-text orbitron">Mike Designs</span> | |
| <span class="text-xs bg-cyan-400/20 text-cyan-400 px-2 py-1 rounded">Portfolio</span> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-gray-400 text-sm">© 2025 Mike Designs. All rights reserved.</p> | |
| <p class="text-gray-500 text-xs mt-1">Crafted with <i class="fas fa-heart text-red-400"></i> in the digital realm. Powered by Hugging Face.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Create starfield | |
| const starfield = document.getElementById('starfield'); | |
| if (starfield) { | |
| const starsCount = 150; | |
| for (let i = 0; i < starsCount; i++) { | |
| const star = document.createElement('div'); | |
| star.classList.add('star'); | |
| // Random star properties | |
| const size = Math.random() * 2 + 1; | |
| const x = Math.random() * 100; | |
| const y = Math.random() * 100; | |
| const opacity = Math.random() * 0.8 + 0.2; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| star.style.left = `${x}%`; | |
| star.style.top = `${y}%`; | |
| star.style.opacity = opacity; | |
| starfield.appendChild(star); | |
| } | |
| } | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Cursor trailer effect | |
| const trailer = document.getElementById("cursor-trailer"); | |
| const animateTrailer = (e, interacting) => { | |
| const x = e.clientX, | |
| y = e.clientY; | |
| const keyframes = { | |
| transform: `translate(${x}px, ${y}px) scale(${interacting ? 3 : 1})`, | |
| opacity: interacting ? 0.5 : 0.2 | |
| }; | |
| trailer.animate(keyframes, { | |
| duration: 800, | |
| fill: "forwards" | |
| }); | |
| } | |
| const getTrailerClass = type => { | |
| switch(type) { | |
| case "button": | |
| case "a": | |
| return "interactable"; | |
| default: | |
| return ""; | |
| } | |
| } | |
| window.onmousemove = e => { | |
| const interactable = e.target.closest("button, a"), | |
| interacting = interactable !== null; | |
| animateTrailer(e, interacting); | |
| trailer.className = getTrailerClass(interactable?.tagName.toLowerCase()); | |
| } | |
| // Scroll reveal animation | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| document.querySelectorAll('section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| // Add animation class to elements when they come into view | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const animatedElements = document.querySelectorAll('.project-card, .terminal, form, .bg-gray-900/50'); | |
| animatedElements.forEach(el => { | |
| el.classList.add('opacity-0', 'transition-opacity', 'duration-500', 'ease-out'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.remove('opacity-0'); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| observer.observe(el); | |
| }); | |
| }); | |
| // Terminal typing effect | |
| const terminalText = [ | |
| {text: "Initializing portfolio interface...", delay: 1000}, | |
| {text: "Loading creative modules...", delay: 800}, | |
| {text: "Synthesizing design systems...", delay: 1200}, | |
| {text: "> System ready", delay: 500, class: "text-green-400"} | |
| ]; | |
| const terminalBody = document.querySelector('.terminal-body'); | |
| if (terminalBody) { | |
| let currentIndex = 0; | |
| function typeNextLine() { | |
| if (currentIndex < terminalText.length) { | |
| const line = terminalText[currentIndex]; | |
| const lineElement = document.createElement('div'); | |
| lineElement.classList.add('mb-2'); | |
| if (line.class) { | |
| lineElement.classList.add(line.class); | |
| } | |
| terminalBody.insertBefore(lineElement, terminalBody.lastElementChild); | |
| let charIndex = 0; | |
| const typingInterval = setInterval(() => { | |
| if (charIndex < line.text.length) { | |
| lineElement.textContent += line.text.charAt(charIndex); | |
| charIndex++; | |
| } else { | |
| clearInterval(typingInterval); | |
| currentIndex++; | |
| setTimeout(typeNextLine, line.delay); | |
| } | |
| }, 50); | |
| } | |
| } | |
| // Start typing after a short delay | |
| setTimeout(typeNextLine, 1500); | |
| } | |
| </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=nextussocial/mikedesigns" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |