Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>My Work Experience</title> | |
| <style> | |
| /* --- CSS STYLES --- */ | |
| body { | |
| margin: 0; | |
| background-color: #0d0d0d; | |
| font-family: 'Segoe UI', sans-serif; | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| /* Fixed 3D Background */ | |
| canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: linear-gradient(to bottom, #050505, #121212); | |
| } | |
| /* Navigation */ | |
| nav { | |
| padding: 2rem 4rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| z-index: 10; | |
| position: relative; | |
| } | |
| .logo { font-weight: bold; font-size: 1.5rem; letter-spacing: 2px; } | |
| .nav-links a { | |
| color: #aaa; | |
| text-decoration: none; | |
| margin-left: 20px; | |
| transition: 0.3s; | |
| } | |
| .nav-links a:hover { color: #00f260; } | |
| /* Header */ | |
| .header { | |
| text-align: center; | |
| padding: 3rem 0; | |
| } | |
| .header h1 { | |
| font-size: 3rem; | |
| margin: 0; | |
| background: linear-gradient(90deg, #00f260, #0575e6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .header p { color: #888; margin-top: 10px; } | |
| /* --- TIMELINE STYLES --- */ | |
| .timeline { | |
| position: relative; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 40px 0 100px 0; | |
| } | |
| /* The Vertical Line */ | |
| .timeline::after { | |
| content: ''; | |
| position: absolute; | |
| width: 4px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| top: 0; | |
| bottom: 0; | |
| left: 50%; | |
| margin-left: -2px; | |
| z-index: -1; | |
| } | |
| /* Container for each event */ | |
| .container { | |
| padding: 10px 40px; | |
| position: relative; | |
| background-color: inherit; | |
| width: 50%; | |
| box-sizing: border-box; | |
| } | |
| .left { left: 0; text-align: right; } | |
| .right { left: 50%; } | |
| /* The Circles on the line */ | |
| .container::after { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| right: -10px; | |
| background-color: #0d0d0d; | |
| border: 3px solid #00f260; | |
| top: 25px; | |
| border-radius: 50%; | |
| z-index: 1; | |
| } | |
| .right::after { left: -10px; } | |
| /* The Glass Content Box */ | |
| .content { | |
| padding: 20px 30px; | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| border-radius: 6px; | |
| transition: transform 0.3s ease; | |
| } | |
| .content:hover { | |
| transform: scale(1.03); | |
| border-color: #00f260; | |
| box-shadow: 0 0 20px rgba(0, 242, 96, 0.1); | |
| } | |
| .content h2 { margin: 0 0 5px 0; font-size: 1.5rem; } | |
| .content h4 { margin: 0 0 15px 0; color: #00f260; font-weight: normal; } | |
| .content p { font-size: 0.95rem; color: #ccc; line-height: 1.6; } | |
| .date { font-size: 0.85rem; color: #777; margin-bottom: 10px; display: block; font-weight: bold; letter-spacing: 1px;} | |
| /* Responsive Mobile Layout */ | |
| @media screen and (max-width: 768px) { | |
| .timeline::after { left: 31px; } | |
| .container { width: 100%; padding-left: 70px; padding-right: 25px; } | |
| .left { text-align: left; } | |
| .container::after { left: 21px; } | |
| .right { left: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="work-canvas"></canvas> | |
| <nav> | |
| <div class="logo">PORTFOLIO</div> | |
| <div class="nav-links"> | |
| <a href="new 1.html">Home</a> | |
| <a href="projects.html">Projects</a> | |
| <a href="work.html" style="color:white; border-bottom: 2px solid #00f260;">Work</a> | |
| </div> | |
| </nav> | |
| <div class="header"> | |
| <h1>Experience</h1> | |
| <p>My professional journey and milestones.</p> | |
| </div> | |
| <div class="timeline"> | |
| <div class="container left"> | |
| <div class="content"> | |
| <span class="date">2024 - PRESENT</span> | |
| <h2>Senior Web Developer</h2> | |
| <h4>Tech Solutions Inc.</h4> | |
| <p>Leading the frontend team in rebuilding the company's flagship e-commerce platform using React and Three.js. Improved site performance by 40%.</p> | |
| </div> | |
| </div> | |
| <div class="container right"> | |
| <div class="content"> | |
| <span class="date">2023 - 2024</span> | |
| <h2>Freelance Developer</h2> | |
| <h4>Self-Employed</h4> | |
| <p>Developed custom websites and mobile apps for international clients. Specialized in creating interactive 3D landing pages and dashboard UIs.</p> | |
| </div> | |
| </div> | |
| <div class="container left"> | |
| <div class="content"> | |
| <span class="date">SUMMER 2023</span> | |
| <h2>AI Research Intern</h2> | |
| <h4>Data Corp</h4> | |
| <p>Worked on Natural Language Processing models to automate customer support tickets. Integrated Python backend with a Vue.js frontend dashboard.</p> | |
| </div> | |
| </div> | |
| <div class="container right"> | |
| <div class="content"> | |
| <span class="date">2022</span> | |
| <h2>Hackathon Winner</h2> | |
| <h4>Global Tech Fest</h4> | |
| <p>Secured 1st place out of 50 teams by building a real-time sign language translator using Computer Vision and Machine Learning.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script> | |
| // --- 3D SCENE SETUP --- | |
| const scene = new THREE.Scene(); | |
| // Add light so the shapes look solid yet metallic | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); | |
| scene.add(ambientLight); | |
| const pointLight = new THREE.PointLight(0x00f260, 1); | |
| pointLight.position.set(25, 50, 25); | |
| scene.add(pointLight); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('work-canvas'), alpha: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.setPixelRatio(window.devicePixelRatio); | |
| // --- CREATE FLOATING SHAPES --- | |
| // We will create multiple wireframe shapes floating upward | |
| const geometry = new THREE.IcosahedronGeometry(1, 0); // Crystal shape | |
| const material = new THREE.MeshBasicMaterial({ | |
| color: 0x444444, | |
| wireframe: true, | |
| transparent: true, | |
| opacity: 0.3 | |
| }); | |
| const shapes = []; | |
| const numShapes = 40; | |
| for (let i = 0; i < numShapes; i++) { | |
| const mesh = new THREE.Mesh(geometry, material); | |
| // Random Positions | |
| mesh.position.x = (Math.random() - 0.5) * 40; | |
| mesh.position.y = (Math.random() - 0.5) * 40; | |
| mesh.position.z = (Math.random() - 0.5) * 20; | |
| // Random Scale | |
| const s = Math.random() * 1.5; | |
| mesh.scale.set(s, s, s); | |
| // Random Rotation speed custom property | |
| mesh.userData = { | |
| rotSpeedX: Math.random() * 0.02, | |
| rotSpeedY: Math.random() * 0.02, | |
| flySpeed: Math.random() * 0.02 + 0.01 | |
| }; | |
| scene.add(mesh); | |
| shapes.push(mesh); | |
| } | |
| camera.position.z = 15; | |
| // Interaction | |
| let mouseY = 0; | |
| document.addEventListener('mousemove', (e) => { | |
| mouseY = e.clientY; | |
| }); | |
| // --- ANIMATION LOOP --- | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Animate each shape | |
| shapes.forEach(mesh => { | |
| mesh.rotation.x += mesh.userData.rotSpeedX; | |
| mesh.rotation.y += mesh.userData.rotSpeedY; | |
| // Move Upwards | |
| mesh.position.y += mesh.userData.flySpeed; | |
| // Reset position if it goes off screen top | |
| if (mesh.position.y > 20) { | |
| mesh.position.y = -20; | |
| } | |
| }); | |
| // Gentle camera movement based on mouse Y | |
| camera.position.y += (mouseY * 0.01 - camera.position.y) * 0.05; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| </script> | |
| </body> | |
| </html> |