Spaces:
Running
Running
Upload Qwen3.6-27B-UD-Q5_K_XL evaluation: dashboard, report, 11 HTML demos, 8 agentic transcripts
f696067 verified | ```html | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Maya Chen | Product Designer</title> | |
| <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=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-color: #faf6f1; | |
| --text-color: #1a1a1a; | |
| --accent-color: #ff4d2e; | |
| --font-display: 'Space Grotesk', sans-serif; | |
| --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| --padding-x: 4vw; | |
| --padding-y: 8vh; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| cursor: none; /* Hide default cursor for custom one */ | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| font-family: var(--font-body); | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* Custom Cursor */ | |
| .cursor { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 20px; | |
| height: 20px; | |
| background-color: var(--accent-color); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 9999; | |
| mix-blend-mode: difference; | |
| transform: translate(-50%, -50%) scale(1); | |
| transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67); | |
| } | |
| .cursor.hovered { | |
| transform: translate(-50%, -50%) scale(3); | |
| background-color: var(--accent-color); | |
| opacity: 0.8; | |
| } | |
| .cursor-text { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| z-index: 10000; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 14px; | |
| color: var(--accent-color); | |
| opacity: 0; | |
| transform: translate(-50%, -50%); | |
| transition: opacity 0.3s ease; | |
| } | |
| .cursor-text.visible { | |
| opacity: 1; | |
| } | |
| /* Typography Utilities */ | |
| h1, h2, h3, h4 { | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| line-height: 0.9; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| /* Section 1: Hero */ | |
| .hero { | |
| height: 100vh; | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| position: relative; | |
| padding: var(--padding-x); | |
| } | |
| .hero-headline { | |
| font-size: clamp(4rem, 13vw, 12rem); | |
| text-align: center; | |
| letter-spacing: -0.04em; | |
| color: var(--text-color); | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 0.2em; | |
| } | |
| .char { | |
| display: inline-block; | |
| opacity: 0; | |
| transform: translateY(100%); | |
| animation: revealChar 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| .hero-sub { | |
| margin-top: 2rem; | |
| font-size: 1.2rem; | |
| font-family: var(--font-display); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| opacity: 0; | |
| animation: fadeIn 1s 1.5s forwards; | |
| } | |
| @keyframes revealChar { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| to { opacity: 1; } | |
| } | |
| /* Section 2: Horizontal Scroll Projects */ | |
| .projects-wrapper { | |
| position: relative; | |
| width: 100%; | |
| height: 300vh; /* Determines scroll duration */ | |
| } | |
| .projects-sticky { | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| width: 100%; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .projects-strip { | |
| display: flex; | |
| gap: 4vw; | |
| padding-left: var(--padding-x); | |
| padding-right: var(--padding-x); | |
| will-change: transform; | |
| } | |
| .project-card { | |
| flex: 0 0 auto; | |
| width: 60vw; | |
| max-width: 800px; | |
| height: 70vh; | |
| background-color: #e0e0e0; | |
| border-radius: 8px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.5s ease; | |
| display: flex; | |
| align-items: flex-end; | |
| padding: 2rem; | |
| } | |
| .project-card:hover { | |
| transform: scale(0.98); | |
| } | |
| /* Abstract CSS Gradients for Project Covers */ | |
| .bg-1 { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } | |
| .bg-2 { background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); } | |
| .bg-3 { background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } | |
| .bg-4 { background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); } | |
| .bg-5 { background: radial-gradient(circle, #4facfe 0%, #00f2fe 100%); } | |
| .bg-6 { background: linear-gradient(to right, #fa709a 0%, #fee140 100%); } | |
| .project-info { | |
| background: rgba(255,255,255,0.9); | |
| backdrop-filter: blur(10px); | |
| padding: 1.5rem; | |
| border-radius: 4px; | |
| width: 100%; | |
| transform: translateY(100%); | |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .project-card:hover .project-info { | |
| transform: translateY(0); | |
| } | |
| .project-title { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .project-meta { | |
| font-size: 0.9rem; | |
| color: #666; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| /* Section 3: About & Marquee */ | |
| .about-section { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: var(--padding-y) var(--padding-x); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .about-content { | |
| max-width: 800px; | |
| z-index: 2; | |
| margin-bottom: 4rem; | |
| } | |
| .about-label { | |
| color: var(--accent-color); | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| display: block; | |
| font-family: var(--font-display); | |
| } | |
| .about-text { | |
| font-size: clamp(2rem, 4vw, 3.5rem); | |
| line-height: 1.1; | |
| font-family: var(--font-display); | |
| font-weight: 500; | |
| } | |
| .marquee-container { | |
| width: 100%; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| padding: 2rem 0; | |
| border-top: 1px solid rgba(0,0,0,0.1); | |
| border-bottom: 1px solid rgba(0,0,0,0.1); | |
| transform: rotate(-2deg) scale(1.1); | |
| } | |
| .marquee-content { | |
| display: inline-block; | |
| animation: marquee 20s linear infinite; | |
| } | |
| .marquee-item { | |
| display: inline-block; | |
| font-size: 6rem; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| padding: 0 2rem; | |
| color: transparent; | |
| -webkit-text-stroke: 1px var(--text-color); | |
| transition: color 0.3s; | |
| } | |
| .marquee-item:hover { | |
| color: var(--accent-color); | |
| -webkit-text-stroke: 1px var(--accent-color); | |
| } | |
| @keyframes marquee { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| /* Section 4: Selected Work / Case Study Teaser */ | |
| .work-section { | |
| padding: var(--padding-y) var(--padding-x); | |
| min-height: 80vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .case-study { | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .case-image { | |
| width: 100%; | |
| aspect-ratio: 4/3; | |
| background: linear-gradient(225deg, #e6e9f0 0%, #eef1f5 100%); | |
| border-radius: 12px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .case-image::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(circle at center, var(--accent-color) 0%, transparent 60%); | |
| opacity: 0.1; | |
| } | |
| .case-details h3 { | |
| font-size: 4rem; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| } | |
| .case-details p { | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| margin-bottom: 2rem; | |
| max-width: 400px; | |
| } | |
| /* Section 5: Contact */ | |
| .contact-section { | |
| height: 90vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .contact-headline { | |
| font-size: clamp(3rem, 8vw, 6rem); | |
| margin-bottom: 3rem; | |
| font-family: var(--font-display); | |
| } | |
| .magnetic-btn-wrapper { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .magnetic-btn { | |
| background-color: var(--text-color); | |
| color: var(--bg-color); | |
| padding: 1.5rem 4rem; | |
| font-size: 1.5rem; | |
| border-radius: 50px; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| border: none; | |
| position: relative; | |
| transition: background-color 0.3s; | |
| z-index: 2; | |
| } | |
| .magnetic-btn:hover { | |
| background-color: var(--accent-color); | |
| } | |
| /* Footer */ | |
| footer { | |
| padding: 2rem var(--padding-x); | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.9rem; | |
| border-top: 1px solid rgba(0,0,0,0.1); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .case-study { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .project-card { | |
| width: 80vw; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Custom Cursor Elements --> | |
| <div class="cursor"></div> | |
| <div class="cursor-text">VIEW</div> | |
| <!-- Intro Section --> | |
| <section class="hero"> | |
| <h1 class="hero-headline" id="hero-headline">MAYA CHEN</h1> | |
| <div class="hero-sub">Product Designer & Creative Technologist</div> | |
| </section> | |
| <!-- Horizontal Scroll Projects --> | |
| <div class="projects-wrapper"> | |
| <div class="projects-sticky"> | |
| <div class="projects-strip" id="projects-strip"> | |
| <!-- Project 1 --> | |
| <div class="project-card bg-1 hover-target"> | |
| <div class="project-info"> | |
| <h2 class="project-title">FinTech Dashboard</h2> | |
| <div class="project-meta">UI/UX • 2023</div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card bg-2 hover-target"> | |
| <div class="project-info"> | |
| <h2 class="project-title">Neon Commerce</h2> | |
| <div class="project-meta">E-Commerce • 2023</div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card bg-3 hover-target"> | |
| <div class="project-info"> | |
| <h2 class="project-title">EcoTrack App</h2> | |
| <div class="project-meta">Mobile Design • 2022</div> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="project-card bg-4 hover-target"> | |
| <div class="project-info"> | |
| <h2 class="project-title">Artisan Portfolio</h2> | |
| <div class="project-meta">Web Design • 2022</div> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="project-card bg-5 hover-target"> | |
| <div class="project-info"> | |
| <h2 class="project-title">SaaS Platform</h2> | |
| <div class="project-meta">Product Strategy • 2021</div> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="project-card bg-6 hover-target"> | |
| <div class="project-info"> | |
| <h2 class="project-title">Health & Wellness</h2> | |
| <div class="project-meta">Design System • 2021</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- About & Marquee --> | |
| <section class="about-section"> | |
| <div class="about-content"> | |
| <span class="about-label">ABOUT ME</span> | |
| <p class="about-text"> | |
| I craft digital experiences that balance aesthetic precision with functional clarity. Specializing in design systems and interactive interfaces that breathe. | |
| </p> | |
| </div> | |
| <div class="marquee-container"> | |
| <div class="marquee-content"> | |
| <span class="marquee-item hover-target">UI DESIGN</span> | |
| <span class="marquee-item hover-target">PROTOTYPING</span> | |
| <span class="marquee-item hover-target">DESIGN SYSTEMS</span> | |
| <span class="marquee-item hover-target">FRONTEND DEV</span> | |
| <span class="marquee-item hover-target">MOTION</span> | |
| <span class="marquee-item hover-target">STRATEGY</span> | |
| <!-- Duplicate for seamless loop --> | |
| <span class="marquee-item hover-target">UI DESIGN</span> | |
| <span class="marquee-item hover-target">PROTOTYPING</span> | |
| <span class="marquee-item hover-target">DESIGN SYSTEMS</span> | |
| <span class="marquee-item hover-target">FRONTEND DEV</span> | |
| <span class="marquee-item hover-target">MOTION</span> | |
| <span class="marquee-item hover-target">STRATEGY</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Selected Work Case Study --> | |
| <section class="work-section"> | |
| <div class="case-study"> | |
| <div class="case-image hover-target"></div> | |
| <div class="case-details"> | |
| <span class="about-label">FEATURED PROJECT</span> | |
| <h3 class="hover-target">Lumina OS</h3> | |
| <p>A complete reimagining of the desktop operating system interface for next-gen hardware. Focusing on spatial computing and adaptive UI.</p> | |
| <a href="#" class="hover-target" style="border-bottom: 2px solid var(--accent-color); font-weight: 700;">Read Case Study</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="contact-section"> | |
| <h2 class="contact-headline">Let's create something <br>extraordinary.</h2> | |
| <div class="magnetic-btn-wrapper" id="magnetic-wrapper"> | |
| <a href="mailto:hello@mayachen.com" class="magnetic-btn hover-target">Get in Touch</a> | |
| </div> | |
| </section> | |
| <footer> | |
| <div>© 2023 Maya Chen</div> | |
| <div>Based in San Francisco, CA</div> | |
| </footer> | |
| <script> | |
| // 1. Kinetic Typography (Letter Reveal) | |
| const headline = document.getElementById('hero-headline'); | |
| const text = headline.innerText; | |
| headline.innerHTML = ''; | |
| text.split('').forEach((char, index) => { | |
| const span = document.createElement('span'); | |
| span.innerText = char === ' ' ? '\u00A0' : char; | |
| span.className = 'char'; | |
| span.style.animationDelay = `${index * 0.05 + 0.2}s`; | |
| headline.appendChild(span); | |
| }); | |
| // 2. Horizontal Scroll Logic | |
| const projectsWrapper = document.querySelector('.projects-wrapper'); | |
| const projectsStrip = document.querySelector('.projects-strip'); | |
| window.addEventListener('scroll', () => { | |
| const wrapperTop = projectsWrapper.offsetTop; | |
| const wrapperHeight = projectsWrapper.offsetHeight; | |
| const windowHeight = window.innerHeight; | |
| // How far into the section we are | |
| const scrolled = window.scrollY - wrapperTop; | |
| // Calculate percentage (0 to 1) | |
| // We subtract windowHeight because we want the animation to finish when the bottom hits the bottom | |
| const percentage = Math.min(Math.max(scrolled / (wrapperHeight - windowHeight), 0), 1); | |
| // Calculate translation distance | |
| // Total width of strip minus viewport width | |
| const moveDistance = projectsStrip.scrollWidth - window.innerWidth; | |
| // Apply transform | |
| projectsStrip.style.transform = `translateX(-${percentage * moveDistance}px)`; | |
| }); | |
| // 3. Custom Cursor Logic | |
| const cursor = document.querySelector('.cursor'); | |
| const cursorText = document.querySelector('.cursor-text'); | |
| const hoverTargets = document.querySelectorAll('.hover-target'); | |
| let mouseX = 0; | |
| let mouseY = 0; | |
| let cursorX = 0; | |
| let cursorY = 0; | |
| document.addEventListener('mousemove', (e) => { | |
| mouseX = e.clientX; | |
| mouseY = e.clientY; | |
| // Update text cursor immediately | |
| cursorText.style.left = mouseX + 'px'; | |
| cursorText.style.top = mouseY + 'px'; | |
| }); | |
| // Smooth follow for dot cursor | |
| function animateCursor() { | |
| const dx = mouseX - cursorX; | |
| const dy = mouseY - cursorY; | |
| cursorX += dx * 0.15; | |
| cursorY += dy * 0.15; | |
| cursor.style.left = cursorX + 'px'; | |
| cursor.style.top = cursorY + 'px'; | |
| requestAnimationFrame(animateCursor); | |
| } | |
| animateCursor(); | |
| // Hover effects | |
| hoverTargets.forEach(target => { | |
| target.addEventListener('mouseenter', () => { | |
| cursor.classList.add('hovered'); | |
| cursorText.classList.add('visible'); | |
| // Change text based on element type | |
| if(target.tagName === 'A' || target.classList.contains('project-card')) { | |
| cursorText.innerText = 'VIEW'; | |
| } else if (target.classList.contains('marquee-item')) { | |
| cursorText.innerText = 'SKILL'; | |
| } else { | |
| cursorText.innerText = 'MORE'; | |
| } | |
| }); | |
| target.addEventListener('mouseleave', () => { | |
| cursor.classList.remove('hovered'); | |
| cursorText.classList.remove('visible'); | |
| }); | |
| }); | |
| // 4. Magnetic Button Logic | |
| const magneticWrapper = document.getElementById('magnetic-wrapper'); | |
| const magneticBtn = magneticWrapper.querySelector('.magnetic-btn'); | |
| magneticWrapper.addEventListener('mousemove', (e) => { | |
| const rect = magneticWrapper.getBoundingClientRect(); | |
| const x = e.clientX - rect.left - rect.width / 2; | |
| const y = e.clientY - rect.top - rect.height / 2; | |
| // Move button slightly towards mouse | |
| magneticBtn.style.transform = `translate(${x * 0.3}px, ${y * 0.5}px)`; | |
| // Move cursor text to interact | |
| cursorText.innerText = 'MAIL'; | |
| }); | |
| magneticWrapper.addEventListener('mouseleave', () => { | |
| magneticBtn.style.transform = 'translate(0px, 0px)'; | |
| cursorText.innerText = 'VIEW'; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| ``` |