<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Portfolio</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #0f0f1e; color: #ffffff; overflow-x: hidden; } #canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; } nav { display: flex; justify-content: space-between; align-items: center; padding: 2rem; position: fixed; width: 100%; z-index: 100; } .logo { font-size: 1.5rem; font-weight: bold; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav-links { display: flex; gap: 2rem; } .nav-links a { color: #ffffff; text-decoration: none; position: relative; padding: 0.5rem 0; } .nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } .content { padding: 0 2rem; max-width: 1200px; margin: 0 auto; } .hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; } .hero h1 { font-size: 5rem; margin-bottom: 1rem; line-height: 1.1; } .hero p { font-size: 1.5rem; max-width: 600px; margin-bottom: 2rem; opacity: 0.8; } .cta-button { display: inline-block; padding: 1rem 2rem; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); border: none; border-radius: 50px; color: white; font-weight: bold; text-decoration: none; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .cta-button:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .section { min-height: 100vh; padding: 6rem 0; display: flex; flex-direction: column; justify-content: center; } .section-title { font-size: 3rem; margin-bottom: 3rem; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; height: 4px; width: 50%; bottom: -10px; left: 0; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); } .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .project-card { background: rgba(255, 255, 255, 0.05); border-radius: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card:hover { transform: translateY(-10px); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); } .project-img { width: 100%; height: 200px; background: #2a2a3a; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #4ecdc4; } .project-info { padding: 1.5rem; } .project-info h3 { margin-bottom: 0.5rem; } .project-info p { opacity: 0.7; margin-bottom: 1rem; } .contact-form { max-width: 600px; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; } .form-group input, .form-group textarea { width: 100%; padding: 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; color: white; font-size: 1rem; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #4ecdc4; } footer { text-align: center; padding: 2rem; opacity: 0.7; } .scroll-indicator { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100; transition: transform 0.3s ease; } .scroll-indicator:hover { transform: scale(1.1); } /* Animations */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .hero h1 { font-size: 3rem; } .nav-links { display: none; } } </style> </head> <body> <div id="canvas-container"></div> <nav> <div class="logo">PORTFOLIO</div> <div class="nav-links"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> </div> </nav> <div class="content"> <section id="home" class="hero"> <h1 class="fade-in">Creative<br>3D Portfolio</h1> <p class="fade-in">Web developer & 3D artist creating immersive digital experiences.</p> <a href="#projects" class="cta-button fade-in">View My Work</a> </section> <section id="about" class="section"> <h2 class="section-title fade-in">About Me</h2> <div class="fade-in"> <p>I'm a passionate frontend developer and 3D artist with 5+ years of experience creating immersive digital experiences. I specialize in WebGL, Three.js, and creating performant, visually stunning web applications.</p> <br> <p>My approach combines technical expertise with creative vision, resulting in unique digital experiences that engage and delight users. I believe in the power of interactive storytelling through code and design.</p> </div> </section> <section id="projects" class="section"> <h2 class="section-title fade-in">Featured Projects</h2> <div class="projects"> <div class="project-card fade-in"> <div class="project-img">Project Thumbnail</div> <div class="project-info"> <h3>3D Product Configurator</h3> <p>Interactive product visualization with customization options using Three.js and React.</p> <a href="#" class="cta-button">View Project</a> </div> </div> <div class="project-card fade-in"> <div class="project-img">Project Thumbnail</div> <div class="project-info"> <h3>WebGL Data Visualization</h3> <p>Dynamic 3D data visualization dashboard for financial analytics.</p> <a href="#" class="cta-button">View Project</a> </div> </div> <div class="project-card fade-in"> <div class="project-img">Project Thumbnail</div> <div class="project-info"> <h3>Immersive Brand Experience</h3> <p>Award-winning interactive storytelling for a global fashion brand.</p> <a href="#" class="cta-button">View Project</a> </div> </div> </div> </section> <section id="contact" class="section"> <h2 class="section-title fade-in">Get In Touch</h2> <form class="contact-form fade-in"> <div class="form-group"> <label for="name">Name</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" name="message" rows="5" required></textarea> </div> <button type="submit" class="cta-button">Send Message</button> </form> </section> </div> <div class="scroll-indicator">↑</div> <footer> <p>© 2025 3D Creative Portfolio. All rights reserved.</p> </footer>  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script> // 3D Animation with Three.js const container = document.getElementById('canvas-container'); let scene, camera, renderer, particles; function init() { // Create scene scene = new THREE.Scene(); // Set up camera camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 30; // Set up renderer renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000, 0); container.appendChild(renderer.domElement); // Create particle system const particleCount = 5000; const particleGeometry = new THREE.BufferGeometry(); const particlePositions = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount * 3; i += 3) { particlePositions[i] = (Math.random() - 0.5) * 100; particlePositions[i + 1] = (Math.random() - 0.5) * 100; particlePositions[i + 2] = (Math.random() - 0.5) * 100; } particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3)); const particleMaterial = new THREE.PointsMaterial({ color: 0x4ecdc4, size: 0.5, transparent: true, opacity: 0.8 }); particles = new THREE.Points(particleGeometry, particleMaterial); scene.add(particles); // Add light const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); window.addEventListener('resize', onWindowResize); // Start animation animate(); } function animate() { requestAnimationFrame(animate); // Rotate particles particles.rotation.x += 0.0005; particles.rotation.y += 0.001; // Move camera slightly based on mouse position if (mouseX && mouseY) { camera.position.x += (mouseX - camera.position.x) * 0.05; camera.position.y += (-mouseY - camera.position.y) * 0.05; camera.lookAt(scene.position); } renderer.render(scene, camera); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // Track mouse position for interactive camera movement let mouseX = 0; let mouseY = 0; document.addEventListener('mousemove', (event) => { mouseX = (event.clientX - window.innerWidth / 2) / 50; mouseY = (event.clientY - window.innerHeight / 2) / 50; }); // Scroll animations const fadeElements = document.querySelectorAll('.fade-in'); function checkFade() { fadeElements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementBottom = element.getBoundingClientRect().bottom; if (elementTop < window.innerHeight - 100 && elementBottom > 0) { element.classList.add('visible'); } else { element.classList.remove('visible'); } }); } window.addEventListener('scroll', checkFade); // Scroll to top functionality const scrollIndicator = document.querySelector('.scroll-indicator'); scrollIndicator.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); window.addEventListener('scroll', () => { if (window.scrollY > 300) { scrollIndicator.style.display = 'flex'; } else { scrollIndicator.style.display = 'none'; } }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Initialize the 3D background init(); // Check for fade animations on page load window.addEventListener('load', checkFade); </script> </body> </html>