| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Luminous Portfolio</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></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.128.0/examples/js/controls/OrbitControls.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;600&display=swap'); |
| |
| :root { |
| --primary-bg: linear-gradient(135deg, #fff9f0 0%, #f0fff9 100%); |
| --text-primary: #333; |
| --text-secondary: #555; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background: var(--primary-bg); |
| color: var(--text-primary); |
| margin: 0; |
| padding: 0; |
| overflow-x: hidden; |
| cursor: default; |
| min-height: 100vh; |
| } |
| |
| .hero-text { |
| font-family: 'Playfair Display', serif; |
| text-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| font-size: clamp(2.5rem, 8vw, 4.5rem); |
| line-height: 1.2; |
| } |
| |
| .glass-card { |
| backdrop-filter: blur(16px); |
| background: rgba(255, 255, 255, 0.2); |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| } |
| |
| .floating { |
| animation: floating 6s ease-in-out infinite; |
| } |
| |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| #canvas-container { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| pointer-events: none; |
| } |
| |
| .project-tile { |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| transform-style: preserve-3d; |
| } |
| |
| .project-tile:hover { |
| transform: translateY(-10px) rotateX(5deg); |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); |
| } |
| |
| .nav-sphere { |
| transition: all 0.3s ease; |
| box-shadow: 0 0 0 0 rgba(255,255,255,0.7); |
| } |
| |
| .nav-sphere:hover { |
| transform: scale(1.1); |
| box-shadow: 0 0 0 8px rgba(255,255,255,0.3); |
| } |
| |
| .btn-spring { |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
| |
| .btn-spring:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| |
| .ribbon-text { |
| background: linear-gradient(90deg, #ffd6e0 0%, #c8f7f4 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .nav-spheres { |
| bottom: 20px; |
| right: 50%; |
| transform: translateX(50%); |
| flex-direction: row; |
| gap: 12px; |
| } |
| |
| .nav-sphere { |
| width: 10vw; |
| height: 10vw; |
| min-width: 40px; |
| min-height: 40px; |
| } |
| |
| .project-tile { |
| max-width: 100%; |
| } |
| |
| #hero { |
| padding-top: 20vh; |
| padding-bottom: 20vh; |
| } |
| |
| .hero-subtext { |
| font-size: clamp(1rem, 4vw, 1.5rem); |
| } |
| |
| .section-padding { |
| padding: 5rem 1.5rem; |
| } |
| |
| .contact-form { |
| padding: 1.5rem; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| .keyword-tag { |
| font-size: 0.8rem; |
| padding: 0.4rem 0.8rem; |
| } |
| |
| .project-tile h3 { |
| font-size: 1.2rem; |
| } |
| |
| .project-tile p { |
| font-size: 0.9rem; |
| } |
| } |
| |
| |
| html { |
| font-size: 16px; |
| } |
| |
| @media (min-width: 600px) { |
| html { |
| font-size: 18px; |
| } |
| } |
| |
| @media (min-width: 900px) { |
| html { |
| font-size: 20px; |
| } |
| } |
| |
| |
| @media (hover: none) { |
| .project-tile:hover { |
| transform: none; |
| } |
| |
| .btn-spring:hover { |
| transform: none; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="canvas-container"></div> |
| |
| |
| <div class="fixed right-8 top-1/2 transform -translate-y-1/2 flex flex-col space-y-4 z-50 nav-spheres md:flex"> |
| <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-pink-100 to-teal-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="hero"></div> |
| <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-yellow-100 to-blue-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="projects"></div> |
| <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-purple-100 to-green-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="gallery"></div> |
| <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-red-100 to-indigo-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="contact"></div> |
| </div> |
| |
| |
| <section id="hero" class="min-h-screen flex flex-col justify-center items-center px-4 sm:px-8 relative overflow-hidden section-padding"> |
| <div class="max-w-4xl mx-auto text-center z-10"> |
| <h1 class="hero-text text-5xl md:text-7xl font-bold mb-4 md:mb-6 text-gray-800">Hello, I'm <span class="ribbon-text">Alex</span></h1> |
| <p class="hero-subtext text-xl md:text-2xl text-gray-600 mb-8 md:mb-12 max-w-2xl mx-auto">Creating digital experiences with <span class="font-semibold">trust</span>, <span class="font-semibold">understanding</span>, and <span class="font-semibold">creativity</span></p> |
| |
| <div class="flex flex-wrap justify-center gap-3 mb-8 md:mb-16"> |
| <div class="px-4 py-2 md:px-6 md:py-3 glass-card rounded-full text-gray-700 font-medium keyword-tag">Hardworking</div> |
| <div class="px-4 py-2 md:px-6 md:py-3 glass-card rounded-full text-gray-700 font-medium keyword-tag">Willingness</div> |
| <div class="px-4 py-2 md:px-6 md:py-3 glass-card rounded-full text-gray-700 font-medium keyword-tag">Dedication</div> |
| </div> |
| |
| <button class="btn-spring px-6 py-3 md:px-8 md:py-4 bg-white rounded-full text-gray-800 font-semibold shadow-lg flex items-center mx-auto"> |
| <span class="text-sm md:text-base">Explore My Work</span> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5 ml-2" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> |
| </svg> |
| </button> |
| </div> |
| |
| |
| <div id="keywords-container" class="absolute inset-0 pointer-events-none"></div> |
| </section> |
| |
| |
| <section id="projects" class="min-h-screen py-12 md:py-20 px-4 sm:px-8 relative section-padding"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-8 md:mb-16 text-gray-800">Featured Projects</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"> |
| |
| <div class="project-tile bg-white rounded-xl md:rounded-2xl overflow-hidden shadow-lg md:shadow-xl"> |
| <div class="h-40 md:h-48 bg-gradient-to-r from-pink-100 to-purple-100 flex items-center justify-center"> |
| <div class="text-4xl md:text-5xl">🌐</div> |
| </div> |
| <div class="p-4 md:p-6"> |
| <h3 class="text-lg md:text-xl font-bold mb-2">Interactive Web Portal</h3> |
| <p class="text-sm md:text-base text-gray-600 mb-3 md:mb-4">A responsive platform with real-time data visualization and user engagement features.</p> |
| <div class="flex flex-wrap gap-1 md:gap-2 mb-3 md:mb-4"> |
| <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-pink-100 text-pink-800 rounded-full">React</span> |
| <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-blue-100 text-blue-800 rounded-full">Three.js</span> |
| <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-green-100 text-green-800 rounded-full">Node.js</span> |
| </div> |
| <button class="text-xs md:text-sm font-medium text-pink-600 hover:text-pink-800">View Case Study →</button> |
| </div> |
| </div> |
| |
| |
| <div class="project-tile bg-white rounded-xl md:rounded-2xl overflow-hidden shadow-lg md:shadow-xl"> |
| <div class="h-40 md:h-48 bg-gradient-to-r from-blue-100 to-teal-100 flex items-center justify-center"> |
| <div class="text-4xl md:text-5xl">📱</div> |
| </div> |
| <div class="p-4 md:p-6"> |
| <h3 class="text-lg md:text-xl font-bold mb-2">Mobile Experience</h3> |
| <p class="text-sm md:text-base text-gray-600 mb-3 md:mb-4">An award-winning mobile app with gesture-based navigation and AR features.</p> |
| <div class="flex flex-wrap gap-1 md:gap-2 mb-3 md:mb-4"> |
| <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-purple-100 text-purple-800 rounded-full">Swift</span> |
| <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-yellow-100 text-yellow-800 rounded-full">ARKit</span> |
| <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-red-100 text-red-800 rounded-full">Firebase</span> |
| </div> |
| <button class="text-xs md:text-sm font-medium text-blue-600 hover:text-blue-800">View Case Study →</button> |
| </div> |
| </div> |
| |
| |
| <div class="project-tile bg-white rounded-xl md:rounded-2xl overflow-hidden shadow-lg md:shadow-xl"> |
| <div class="h-40 md:h-48 bg-gradient-to-r from-yellow-100 to-orange-100 flex items-center justify-center"> |
| <div class="text-4xl md:text-5xl">🎨</div> |
| </div> |
| <div class="p-4 md:p-6"> |
| <h3 class="text-lg md:text-xl font-bold mb-2">Generative Art</h3> |
| <p class="text-sm md:text-base text-gray-600 mb-3 md:mb-4">An interactive installation that creates unique visual patterns based on user input.</p> |
| <div class="flex flex-wrap gap-1 md:gap-2 mb-3 md:mb-4"> |
| <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-indigo-100 text-indigo-800 rounded-full">p5.js</span> |
| <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-green-100 text-green-800 rounded-full">WebGL</span> |
| <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-pink-100 text-pink-800 rounded-full">GSAP</span> |
| </div> |
| <button class="text-xs md:text-sm font-medium text-orange-600 hover:text-orange-800">View Case Study →</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="gallery" class="min-h-screen py-12 md:py-20 px-4 sm:px-8 bg-white bg-opacity-50 relative section-padding"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-8 md:mb-16 text-gray-800">Creative Explorations</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 mb-8 md:mb-12"> |
| <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8"> |
| <h3 class="text-xl md:text-2xl font-bold mb-3 md:mb-4 text-gray-800">Sculpture Garden</h3> |
| <p class="text-sm md:text-base text-gray-600 mb-4 md:mb-6">Interactive 3D frames that reveal layered illustrations when manipulated. Each piece responds to user interaction with subtle physics and sound.</p> |
| <div class="h-48 md:h-64 bg-gradient-to-r from-green-100 to-blue-100 rounded-xl md:rounded-2xl flex items-center justify-center"> |
| <div class="text-3xl md:text-4xl">🖼️</div> |
| </div> |
| </div> |
| |
| <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8"> |
| <h3 class="text-xl md:text-2xl font-bold mb-3 md:mb-4 text-gray-800">Generative Systems</h3> |
| <p class="text-sm md:text-base text-gray-600 mb-4 md:mb-6">Algorithmic compositions that evolve over time, creating unique visual and auditory experiences based on mathematical patterns.</p> |
| <div class="h-48 md:h-64 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl md:rounded-2xl flex items-center justify-center"> |
| <div class="text-3xl md:text-4xl">🌀</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-8 md:mt-12"> |
| <button class="btn-spring px-6 py-3 md:px-8 md:py-4 bg-white rounded-full text-gray-800 font-semibold shadow-lg flex items-center mx-auto"> |
| <span class="text-sm md:text-base">View Full Gallery</span> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5 ml-2" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="contact" class="min-h-screen py-12 md:py-20 px-4 sm:px-8 relative section-padding"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-gray-800">Let's Build <span class="ribbon-text">Together</span></h2> |
| <p class="text-lg md:text-xl text-gray-600 mb-8 md:mb-12 max-w-2xl mx-auto">I'm always excited to collaborate on meaningful projects that push creative boundaries.</p> |
| |
| <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8 lg:p-12 max-w-2xl mx-auto contact-form"> |
| <form class="space-y-4 md:space-y-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6"> |
| <div> |
| <label for="name" class="block text-left text-sm md:text-base text-gray-700 mb-1 md:mb-2">Name</label> |
| <input type="text" id="name" class="w-full px-3 py-2 md:px-4 md:py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-pink-200 text-sm md:text-base"> |
| </div> |
| <div> |
| <label for="email" class="block text-left text-sm md:text-base text-gray-700 mb-1 md:mb-2">Email</label> |
| <input type="email" id="email" class="w-full px-3 py-2 md:px-4 md:py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-200 text-sm md:text-base"> |
| </div> |
| </div> |
| |
| <div> |
| <label for="message" class="block text-left text-sm md:text-base text-gray-700 mb-1 md:mb-2">Message</label> |
| <textarea id="message" rows="4" class="w-full px-3 py-2 md:px-4 md:py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-teal-200 text-sm md:text-base"></textarea> |
| </div> |
| |
| <button type="submit" class="btn-spring w-full md:w-auto px-6 py-3 md:px-8 md:py-4 bg-gradient-to-r from-pink-400 to-blue-400 text-white font-semibold rounded-full shadow-lg text-sm md:text-base"> |
| Send Message |
| </button> |
| </form> |
| </div> |
| |
| <div class="mt-8 md:mt-16 flex justify-center space-x-4 md:space-x-6"> |
| <a href="#" class="text-gray-600 hover:text-pink-500"> |
| <svg class="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> |
| <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" /> |
| </svg> |
| </a> |
| <a href="#" class="text-gray-600 hover:text-blue-500"> |
| <svg class="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> |
| <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /> |
| </svg> |
| </a> |
| <a href="#" class="text-gray-600 hover:text-orange-500"> |
| <svg class="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> |
| <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" /> |
| </svg> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-8 md:space-x-12 pointer-events-none"> |
| <div class="w-6 h-10 md:w-8 md:h-12 bg-gradient-to-b from-yellow-100 to-yellow-300 rounded-full opacity-80 floating" style="animation-delay: 0s;"></div> |
| <div class="w-6 h-10 md:w-8 md:h-12 bg-gradient-to-b from-pink-100 to-pink-300 rounded-full opacity-80 floating" style="animation-delay: 1s;"></div> |
| <div class="w-6 h-10 md:w-8 md:h-12 bg-gradient-to-b from-blue-100 to-blue-300 rounded-full opacity-80 floating" style="animation-delay: 2s;"></div> |
| </div> |
| </section> |
| |
| <script> |
| |
| let scene, camera, renderer, objects = []; |
| let isMobile = window.matchMedia("(max-width: 768px)").matches; |
| |
| function initThreeJS() { |
| |
| scene = new THREE.Scene(); |
| scene.background = new THREE.Color(0xf9f9f9); |
| |
| |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
| camera.position.z = isMobile ? 40 : 30; |
| |
| |
| renderer = new THREE.WebGLRenderer({ |
| antialias: true, |
| alpha: true, |
| powerPreference: "high-performance" |
| }); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); |
| document.getElementById('canvas-container').appendChild(renderer.domElement); |
| |
| |
| const ambientLight = new THREE.AmbientLight(0xffffff, isMobile ? 0.8 : 0.6); |
| scene.add(ambientLight); |
| |
| if (!isMobile) { |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); |
| directionalLight.position.set(1, 1, 1); |
| scene.add(directionalLight); |
| } |
| |
| |
| createFloatingObjects(); |
| |
| |
| let resizeTimeout; |
| window.addEventListener('resize', () => { |
| clearTimeout(resizeTimeout); |
| resizeTimeout = setTimeout(onWindowResize, 200); |
| }); |
| |
| |
| animate(); |
| } |
| |
| function createFloatingObjects() { |
| const count = isMobile ? 4 : 8; |
| const geometry = new THREE.SphereGeometry(1, isMobile ? 16 : 32, isMobile ? 16 : 32); |
| |
| const material = new THREE.MeshPhongMaterial({ |
| color: 0xffd6e0, |
| transparent: true, |
| opacity: 0.8, |
| shininess: 100, |
| refractionRatio: 0.8 |
| }); |
| |
| |
| for (let i = 0; i < count; i++) { |
| const sphere = new THREE.Mesh(geometry, material.clone()); |
| sphere.position.x = (Math.random() - 0.5) * (isMobile ? 30 : 40); |
| sphere.position.y = (Math.random() - 0.5) * (isMobile ? 15 : 20); |
| sphere.position.z = (Math.random() - 0.5) * (isMobile ? 15 : 20); |
| sphere.scale.setScalar(0.6 + Math.random() * (isMobile ? 0.4 : 0.5)); |
| |
| |
| sphere.material.color.setHSL( |
| 0.6 + Math.random() * 0.1, |
| 0.3 + Math.random() * 0.2, |
| 0.8 + Math.random() * 0.2 |
| ); |
| |
| |
| sphere.userData = { |
| originalY: sphere.position.y, |
| speed: 0.1 + Math.random() * 0.1, |
| angle: Math.random() * Math.PI * 2 |
| }; |
| |
| scene.add(sphere); |
| objects.push(sphere); |
| } |
| |
| |
| if (!isMobile) { |
| const keywords = ['Trust', 'Understanding', 'Hardworking', 'Creativity', 'Willingness']; |
| const container = document.getElementById('keywords-container'); |
| |
| keywords.forEach((word, i) => { |
| const el = document.createElement('div'); |
| el.className = 'absolute text-lg md:text-xl font-bold text-gray-700 opacity-70'; |
| el.style.top = `${30 + Math.random() * 40}%`; |
| el.style.left = `${20 + Math.random() * 60}%`; |
| el.textContent = word; |
| container.appendChild(el); |
| }); |
| } |
| } |
| |
| function onWindowResize() { |
| isMobile = window.matchMedia("(max-width: 768px)").matches; |
| camera.aspect = window.innerWidth / window.innerHeight; |
| camera.updateProjectionMatrix(); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| |
| |
| camera.position.z = isMobile ? 40 : 30; |
| } |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| |
| |
| objects.forEach(obj => { |
| obj.userData.angle += obj.userData.speed * (isMobile ? 0.005 : 0.01); |
| obj.position.y = obj.userData.originalY + Math.sin(obj.userData.angle) * (isMobile ? 1 : 2); |
| obj.rotation.x += isMobile ? 0.002 : 0.005; |
| obj.rotation.y += isMobile ? 0.002 : 0.005; |
| }); |
| |
| renderer.render(scene, camera); |
| } |
| |
| |
| document.querySelectorAll('.nav-sphere').forEach(sphere => { |
| sphere.addEventListener('click', () => { |
| const section = document.getElementById(sphere.dataset.section); |
| section.scrollIntoView({ behavior: 'smooth' }); |
| |
| |
| gsap.to(sphere, { |
| scale: 1.3, |
| boxShadow: '0 0 0 12px rgba(255,255,255,0.5)', |
| duration: 0.3, |
| ease: 'power2.out', |
| onComplete: () => { |
| gsap.to(sphere, { |
| scale: 1, |
| boxShadow: '0 0 0 0 rgba(255,255,255,0.7)', |
| duration: 0.5, |
| ease: 'elastic.out(1, 0.5)' |
| }); |
| } |
| }); |
| }); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| if (!isMobile) { |
| initThreeJS(); |
| } |
| |
| |
| gsap.from('.hero-text', { |
| duration: 1.5, |
| y: 50, |
| opacity: 0, |
| ease: 'power3.out' |
| }); |
| |
| gsap.from('.project-tile', { |
| duration: 1, |
| y: 50, |
| opacity: 0, |
| stagger: 0.1, |
| ease: 'back.out(1.7)', |
| scrollTrigger: { |
| trigger: '#projects', |
| start: 'top 80%' |
| } |
| }); |
| |
| |
| if (isMobile) { |
| const navSpheres = document.querySelector('.nav-spheres'); |
| navSpheres.classList.remove('right-8', 'top-1/2', 'transform', '-translate-y-1/2', 'flex-col', 'space-y-4'); |
| navSpheres.classList.add('bottom-8', 'right-1/2', 'transform', 'translate-x-1/2', 'flex-row', 'space-x-4'); |
| } |
| }); |
| |
| |
| if ('ontouchstart' in window) { |
| document.body.classList.add('touch-device'); |
| } |
| </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=Marv12/2ppp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
