Plexi09/plexi09.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Edited index.html

Browse source
This commit is contained in:
Plexi09 2026-02-23 00:01:57 +01:00
parent 17f271574f
commit f945905880
Signed by: Plexi09
GPG key ID: 20D439A69163544A
1 changed files with 83 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

101
index.html
View file

@ -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>