Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hi | Creative Developer</title> | |
| <!-- Import Google Fonts --> | |
| <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=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet"> | |
| <!-- Import RemixIcon for Icons --> | |
| <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> | |
| <style> | |
| /* --- CSS VARIABLES & THEME --- */ | |
| :root { | |
| --primary: #6366f1; | |
| --secondary: #ec4899; | |
| --accent: #8b5cf6; | |
| --bg-color: #0f172a; | |
| --card-bg: rgba(30, 41, 59, 0.7); | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --border-color: rgba(255, 255, 255, 0.1); | |
| --glass: blur(12px); | |
| --gradient-main: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| [data-theme="light"] { | |
| --bg-color: #f1f5f9; | |
| --card-bg: rgba(255, 255, 255, 0.8); | |
| --text-main: #1e293b; | |
| --text-muted: #64748b; | |
| --border-color: rgba(0, 0, 0, 0.05); | |
| --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1); | |
| } | |
| /* --- GLOBAL RESET --- */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Outfit', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| transition: background-color 0.5s ease, color 0.5s ease; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| /* --- UTILITIES --- */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| .gradient-text { | |
| background: var(--gradient-main); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.8rem 1.8rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border: none; | |
| font-size: 1rem; | |
| } | |
| .btn-primary { | |
| background: var(--gradient-main); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 2px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .btn-outline:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| /* --- HEADER --- */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: var(--glass); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 1rem 0; | |
| transition: background 0.3s; | |
| } | |
| [data-theme="light"] header { | |
| background: rgba(241, 245, 249, 0.8); | |
| } | |
| .nav-wrapper { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: -1px; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .nav-links a:hover, .nav-links a.active { | |
| color: var(--primary); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -4px; | |
| left: 0; | |
| background: var(--gradient-main); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .theme-toggle { | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| padding: 0.5rem; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| } | |
| .theme-toggle:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--primary); | |
| } | |
| /* Mobile Menu */ | |
| .hamburger { | |
| display: none; | |
| cursor: pointer; | |
| font-size: 1.5rem; | |
| } | |
| /* --- HERO SECTION --- */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| padding-top: 80px; | |
| overflow: hidden; | |
| } | |
| /* Background Blobs */ | |
| .blob { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.4; | |
| z-index: -1; | |
| animation: float 10s infinite alternate; | |
| } | |
| .blob-1 { | |
| width: 400px; | |
| height: 400px; | |
| background: var(--primary); | |
| top: -100px; | |
| left: -100px; | |
| } | |
| .blob-2 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--secondary); | |
| bottom: 10%; | |
| right: -50px; | |
| animation-delay: -5s; | |
| } | |
| .hero-content { | |
| text-align: center; | |
| max-width: 800px; | |
| z-index: 1; | |
| } | |
| .hero h1 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: clamp(4rem, 10vw, 8rem); | |
| font-weight: 800; | |
| line-height: 1; | |
| margin-bottom: 1rem; | |
| letter-spacing: -2px; | |
| } | |
| .hero-subtitle { | |
| font-size: clamp(1.2rem, 3vw, 1.5rem); | |
| color: var(--text-muted); | |
| margin-bottom: 2.5rem; | |
| min-height: 1.6em; /* Prevent layout shift on typing */ | |
| } | |
| .cursor { | |
| display: inline-block; | |
| width: 3px; | |
| background-color: var(--primary); | |
| animation: blink 1s infinite; | |
| } | |
| .hero-btns { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| } | |
| /* --- SECTIONS COMMON --- */ | |
| section { | |
| padding: 6rem 0; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| } | |
| .section-header h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .section-header p { | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| /* --- CARDS GRID --- */ | |
| .grid-3 { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| padding: 2rem; | |
| border-radius: 20px; | |
| transition: var(--transition); | |
| backdrop-filter: blur(5px); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px); | |
| border-color: var(--primary); | |
| box-shadow: var(--shadow); | |
| } | |
| .card-icon { | |
| font-size: 2.5rem; | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| background: rgba(99, 102, 241, 0.1); | |
| width: 70px; | |
| height: 70px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 15px; | |
| } | |
| .card h3 { | |
| margin-bottom: 1rem; | |
| font-size: 1.5rem; | |
| } | |
| .card p { | |
| color: var(--text-muted); | |
| } | |
| /* --- CONTACT SECTION --- */ | |
| .contact-wrapper { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .contact-form { | |
| background: var(--card-bg); | |
| padding: 2.5rem; | |
| border-radius: 20px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 1rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| color: var(--text-main); | |
| font-family: inherit; | |
| transition: var(--transition); | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| /* --- FOOTER --- */ | |
| footer { | |
| border-top: 1px solid var(--border-color); | |
| padding: 3rem 0; | |
| text-align: center; | |
| color: var(--text-muted); | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .social-links a { | |
| font-size: 1.5rem; | |
| transition: var(--transition); | |
| } | |
| .social-links a:hover { | |
| color: var(--primary); | |
| transform: scale(1.1); | |
| } | |
| /* --- ANIMATIONS --- */ | |
| @keyframes float { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(20px, 40px); } | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s ease; | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* --- TOAST --- */ | |
| .toast { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--gradient-main); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| transform: translateY(100px); | |
| opacity: 0; | |
| transition: var(--transition); | |
| z-index: 2000; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .toast.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| /* --- RESPONSIVE --- */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| position: fixed; | |
| top: 70px; | |
| left: 0; | |
| width: 100%; | |
| background: var(--bg-color); | |
| flex-direction: column; | |
| padding: 2rem; | |
| border-bottom: 1px solid var(--border-color); | |
| transform: translateY(-150%); | |
| transition: transform 0.3s ease; | |
| } | |
| .nav-links.open { | |
| transform: translateY(0); | |
| } | |
| .hamburger { | |
| display: block; | |
| } | |
| .contact-wrapper { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero h1 { | |
| font-size: 4rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body data-theme="dark"> | |
| <!-- Header --> | |
| <header> | |
| <div class="container nav-wrapper"> | |
| <div class="logo"> | |
| <span class="gradient-text">Hi.</span> | |
| </div> | |
| <nav> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <!-- Mandatory Link --> | |
| <li> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="gradient-text" style="font-weight: 700;"> | |
| Built with anycoder | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div style="display: flex; align-items: center; gap: 1rem;"> | |
| <div class="theme-toggle" id="themeToggle"> | |
| <i class="ri-sun-line"></i> | |
| </div> | |
| <div class="hamburger" id="hamburger"> | |
| <i class="ri-menu-3-line"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero"> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| <div class="container hero-content"> | |
| <h1 class="reveal">Hi, I'm <span class="gradient-text">Alex</span></h1> | |
| <div class="hero-subtitle reveal"> | |
| I <span id="typewriter"></span><span class="cursor"></span> | |
| </div> | |
| <div class="hero-btns reveal"> | |
| <a href="#contact" class="btn btn-primary"> | |
| Get in Touch <i class="ri-arrow-right-line"></i> | |
| </a> | |
| <a href="#services" class="btn btn-outline"> | |
| View Work | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about"> | |
| <div class="container"> | |
| <div class="section-header reveal"> | |
| <h2>Who I Am</h2> | |
| <p>A passionate creator building digital experiences that matter.</p> | |
| </div> | |
| <div class="grid-3"> | |
| <div class="card reveal"> | |
| <div class="card-icon"><i class="ri-code-s-slash-line"></i></div> | |
| <h3>Clean Code</h3> | |
| <p>I write efficient, maintainable, and scalable code using modern best practices and semantic HTML5.</p> | |
| </div> | |
| <div class="card reveal"> | |
| <div class="card-icon"><i class="ri-paint-brush-line"></i></div> | |
| <h3>Modern Design</h3> | |
| <p>Creating visually stunning interfaces with attention to typography, color theory, and micro-interactions.</p> | |
| </div> | |
| <div class="card reveal"> | |
| <div class="card-icon"><i class="ri-rocket-line"></i></div> | |
| <h3>Performance</h3> | |
| <p>Optimizing for speed and SEO to ensure your application loads instantly and reaches the right audience.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" style="background: rgba(255,255,255,0.02);"> | |
| <div class="container"> | |
| <div class="section-header reveal"> | |
| <h2>What I Do</h2> | |
| <p>Turning complex problems into simple, beautiful solutions.</p> | |
| </div> | |
| <div class="grid-3"> | |
| <div class="card reveal"> | |
| <h3>Web Development</h3> | |
| <p>Full-stack development using the latest technologies. From simple landing pages to complex web apps.</p> | |
| </div> | |
| <div class="card reveal"> | |
| <h3>UI/UX Design</h3> | |
| <p>Designing intuitive user interfaces and experiences that delight users and drive engagement.</p> | |
| </div> | |
| <div class="card reveal"> | |
| <h3>Mobile Apps</h3> | |
| <p>Cross-platform mobile application development that works seamlessly on iOS and Android devices.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact"> | |
| <div class="container"> | |
| <div class="contact-wrapper"> | |
| <div class="reveal"> | |
| <h2>Let's Work Together</h2> | |
| <p style="color: var(--text-muted); margin: 1rem 0 2rem;"> | |
| Have a project in mind? Fill out the form or send me an email. I'm currently open to new opportunities. | |
| </p> | |
| <div style="display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem;"> | |
| <i class="ri-mail-send-line" style="color: var(--primary); font-size: 1.2rem;"></i> | |
| <span>hello@example.com</span> | |
| </div> | |
| <div style="display: flex; gap: 1rem; align-items: center;"> | |
| <i class="ri-map-pin-line" style="color: var(--primary); font-size: 1.2rem;"></i> | |
| <span>New York, USA</span> | |
| </div> | |
| </div> | |
| <form class="contact-form reveal" id="contactForm"> | |
| <div class="form-group"> | |
| <label for="name">Name</label> | |
| <input type="text" id="name" class="form-control" placeholder="Your Name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" class="form-control" placeholder="your@email.com" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Message</label> | |
| <textarea id="message" rows="4" class="form-control" placeholder="Tell me about your project..." required></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary" style="width: 100%;"> | |
| Send Message <i class="ri-send-plane-fill"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="social-links"> | |
| <a href="#"><i class="ri-github-fill"></i></a> | |
| <a href="#"><i class="ri-linkedin-fill"></i></a> | |
| <a href="#"><i class="ri-twitter-x-fill"></i></a> | |
| <a href="#"><i class="ri-dribbble-line"></i></a> | |
| </div> | |
| <p>© 2023 Alex Creative. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <!-- Toast Notification --> | |
| <div class="toast" id="toast"> | |
| <i class="ri-checkbox-circle-line"></i> | |
| <span>Message sent successfully!</span> | |
| </div> | |
| <!-- JavaScript --> | |
| <script> | |
| // --- 1. Theme Toggle Logic --- | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const body = document.body; | |
| const icon = themeToggle.querySelector('i'); | |
| themeToggle.addEventListener('click', () => { | |
| if (body.getAttribute('data-theme') === 'dark') { | |
| body.setAttribute('data-theme', 'light'); | |
| icon.classList.replace('ri-sun-line', 'ri-moon-line'); | |
| } else { | |
| body.setAttribute('data-theme', 'dark'); | |
| icon.classList.replace('ri-moon-line', 'ri-sun-line'); | |
| } | |
| }); | |
| // --- 2. Mobile Menu Logic --- | |
| const hamburger = document.getElementById('hamburger'); | |
| const navLinks = document.getElementById('navLinks'); | |
| const links = navLinks.querySelectorAll('a'); | |
| hamburger.addEventListener('click', () => { | |
| navLinks.classList.toggle('open'); | |
| const icon = hamburger.querySelector('i'); | |
| if (navLinks.classList.contains('open')) { | |
| icon.classList.replace('ri-menu-3-line', 'ri-close-line'); | |
| } else { | |
| icon.classList.replace('ri-close-line', 'ri-menu-3-line'); | |
| } | |
| }); | |
| // Close menu when clicking a link | |
| links.forEach(link => { | |
| link.addEventListener('click', () => { | |
| navLinks.classList.remove('open'); | |
| hamburger.querySelector('i').classList.replace('ri-close-line', 'ri-menu-3-line'); | |
| }); | |
| }); | |
| // --- 3. Typewriter Effect --- | |
| const textElement = document.getElementById('typewriter'); | |
| const texts = ["build websites.", "design interfaces.", "solve problems."]; | |
| let count = 0; | |
| let index = 0; | |
| let currentText = ''; | |
| let letter = ''; | |
| (function type() { | |
| if (count === texts.length) { | |
| count = 0; | |
| } | |
| currentText = texts[count]; | |
| letter = currentText.slice(0, ++index); | |
| textElement.textContent = letter; | |
| if (letter.length === currentText.length) { | |
| count++; | |
| index = 0; | |
| setTimeout(type, 2000); // Wait before next word | |
| } else { | |
| setTimeout(type, 100); // Typing speed | |
| } | |
| }()); | |
| // --- 4. Scroll Reveal Animation --- | |
| const revealElements = document.querySelectorAll('.reveal'); | |
| const revealOnScroll = () => { | |
| const windowHeight = window.innerHeight; | |
| const elementVisible = 150; | |
| revealElements.forEach((reveal) => { | |
| const elementTop = reveal.getBoundingClientRect().top; | |
| if (elementTop < windowHeight - elementVisible) { | |
| reveal.classList.add('active'); | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', revealOnScroll); | |
| // Trigger once on load | |
| revealOnScroll(); | |
| // --- 5. Contact Form Handling --- | |
| const contactForm = document.getElementById('contactForm'); | |
| const toast = document.getElementById('toast'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Simulate form submission | |
| const btn = contactForm.querySelector('button'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = 'Sending...'; | |
| btn.disabled = true; | |
| setTimeout(() => { | |
| // Show Toast | |
| toast.classList.add('show'); | |
| // Reset Form | |
| contactForm.reset(); | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| // Hide Toast after 3 seconds | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| }, 1500); | |
| }); | |
| </script> | |
| </body> | |
| </html> |