File: //tmp/local.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nexuslabs. — A Digital Agency Building Solutions That Perform</title>
<meta name="description"
content="nexuslabs is a digital agency specializing in apps, websites, AI solutions, SEO, and IT services. We build solutions that perform.">
<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=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<!-- Lenis Smooth Scroll -->
<script src="https://unpkg.com/lenis@1.1.20/dist/lenis.min.js"></script>
</head>
<body>
<!-- ==================== PAGE LOADER ==================== -->
<div class="page-loader" id="pageLoader">
<div class="loader-content">
<span class="loader-text" id="loaderText">NEXUSLABS.</span>
<div class="loader-bar">
<div class="loader-bar-fill" id="loaderBarFill"></div>
</div>
<span class="loader-percent" id="loaderPercent">0%</span>
</div>
</div>
<!-- Custom Cursor -->
<div class="custom-cursor" id="customCursor">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<line x1="12" y1="0" x2="12" y2="24" stroke="white" stroke-width="1" />
<line x1="0" y1="12" x2="24" y2="12" stroke="white" stroke-width="1" />
</svg>
</div>
<!-- ==================== NAVIGATION ==================== -->
<nav class="navbar" id="navbar">
<div class="nav-logo">
<a href="#" class="logo-text">nexuslabs.</a>
</div>
<div class="nav-center">
<span class="nav-circa">ESTD</span>
<div class="nav-globe">
<svg viewBox="0 0 40 40" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1">
<circle cx="20" cy="20" r="18" />
<ellipse cx="20" cy="20" rx="8" ry="18" />
<line x1="2" y1="14" x2="38" y2="14" />
<line x1="2" y1="26" x2="38" y2="26" />
<line x1="20" y1="2" x2="20" y2="38" />
</svg>
</div>
<span class="nav-year">2026</span>
</div>
<button class="nav-menu-btn" id="menuBtn">
<span class="menu-text">MENU</span>
<div class="menu-icon">
<span></span>
<span></span>
<span></span>
</div>
</button>
</nav>
<!-- ==================== HERO SECTION ==================== -->
<section class="hero" id="hero">
<!-- Spline 3D Container -->
<div class="spline-container" id="spline-container">
<canvas id="canvas3d"></canvas>
</div>
<div class="hero-content">
<h1 class="hero-title" id="heroTitle">
<span class="hero-char" data-char="N">N</span>
<span class="hero-char" data-char="E">E</span>
<span class="hero-char" data-char="X">X</span>
<span class="hero-char" data-char="U">U</span>
<span class="hero-char" data-char="S">S</span>
<span class="hero-char" data-char="L">L</span>
<span class="hero-char" data-char="A">A</span>
<span class="hero-char" data-char="B">B</span>
<span class="hero-char" data-char="S">S</span>
<span class="hero-char" data-char=".">.</span>
</h1>
<p class="hero-tagline">A DIGITAL AGENCY BUILDING SOLUTIONS THAT PERFORM</p>
</div>
</section>
<!-- ==================== TICKER BAR ==================== -->
<div class="ticker-bar">
<div class="ticker-content">
<span class="ticker-version">V 2.0.1</span>
<span class="ticker-text">NEXUSLABS — A DIGITAL AGENCY BUILDING SOLUTIONS THAT PERFORM</span>
<span class="ticker-year">©2024</span>
</div>
</div>
<!-- ==================== BRANDS MARQUEE ==================== -->
<div class="brands-marquee">
<div class="brands-track">
<span class="brand-name">GOOGLE</span>
<span class="brand-sep">✦</span>
<span class="brand-name">VERCEL</span>
<span class="brand-sep">✦</span>
<span class="brand-name">STRIPE</span>
<span class="brand-sep">✦</span>
<span class="brand-name">SHOPIFY</span>
<span class="brand-sep">✦</span>
<span class="brand-name">OPENAI</span>
<span class="brand-sep">✦</span>
<span class="brand-name">FIGMA</span>
<span class="brand-sep">✦</span>
<span class="brand-name">NOTION</span>
<span class="brand-sep">✦</span>
<span class="brand-name">SUPABASE</span>
<span class="brand-sep">✦</span>
<!-- Duplicate for seamless loop -->
<span class="brand-name">GOOGLE</span>
<span class="brand-sep">✦</span>
<span class="brand-name">VERCEL</span>
<span class="brand-sep">✦</span>
<span class="brand-name">STRIPE</span>
<span class="brand-sep">✦</span>
<span class="brand-name">SHOPIFY</span>
<span class="brand-sep">✦</span>
<span class="brand-name">OPENAI</span>
<span class="brand-sep">✦</span>
<span class="brand-name">FIGMA</span>
<span class="brand-sep">✦</span>
<span class="brand-name">NOTION</span>
<span class="brand-sep">✦</span>
<span class="brand-name">SUPABASE</span>
<span class="brand-sep">✦</span>
</div>
</div>
<!-- ==================== ABOUT SECTION ==================== -->
<section class="about" id="about">
<div class="about-bg-text">WHO WE ARE</div>
<div class="about-wrapper">
<div class="about-label">
<span class="label-tag">(THE PROCESS)</span>
</div>
<div class="about-layout">
<div class="about-text">
<p class="about-description">
We're a results-driven agency with a committed team working on
selected projects for startups and companies, bringing what they
envision to life through:
<span class="about-highlight">apps, websites, AI solutions, SEO & digital transformation</span>
of the highest quality.
</p>
</div>
<div class="about-visual">
<div class="about-image-container">
<img src="assets/images/project-ai-platform.png" alt="Our workspace" class="about-main-image"
id="aboutMainImage">
<!-- Gallery Loader (Orange Overlay) -->
<div class="gallery-loader" id="galleryLoader"></div>
<div class="about-crosshair">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<line x1="16" y1="0" x2="16" y2="32" stroke="white" stroke-width="1" />
<line x1="0" y1="16" x2="32" y2="16" stroke="white" stroke-width="1" />
</svg>
</div>
<a href="#" class="about-btn">
<span class="btn-arrow">→</span>
<span>ABOUT US</span>
</a>
</div>
<div class="about-thumbnails">
<div class="thumbnail active" data-index="0">
<span class="thumb-number">001</span>
<div class="thumb-img-wrap">
<div class="thumb-color"></div>
</div>
</div>
<div class="thumbnail" data-index="1">
<span class="thumb-number">002</span>
<div class="thumb-img-wrap">
<img src="assets/images/project-mobile-app.png" alt="Thumbnail 2">
</div>
</div>
<div class="thumbnail" data-index="2">
<span class="thumb-number">003</span>
<div class="thumb-img-wrap">
<img src="assets/images/project-seo-dashboard.png" alt="Thumbnail 3">
</div>
</div>
<div class="thumbnail" data-index="3">
<span class="thumb-number">004</span>
<div class="thumb-img-wrap">
<img src="assets/images/project-ai-platform.png" alt="Thumbnail 4">
</div>
</div>
<div class="thumbnail" data-index="4">
<span class="thumb-number">005</span>
<div class="thumb-img-wrap">
<img src="assets/images/project-mobile-app.png" alt="Thumbnail 5">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== SHOWCASE SECTION ==================== -->
<section class="showcase" id="showcase">
<!-- Scrolling Marquee -->
<div class="showcase-marquee">
<div class="marquee-track">
<span class="marquee-word">/ SHOWCASE</span>
<span class="marquee-word">/ SHOWCASE</span>
<span class="marquee-word">/ SHOWCASE</span>
<span class="marquee-word">/ SHOWCASE</span>
<span class="marquee-word">/ SHOWCASE</span>
<span class="marquee-word">/ SHOWCASE</span>
<span class="marquee-word">/ SHOWCASE</span>
<span class="marquee-word">/ SHOWCASE</span>
</div>
</div>
<div class="showcase-marquee reverse">
<div class="marquee-track reverse">
<span class="marquee-word-outline">/ SHOWCASE</span>
<span class="marquee-word-outline">/ SHOWCASE</span>
<span class="marquee-word-outline">/ SHOWCASE</span>
<span class="marquee-word-outline">/ SHOWCASE</span>
<span class="marquee-word-outline">/ SHOWCASE</span>
<span class="marquee-word-outline">/ SHOWCASE</span>
<span class="marquee-word-outline">/ SHOWCASE</span>
<span class="marquee-word-outline">/ SHOWCASE</span>
</div>
</div>
<!-- Project Cards (will scroll like credits when pinned) -->
<div class="project-cards" id="projectCards">
<!-- Project 1 -->
<div class="project-card">
<div class="project-image-wrap">
<img src="assets/images/project-mobile-app.png" alt="FinTrack Pro" class="project-image">
</div>
<div class="project-meta">
<span class="project-name">FINTRACK PRO</span>
<span class="project-type">TYPE <strong>MOBILE APP</strong></span>
</div>
<div class="project-details">
<div class="project-year">2K24</div>
<div class="project-divider"></div>
<p class="project-desc">Building a next-gen fintech mobile application with real-time analytics and
an intuitive trading experience.</p>
</div>
</div>
<!-- Project 2 -->
<div class="project-card">
<div class="project-image-wrap">
<img src="assets/images/project-ai-platform.png" alt="NeuralForge" class="project-image">
</div>
<div class="project-meta">
<span class="project-name">NEURALFORGE</span>
<span class="project-type">TYPE <strong>AI PLATFORM</strong></span>
</div>
<div class="project-details">
<div class="project-year">2K24</div>
<div class="project-divider"></div>
<p class="project-desc">Designing and deploying a custom AI solution with neural network
visualization and enterprise-grade ML infrastructure.</p>
</div>
</div>
<!-- Project 3 -->
<div class="project-card">
<div class="project-image-wrap">
<img src="assets/images/project-seo-dashboard.png" alt="RankPulse" class="project-image">
</div>
<div class="project-meta">
<span class="project-name">RANKPULSE</span>
<span class="project-type">TYPE <strong>SEO PLATFORM</strong></span>
</div>
<div class="project-details">
<div class="project-year">2K23</div>
<div class="project-divider"></div>
<p class="project-desc">Crafting a comprehensive SEO analytics dashboard that transforms raw data.
</p>
</div>
</div>
</div>
</section>
<!-- ==================== AWARDS SECTION ==================== -->
<section class="awards" id="awards">
<div class="awards-wrapper">
<div class="awards-left">
<div class="award-model" id="awardModel">
<!-- Three.js Canvas will be injected here -->
</div>
</div>
<div class="awards-right">
<div class="awards-header">
<span class="label-tag">(RECOGNITION)</span>
<h2 class="awards-title">AWARDS</h2>
</div>
<div class="awards-list">
<div class="award-item" data-color="#FF4D00">
<div class="award-item-inner">
<span class="award-name">AWWWARDS — SITE OF THE DAY</span>
<span class="award-year">2024</span>
</div>
<div class="award-detail">
<p>Recognized for outstanding web design and user experience innovation.</p>
</div>
</div>
<div class="award-item" data-color="#00D4FF">
<div class="award-item-inner">
<span class="award-name">CSS DESIGN AWARDS — BEST UI</span>
<span class="award-year">2024</span>
</div>
<div class="award-detail">
<p>Awarded for exceptional interface design and creative execution.</p>
</div>
</div>
<div class="award-item" data-color="#FFD700">
<div class="award-item-inner">
<span class="award-name">FWA — MOBILE EXCELLENCE</span>
<span class="award-year">2023</span>
</div>
<div class="award-detail">
<p>Honored for pushing boundaries in mobile-first digital experiences.</p>
</div>
</div>
<div class="award-item" data-color="#FF006E">
<div class="award-item-inner">
<span class="award-name">WEBBY AWARDS — BEST AGENCY</span>
<span class="award-year">2023</span>
</div>
<div class="award-detail">
<p>Selected among top digital agencies for innovation and impact.</p>
</div>
</div>
<div class="award-item" data-color="#7B61FF">
<div class="award-item-inner">
<span class="award-name">COMMUNICATION ARTS — INTERACTIVE</span>
<span class="award-year">2023</span>
</div>
<div class="award-detail">
<p>Featured for excellence in interactive design and digital storytelling.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== SERVICES MARQUEE ==================== -->
<div class="services-marquee">
<div class="services-track">
<span class="service-item">APP DEVELOPMENT</span>
<span class="service-dot">●</span>
<span class="service-item">WEB DESIGN</span>
<span class="service-dot">●</span>
<span class="service-item">AI SOLUTIONS</span>
<span class="service-dot">●</span>
<span class="service-item">SEO OPTIMIZATION</span>
<span class="service-dot">●</span>
<span class="service-item">CLOUD INFRASTRUCTURE</span>
<span class="service-dot">●</span>
<span class="service-item">DIGITAL STRATEGY</span>
<span class="service-dot">●</span>
<span class="service-item">APP DEVELOPMENT</span>
<span class="service-dot">●</span>
<span class="service-item">WEB DESIGN</span>
<span class="service-dot">●</span>
<span class="service-item">AI SOLUTIONS</span>
<span class="service-dot">●</span>
<span class="service-item">SEO OPTIMIZATION</span>
<span class="service-dot">●</span>
<span class="service-item">CLOUD INFRASTRUCTURE</span>
<span class="service-dot">●</span>
<span class="service-item">DIGITAL STRATEGY</span>
<span class="service-dot">●</span>
</div>
</div>
<!-- ==================== WHO WE ARE / TEAM SECTION ==================== -->
<section class="team" id="team">
<div class="team-header">
<h2 class="team-bg-text">THE ONE MAN ARMY</h2>
<span class="team-label">(THE LONE WOLF)</span>
</div>
</section>
<!-- Team photo as its own pinnable section -->
<section class="team-photo-section" id="teamPhotoSection">
<div class="team-photo-wrapper" id="teamPhotoWrapper">
<img src="assets/images/team-photo.png" alt="The NexusLabs Team" class="team-photo">
<div class="team-indicators">
<span class="team-ind" style="left: 15%; top: 30%;">01</span>
<span class="team-ind" style="left: 35%; top: 25%;">02</span>
<span class="team-ind" style="left: 50%; top: 35%;">03</span>
<span class="team-ind" style="left: 70%; top: 28%;">04</span>
</div>
</div>
</section>
<!-- Spacer to allow for the scroll overlap duration -->
<div class="team-scroll-spacer"></div>
<!-- ==================== CONTACT CTA ==================== -->
<section class="contact" id="contact">
<div class="contact-bg">
<div class="contact-globes">
<svg class="globe-svg globe-1" viewBox="0 0 200 200" fill="none" stroke="#FF4D00" stroke-width="1.5">
<circle cx="100" cy="100" r="90" />
<ellipse cx="100" cy="100" rx="40" ry="90" />
<ellipse cx="100" cy="100" rx="70" ry="90" />
<line x1="10" y1="60" x2="190" y2="60" />
<line x1="10" y1="100" x2="190" y2="100" />
<line x1="10" y1="140" x2="190" y2="140" />
</svg>
<svg class="globe-svg globe-2" viewBox="0 0 200 200" fill="none" stroke="#FF4D00" stroke-width="1.5">
<circle cx="100" cy="100" r="90" />
<ellipse cx="100" cy="100" rx="40" ry="90" />
<ellipse cx="100" cy="100" rx="70" ry="90" />
<line x1="10" y1="60" x2="190" y2="60" />
<line x1="10" y1="100" x2="190" y2="100" />
</svg>
<div class="contact-laptop-container" id="contactLaptop"></div>
</div>
</div>
<div class="contact-content">
<div class="contact-label">
<span class="label-tag">(THE FAM)</span>
</div>
<div class="contact-heading">
<span class="contact-white">ANY</span>
<span class="contact-white">PROJECT</span>
<span class="contact-white">IN MIND?</span>
<a href="mailto:khan.aadil8299@gmail.com" class="contact-orange">GET IN TOUCH</a>
</div>
</div>
</div>
</section>
<!-- ==================== HAMBURGER MENU OVERLAY ==================== -->
<div class="menu-overlay" id="menuOverlay">
<div class="menu-overlay-content">
<a href="#hero" class="menu-item" data-index="01">HOME</a>
<a href="#about" class="menu-item" data-index="02">ABOUT</a>
<a href="#showcase" class="menu-item" data-index="03">WORK</a>
<a href="#awards" class="menu-item" data-index="04">AWARDS</a>
<a href="#contact" class="menu-item" data-index="05">CONTACT</a>
</div>
<div class="menu-overlay-footer">
<a href="#" class="overlay-social">TWITTER</a>
<a href="#" class="overlay-social">INSTAGRAM</a>
<a href="#" class="overlay-social">LINKEDIN</a>
<a href="#" class="overlay-social">DRIBBBLE</a>
</div>
</div>
<!-- Award Tooltip (follows cursor) -->
<div class="award-tooltip" id="awardTooltip">
<div class="award-tooltip-title" id="awardTooltipTitle"></div>
<div class="award-tooltip-desc" id="awardTooltipDesc"></div>
<div class="award-tooltip-year" id="awardTooltipYear"></div>
</div>
<!-- 3D Engines (Stable r147 pair) -->
<script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.147.0/examples/js/loaders/GLTFLoader.js"></script>
<!-- GSAP + ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="script.js"></script>
</body>
</html>