Compare commits
4 commits
0bb49cb169
...
3f1ec3056d
| Author | SHA1 | Date | |
|---|---|---|---|
3f1ec3056d
|
|||
|
fb253d9c6d
|
|||
|
f945905880
|
|||
|
17f271574f
|
3 changed files with 379 additions and 181 deletions
105
css/style.css
105
css/style.css
|
|
@ -49,6 +49,14 @@ html.lenis {
|
|||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
/* Hero entrance elements — hidden before preloader reveals them */
|
||||
.hero-title,
|
||||
.hero-subtitle {
|
||||
opacity: 0;
|
||||
transform: translateY(60px);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
/* Gallery Scroll */
|
||||
.gallery-wrapper::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
|
@ -57,3 +65,100 @@ html.lenis {
|
|||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════
|
||||
GRAIN / FILM OVERLAY
|
||||
═══════════════════════════ */
|
||||
.grain-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 500;
|
||||
pointer-events: none;
|
||||
opacity: 0.045;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
||||
background-repeat: repeat;
|
||||
background-size: 180px 180px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════
|
||||
SCROLL PROGRESS BAR
|
||||
═══════════════════════════ */
|
||||
#progress-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, #3b82f6, #93c5fd);
|
||||
z-index: 600;
|
||||
pointer-events: none;
|
||||
transition: width 0.05s linear;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════
|
||||
ACTIVE NAV LINK
|
||||
═══════════════════════════ */
|
||||
.nav-link {
|
||||
position: relative;
|
||||
color: rgba(156, 163, 175, 1);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: #ffffff;
|
||||
transition: width 0.4s cubic-bezier(0.76, 0, 0.24, 1);
|
||||
}
|
||||
.nav-link.active {
|
||||
color: #ffffff;
|
||||
}
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════
|
||||
MOBILE HAMBURGER & OVERLAY
|
||||
═══════════════════════════ */
|
||||
#mobile-overlay.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#hamburger.open .ham-line:first-child {
|
||||
transform: translateY(4px) rotate(45deg);
|
||||
width: 24px;
|
||||
}
|
||||
#hamburger.open .ham-line:last-child {
|
||||
transform: translateY(-4px) rotate(-45deg);
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
/* Staggered mobile link entrance */
|
||||
#mobile-overlay .mobile-nav-link {
|
||||
transform: translateX(-20px);
|
||||
opacity: 0;
|
||||
transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.6s ease;
|
||||
}
|
||||
#mobile-overlay.open .mobile-nav-link { transform: translateX(0); opacity: 1; }
|
||||
#mobile-overlay.open .mobile-nav-link:nth-child(1) { transition-delay: 0.15s; }
|
||||
#mobile-overlay.open .mobile-nav-link:nth-child(2) { transition-delay: 0.20s; }
|
||||
#mobile-overlay.open .mobile-nav-link:nth-child(3) { transition-delay: 0.25s; }
|
||||
#mobile-overlay.open .mobile-nav-link:nth-child(4) { transition-delay: 0.30s; }
|
||||
#mobile-overlay.open .mobile-nav-link:nth-child(5) { transition-delay: 0.35s; }
|
||||
|
||||
/* ═══════════════════════════
|
||||
EDITORIAL SECTION NUMBERS
|
||||
═══════════════════════════ */
|
||||
.section-num {
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.3em;
|
||||
color: #3b82f6;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
margin-bottom: 1.25rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
|
|||
101
index.html
101
index.html
|
|
@ -30,9 +30,16 @@
|
|||
}
|
||||
</script>
|
||||
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
|
||||
</head>
|
||||
<body class="bg-dark text-white font-sans antialiased overflow-x-hidden">
|
||||
|
||||
<!-- Grain Overlay -->
|
||||
<div class="grain-overlay" aria-hidden="true"></div>
|
||||
|
||||
<!-- Scroll Progress Bar -->
|
||||
<div id="progress-bar" aria-hidden="true"></div>
|
||||
|
||||
<!-- Preloader -->
|
||||
<div id="preloader" class="fixed inset-0 z-[999] bg-dark flex items-center justify-center">
|
||||
<div class="text-4xl md:text-6xl font-display font-bold overflow-hidden">
|
||||
|
|
@ -45,31 +52,64 @@
|
|||
<div id="cursor-dot" class="hidden md:block fixed top-0 left-0 w-1 h-1 bg-white rounded-full pointer-events-none z-[1000] mix-blend-difference -translate-x-1/2 -translate-y-1/2"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed w-full z-50 mix-blend-difference p-6 md:p-10 flex justify-between items-center">
|
||||
<nav class="fixed w-full z-[100] mix-blend-difference p-6 md:p-10 flex justify-between items-center">
|
||||
<div class="font-display font-bold text-2xl tracking-tighter uppercase">
|
||||
<a href="#home" class="hover-target">PLEXI09</a>
|
||||
<a href="#about" class="hover-target">PLEXI09</a>
|
||||
</div>
|
||||
<div class="hidden md:flex space-x-8 font-medium text-sm uppercase tracking-widest">
|
||||
<a href="#about" class="hover-target hover:text-gray-400 transition">About</a>
|
||||
<a href="#cv" class="hover-target hover:text-gray-400 transition">CV</a>
|
||||
<a href="#projects" class="hover-target hover:text-gray-400 transition">Projects</a>
|
||||
<a href="#photography" class="hover-target hover:text-gray-400 transition">Photography</a>
|
||||
<a href="#contact" class="hover-target hover:text-gray-400 transition">Contact</a>
|
||||
<a href="#about" data-section="about" class="nav-link hover-target transition">About</a>
|
||||
<a href="#cv" data-section="cv" class="nav-link hover-target transition">CV</a>
|
||||
<a href="#projects" data-section="projects" class="nav-link hover-target transition">Projects</a>
|
||||
<a href="#photography" data-section="photography" class="nav-link hover-target transition">Photography</a>
|
||||
<a href="#contact" data-section="contact" class="nav-link hover-target transition">Contact</a>
|
||||
</div>
|
||||
<button id="hamburger" class="md:hidden flex flex-col justify-center items-end gap-[7px] w-8 h-8 hover-target" aria-label="Toggle menu">
|
||||
<span class="ham-line block w-6 h-px bg-white transition-all duration-500"></span>
|
||||
<span class="ham-line block w-4 h-px bg-white transition-all duration-500"></span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||||
<canvas id="hero-canvas" class="absolute inset-0 z-0 opacity-60"></canvas>
|
||||
<div class="relative z-10 text-center pointer-events-none">
|
||||
<h1 class="text-[12vw] leading-none font-display font-bold uppercase tracking-tighter mix-blend-difference hero-title">
|
||||
Developer
|
||||
</h1>
|
||||
<h1 class="text-[12vw] leading-none font-display font-bold uppercase tracking-tighter mix-blend-difference text-transparent stroke-text hero-title">
|
||||
Photographer
|
||||
</h1>
|
||||
<p class="mt-8 text-xl md:text-2xl font-light tracking-wide opacity-0 hero-subtitle">
|
||||
Crafting digital experiences & capturing light.
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 text-sm uppercase tracking-widest opacity-50 animate-pulse">
|
||||
Scroll to explore
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mobile Menu Overlay -->
|
||||
<div id="mobile-overlay" class="fixed inset-0 z-[90] bg-[#0a0a0a] flex flex-col justify-center px-10 translate-x-full transition-transform duration-700 ease-in-out">
|
||||
<a href="#about" class="mobile-nav-link hover-target text-5xl sm:text-6xl font-display font-bold uppercase tracking-tighter mb-5 text-gray-700 hover:text-white transition-colors duration-300">01 — About</a>
|
||||
<a href="#cv" class="mobile-nav-link hover-target text-5xl sm:text-6xl font-display font-bold uppercase tracking-tighter mb-5 text-gray-700 hover:text-white transition-colors duration-300">02 — CV</a>
|
||||
<a href="#projects" class="mobile-nav-link hover-target text-5xl sm:text-6xl font-display font-bold uppercase tracking-tighter mb-5 text-gray-700 hover:text-white transition-colors duration-300">03 — Projects</a>
|
||||
<a href="#photography" class="mobile-nav-link hover-target text-5xl sm:text-6xl font-display font-bold uppercase tracking-tighter mb-5 text-gray-700 hover:text-white transition-colors duration-300">04 — Photography</a>
|
||||
<a href="#contact" class="mobile-nav-link hover-target text-5xl sm:text-6xl font-display font-bold uppercase tracking-tighter mb-5 text-gray-700 hover:text-white transition-colors duration-300">05 — Contact</a>
|
||||
</div>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-32 px-6 md:px-20 relative z-10 bg-dark">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="space-y-8 reveal-text">
|
||||
<h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">The Mind <br>Behind <span class="text-transparent stroke-text">Plexi09</span></h2>
|
||||
<p class="text-xl text-gray-400 leading-relaxed font-light">
|
||||
<div class="space-y-8">
|
||||
<span class="section-num hero-title">01 / About</span>
|
||||
<h2 class="hero-title text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">The Mind <br>Behind <span class="text-transparent stroke-text">Plexi09</span></h2>
|
||||
<p class="hero-subtitle text-xl text-gray-400 leading-relaxed font-light">
|
||||
Hey 🖐️! <br>I am self-taught developer and passionate photographer. I believe in the power of open-source, self-hosting, and writing code that feels like poetry.
|
||||
</p>
|
||||
<p class="text-xl text-gray-400 leading-relaxed font-light">
|
||||
<p class="hero-subtitle text-xl text-gray-400 leading-relaxed font-light">
|
||||
When I'm not architecting systems or deploying containers, I'm out in the world, freezing moments in time through my lens.
|
||||
</p>
|
||||
<div class="pt-8 border-t border-gray-800 flex gap-12">
|
||||
<div class="hero-subtitle pt-8 border-t border-gray-800 flex gap-12">
|
||||
<div>
|
||||
<h4 class="text-sm uppercase tracking-widest text-gray-500 mb-2">Software stack</h4>
|
||||
<p class="font-medium">TS, React, Tailwin, Python, Java, Docker</p>
|
||||
|
|
@ -87,12 +127,13 @@
|
|||
<section id="cv" class="py-32 px-6 md:px-20 bg-dark relative z-10 border-t border-gray-900">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="mb-20 reveal-text">
|
||||
<span class="section-num">02 / Experience</span>
|
||||
<h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Experience <br>& <span class="text-transparent stroke-text">Journey</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-16">
|
||||
<!-- Experience -->
|
||||
<div>
|
||||
<div class="cv-column">
|
||||
<h3 class="text-2xl font-display font-bold uppercase tracking-widest mb-10 text-gray-500">Work</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="group p-6 -mx-6 rounded-2xl hover:bg-[#0f0f0f] transition-colors duration-500 hover-target">
|
||||
|
|
@ -123,7 +164,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Education -->
|
||||
<div>
|
||||
<div class="cv-column">
|
||||
<h3 class="text-2xl font-display font-bold uppercase tracking-widest mb-10 text-gray-500">Education</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="group p-6 -mx-6 rounded-2xl hover:bg-[#0f0f0f] transition-colors duration-500 hover-target">
|
||||
|
|
@ -152,7 +193,10 @@
|
|||
<section id="projects" class="py-32 px-6 md:px-20 bg-[#0f0f0f]">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex justify-between items-end mb-20 reveal-text">
|
||||
<h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Creations</h2>
|
||||
<div>
|
||||
<span class="section-num">03 / Creations</span>
|
||||
<h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Creations</h2>
|
||||
</div>
|
||||
<a href="https://git.plexi09.me" class="hidden md:inline-block text-sm uppercase tracking-widest border-b border-white pb-1 hover-target">View Forgejo</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -164,9 +208,9 @@
|
|||
</div>
|
||||
<h3 class="text-3xl font-display font-bold mb-4">Movie Match</h3>
|
||||
<p class="text-gray-400 mb-8 font-light">An application that helps couples and friends discover compatible movies to watch together.</p>
|
||||
<div class="flex gap-3">
|
||||
<span class="px-4 py-1 rounded-full border border-gray-700 text-xs uppercase tracking-wider">Typescript</span>
|
||||
<span class="px-4 py-1 rounded-full border border-gray-700 text-xs uppercase tracking-wider">Docker</span>
|
||||
<div class="flex gap-3 flex-wrap">
|
||||
<span class="flex items-center gap-2 px-4 py-1 rounded-full border border-gray-700 text-xs uppercase tracking-wider"><i class="devicon-typescript-plain text-blue-400 text-base"></i> Typescript</span>
|
||||
<span class="flex items-center gap-2 px-4 py-1 rounded-full border border-gray-700 text-xs uppercase tracking-wider"><i class="devicon-docker-plain text-base" style="color:#2496ed"></i> Docker</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -176,6 +220,7 @@
|
|||
<!-- Photography Section -->
|
||||
<section id="photography" class="py-32 px-6 md:px-20 bg-dark overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto mb-20 reveal-text">
|
||||
<span class="section-num">04 / Photography</span>
|
||||
<h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Through<br>The Lens</h2>
|
||||
</div>
|
||||
|
||||
|
|
@ -222,6 +267,7 @@
|
|||
<!-- Contact Section -->
|
||||
<section id="contact" class="py-32 px-6 md:px-20 bg-[#0f0f0f] relative overflow-hidden">
|
||||
<div class="max-w-4xl mx-auto text-center relative z-10">
|
||||
<span class="section-num inline-block mb-6">05 / Contact</span>
|
||||
<h2 class="text-[10vw] leading-none font-display font-bold uppercase tracking-tighter mb-12 hover-target">
|
||||
<a href="mailto:hello@plexi09.me" class="inline-block hover:scale-110 hover:stroke-text transition-all duration-300">Let's Talk</a>
|
||||
</h2>
|
||||
|
|
@ -240,6 +286,25 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark border-t border-gray-900 py-10 px-6 md:px-20">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div>
|
||||
<span class="font-display font-bold text-xl tracking-tighter uppercase text-white">PLEXI09</span>
|
||||
<p class="text-gray-600 text-sm mt-1 uppercase tracking-[0.2em]">Developer & Photographer</p>
|
||||
</div>
|
||||
<div class="hidden md:flex gap-10 text-xs uppercase tracking-widest text-gray-500">
|
||||
<a href="#about" class="hover:text-white transition hover-target">About</a>
|
||||
<a href="#cv" class="hover:text-white transition hover-target">CV</a>
|
||||
<a href="#projects" class="hover:text-white transition hover-target">Projects</a>
|
||||
<a href="#photography" class="hover:text-white transition hover-target">Photography</a>
|
||||
</div>
|
||||
<a href="#" class="text-xs border border-gray-800 hover:border-white text-gray-500 hover:text-white transition-all px-5 py-2.5 rounded-full uppercase tracking-widest hover-target">
|
||||
<i class="fas fa-download mr-2"></i> Download CV
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
352
js/main.js
352
js/main.js
|
|
@ -1,15 +1,13 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 1. Initialize Lenis Smooth Scroll
|
||||
|
||||
// ── 1. LENIS SMOOTH SCROLL ────────────────────────────────────────
|
||||
const lenis = new Lenis({
|
||||
duration: 1.2,
|
||||
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
||||
direction: 'vertical',
|
||||
gestureDirection: 'vertical',
|
||||
smooth: true,
|
||||
mouseMultiplier: 1,
|
||||
smoothTouch: false,
|
||||
touchMultiplier: 2,
|
||||
infinite: false,
|
||||
});
|
||||
|
||||
function raf(time) {
|
||||
|
|
@ -18,69 +16,130 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
}
|
||||
requestAnimationFrame(raf);
|
||||
|
||||
// 2. Preloader Animation
|
||||
const tl = gsap.timeline();
|
||||
tl.to('#loader-text', {
|
||||
y: 0,
|
||||
duration: 1,
|
||||
ease: 'power4.out',
|
||||
delay: 0.2
|
||||
})
|
||||
.to('#loader-text', {
|
||||
y: '-100%',
|
||||
duration: 1,
|
||||
ease: 'power4.in',
|
||||
delay: 0.5
|
||||
})
|
||||
.to('#preloader', {
|
||||
y: '-100%',
|
||||
duration: 1,
|
||||
ease: 'power4.inOut'
|
||||
}, '-=0.5')
|
||||
.from('.hero-title', {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 1.5,
|
||||
stagger: 0.2,
|
||||
ease: 'power4.out'
|
||||
}, '-=0.5')
|
||||
.to('.hero-subtitle', {
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
ease: 'power2.out'
|
||||
}, '-=1');
|
||||
// ── 2. GSAP PLUGINS ───────────────────────────────────────────────
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// 3. Custom Cursor
|
||||
const cursor = document.getElementById('cursor');
|
||||
const cursorDot = document.getElementById('cursor-dot');
|
||||
const hoverTargets = document.querySelectorAll('.hover-target');
|
||||
// ── 3. PRELOADER ──────────────────────────────────────────────────
|
||||
gsap.set('.hero-title, .hero-subtitle', { opacity: 0 });
|
||||
|
||||
gsap.timeline()
|
||||
.to('#loader-text', { y: 0, duration: 1, ease: 'power4.out', delay: 0.2 })
|
||||
.to('#loader-text', { y: '-100%', duration: 1, ease: 'power4.in', delay: 0.5 })
|
||||
.to('#preloader', { y: '-100%', duration: 1, ease: 'power4.inOut' }, '-=0.5')
|
||||
.to('.hero-title', { y: 0, opacity: 1, duration: 1.5, stagger: 0.15, ease: 'power4.out' }, '-=0.4')
|
||||
.to('.hero-subtitle', { y: 0, opacity: 1, duration: 1.2, stagger: 0.12, ease: 'power3.out' }, '-=1.2');
|
||||
|
||||
// ── 4. CANVAS PARTICLES ───────────────────────────────────────────
|
||||
const heroCanvas = document.getElementById('hero-canvas');
|
||||
if (heroCanvas) {
|
||||
const pCtx = heroCanvas.getContext('2d');
|
||||
const heroSec = document.getElementById('home');
|
||||
|
||||
// Track mouse in viewport coords (works on all devices)
|
||||
const pMouse = { x: null, y: null };
|
||||
document.addEventListener('mousemove', (e) => { pMouse.x = e.clientX; pMouse.y = e.clientY; });
|
||||
document.addEventListener('mouseleave', () => { pMouse.x = null; pMouse.y = null; });
|
||||
|
||||
function resizeCanvas() {
|
||||
heroCanvas.width = heroSec.offsetWidth;
|
||||
heroCanvas.height = heroSec.offsetHeight;
|
||||
}
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
resizeCanvas();
|
||||
|
||||
const PARTICLE_COUNT = 90;
|
||||
const P2P_DIST = 130; // particle ↔ particle connection radius
|
||||
const CUR_DIST = 200; // cursor ↔ particle connection radius
|
||||
|
||||
class Particle {
|
||||
constructor() { this.init(); }
|
||||
init() {
|
||||
this.x = Math.random() * heroCanvas.width;
|
||||
this.y = Math.random() * heroCanvas.height;
|
||||
this.vx = (Math.random() - 0.5) * 0.45;
|
||||
this.vy = (Math.random() - 0.5) * 0.45;
|
||||
this.radius = Math.random() * 1.4 + 0.4;
|
||||
this.alpha = Math.random() * 0.45 + 0.2;
|
||||
}
|
||||
update() {
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
if (this.x < 0 || this.x > heroCanvas.width) this.vx *= -1;
|
||||
if (this.y < 0 || this.y > heroCanvas.height) this.vy *= -1;
|
||||
}
|
||||
draw() {
|
||||
pCtx.beginPath();
|
||||
pCtx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
||||
pCtx.fillStyle = `rgba(255,255,255,${this.alpha})`;
|
||||
pCtx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
const particles = Array.from({ length: PARTICLE_COUNT }, () => new Particle());
|
||||
|
||||
function line(x1, y1, x2, y2, alpha) {
|
||||
pCtx.beginPath();
|
||||
pCtx.moveTo(x1, y1);
|
||||
pCtx.lineTo(x2, y2);
|
||||
pCtx.strokeStyle = `rgba(255,255,255,${alpha})`;
|
||||
pCtx.lineWidth = 0.6;
|
||||
pCtx.stroke();
|
||||
}
|
||||
|
||||
function animateParticles() {
|
||||
pCtx.clearRect(0, 0, heroCanvas.width, heroCanvas.height);
|
||||
|
||||
// Cursor position relative to the hero section
|
||||
const rect = heroSec.getBoundingClientRect();
|
||||
const cx = pMouse.x !== null ? pMouse.x - rect.left : null;
|
||||
const cy = pMouse.y !== null ? pMouse.y - rect.top : null;
|
||||
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
const p = particles[i];
|
||||
p.update();
|
||||
p.draw();
|
||||
|
||||
// Particle ↔ particle
|
||||
for (let j = i + 1; j < particles.length; j++) {
|
||||
const q = particles[j];
|
||||
const dx = p.x - q.x, dy = p.y - q.y;
|
||||
const d = Math.sqrt(dx * dx + dy * dy);
|
||||
if (d < P2P_DIST) line(p.x, p.y, q.x, q.y, (1 - d / P2P_DIST) * 0.12);
|
||||
}
|
||||
|
||||
// Cursor ↔ particle
|
||||
if (cx !== null) {
|
||||
const dx = p.x - cx, dy = p.y - cy;
|
||||
const d = Math.sqrt(dx * dx + dy * dy);
|
||||
if (d < CUR_DIST) line(p.x, p.y, cx, cy, (1 - d / CUR_DIST) * 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
animateParticles();
|
||||
}
|
||||
|
||||
// ── 5. CUSTOM CURSOR ──────────────────────────────────────────────
|
||||
if (window.innerWidth >= 768) {
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let cursorX = 0;
|
||||
let cursorY = 0;
|
||||
const cursor = document.getElementById('cursor');
|
||||
const cursorDot = document.getElementById('cursor-dot');
|
||||
let mouseX = 0, mouseY = 0, cursorX = 0, cursorY = 0;
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
mouseX = e.clientX;
|
||||
mouseY = e.clientY;
|
||||
|
||||
// Instant dot
|
||||
gsap.to(cursorDot, {
|
||||
x: mouseX,
|
||||
y: mouseY,
|
||||
duration: 0
|
||||
});
|
||||
gsap.to(cursorDot, { x: mouseX, y: mouseY, duration: 0 });
|
||||
});
|
||||
|
||||
// Smooth outer circle
|
||||
gsap.ticker.add(() => {
|
||||
cursorX += (mouseX - cursorX) * 0.2;
|
||||
cursorY += (mouseY - cursorY) * 0.2;
|
||||
gsap.set(cursor, { x: cursorX, y: cursorY });
|
||||
});
|
||||
|
||||
hoverTargets.forEach(target => {
|
||||
document.querySelectorAll('.hover-target').forEach(target => {
|
||||
target.addEventListener('mouseenter', () => {
|
||||
gsap.to(cursor, { scale: 2.5, backgroundColor: 'rgba(255,255,255,1)', duration: 0.3 });
|
||||
gsap.to(cursorDot, { opacity: 0, duration: 0.3 });
|
||||
|
|
@ -92,137 +151,106 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
}
|
||||
|
||||
// 4. Interactive Canvas Background (Particles)
|
||||
const canvas = document.getElementById('hero-canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
let width, height;
|
||||
let particles = [];
|
||||
|
||||
function resize() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * width;
|
||||
this.y = Math.random() * height;
|
||||
this.vx = (Math.random() - 0.5) * 0.5;
|
||||
this.vy = (Math.random() - 0.5) * 0.5;
|
||||
this.radius = Math.random() * 1.5 + 0.5;
|
||||
}
|
||||
update() {
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
if (this.x < 0 || this.x > width) this.vx *= -1;
|
||||
if (this.y < 0 || this.y > height) this.vy *= -1;
|
||||
}
|
||||
draw() {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < 100; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
|
||||
let mouse = { x: null, y: null };
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
mouse.x = e.clientX;
|
||||
mouse.y = e.clientY;
|
||||
// ── 6. SCROLL PROGRESS BAR ────────────────────────────────────────
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
lenis.on('scroll', ({ progress }) => {
|
||||
if (progressBar) progressBar.style.width = `${progress * 100}%`;
|
||||
});
|
||||
|
||||
function animateParticles() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
// ── 7. ACTIVE NAV LINK ────────────────────────────────────────────
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
|
||||
particles.forEach(p => {
|
||||
p.update();
|
||||
p.draw();
|
||||
|
||||
// Connect to mouse
|
||||
if (mouse.x != null) {
|
||||
const dx = mouse.x - p.x;
|
||||
const dy = mouse.y - p.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
if (dist < 150) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(p.x, p.y);
|
||||
ctx.lineTo(mouse.x, mouse.y);
|
||||
ctx.strokeStyle = `rgba(255, 255, 255, ${1 - dist/150})`;
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.stroke();
|
||||
}
|
||||
const sectionObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const id = entry.target.getAttribute('id');
|
||||
navLinks.forEach(link => {
|
||||
link.classList.toggle('active', link.dataset.section === id);
|
||||
});
|
||||
}
|
||||
});
|
||||
requestAnimationFrame(animateParticles);
|
||||
}, { rootMargin: '-40% 0px -40% 0px', threshold: 0 });
|
||||
|
||||
sections.forEach(s => sectionObserver.observe(s));
|
||||
|
||||
// ── 8. MOBILE MENU ────────────────────────────────────────────────
|
||||
const hamburger = document.getElementById('hamburger');
|
||||
const mobileOverlay = document.getElementById('mobile-overlay');
|
||||
|
||||
if (hamburger && mobileOverlay) {
|
||||
hamburger.addEventListener('click', () => {
|
||||
const isOpen = hamburger.classList.contains('open');
|
||||
hamburger.classList.toggle('open');
|
||||
mobileOverlay.classList.toggle('open');
|
||||
isOpen ? lenis.start() : lenis.stop();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.mobile-nav-link').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
hamburger.classList.remove('open');
|
||||
mobileOverlay.classList.remove('open');
|
||||
lenis.start();
|
||||
});
|
||||
});
|
||||
}
|
||||
animateParticles();
|
||||
|
||||
// 5. GSAP Scroll Animations
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// Reveal Text
|
||||
const revealTexts = document.querySelectorAll('.reveal-text');
|
||||
revealTexts.forEach(text => {
|
||||
gsap.from(text, {
|
||||
scrollTrigger: {
|
||||
trigger: text,
|
||||
start: 'top 80%',
|
||||
},
|
||||
y: 50,
|
||||
// ── 9. REVEAL TEXT ANIMATIONS ─────────────────────────────────────
|
||||
gsap.utils.toArray('.reveal-text').forEach(el => {
|
||||
gsap.from(el, {
|
||||
scrollTrigger: { trigger: el, start: 'top 85%' },
|
||||
y: 60,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
ease: 'power3.out'
|
||||
duration: 1.2,
|
||||
ease: 'power3.out',
|
||||
});
|
||||
});
|
||||
|
||||
// Parallax Images
|
||||
const parallaxImgs = document.querySelectorAll('.parallax-img');
|
||||
parallaxImgs.forEach(img => {
|
||||
// ── 10. CV STAGGERED ANIMATIONS ────────────────────────────────────
|
||||
gsap.utils.toArray('.cv-column').forEach(col => {
|
||||
const items = col.querySelectorAll('.group');
|
||||
if (!items.length) return;
|
||||
gsap.from(items, {
|
||||
scrollTrigger: { trigger: col, start: 'top 82%' },
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 0.85,
|
||||
stagger: 0.18,
|
||||
ease: 'power3.out',
|
||||
});
|
||||
});
|
||||
|
||||
// ── 11. PARALLAX IMAGES ───────────────────────────────────────────
|
||||
gsap.utils.toArray('.parallax-img').forEach(img => {
|
||||
gsap.to(img, {
|
||||
scrollTrigger: {
|
||||
trigger: img.parentElement,
|
||||
start: 'top bottom',
|
||||
end: 'bottom top',
|
||||
scrub: true
|
||||
scrub: true,
|
||||
},
|
||||
y: 50,
|
||||
ease: 'none'
|
||||
ease: 'none',
|
||||
});
|
||||
});
|
||||
|
||||
// Horizontal Scroll for Gallery
|
||||
// ── 12. DRAGGABLE GALLERY ─────────────────────────────────────────
|
||||
const gallery = document.getElementById('gallery');
|
||||
let isDown = false;
|
||||
let startX;
|
||||
let scrollLeft;
|
||||
if (gallery) {
|
||||
let isDown = false, startX, scrollLeft;
|
||||
|
||||
gallery.addEventListener('mousedown', (e) => {
|
||||
isDown = true;
|
||||
startX = e.pageX - gallery.offsetLeft;
|
||||
scrollLeft = gallery.scrollLeft;
|
||||
});
|
||||
gallery.addEventListener('mouseleave', () => { isDown = false; });
|
||||
gallery.addEventListener('mouseup', () => { isDown = false; });
|
||||
gallery.addEventListener('mousemove', (e) => {
|
||||
if (!isDown) return;
|
||||
e.preventDefault();
|
||||
gallery.scrollLeft = scrollLeft - (e.pageX - gallery.offsetLeft - startX) * 2;
|
||||
});
|
||||
}
|
||||
|
||||
gallery.addEventListener('mousedown', (e) => {
|
||||
isDown = true;
|
||||
gallery.classList.add('active');
|
||||
startX = e.pageX - gallery.offsetLeft;
|
||||
scrollLeft = gallery.scrollLeft;
|
||||
});
|
||||
gallery.addEventListener('mouseleave', () => {
|
||||
isDown = false;
|
||||
gallery.classList.remove('active');
|
||||
});
|
||||
gallery.addEventListener('mouseup', () => {
|
||||
isDown = false;
|
||||
gallery.classList.remove('active');
|
||||
});
|
||||
gallery.addEventListener('mousemove', (e) => {
|
||||
if (!isDown) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - gallery.offsetLeft;
|
||||
const walk = (x - startX) * 2; // Scroll-fast
|
||||
gallery.scrollLeft = scrollLeft - walk;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue