DevOps Global Hero

Global DevOps Automation

200+ active clients worldwide

body, html { margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; background: #000; color: #fff; } .hero { position: relative; width: 100vw; height: 100vh; overflow: hidden; } #globeCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1; } .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 0 20px; pointer-events: none; } .hero-content h1 { font-size: 3em; margin: 0 0 20px; } .hero-content p { font-size: 1.5em; margin: 0; } .tooltip { position: absolute; background: rgba(0,0,0,0.7); color: #0ff; padding: 5px 10px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.2s; font-size: 14px; z-index: 3; } import * as THREE from 'https://cdn.skypack.dev/three@0.160.1'; import { OrbitControls } from 'https://cdn.skypack.dev/three@0.160.1/examples/jsm/controls/OrbitControls.js'; const canvas = document.getElementById('globeCanvas'); const tooltip = document.getElementById('tooltip'); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enablePan = false; controls.minDistance = 3; controls.maxDistance = 10; const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(5,5,5); scene.add(directionalLight); // Globe const globeGeometry = new THREE.SphereGeometry(1.5, 64, 64); const globeMaterial = new THREE.MeshStandardMaterial({ color: 0x003344, wireframe: true, opacity: 0.3, transparent: true }); const globe = new THREE.Mesh(globeGeometry, globeMaterial); scene.add(globe); // Nodes const nodeGeometry = new THREE.SphereGeometry(0.03, 16, 16); const nodeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ffff }); const nodes = []; for(let i=0; i<200; i++){ const phi = Math.acos(2 * Math.random() - 1); const theta = 2 * Math.PI * Math.random(); const radius = 1.5; const x = radius * Math.sin(phi) * Math.cos(theta); const y = radius * Math.sin(phi) * Math.sin(theta); const z = radius * Math.cos(phi); const node = new THREE.Mesh(nodeGeometry, nodeMaterial); node.position.set(x, y, z); node.userData = { type: 'infrastructure', label: 'Client Node' }; scene.add(node); nodes.push(node); } // Clouds (cloud services) const cloudGeometry = new THREE.SphereGeometry(0.1, 16, 16); const cloudMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 }); const clouds = []; for(let i=0; i<20; i++){ const phi = Math.acos(2 * Math.random() - 1); const theta = 2 * Math.PI * Math.random(); const radius = 1.7; const x = radius * Math.sin(phi) * Math.cos(theta); const y = radius * Math.sin(phi) * Math.sin(theta); const z = radius * Math.cos(phi); const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial); cloud.position.set(x, y, z); cloud.userData = { type: 'cloud', label: 'Cloud Service' }; scene.add(cloud); clouds.push(cloud); } // Tech logos as sprites const loader = new THREE.TextureLoader(); const logos = [ { url: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg', label: 'Docker' }, { url: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg', label: 'Kubernetes' }, { url: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg', label: 'AWS' }, { url: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jenkins/jenkins-original.svg', label: 'Jenkins' } ]; const sprites = []; logos.forEach((logo, idx) => { loader.load(logo.url, texture => { const material = new THREE.SpriteMaterial({ map: texture, transparent: true }); const sprite = new THREE.Sprite(material); sprite.scale.set(0.3, 0.3, 1); const phi = Math.acos(2 * Math.random() - 1); const theta = 2 * Math.PI * Math.random(); const radius = 2; const x = radius * Math.sin(phi) * Math.cos(theta); const y = radius * Math.sin(phi) * Math.sin(theta); const z = radius * Math.cos(phi); sprite.position.set(x, y, z); sprite.userData = { type: 'logo', label: logo.label }; scene.add(sprite); sprites.push(sprite); }); }); // Raycaster for interactivity const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onMouseMove(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; } window.addEventListener('mousemove', onMouseMove); function animate() { requestAnimationFrame(animate); controls.update(); raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects([...nodes, ...clouds, ...sprites]); if(intersects.length > 0){ const obj = intersects[0].object; tooltip.style.opacity = 1; tooltip.style.left = (event.clientX + 10) + 'px'; tooltip.style.top = (event.clientY + 10) + 'px'; tooltip.innerText = obj.userData.label; } else { tooltip.style.opacity = 0; } renderer.render(scene, camera); } animate(); window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });