Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sherlock - Expert Front-End Developer</title> | |
| <meta name="description" content="Sherlock by Trailblazer Labs - Production-ready websites built with HTML, CSS, and vanilla JavaScript"> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <h1 class="logo">🔍 Sherlock</h1> | |
| <nav class="nav" aria-label="Main navigation"> | |
| <button class="menu-toggle" aria-expanded="false" aria-controls="nav-menu"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </button> | |
| <ul class="nav-menu" id="nav-menu"> | |
| <li><a href="#home" class="nav-link">Home</a></li> | |
| <li><a href="#services" class="nav-link">Services</a></li> | |
| <li><a href="#portfolio" class="nav-link">Portfolio</a></li> | |
| <li><a href="#contact" class="nav-link">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="header-credits"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <section id="home" class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h2 class="hero-title">Expert Front-End Developer</h2> | |
| <p class="hero-subtitle">Production-ready websites crafted with precision using HTML, CSS, and vanilla JavaScript. No frameworks. Pure code excellence.</p> | |
| <div class="hero-buttons"> | |
| <a href="#contact" class="btn btn-primary">Start Project</a> | |
| <a href="#portfolio" class="btn btn-secondary">View Work</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="services" class="services"> | |
| <div class="container"> | |
| <h2 class="section-title">What I Build</h2> | |
| <div class="services-grid"> | |
| <div class="service-card"> | |
| <div class="service-icon">🎨</div> | |
| <h3>Responsive Design</h3> | |
| <p>Mobile-first approach with flawless cross-device compatibility.</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon">⚡</div> | |
| <h3>Vanilla JavaScript</h3> | |
| <p>Fast, lightweight interactivity without framework bloat.</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon">🚀</div> | |
| <h3>Production Ready</h3> | |
| <p>SEO optimized, accessible, and deployment-ready code.</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon">🔍</div> | |
| <h3>Semantic HTML</h3> | |
| <p>Clean, standards-compliant markup that search engines love.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="portfolio" class="portfolio"> | |
| <div class="container"> | |
| <h2 class="section-title">Portfolio</h2> | |
| <div class="portfolio-grid"> | |
| <div class="portfolio-item"> | |
| <div class="portfolio-image"></div> | |
| <div class="portfolio-info"> | |
| <h3>E-Commerce Site</h3> | |
| <p>Fully responsive shopping experience</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-item"> | |
| <div class="portfolio-image"></div> | |
| <div class="portfolio-info"> | |
| <h3>Dashboard App</h3> | |
| <p>Data visualization with vanilla JS</p> | |
| </div> | |
| </div> | |
| <div class="portfolio-item"> | |
| <div class="portfolio-image"></div> | |
| <div class="portfolio-info"> | |
| <h3>Landing Page</h3> | |
| <p>High-conversion marketing page</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="contact"> | |
| <div class="container"> | |
| <h2 class="section-title">Ready to Build?</h2> | |
| <p class="section-subtitle">Describe your project and I'll create a production-ready solution.</p> | |
| <form class="contact-form" novalidate> | |
| <div class="form-group"> | |
| <label for="name">Name</label> | |
| <input type="text" id="name" name="name" required> | |
| <span class="error-message">Please enter your name</span> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" name="email" required> | |
| <span class="error-message">Please enter a valid email</span> | |
| </div> | |
| <div class="form-group"> | |
| <label for="project">Project Description</label> | |
| <textarea id="project" name="project" rows="5" required></textarea> | |
| <span class="error-message">Please describe your project</span> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Send Request</button> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <p>© 2024 Sherlock by Trailblazer Labs. Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer">anycoder</a>.</p> | |
| </div> | |
| </footer> | |
| <script src="assets |