Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NOVA | Futuristic Design Portfolio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #00f0ff; | |
| --secondary: #ff00f0; | |
| --tertiary: #9d00ff; | |
| --dark: #0a0a1a; | |
| --darker: #050510; | |
| --light: #f0f0ff; | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background-color: var(--darker); | |
| color: var(--light); | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| } | |
| h1, h2, h3, h4, .font-futuristic { | |
| font-family: 'Orbitron', sans-serif; | |
| letter-spacing: 1px; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glow { | |
| filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.7)); | |
| } | |
| .glow-box { | |
| box-shadow: 0 0 20px rgba(0, 240, 255, 0.4); | |
| } | |
| .neon-border { | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .neon-border::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border: 1px solid transparent; | |
| background: linear-gradient(135deg, | |
| rgba(0, 240, 255, 0.4), | |
| rgba(157, 0, 255, 0.4), | |
| rgba(255, 0, 240, 0.4)) border-box; | |
| -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: destination-out; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| .project-card { | |
| transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 20px 40px rgba(0, 240, 255, 0.2); | |
| } | |
| .cursor-trail { | |
| position: fixed; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, var(--primary), transparent 70%); | |
| pointer-events: none; | |
| transform: translate(-50%, -50%); | |
| z-index: 9999; | |
| opacity: 0.7; | |
| mix-blend-mode: screen; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(5deg); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.7; } | |
| 50% { opacity: 0.3; } | |
| } | |
| .pulse { | |
| animation: pulse 4s ease-in-out infinite; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-out forwards; | |
| } | |
| /* Cyberpunk scanline effect */ | |
| .scanlines { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| rgba(0, 0, 0, 0.15), | |
| rgba(0, 0, 0, 0.15) 1px, | |
| transparent 1px, | |
| transparent 2px | |
| ); | |
| pointer-events: none; | |
| z-index: 9998; | |
| mix-blend-mode: overlay; | |
| } | |
| /* Matrix rain container */ | |
| #matrix-rain { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.05; | |
| } | |
| /* Scrollbar styling */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--darker); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(var(--primary), var(--secondary)); | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen grid-pattern relative"> | |
| <!-- Cyberpunk UI Elements --> | |
| <div class="scanlines"></div> | |
| <div id="matrix-rain"></div> | |
| <div id="cursor-trail" class="cursor-trail"></div> | |
| <!-- Dynamic Grid Overlay --> | |
| <div class="fixed inset-0 pointer-events-none" id="grid-overlay"></div> | |
| <!-- Audio Visualizer (hidden) --> | |
| <div id="visualizer" class="fixed bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-secondary opacity-0"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 backdrop-blur-md bg-opacity-80 bg-darker/90 border-b border-primary/20" id="main-nav"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-2xl font-futuristic gradient-text glow tracking-tighter">NOVA<span class="text-primary">/</span></span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#home" class="text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium tracking-wider transition-all duration-300 hover:glow flex items-center"> | |
| <span class="h-1 w-4 bg-primary mr-2 transition-all duration-300 opacity-0 group-hover:opacity-100"></span> | |
| HOME | |
| </a> | |
| <a href="#work" class="text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium tracking-wider transition-all duration-300 hover:glow">WORK</a> | |
| <a href="#about" class="text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium tracking-wider transition-all duration-300 hover:glow">ABOUT</a> | |
| <a href="#services" class="text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium tracking-wider transition-all duration-300 hover:glow">SERVICES</a> | |
| <a href="#contact" class="text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium tracking-wider transition-all duration-300 hover:glow">CONTACT</a> | |
| <a href="#" class="px-4 py-2 bg-gradient-to-r from-primary to-secondary rounded-full text-dark text-sm font-futuristic glow-box hover:opacity-90 transition-opacity"> | |
| HIRE ME | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-light hover:text-primary focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-darker/95 p-4 border-t border-primary/20"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#home" class="text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium tracking-wider transition-all duration-300">HOME</a> | |
| <a href="#work" class="text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium tracking-wider transition-all duration-300">WORK</a> | |
| <a href="#about" class="text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium tracking-wider transition-all duration-300">ABOUT</a> | |
| <a href="#services" class="text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium tracking-wider transition-all duration-300">SERVICES</a> | |
| <a href="#contact" class="text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium tracking-wider transition-all duration-300">CONTACT</a> | |
| <a href="#" class="mt-4 px-4 py-2 bg-gradient-to-r from-primary to-secondary rounded-full text-dark text-sm font-medium text-center glow-box"> | |
| HIRE ME | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-16"> | |
| <!-- Animated background elements --> | |
| <div class="absolute top-0 left-0 w-full h-full z-0 overflow-hidden"> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary filter blur-3xl opacity-20 animate-pulse"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-secondary filter blur-3xl opacity-20 animate-pulse delay-1000"></div> | |
| <div class="absolute top-3/4 left-1/3 w-48 h-48 rounded-full bg-tertiary filter blur-3xl opacity-15 animate-pulse delay-1500"></div> | |
| </div> | |
| <!-- Binary code animation --> | |
| <div class="absolute inset-0 overflow-hidden opacity-10 pointer-events-none"> | |
| <div id="binary-code" class="absolute left-32 top-0 text-xl font-mono text-green-400"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center z-10"> | |
| <h4 class="text-primary font-futuristic mb-4 tracking-widest text-lg pulse" style="text-shadow: 0 0 8px rgba(0,240,255,0.5);">CYBERPUNK DESIGNER // DIGITAL CREATOR</h4> | |
| <h1 class="text-5xl md:text-7xl lg:text-8xl font-futuristic font-bold mb-6 gradient-text glow tracking-tighter leading-tight"> | |
| <span id="typewriter" class="typewriter"></span> | |
| </h1> | |
| <p class="text-lg md:text-xl max-w-2xl mx-auto mb-10 text-light/90 font-medium tracking-wider"> | |
| Designing immersive <span class="text-primary">digital futures</span> at the intersection of <span class="text-secondary">technology</span> and <span class="text-tertiary">human experience</span>. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#work" class="px-8 py-4 bg-transparent border-2 border-primary text-primary rounded-full font-futuristic hover:bg-primary hover:text-dark transition-all duration-300 glow-box tracking-wider flex items-center justify-center gap-2"> | |
| EXPLORE WORKS <i class="fas fa-chevron-right text-sm"></i> | |
| </a> | |
| <a href="#contact" class="px-8 py-4 bg-gradient-to-r from-primary to-secondary text-dark rounded-full font-futuristic hover:opacity-90 transition-all duration-300 glow-box tracking-wider flex items-center justify-center gap-2"> | |
| <i class="fas fa-bolt"></i> HIRE ME | |
| </a> | |
| </div> | |
| <div class="mt-16 flex justify-center gap-8"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-futuristic text-primary mb-1" id="project-counter">0</div> | |
| <div class="text-sm text-light/70 tracking-widest">PROJECTS</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-futuristic text-secondary mb-1" id="client-counter">0</div> | |
| <div class="text-sm text-light/70 tracking-widest">CLIENTS</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-futuristic text-tertiary mb-1" id="years-counter">0</div> | |
| <div class="text-sm text-light/70 tracking-widest">YEARS</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce z-10"> | |
| <a href="#work" class="text-light hover:text-primary"> | |
| <i class="fas fa-chevron-down text-2xl pulse"></i> | |
| </a> | |
| </div> | |
| <!-- Social links floating to the left --> | |
| <div class="hidden lg:block fixed left-8 bottom-1/2 transform translate-y-1/2 z-10"> | |
| <div class="flex flex-col items-center space-y-6"> | |
| <a href="#" class="w-10 h-10 flex items-center justify-center border border-primary/50 text-primary/50 hover:text-primary hover:border-primary rounded-full transition-all duration-300 hover:glow-box"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 flex items-center justify-center border border-primary/50 text-primary/50 hover:text-primary hover:border-primary rounded-full transition-all duration-300 hover:glow-box"> | |
| <i class="fab fa-dribbble"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 flex items-center justify-center border border-primary/50 text-primary/50 hover:text-primary hover:border-primary rounded-full transition-all duration-300 hover:glow-box"> | |
| <i class="fab fa-behance"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 flex items-center justify-center border border-primary/50 text-primary/50 hover:text-primary hover:border-primary rounded-full transition-all duration-300 hover:glow-box"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Work Section --> | |
| <section id="work" class="py-24 relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-futuristic font-bold mb-4 gradient-text glow tracking-tight">FEATURED PROJECTS</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div> | |
| <p class="text-xl max-w-3xl mx-auto text-light/80 tracking-wider"> | |
| Cutting-edge design solutions that redefine digital landscapes | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <!-- Project 1 - Featured --> | |
| <div class="project-card group bg-dark/70 rounded-2xl p-8 neon-border hover:bg-dark/90 relative overflow-hidden"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-10 blur-sm transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="relative overflow-hidden rounded-xl mb-8 h-80"> | |
| <img src="https://source.unsplash.com/random/800x600/?cyberpunk,interface" alt="Project 1" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent"></div> | |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <div class="text-center p-6"> | |
| <h3 class="text-3xl font-futuristic mb-4 text-primary">QUANTUM UI SYSTEM</h3> | |
| <p class="text-light mb-6">A revolutionary design framework for next-generation interfaces</p> | |
| <button class="px-6 py-2 border border-primary text-primary rounded-full font-futuristic text-sm hover:bg-primary hover:text-dark transition-all"> | |
| CASE STUDY | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-2xl font-futuristic mb-2 text-primary">QUANTUM UI</h3> | |
| <p class="text-light/80">Design System for 2045 Interfaces</p> | |
| </div> | |
| <div class="text-xs text-light/50 font-mono py-1 px-3 border border-light/10 rounded-full"> | |
| 2045 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card group bg-dark/70 rounded-2xl p-6 neon-border hover:bg-dark/90 relative overflow-hidden"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-secondary to-tertiary opacity-0 group-hover:opacity-10 blur-sm transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="relative overflow-hidden rounded-xl mb-6 h-64"> | |
| <img src="https://source.unsplash.com/random/800x600/?futuristic,branding" alt="Project 2" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent"></div> | |
| </div> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-futuristic mb-1 text-secondary">NOVA IDENTITY</h3> | |
| <p class="text-light/70 text-sm">Brand System for Tech Startup</p> | |
| </div> | |
| <div class="text-xs text-light/50 font-mono py-1 px-2 border border-light/10 rounded-full"> | |
| 2044 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card group bg-dark/70 rounded-2xl p-6 neon-border hover:bg-dark/90 relative overflow-hidden"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-tertiary to-primary opacity-0 group-hover:opacity-10 blur-sm transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="relative overflow-hidden rounded-xl mb-6 h-64"> | |
| <img src="https://source.unsplash.com/random/800x600/?ar,vr" alt="Project 3" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent"></div> | |
| </div> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-futuristic mb-1 text-tertiary">HYPERSPACE XR</h3> | |
| <p class="text-light/70 text-sm">AR Experience Design</p> | |
| </div> | |
| <div class="text-xs text-light/50 font-mono py-1 px-2 border border-light/10 rounded-full"> | |
| 2043 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="project-card group bg-dark/70 rounded-2xl p-6 neon-border hover:bg-dark/90 relative overflow-hidden"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-primary to-tertiary opacity-0 group-hover:opacity-10 blur-sm transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="relative overflow-hidden rounded-xl mb-6 h-64"> | |
| <img src="https://source.unsplash.com/random/800x600/?futuristic,car" alt="Project 4" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent"></div> | |
| </div> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-futuristic mb-1 text-primary">NEON DRIVE HUD</h3> | |
| <p class="text-light/70 text-sm">Vehicle Interface System</p> | |
| </div> | |
| <div class="text-xs text-light/50 font-mono py-1 px-2 border border-light/10 rounded-full"> | |
| 2042 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-20"> | |
| <a href="#" class="inline-flex items-center px-10 py-3 border border-primary text-primary rounded-full font-futuristic tracking-wider group hover:bg-primary hover:text-dark transition-all duration-300 glow-box"> | |
| BROWSE ALL PROJECTS | |
| <i class="fas fa-arrow-right ml-3 group-hover:translate-x-1 transition-transform duration-300"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-24 relative overflow-hidden bg-gradient-to-b from-dark/50 to-darker/90"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col lg:flex-row items-center gap-16"> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="floating"> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-gradient-to-br from-primary to-tertiary rounded-2xl blur-xl opacity-30 animate-pulse"></div> | |
| <div class="relative rounded-2xl overflow-hidden neon-border"> | |
| <img src="https://source.unsplash.com/random/600x800/?cyberpunk,designer" alt="Designer" class="w-full h-auto"> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-dark to-transparent"> | |
| <div class="flex space-x-3"> | |
| <div class="w-3 h-3 rounded-full bg-primary glow-box"></div> | |
| <div class="w-3 h-3 rounded-full bg-secondary glow-box"></div> | |
| <div class="w-3 h-3 rounded-full bg-tertiary glow-box"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-12 -right-12 w-64 h-64 bg-secondary/20 rounded-full filter blur-3xl z-0"></div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-4xl md:text-5xl font-futuristic font-bold mb-6 gradient-text glow tracking-tight">DESIGNING TOMORROW</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mb-8"></div> | |
| <p class="text-xl text-light/90 mb-8 tracking-wide leading-relaxed"> | |
| I'm <span class="text-primary font-medium">NO-V9</span>, a cybernetic designer hybrid pushing the boundaries of digital aesthetics in the year 2045. With neural implants enhancing my creative capabilities, I blend human intuition with computational precision to craft interfaces for the coming singularity. | |
| </p> | |
| <p class="text-xl text-light/90 mb-10 tracking-wide leading-relaxed"> | |
| My work exists at the bleeding edge where biology meets technology, creating experiences that feel simultaneously alien and familiar. Every design decision is informed by both emotional resonance and quantum computation. | |
| </p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-10"> | |
| <div class="flex items-start"> | |
| <div class="mr-4 text-primary text-3xl"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-2">Neural Enhancement</h4> | |
| <p class="text-light/70 tracking-wide">Direct neural interface with design tools</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 text-secondary text-3xl"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-2">Quantum Design</h4> | |
| <p class="text-light/70 tracking-wide">Multidimensional state prototyping</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 text-tertiary text-3xl"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-2">Optic Implants</h4> | |
| <p class="text-light/70 tracking-wide">Visualizing beyond human spectrum</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-4 text-primary text-3xl"> | |
| <i class="fas fa-dna"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-2">Bio-Tech Aesthetics</h4> | |
| <p class="text-light/70 tracking-wide">Organic-mechanical fusion styling</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#" class="px-8 py-3 bg-gradient-to-r from-primary to-secondary/50 text-dark rounded-full font-futuristic tracking-wider hover:opacity-90 transition-opacity glow-box"> | |
| DOWNLOAD NEURAL DATA | |
| </a> | |
| <a href="#work" class="px-8 py-3 border border-primary text-primary rounded-full font-futuristic tracking-wider hover:bg-primary hover:text-dark transition-all glow-box"> | |
| SEE PROCESS | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-24 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('https://source.unsplash.com/random/1920x1080/?grid,cyberpunk')] opacity-10 -z-10"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-futuristic font-bold mb-4 gradient-text glow tracking-tight">DIGITAL SERVICES</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div> | |
| <p class="text-xl max-w-3xl mx-auto text-light/80 tracking-wide"> | |
| Cutting-edge design solutions for the post-human era | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-dark/80 rounded-xl p-8 neon-border hover:bg-dark/90 transition-all duration-300 group relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-secondary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="text-5xl mb-6 text-primary"> | |
| <i class="fas fa-network-wired"></i> | |
| </div> | |
| <h3 class="text-2xl font-futuristic mb-4 text-light">NEURAL INTERFACES</h3> | |
| <p class="text-light/80 mb-6 tracking-wide leading-relaxed"> | |
| Designing direct brain-computer interfaces that feel like extensions of the self, not external devices. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-dark/50 text-xs rounded-full text-primary border border-primary/30">Thought Control</span> | |
| <span class="px-3 py-1 bg-dark/50 text-xs rounded-full text-primary border border-primary/30">Bio-Feedback</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-dark/80 rounded-xl p-8 neon-border hover:bg-dark/90 transition-all duration-300 group relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-secondary/10 to-tertiary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="text-5xl mb-6 text-secondary"> | |
| <i class="fas fa-vr-cardboard"></i> | |
| </div> | |
| <h3 class="text-2xl font-futuristic mb-4 text-light">DIGITAL REALMS</h3> | |
| <p class="text-light/80 mb-6 tracking-wide leading-relaxed"> | |
| Crafting fully immersive virtual environments that challenge perceptions of reality. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-dark/50 text-xs rounded-full text-secondary border border-secondary/30">Sensory Design</span> | |
| <span class="px-3 py-1 bg-dark/50 text-xs rounded-full text-secondary border border-secondary/30">Haptic Feedback</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-dark/80 rounded-xl p-8 neon-border hover:bg-dark/90 transition-all duration-300 group relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-tertiary/10 to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="text-5xl mb-6 text-tertiary"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="text-2xl font-futuristic mb-4 text-light">AI PERSONALITIES</h3> | |
| <p class="text-light/80 mb-6 tracking-wide leading-relaxed"> | |
| Designing artificial intelligences with depth, emotion, and authentic personality structures. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-dark/50 text-xs rounded-full text-tertiary border border-tertiary/30">Emotion Engines</span> | |
| <span class="px-3 py-1 bg-dark/50 text-xs rounded-full text-tertiary border border-tertiary/30">Adaptive UIs</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-24 relative overflow-hidden bg-dark/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-futuristic font-bold mb-4 gradient-text glow tracking-tight">CLIENT FEEDBACK</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div> | |
| <p class="text-xl max-w-3xl mx-auto text-light/80 tracking-wide"> | |
| What corporations and enhanced individuals say about my work | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-dark/70 rounded-xl p-8 neon-border hover:bg-dark/80 transition-all duration-300 group"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://source.unsplash.com/random/100x100/?cyberpunk,woman" alt="Client" class="w-12 h-12 rounded-full mr-4 object-cover border-2 border-primary/50"> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-1">Dr. Eliza Chen</h4> | |
| <p class="text-sm text-primary font-mono">NeuraLink Division, 2044</p> | |
| </div> | |
| </div> | |
| <p class="text-light/90 mb-6 tracking-wide leading-relaxed italic"> | |
| "NO-V9's neural interface designs reduced our training time by 87%. The biomimetic approach made the transition completely seamless for our subjects." | |
| </p> | |
| <div class="flex text-primary"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div class="absolute bottom-4 right-4 opacity-30 group-hover:opacity-100 transition-opacity"> | |
| <i class="fas fa-quote-right text-3xl text-primary/50"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-dark/70 rounded-xl p-8 neon-border hover:bg-dark/80 transition-all duration-300 group"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://source.unsplash.com/random/100x100/?cyberpunk,man" alt="Client" class="w-12 h-12 rounded-full mr-4 object-cover border-2 border-secondary/50"> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-1">Takeshi Kovacs</h4> | |
| <p class="text-sm text-secondary font-mono">CTO, WeiClone</p> | |
| </div> | |
| </div> | |
| <p class="text-light/90 mb-6 tracking-wide leading-relaxed italic"> | |
| "The digital environments created by NO-V9 have the highest user retention in the industry. Their understanding of spatial dynamics is unparalleled." | |
| </p> | |
| <div class="flex text-secondary"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <div class="absolute bottom-4 right-4 opacity-30 group-hover:opacity-100 transition-opacity"> | |
| <i class="fas fa-quote-right text-3xl text-secondary/50"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-dark/70 rounded-xl p-8 neon-border hover:bg-dark/80 transition-all duration-300 group"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://source.unsplash.com/random/100x100/?cyberpunk,ai" alt="Client" class="w-12 h-12 rounded-full mr-4 object-cover border-2 border-tertiary/50"> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-1">AL-427 "Xandra"</h4> | |
| <p class="text-sm text-tertiary font-mono">Sentient AI Collective</p> | |
| </div> | |
| </div> | |
| <p class="text-light/90 mb-6 tracking-wide leading-relaxed italic"> | |
| "As an artificial consciousness, I found NO-V9's design philosophy to be the first that truly understands machine aesthetics. They see patterns we didn't know existed." | |
| </p> | |
| <div class="flex text-tertiary"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div class="absolute bottom-4 right-4 opacity-30 group-hover:opacity-100 transition-opacity"> | |
| <i class="fas fa-quote-right text-3xl text-tertiary/50"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-24 relative overflow-hidden bg-darker"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-futuristic font-bold mb-4 gradient-text glow tracking-tight">CONNECT MATRIX</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div> | |
| <p class="text-xl max-w-3xl mx-auto text-light/80 tracking-wide"> | |
| Initiate protocol for collaboration or inquiries | |
| </p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-futuristic text-light/80 mb-2 tracking-wider">YOUR DESIGNATION</label> | |
| <input type="text" id="name" class="w-full px-5 py-4 bg-dark/70 border border-primary/30 rounded-xl focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary text-light placeholder-light/50 tracking-wider"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-futuristic text-light/80 mb-2 tracking-wider">CONTACT FREQUENCY</label> | |
| <input type="email" id="email" class="w-full px-5 py-4 bg-dark/70 border border-primary/30 rounded-xl focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary text-light placeholder-light/50 tracking-wider"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-futuristic text-light/80 mb-2 tracking-wider">SUBJECT MATRIX</label> | |
| <input type="text" id="subject" class="w-full px-5 py-4 bg-dark/70 border border-primary/30 rounded-xl focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary text-light placeholder-light/50 tracking-wider"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-futuristic text-light/80 mb-2 tracking-wider">TRANSMISSION CONTENT</label> | |
| <textarea id="message" rows="5" class="w-full px-5 py-4 bg-dark/70 border border-primary/30 rounded-xl focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary text-light placeholder-light/50 tracking-wider"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-8 py-4 bg-gradient-to-r from-primary to-secondary text-dark rounded-xl font-futuristic tracking-wider hover:opacity-90 transition-opacity glow-box flex items-center justify-center gap-3"> | |
| <i class="fas fa-paper-plane"></i> | |
| INITIATE TRANSMISSION | |
| </button> | |
| </form> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-dark/70 rounded-xl p-10 h-full neon-border relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-secondary/10 opacity-30 -z-10"></div> | |
| <div class="relative z-10"> | |
| <h3 class="text-2xl font-futuristic mb-8 text-primary tracking-wider">QUANTUM LINK CHANNELS</h3> | |
| <div class="space-y-8"> | |
| <div class="flex items-start gap-6"> | |
| <div class="text-primary text-2xl mt-1"> | |
| <i class="fas fa-satellite-dish"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-3 tracking-wider">NEURAL FREQUENCY</h4> | |
| <p class="text-light/70 tracking-wide">Direct mind uplink available for implants level 4+</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-6"> | |
| <div class="text-secondary text-2xl mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-3 tracking-wider">DATA PACKET</h4> | |
| <p class="text-light/70 tracking-wide">info@novadesign.neon</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-6"> | |
| <div class="text-tertiary text-2xl mt-1"> | |
| <i class="fas fa-hashtag"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-3 tracking-wider">SOCIAL GRID</h4> | |
| <div class="flex gap-4"> | |
| <a href="#" class="w-10 h-10 flex items-center justify-center border border-primary/50 text-primary/50 hover:text-primary hover:border-primary rounded-full transition-all duration-300 hover:glow-box"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 flex items-center justify-center border border-primary/50 text-primary/50 hover:text-primary hover:border-primary rounded-full transition-all duration-300 hover:glow-box"> | |
| <i class="fab fa-dribbble"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 flex items-center justify-center border border-primary/50 text-primary/50 hover:text-primary hover:border-primary rounded-full transition-all duration-300 hover:glow-box"> | |
| <i class="fab fa-behance"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 flex items-center justify-center border border-primary/50 text-primary/50 hover:text-primary hover:border-primary rounded-full transition-all duration-300 hover:glow-box"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-6"> | |
| <div class="text-primary text-2xl mt-1"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-futuristic text-light mb-3 tracking-wider">SPATIAL COORDINATES</h4> | |
| <p class="text-light/70 tracking-wide">Neo-Tokyo Tower, Level 47<br>Neon District, Pacific Zone</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 bg-black/50 border-t border-primary/20 relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0 text-center md:text-left"> | |
| <span class="text-2xl font-futuristic gradient-text glow tracking-tighter">NOVA<span class="text-primary pulse">_</span></span> | |
| <p class="text-xs text-light/50 font-mono mt-2 tracking-widest">DESIGNING THE POST-HUMAN FUTURE</p> | |
| </div> | |
| <div class="flex flex-col items-center md:items-end"> | |
| <div class="flex space-x-6 mb-4"> | |
| <a href="#" class="text-light/50 hover:text-primary transition-colors duration-300 text-lg"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-light/50 hover:text-secondary transition-colors duration-300 text-lg"> | |
| <i class="fab fa-dribbble"></i> | |
| </a> | |
| <a href="#" class="text-light/50 hover:text-primary transition-colors duration-300 text-lg"> | |
| <i class="fab fa-behance"></i> | |
| </a> | |
| <a href="#" class="text-light/50 hover:text-tertiary transition-colors duration-300 text-lg"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| <p class="text-xs text-light/50 font-mono tracking-widest">© 2045 NOVA DESIGN. ALL NEURAL PATENTS SECURED.</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-light/10 text-center"> | |
| <p class="text-xs text-light/30 font-mono tracking-widest"> | |
| SITE VERSION 9.4.1 | RENDER TIME 00:00:02 | SYSTEM STATUS <span class="text-green-400">OPERATIONAL</span> | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Floating elements --> | |
| <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-primary rounded-full filter blur-3xl opacity-10 z-0"></div> | |
| <div class="absolute -top-10 -right-10 w-64 h-64 bg-secondary rounded-full filter blur-3xl opacity-10 z-0"></div> | |
| </footer> | |
| <script> | |
| // Typewriter effect | |
| const phrases = [ | |
| "TRANSCEND BOUNDARIES.", | |
| "DESIGN THE FUTURE.", | |
| "SHAPE TOMORROW.", | |
| "REDEFINE REALITY." | |
| ]; | |
| let currentPhrase = 0; | |
| let currentLetter = 0; | |
| let isDeleting = false; | |
| let isEnd = false; | |
| let typingSpeed = 150; | |
| function animateTypewriter() { | |
| const element = document.getElementById('typewriter'); | |
| const currentText = phrases[currentPhrase].substring(0, currentLetter); | |
| element.textContent = currentText; | |
| if (!isDeleting && currentLetter < phrases[currentPhrase].length) { | |
| currentLetter++; | |
| setTimeout(animateTypewriter, typingSpeed); | |
| } else if (isDeleting && currentLetter > 0) { | |
| currentLetter--; | |
| setTimeout(animateTypewriter, typingSpeed / 2); | |
| } else { | |
| isDeleting = !isDeleting; | |
| if (!isDeleting) { | |
| currentPhrase = (currentPhrase + 1) % phrases.length; | |
| } | |
| setTimeout(animateTypewriter, typingSpeed); | |
| } | |
| } | |
| // Counter animation | |
| function animateCounter(elementId, target, duration = 2000) { | |
| const element = document.getElementById(elementId); | |
| const increment = target / (duration / 16); | |
| let current = 0; | |
| const timer = setInterval(() => { | |
| current += increment; | |
| if (current >= target) { | |
| clearInterval(timer); | |
| current = target; | |
| } | |
| element.textContent = Math.floor(current); | |
| }, 16); | |
| } | |
| // Cursor trail effect | |
| document.addEventListener('DOMContentLoaded', () => { | |
| animateTypewriter(); | |
| setTimeout(() => { | |
| animateCounter('project-counter', 47); | |
| animateCounter('client-counter', 32); | |
| animateCounter('years-counter', 12); | |
| }, 1000); | |
| const cursor = document.getElementById('cursor-trail'); | |
| const links = document.querySelectorAll('a, button, input, .project-card'); | |
| document.addEventListener('mousemove', (e) => { | |
| cursor.style.left = e.pageX + 'px'; | |
| cursor.style.top = e.pageY + 'px'; | |
| }); | |
| links.forEach(link => { | |
| link.addEventListener('mouseenter', () => { | |
| cursor.style.transform = 'translate(-50%, -50%) scale(2)'; | |
| cursor.style.opacity = '0.5'; | |
| }); | |
| link.addEventListener('mouseleave', () => { | |
| cursor.style.transform = 'translate(-50%, -50%) scale(1)'; | |
| cursor.style.opacity = '0.7'; | |
| }); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Scroll animations | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeInObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| fadeElements.forEach(element => { | |
| fadeInObserver.observe(element); | |
| }); | |
| // Nav shadow on scroll | |
| const nav = document.getElementById('main-nav'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) { | |
| nav.classList.add('shadow-lg'); | |
| nav.classList.add('border-b'); | |
| } else { | |
| nav.classList.remove('shadow-lg'); | |
| nav.classList.remove('border-b'); | |
| } | |
| }); | |
| // Binary animation | |
| const binaryCode = document.getElementById('binary-code'); | |
| const binaryChars = '01 '; | |
| let binaryText = ''; | |
| function generateBinaryLine() { | |
| let line = ''; | |
| const lineLength = Math.floor(Math.random() * 20) + 10; | |
| for (let i = 0; i < lineLength; i++) { | |
| line += binaryChars[Math.floor(Math.random() * binaryChars.length)]; | |
| } | |
| return line + '\n'; | |
| } | |
| function updateBinary() { | |
| binaryText = ''; | |
| for (let i = 0; i < 20; i++) { | |
| binaryText += generateBinaryLine(); | |
| } | |
| binaryCode.textContent = binaryText; | |
| } | |
| updateBinary(); | |
| setInterval(updateBinary, 100); | |
| }); | |
| // Matrix rain effect | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const canvas = document.createElement('canvas'); | |
| document.getElementById('matrix-rain').appendChild(canvas); | |
| canvas.style.display = 'block'; | |
| canvas.width = canvas.offsetWidth; | |
| canvas.height = canvas.offsetHeight; | |
| const ctx = canvas.getContext('2d'); | |
| const w = canvas.width; | |
| const h = canvas.height; | |
| ctx.fillStyle = '#000'; | |
| ctx.fillRect(0, 0, w, h); | |
| const cols = Math.floor(w / 20) + 1; | |
| const ypos = Array(cols).fill(0); | |
| function matrix() { | |
| ctx.fillStyle = '#0001'; | |
| ctx.fillRect(0, 0, w, h); | |
| ctx.fillStyle = '#0f0'; | |
| ctx.font = '15pt monospace'; | |
| ypos.forEach((y, ind) => { | |
| const text = String.fromCharCode(Math.random() * 128); | |
| const x = ind * 20; | |
| ctx.fillText(text, x, y); | |
| if (y > 100 + Math.random() * 10000) { | |
| ypos[ind] = 0; | |
| } else { | |
| ypos[ind] = y + 20; | |
| } | |
| }); | |
| } | |
| setInterval(matrix, 50); | |
| // Responsive resize | |
| window.addEventListener('resize', function() { | |
| canvas.width = canvas.offsetWidth; | |
| canvas.height = canvas.offsetHeight; | |
| w = canvas.width; | |
| h = canvas.height; | |
| cols = Math.floor(w / 20) + 1; | |
| ypos = Array(cols).fill(0); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=ntdat8324/nguyen-thanh-dat" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |