Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Welcome</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary: #6366f1; | |
| --secondary: #8b5cf6; | |
| --accent: #ec4899; | |
| --dark: #0f172a; | |
| --light: #f8fafc; | |
| --gradient: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent)); | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: var(--dark); | |
| color: var(--light); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Animated Background */ | |
| .bg-animation { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .bg-animation::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: | |
| radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.1) 0%, transparent 40%); | |
| animation: bgFloat 20s ease-in-out infinite; | |
| } | |
| @keyframes bgFloat { | |
| 0%, 100% { transform: translate(0, 0) rotate(0deg); } | |
| 33% { transform: translate(2%, 2%) rotate(1deg); } | |
| 66% { transform: translate(-1%, 1%) rotate(-1deg); } | |
| } | |
| /* Floating Orbs */ | |
| .orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(60px); | |
| animation: orbFloat 15s ease-in-out infinite; | |
| opacity: 0.5; | |
| } | |
| .orb-1 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--primary); | |
| top: 10%; | |
| left: 10%; | |
| animation-delay: 0s; | |
| } | |
| .orb-2 { | |
| width: 250px; | |
| height: 250px; | |
| background: var(--secondary); | |
| top: 60%; | |
| right: 10%; | |
| animation-delay: -5s; | |
| } | |
| .orb-3 { | |
| width: 200px; | |
| height: 200px; | |
| background: var(--accent); | |
| bottom: 20%; | |
| left: 30%; | |
| animation-delay: -10s; | |
| } | |
| @keyframes orbFloat { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 25% { transform: translate(30px, -30px) scale(1.1); } | |
| 50% { transform: translate(-20px, 20px) scale(0.9); } | |
| 75% { transform: translate(20px, 30px) scale(1.05); } | |
| } | |
| /* Header */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 1.5rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| z-index: 100; | |
| backdrop-filter: blur(10px); | |
| background: rgba(15, 23, 42, 0.5); | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .anycoder-link { | |
| color: var(--light); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| padding: 0.5rem 1rem; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 25px; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .anycoder-link:hover { | |
| background: var(--gradient); | |
| border-color: transparent; | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3); | |
| } | |
| .anycoder-link::before { | |
| content: '⚡'; | |
| } | |
| /* Main Content */ | |
| main { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 2rem; | |
| text-align: center; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 1.25rem; | |
| background: rgba(99, 102, 241, 0.1); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| border-radius: 50px; | |
| font-size: 0.875rem; | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| animation: fadeInDown 0.8s ease forwards; | |
| } | |
| .hero-badge::before { | |
| content: ''; | |
| width: 8px; | |
| height: 8px; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.5); } | |
| } | |
| h1 { | |
| font-size: clamp(2.5rem, 8vw, 5rem); | |
| font-weight: 700; | |
| line-height: 1.1; | |
| margin-bottom: 1.5rem; | |
| animation: fadeInUp 0.8s ease 0.2s forwards; | |
| opacity: 0; | |
| } | |
| h1 .highlight { | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| position: relative; | |
| } | |
| h1 .highlight::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: var(--gradient); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| animation: underline 1s ease 1s forwards; | |
| } | |
| @keyframes underline { | |
| to { transform: scaleX(1); } | |
| } | |
| p { | |
| font-size: clamp(1rem, 2vw, 1.25rem); | |
| color: rgba(248, 250, 252, 0.7); | |
| max-width: 600px; | |
| margin-bottom: 2.5rem; | |
| animation: fadeInUp 0.8s ease 0.4s forwards; | |
| opacity: 0; | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| animation: fadeInUp 0.8s ease 0.6s forwards; | |
| opacity: 0; | |
| } | |
| .btn { | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| border: none; | |
| } | |
| .btn-primary { | |
| background: var(--gradient); | |
| color: white; | |
| box-shadow: 0 10px 40px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 50px rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: translateY(-3px); | |
| } | |
| /* Greeting Cards */ | |
| .greeting-cards { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 3rem; | |
| animation: fadeInUp 0.8s ease 0.8s forwards; | |
| opacity: 0; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .greeting-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 1.5rem 2rem; | |
| border-radius: 16px; | |
| text-align: left; | |
| transition: all 0.3s ease; | |
| } | |
| .greeting-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .greeting-card h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--primary); | |
| } | |
| .greeting-card p { | |
| font-size: 0.9rem; | |
| margin-bottom: 0; | |
| color: rgba(248, 250, 252, 0.6); | |
| } | |
| /* Animations */ | |
| @keyframes fadeInDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| header { | |
| padding: 1rem; | |
| } | |
| .logo { | |
| font-size: 1.25rem; | |
| } | |
| .anycoder-link { | |
| font-size: 0.8rem; | |
| padding: 0.4rem 0.8rem; | |
| } | |
| main { | |
| padding: 1rem; | |
| } | |
| .greeting-cards { | |
| flex-direction: column; | |
| width: 100%; | |
| max-width: 400px; | |
| } | |
| .greeting-card { | |
| width: 100%; | |
| } | |
| } | |
| /* Scroll indicator */ | |
| .scroll-indicator { | |
| position: absolute; | |
| bottom: 2rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: rgba(248, 250, 252, 0.5); | |
| font-size: 0.75rem; | |
| animation: bounce 2s ease-in-out infinite; | |
| } | |
| .scroll-indicator span { | |
| width: 20px; | |
| height: 35px; | |
| border: 2px solid rgba(248, 250, 252, 0.3); | |
| border-radius: 10px; | |
| position: relative; | |
| } | |
| .scroll-indicator span::before { | |
| content: ''; | |
| position: absolute; | |
| top: 6px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 4px; | |
| height: 8px; | |
| background: var(--primary); | |
| border-radius: 2px; | |
| animation: scrollDot 2s ease-in-out infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateX(-50%) translateY(0); } | |
| 50% { transform: translateX(-50%) translateY(10px); } | |
| } | |
| @keyframes scrollDot { | |
| 0%, 100% { opacity: 1; top: 6px; } | |
| 50% { opacity: 0.5; top: 15px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Background --> | |
| <div class="bg-animation"> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="orb orb-3"></div> | |
| </div> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo">Portfolio</div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <div class="hero-badge"> | |
| Hello & Welcome | |
| </div> | |
| <h1> | |
| Hi there! 👋<br> | |
| I'm <span class="highlight">Creative Developer</span> | |
| </h1> | |
| <p> | |
| Crafting beautiful digital experiences with modern web technologies. | |
| Let's build something amazing together. | |
| </p> | |
| <div class="cta-buttons"> | |
| <a href="#" class="btn btn-primary">View My Work</a> | |
| <a href="#" class="btn btn-secondary">Get In Touch</a> | |
| </div> | |
| <div class="greeting-cards"> | |
| <div class="greeting-card"> | |
| <h3>💡 Innovation</h3> | |
| <p>Creating cutting-edge solutions with modern technologies</p> | |
| </div> | |
| <div class="greeting-card"> | |
| <h3>🎨 Design</h3> | |
| <p>Beautiful, intuitive interfaces that users love</p> | |
| </div> | |
| <div class="greeting-card"> | |
| <h3>🚀 Performance</h3> | |
| <p>Fast, efficient, and scalable applications</p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Scroll Indicator --> | |
| <div class="scroll-indicator"> | |
| <span></span> | |
| Scroll | |
| </div> | |
| <script> | |
| // Add smooth scroll behavior | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Add parallax effect to orbs on mouse move | |
| document.addEventListener('mousemove', (e) => { | |
| const orbs = document.querySelectorAll('.orb'); | |
| const x = e.clientX / window.innerWidth; | |
| const y = e.clientY / window.innerHeight; | |
| orbs.forEach((orb, index) => { | |
| const speed = (index + 1) * 20; | |
| orb.style.transform = `translate(${x * speed}px, ${y * speed}px)`; | |
| }); | |
| }); | |
| // Add intersection observer for animations on scroll | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe greeting cards | |
| document.querySelectorAll('.greeting-card').forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(30px)'; | |
| card.style.transition = `all 0.6s ease ${index * 0.2}s`; | |
| observer.observe(card); | |
| }); | |
| </script> | |
| </body> | |
| </html> |