Skip to content

Commit 5aa99af

Browse files
Earendel-labEarendel-lab
authored
Update index.html
1 parent 2ca2929 commit 5aa99af

1 file changed

Lines changed: 89 additions & 123 deletions

File tree

‎index.html‎

Lines changed: 89 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,8 @@
1818
:root {
1919
--accent: #6366f1;
2020
--terminal: #07C12F;
21-
/* Enhanced Glassmorphism Variables */
22-
--glass: rgba(255, 255, 255, 0.04);
23-
--glass-border: rgba(255, 255, 255, 0.12);
24-
--glass-glow: rgba(99, 102, 241, 0.05);
21+
--glass: rgba(255, 255, 255, 0.02);
22+
--glass-border: rgba(255, 255, 255, 0.1);
2523
--text-main: #ffffff;
2624
--text-sub: #94a3b8;
2725
--radius: 32px;
@@ -57,12 +55,12 @@
5755
@media (hover: none) { #cursor-dot, #cursor-ring { display: none; } * { cursor: auto !important; } }
5856
@media (hover: hover) { * { cursor: none !important; } }
5957

60-
#bg-canvas { position: fixed; top: 0; left: 0; z-index: -1; width: 100vw; height: 100vh; filter: blur(15px); opacity: 0.8; }
58+
#bg-canvas { position: fixed; top: 0; left: 0; z-index: -1; width: 100vw; height: 100vh; }
6159

6260
nav {
6361
position: fixed; top: 0; width: 100%; height: 70px; z-index: 1000;
6462
display: flex; justify-content: center; align-items: center;
65-
background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(25px); border-bottom: 1px solid var(--glass-border);
63+
background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(40px); border-bottom: 1px solid var(--glass-border);
6664
}
6765
.nav-container { width: 100%; max-width: 1200px; display: flex; justify-content: space-between; padding: 0 6%; align-items: center; }
6866
.brand-wrapper { display: flex; align-items: center; gap: 12px; }
@@ -78,64 +76,38 @@
7876
section { min-height: 100vh; padding: 140px 6% 80px; display: flex; flex-direction: column; justify-content: center; position: relative; }
7977
.container { width: 100%; max-width: 1100px; margin: 0 auto; }
8078

81-
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
82-
83-
/* Glassmorphism Evolution */
79+
/* Enhanced Glass Depth */
8480
.glass-card {
8581
background: var(--glass);
8682
border: 1px solid var(--glass-border);
8783
padding: 50px 40px;
8884
border-radius: var(--radius);
89-
backdrop-filter: blur(20px) saturate(180%);
90-
box-shadow: inset 0 0 20px var(--glass-glow);
85+
backdrop-filter: blur(50px) saturate(180%);
86+
box-shadow: inset 0 0 40px rgba(255,255,255,0.02);
9187
}
9288
.tab-item h4 { color: var(--terminal); font-size: 1.2rem; margin-bottom: 12px; font-family: 'Space Grotesk'; }
9389
.tab-item p { color: var(--text-sub); line-height: 1.7; font-size: 0.95rem; }
9490

9591
.scope-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
96-
9792
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
9893

9994
.tech-item {
100-
background: var(--glass);
101-
border: 1px solid var(--glass-border);
102-
padding: 45px 25px;
103-
border-radius: 28px;
104-
text-align: center;
105-
transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
106-
backdrop-filter: blur(12px);
107-
}
108-
.tech-item:hover {
109-
background: rgba(255,255,255,0.08);
110-
border-color: var(--accent);
111-
transform: scale(1.05);
95+
background: var(--glass); border: 1px solid var(--glass-border);
96+
padding: 45px 25px; border-radius: 28px; text-align: center;
97+
transition: 0.3s ease; backdrop-filter: blur(30px);
11298
}
11399
.tech-item i { font-size: 3.2rem; display: block; margin-bottom: 15px; opacity: 0.9; color: #fff; }
114100
.tech-item span { font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; color: var(--text-sub); }
115101

102+
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
116103
.project-card {
117-
padding: 45px 35px; border-radius: var(--radius);
118-
background: var(--glass); border: 1px solid var(--glass-border);
119-
backdrop-filter: blur(15px);
104+
padding: 45px 35px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-border);
120105
text-decoration: none; color: inherit; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px;
121-
transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
122-
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
123-
}
124-
.project-card:hover {
125-
border-color: rgba(255,255,255,0.4);
126-
transform: translateY(-12px) scale(1.02);
127-
background: rgba(255,255,255,0.08);
128-
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
106+
transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(40px);
129107
}
108+
.project-card:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-10px); background: rgba(255,255,255,0.05); }
130109

131-
.action-box {
132-
background: rgba(255, 255, 255, 0.95);
133-
color: #000;
134-
padding: 80px 40px;
135-
border-radius: var(--radius);
136-
text-align: center;
137-
backdrop-filter: blur(10px);
138-
}
110+
.action-box { background: #ffffff; color: #000; padding: 80px 40px; border-radius: var(--radius); text-align: center; }
139111
.btn { padding: 18px 36px; border-radius: 100px; font-weight: 800; text-decoration: none; display: inline-block; text-transform: uppercase; font-size: 0.75rem; border:none; transition: 0.3s; cursor: pointer; }
140112
.btn-black { background: #000; color: #fff; }
141113
.btn-discord { background: #5865f2; color: #fff; }
@@ -340,98 +312,92 @@ <h2 style="background: linear-gradient(135deg, #000 0%, #444 100%); -webkit-back
340312
}
341313
type();
342314

343-
// --- ENHANCED THREE.JS WAVES ---
315+
// --- HEAVY GLASS DEPTH LIQUID ---
344316
const scene = new THREE.Scene();
345-
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
346-
const BASE_Y = 35;
347-
const BASE_Z = 70;
348-
camera.position.set(0, BASE_Y, BASE_Z);
349-
350-
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#bg-canvas'), antialias: true, alpha: true });
317+
const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
318+
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#bg-canvas'), antialias: true });
351319
renderer.setSize(window.innerWidth, window.innerHeight);
352320
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
353321

354-
// High-density geometry for smoother waves
355-
const geometry = new THREE.PlaneGeometry(350, 350, 140, 140);
356-
357-
// Multi-layered mesh effect
358-
const material = new THREE.MeshBasicMaterial({
359-
color: 0x6366f1,
360-
transparent: true,
361-
opacity: 0.15,
362-
wireframe: true
363-
});
364-
const waveMesh = new THREE.Mesh(geometry, material);
365-
366-
// Secondary solid-ish plane for depth
367-
const material2 = new THREE.MeshBasicMaterial({
368-
color: 0x1e3a8a,
369-
transparent: true,
370-
opacity: 0.25,
371-
side: THREE.DoubleSide
322+
const geometry = new THREE.PlaneGeometry(30, 30, 160, 160);
323+
324+
const material = new THREE.ShaderMaterial({
325+
uniforms: {
326+
uTime: { value: 0 },
327+
uMouse: { value: new THREE.Vector2(0, 0) },
328+
uScroll: { value: 0 }
329+
},
330+
vertexShader: `
331+
uniform float uTime;
332+
uniform vec2 uMouse;
333+
uniform float uScroll;
334+
varying float vElevation;
335+
336+
void main() {
337+
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
338+
339+
// Thicker, heavier wave movement
340+
float waveX = sin(modelPosition.x * 0.5 + uTime * 0.3) * 0.4;
341+
float waveZ = cos(modelPosition.z * 0.5 + uTime * 0.3) * 0.4;
342+
float elevation = waveX + waveZ;
343+
344+
// Magnetic, targeted raise effect
345+
float dist = distance(modelPosition.xz, uMouse * 14.0);
346+
float ripple = sin(dist * 1.5 - uTime * 1.2) * exp(-dist * 0.35) * 1.2;
347+
348+
elevation += ripple;
349+
elevation += sin(uScroll * 0.002 + modelPosition.x * 1.5) * 0.2;
350+
351+
modelPosition.y += elevation;
352+
vElevation = elevation;
353+
354+
gl_Position = projectionMatrix * viewMatrix * modelPosition;
355+
}
356+
`,
357+
fragmentShader: `
358+
varying float vElevation;
359+
360+
void main() {
361+
// Deep abyss liquid color
362+
float intensity = vElevation * 0.5 + 0.2;
363+
vec3 base = vec3(0.005, 0.005, 0.02); // Darker base
364+
vec3 peak = vec3(0.1, 0.15, 0.35); // More saturated blue-black
365+
366+
vec3 color = mix(base, peak, intensity);
367+
368+
// High-end glass reflection glint
369+
float glint = smoothstep(0.2, 0.6, vElevation);
370+
color += glint * 0.25;
371+
372+
// Subtle edge darkening for depth perception
373+
float vignette = 1.0 - length(gl_FragCoord.xy / vec2(2000.0)) * 0.2;
374+
color *= vignette;
375+
376+
gl_FragColor = vec4(color, 1.0);
377+
}
378+
`
372379
});
373-
const waveMesh2 = new THREE.Mesh(geometry, material2);
374-
375-
waveMesh.rotation.x = -Math.PI / 2.1;
376-
waveMesh2.rotation.x = -Math.PI / 2.1;
377-
scene.add(waveMesh);
378-
scene.add(waveMesh2);
379-
380-
const starGeo = new THREE.BufferGeometry();
381-
const starCount = 2000;
382-
const starPos = new Float32Array(starCount * 3);
383-
for(let i=0; i<starCount; i++) {
384-
starPos[i*3]=(Math.random()-0.5)*600; starPos[i*3+1]=(Math.random()-0.5)*600; starPos[i*3+2]=(Math.random()-0.5)*600;
385-
}
386-
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
387-
const stars = new THREE.Points(starGeo, new THREE.PointsMaterial({ color: 0xffffff, size: 0.3 }));
388-
scene.add(stars);
389380

390-
let time = 0;
391-
let currentSpeed = 1.0;
392-
let targetSpeed = 1.0;
393-
let mouseX = 0, mouseY = 0;
381+
const mesh = new THREE.Mesh(geometry, material);
382+
mesh.rotation.x = -Math.PI / 2.2;
383+
scene.add(mesh);
394384

385+
camera.position.set(0, 5, 12);
386+
387+
let targetMouse = new THREE.Vector2(0, 0);
395388
window.addEventListener('mousemove', (e) => {
396-
mouseX = (e.clientX - window.innerWidth / 2) * 0.01;
397-
mouseY = (e.clientY - window.innerHeight / 2) * 0.01;
389+
targetMouse.x = (e.clientX / window.innerWidth) * 2 - 1;
390+
targetMouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
398391
});
399392

400-
const visionObs = new IntersectionObserver((entries) => {
401-
targetSpeed = entries[0].isIntersecting ? 5.0 : 1.0;
402-
}, { threshold: 0.1 });
403-
visionObs.observe(document.getElementById('starshot'));
404-
405-
function animate() {
406-
currentSpeed += (targetSpeed - currentSpeed) * 0.02;
407-
time += 0.005 * currentSpeed;
408-
requestAnimationFrame(animate);
409-
410-
const pos = geometry.attributes.position;
411-
for (let i = 0; i < pos.count; i++) {
412-
const x = pos.getX(i);
413-
const y = pos.getY(i);
414-
415-
// Complex wave interference pattern
416-
const w1 = Math.sin(x * 0.04 + time) * 6;
417-
const w2 = Math.cos(y * 0.03 + time * 1.2) * 6;
418-
const w3 = Math.sin((x + y) * 0.02 + time * 0.8) * 4;
419-
420-
pos.setZ(i, w1 + w2 + w3);
421-
}
422-
pos.needsUpdate = true;
423-
424-
const driftX = Math.sin(time * 0.2) * 10;
425-
const driftY = Math.cos(time * 0.15) * 5;
426-
427-
camera.position.x += (mouseX + driftX - camera.position.x) * 0.05;
428-
camera.position.y += (BASE_Y - mouseY + driftY - camera.position.y) * 0.05;
429-
camera.lookAt(0, 0, 0);
430-
431-
stars.rotation.y += 0.0003 * currentSpeed;
393+
function animate(t) {
394+
material.uniforms.uTime.value = t * 0.001;
395+
material.uniforms.uMouse.value.lerp(targetMouse, 0.04);
396+
material.uniforms.uScroll.value = window.pageYOffset;
432397
renderer.render(scene, camera);
398+
requestAnimationFrame(animate);
433399
}
434-
animate();
400+
animate(0);
435401

436402
function handleEmail() {
437403
const mail = 'zwebuse@gmail.com';

0 commit comments

Comments
 (0)