/* ========================= FUTURISTIC FOOTER + BEAM ========================= */ #footer-panel{ position:fixed; bottom:0;left:0; width:100%; z-index:1000; display:flex; flex-direction:column; align-items:center; padding:14px 0 20px; background:rgba(0,5,15,0.85); border-top:1px solid rgba(68,204,255,0.15); box-shadow:0 -4px 16px rgba(0,20,40,0.4); backdrop-filter:blur(8px); overflow:hidden; opacity:1; transition:opacity 1s ease, transform 1.2s ease; } #footer-panel.hidden{ opacity:0; transform:translateY(100%); pointer-events:none; } /* Animated cyan beam */ #footer-panel::before{ content:""; position:absolute; bottom:40px; left:-20%; width:140%; height:2px; background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(68,204,255,0.7) 50%, rgba(0,0,0,0) 100%); filter:blur(3px); animation:footerBeam 5s linear infinite; opacity:0.6; } @keyframes footerBeam{ 0%{transform:translateX(-10%);opacity:0.4;} 50%{transform:translateX(10%);opacity:0.8;} 100%{transform:translateX(-10%);opacity:0.4;} } /* Footer pulse */ #footer-panel.pulse{ animation:footerPulseSync 5s cubic-bezier(0.5,0.1,0.1,1) infinite; } @keyframes footerPulseSync{ 0%,100%{box-shadow:0 -4px 18px rgba(68,204,255,0.15);} 25%{box-shadow:0 -4px 30px rgba(68,204,255,0.6);} 50%{box-shadow:0 -4px 22px rgba(68,204,255,0.35);} 75%{box-shadow:0 -4px 28px rgba(68,204,255,0.5);} } /* Footer form */ #footer-panel form{ display:flex; justify-content:center; align-items:center; gap:8px; max-width:900px; width:100%; z-index:2; } #footer-panel input, #footer-panel textarea{ background:rgba(0,15,30,0.6); border:1px solid rgba(68,204,255,0.3); border-radius:6px; color:#b8e0ff; padding:6px 10px; font-size:13px; height:34px; resize:none; outline:none; transition:border-color 0.3s ease, box-shadow 0.3s ease; } #footer-panel input:focus, #footer-panel textarea:focus{ border-color:rgba(68,204,255,0.7); box-shadow:0 0 10px rgba(68,204,255,0.4); } #footer-panel textarea{ flex:1 1 280px; height:34px; } /* Transmit button */ #footer-panel button{ height:34px; padding:0 18px; background:linear-gradient(90deg,#33bbff,#55ffaa); color:#001020; font-weight:600; border:none; border-radius:6px; cursor:pointer; font-size:13px; text-transform:uppercase; letter-spacing:0.5px; box-shadow:0 0 12px rgba(68,204,255,0.3); transition:all 0.25s ease; animation:transmitPulse 5s cubic-bezier(0.5,0.1,0.1,1) infinite; } @keyframes transmitPulse{ 0%,100%{ box-shadow:0 0 10px rgba(68,204,255,0.3); background:linear-gradient(90deg,#33bbff,#55ffaa); } 25%{ box-shadow:0 0 20px rgba(68,204,255,0.8); background:linear-gradient(90deg,#44ccff,#66ffbb); } 50%{ box-shadow:0 0 14px rgba(68,204,255,0.5); background:linear-gradient(90deg,#33bbff,#55ffaa); } 75%{ box-shadow:0 0 18px rgba(68,204,255,0.65); background:linear-gradient(90deg,#44ccff,#66ffbb); } } #footer-panel button:hover{ transform:scale(1.05); box-shadow:0 0 25px rgba(68,204,255,0.8); } .footer-text{ margin-top:8px; font-size:12px; color:rgba(180,220,255,0.55); letter-spacing:0.4px; } /* ========================= ZOOM RING (ABOVE FOOTER) ========================= */ #zoom-ring{ position:fixed; bottom:120px; /* clear footer area */ right:20px; width:60px;height:60px; background:rgba(10,20,40,0.9); border:1px solid rgba(68,204,255,0.5); border-radius:50%; box-shadow:0 0 30px rgba(68,204,255,0.4); backdrop-filter:blur(10px); z-index:1100; /* ABOVE footer-panel */ opacity:0; transform:scale(0.8); transition: opacity 0.4s ease, transform 0.3s ease, bottom 0.3s ease, box-shadow 0.3s ease; pointer-events:auto; display:flex; align-items:center; justify-content:center; cursor:default; animation:pulse-glow 3s infinite alternate; } #zoom-ring.visible{ opacity:1 !important; transform:scale(1) !important; } #zoom-ring:hover, #zoom-ring.active{ transform:scale(1.1) !important; box-shadow:0 0 50px rgba(68,204,255,0.7) !important; bottom:130px !important; } #zoom-ring.active{ cursor:move !important; } #zoom-handle{ width:20px;height:20px; background:#44ccff; border-radius:50%; box-shadow:0 0 15px #44ccff; cursor:grab; transition:transform 0.2s ease, box-shadow 0.2s ease; } #zoom-handle:active{ cursor:grabbing; transform:scale(1.3); box-shadow:0 0 25px #66d9ff; } /* ========================= ORBITAL HUD ========================= */ #orbital-hud{ position:fixed; top:50%;left:50%; transform:translate(-50%, -50%); text-align:center; z-index:100; pointer-events:none; font-family:'Orbitron','Courier New',monospace; text-shadow: 0 0 10px rgba(68,204,255,0.6), 0 0 20px rgba(68,204,255,0.4); opacity:0; animation:hudFadeIn 2s ease-out forwards; animation-delay:1s; } .hud-title{ font-size:2.0rem; font-weight:700; color:#44ccff; letter-spacing:8px; margin-bottom:8px; text-transform:uppercase; background:linear-gradient(90deg,#44ccff,#66d9ff,#44ccff); background-size:200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:titleFlow 4s infinite linear; } .hud-subtitle{ display:flex; justify-content:center; gap:20px; margin:16px 0; flex-wrap:wrap; } .neural-path{ font-size:1rem; color:#88ddff; letter-spacing:3px; position:relative; padding:0 8px; } .neural-path::before{ content:''; position:absolute; top:50%;left:0; width:100%;height:1px; background:linear-gradient(90deg,transparent,#44ccff,transparent); transform:translateY(-50%); opacity:0.6; animation:scanLine 3s infinite linear; } .hud-instruction{ font-size:1.3rem; color:#66d9ff; letter-spacing:4px; margin:20px 0; font-weight:500; animation:pulseGlow 2s infinite alternate; } .hud-guide{ font-size:0.9rem; color:#88ddff; line-height:1.6; max-width:700px; margin:0 auto; opacity:0.9; } .globe-click,.globe-return{ display:block; position:relative; padding-left:20px; } .globe-click::before, .globe-return::before{ content:'◆'; position:absolute; left:0; color:#44ccff; color:#AA0101; animation:blink 1.5s infinite; } /* HUD animations */ @keyframes hudFadeIn{ from{opacity:0;transform:translate(-50%, -45%);} to {opacity:1;transform:translate(-50%, -50%);} } @keyframes titleFlow{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} } @keyframes scanLine{ 0%{transform:translateX(-100%) translateY(-50%);} 100%{transform:translateX(100%) translateY(-50%);} } @keyframes pulseGlow{ from{ text-shadow:0 0 10px rgba(102,217,255,0.6); } to { text-shadow:0 0 25px rgba(102,217,255,0.9), 0 0 35px rgba(68,204,255,0.6); } } #holoPanel { position: fixed; right: -320px; /* ← was -420px → panel is narrower */ top: 0; width: 280px; /* ← 35% smaller than 400px */ height: 100%; background: rgba(8, 14, 28, 0.92); border-left: 1px solid rgba(80,140,255,0.4); backdrop-filter: blur(10px); padding: 20px 18px; /* ← tighter padding */ color: #d8e6ff; font-family: Arial, sans-serif; transition: right 0.35s ease; z-index: 999999; overflow-y: auto; box-shadow: -2px 0 30px rgba(68,204,255,0.25); } #holoPanel.open { right: 0; } /* Smaller text & tighter spacing */ #holoPanel .holo-title { font-size: 18px; margin-bottom: 12px; color: #66ccff; } #holoPanel .holo-section { margin-bottom: 18px; } #holoPanel .holo-section h3 { font-size: 14px; color: #80d0ff; margin-bottom: 6px; } #holoPanel p, #holoPanel li { font-size: 13px; line-height: 1.5; margin-bottom: 6px; } #holoPanel ul { padding-left: 16px; margin: 0; } /* Tech Stack Tag Wrapping */ #holoPanel .holo-tech { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 0 !important; margin-left: 0 !important; } /* Tech Stack Tag Style */ #holoPanel .holo-tech .tag { display: inline-flex; white-space: nowrap; background: rgba(60, 120, 255, 0.15); border: 1px solid rgba(100, 160, 255, 0.25); border-radius: 6px; padding: 3px 6px; font-size: 11px; color: #d8e6ff; } /* Close button */ #holoClose { font-size: 18px; right: 12px; top: 12px; } /* Mobile: hide or collapse */ @media (max-width: 768px) { #holoPanel { width: 240px; right: -260px; padding: 16px 14px; } #holoPanel .holo-title { font-size: 16px; } #holoPanel p, #holoPanel li { font-size: 12px; } } .globe-arrow { filter: drop-shadow(0 0 4px #3ecbff); } .arrow-dot { position: fixed; width: 10px; height: 10px; background: #33aaff; border-radius: 50%; box-shadow: 0 0 12px #33aaff, 0 0 25px #33aaff; pointer-events: none; z-index: 99999; transition: opacity 0.2s ease-out; } .arrow-tail { position: fixed; width: 40px; height: 2px; background: linear-gradient(to left, #33aaff, transparent); pointer-events: none; z-index: 99999; opacity: 0.8; transition: opacity 0.2s ease-out; }

JAMES MURRAY
AI SYSTEMS VECTOR DATABASES BLOCKCHAIN ENGINEERING SEO/AEO/RGO/ASO/VSO/LLMO Optimization Strategies
HOVER & DRAG TO EXPLORE
Click Atlas, Projects or Earth Globe to enter it's world. [In a World] Click the Globe to [Return] to Universe. Click the Orbiting Globes to Open Web Pages.
Projects
Atlas
Earth
Universe

Transmission Received

Your message has successfully reached James Murray.

Response pending neural processing…

✕

Summary

What This Project Demonstrates

What I Can Do For Your Company

Tech Stack

Available for select projects