Skip to content

Commit 2ca2929

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

1 file changed

Lines changed: 94 additions & 31 deletions

File tree

‎index.html‎

Lines changed: 94 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@
1818
:root {
1919
--accent: #6366f1;
2020
--terminal: #07C12F;
21-
--glass: rgba(255, 255, 255, 0.03);
22-
--glass-border: rgba(255, 255, 255, 0.08);
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);
2325
--text-main: #ffffff;
2426
--text-sub: #94a3b8;
2527
--radius: 32px;
@@ -55,12 +57,12 @@
5557
@media (hover: none) { #cursor-dot, #cursor-ring { display: none; } * { cursor: auto !important; } }
5658
@media (hover: hover) { * { cursor: none !important; } }
5759

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

6062
nav {
6163
position: fixed; top: 0; width: 100%; height: 70px; z-index: 1000;
6264
display: flex; justify-content: center; align-items: center;
63-
background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border);
65+
background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(25px); border-bottom: 1px solid var(--glass-border);
6466
}
6567
.nav-container { width: 100%; max-width: 1200px; display: flex; justify-content: space-between; padding: 0 6%; align-items: center; }
6668
.brand-wrapper { display: flex; align-items: center; gap: 12px; }
@@ -78,7 +80,15 @@
7880

7981
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
8082

81-
.glass-card { background: var(--glass); border: 1px solid var(--glass-border); padding: 50px 40px; border-radius: var(--radius); backdrop-filter: blur(10px); }
83+
/* Glassmorphism Evolution */
84+
.glass-card {
85+
background: var(--glass);
86+
border: 1px solid var(--glass-border);
87+
padding: 50px 40px;
88+
border-radius: var(--radius);
89+
backdrop-filter: blur(20px) saturate(180%);
90+
box-shadow: inset 0 0 20px var(--glass-glow);
91+
}
8292
.tab-item h4 { color: var(--terminal); font-size: 1.2rem; margin-bottom: 12px; font-family: 'Space Grotesk'; }
8393
.tab-item p { color: var(--text-sub); line-height: 1.7; font-size: 0.95rem; }
8494

@@ -87,21 +97,45 @@
8797
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
8898

8999
.tech-item {
90-
background: var(--glass); border: 1px solid var(--glass-border);
91-
padding: 45px 25px; border-radius: 28px; text-align: center;
92-
transition: 0.3s ease;
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);
93112
}
94113
.tech-item i { font-size: 3.2rem; display: block; margin-bottom: 15px; opacity: 0.9; color: #fff; }
95114
.tech-item span { font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; color: var(--text-sub); }
96115

97116
.project-card {
98-
padding: 45px 35px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-border);
117+
padding: 45px 35px; border-radius: var(--radius);
118+
background: var(--glass); border: 1px solid var(--glass-border);
119+
backdrop-filter: blur(15px);
99120
text-decoration: none; color: inherit; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px;
100121
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);
101129
}
102-
.project-card:hover { border-color: #fff; transform: translateY(-10px); background: rgba(255,255,255,0.06); }
103130

104-
.action-box { background: #ffffff; color: #000; padding: 80px 40px; border-radius: var(--radius); text-align: center; }
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+
}
105139
.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; }
106140
.btn-black { background: #000; color: #fff; }
107141
.btn-discord { background: #5865f2; color: #fff; }
@@ -306,30 +340,51 @@ <h2 style="background: linear-gradient(135deg, #000 0%, #444 100%); -webkit-back
306340
}
307341
type();
308342

343+
// --- ENHANCED THREE.JS WAVES ---
309344
const scene = new THREE.Scene();
310345
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
311-
const BASE_Y = 25;
312-
const BASE_Z = 60;
346+
const BASE_Y = 35;
347+
const BASE_Z = 70;
313348
camera.position.set(0, BASE_Y, BASE_Z);
314349

315350
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#bg-canvas'), antialias: true, alpha: true });
316351
renderer.setSize(window.innerWidth, window.innerHeight);
317352
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
318353

319-
const geometry = new THREE.PlaneGeometry(280, 280, 110, 110);
320-
const material = new THREE.MeshBasicMaterial({ color: 0x1e3a8a, transparent: true, opacity: 0.38 });
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+
});
321364
const waveMesh = new THREE.Mesh(geometry, material);
322-
waveMesh.rotation.x = -Math.PI / 2;
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
372+
});
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;
323377
scene.add(waveMesh);
378+
scene.add(waveMesh2);
324379

325380
const starGeo = new THREE.BufferGeometry();
326-
const starCount = 1400;
381+
const starCount = 2000;
327382
const starPos = new Float32Array(starCount * 3);
328383
for(let i=0; i<starCount; i++) {
329-
starPos[i*3]=(Math.random()-0.5)*500; starPos[i*3+1]=(Math.random()-0.5)*500; starPos[i*3+2]=(Math.random()-0.5)*500;
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;
330385
}
331386
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
332-
const stars = new THREE.Points(starGeo, new THREE.PointsMaterial({ color: 0xffffff, size: 0.28 }));
387+
const stars = new THREE.Points(starGeo, new THREE.PointsMaterial({ color: 0xffffff, size: 0.3 }));
333388
scene.add(stars);
334389

335390
let time = 0;
@@ -338,34 +393,42 @@ <h2 style="background: linear-gradient(135deg, #000 0%, #444 100%); -webkit-back
338393
let mouseX = 0, mouseY = 0;
339394

340395
window.addEventListener('mousemove', (e) => {
341-
mouseX = (e.clientX - window.innerWidth / 2) * 0.015;
342-
mouseY = (e.clientY - window.innerHeight / 2) * 0.015;
396+
mouseX = (e.clientX - window.innerWidth / 2) * 0.01;
397+
mouseY = (e.clientY - window.innerHeight / 2) * 0.01;
343398
});
344399

345400
const visionObs = new IntersectionObserver((entries) => {
346-
targetSpeed = entries[0].isIntersecting ? 4.0 : 1.0;
401+
targetSpeed = entries[0].isIntersecting ? 5.0 : 1.0;
347402
}, { threshold: 0.1 });
348403
visionObs.observe(document.getElementById('starshot'));
349404

350405
function animate() {
351-
currentSpeed += (targetSpeed - currentSpeed) * 0.01;
352-
time += 0.007 * currentSpeed;
406+
currentSpeed += (targetSpeed - currentSpeed) * 0.02;
407+
time += 0.005 * currentSpeed;
353408
requestAnimationFrame(animate);
409+
354410
const pos = geometry.attributes.position;
355411
for (let i = 0; i < pos.count; i++) {
356412
const x = pos.getX(i);
357413
const y = pos.getY(i);
358-
const w1 = Math.sin(x * 0.05 + time * 1.0) * 4.5;
359-
const w2 = Math.cos(y * 0.08 + time * 0.8) * 4.5;
360-
pos.setZ(i, w1 + w2);
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);
361421
}
362422
pos.needsUpdate = true;
363-
const driftX = Math.sin(time * 0.3) * 15;
364-
const driftY = Math.cos(time * 0.25) * 5;
423+
424+
const driftX = Math.sin(time * 0.2) * 10;
425+
const driftY = Math.cos(time * 0.15) * 5;
426+
365427
camera.position.x += (mouseX + driftX - camera.position.x) * 0.05;
366428
camera.position.y += (BASE_Y - mouseY + driftY - camera.position.y) * 0.05;
367-
camera.lookAt(0, -10, -20);
368-
stars.rotation.y += 0.0004 * currentSpeed;
429+
camera.lookAt(0, 0, 0);
430+
431+
stars.rotation.y += 0.0003 * currentSpeed;
369432
renderer.render(scene, camera);
370433
}
371434
animate();

0 commit comments

Comments
 (0)