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> </script>
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap" rel="stylesheet"> <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> </head>
<body class="bg-dark text-white font-sans antialiased overflow-x-hidden"> <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 --> <!-- Preloader -->
<div id="preloader" class="fixed inset-0 z-[999] bg-dark flex items-center justify-center"> <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"> <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> <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 --> <!-- 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"> <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>
<div class="hidden md:flex space-x-8 font-medium text-sm uppercase tracking-widest"> <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="#about" data-section="about" class="nav-link hover-target transition">About</a>
<a href="#cv" class="hover-target hover:text-gray-400 transition">CV</a> <a href="#cv" data-section="cv" class="nav-link hover-target transition">CV</a>
<a href="#projects" class="hover-target hover:text-gray-400 transition">Projects</a> <a href="#projects" data-section="projects" class="nav-link hover-target transition">Projects</a>
<a href="#photography" class="hover-target hover:text-gray-400 transition">Photography</a> <a href="#photography" data-section="photography" class="nav-link hover-target transition">Photography</a>
<a href="#contact" class="hover-target hover:text-gray-400 transition">Contact</a> <a href="#contact" data-section="contact" class="nav-link hover-target transition">Contact</a>
</div> </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> </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 --> <!-- About Section -->
<section id="about" class="py-32 px-6 md:px-20 relative z-10 bg-dark"> <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="max-w-3xl mx-auto">
<div class="space-y-8 reveal-text"> <div class="space-y-8">
<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> <span class="section-num hero-title">01 / About</span>
<p class="text-xl text-gray-400 leading-relaxed font-light"> <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. 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>
<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. When I'm not architecting systems or deploying containers, I'm out in the world, freezing moments in time through my lens.
</p> </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> <div>
<h4 class="text-sm uppercase tracking-widest text-gray-500 mb-2">Software stack</h4> <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> <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"> <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="max-w-7xl mx-auto">
<div class="mb-20 reveal-text"> <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> <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>
<div class="grid md:grid-cols-2 gap-16"> <div class="grid md:grid-cols-2 gap-16">
<!-- Experience --> <!-- Experience -->
<div> <div class="cv-column">
<h3 class="text-2xl font-display font-bold uppercase tracking-widest mb-10 text-gray-500">Work</h3> <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="space-y-4">
<div class="group p-6 -mx-6 rounded-2xl hover:bg-[#0f0f0f] transition-colors duration-500 hover-target"> <div class="group p-6 -mx-6 rounded-2xl hover:bg-[#0f0f0f] transition-colors duration-500 hover-target">
@ -123,7 +164,7 @@
</div> </div>
<!-- Education --> <!-- Education -->
<div> <div class="cv-column">
<h3 class="text-2xl font-display font-bold uppercase tracking-widest mb-10 text-gray-500">Education</h3> <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="space-y-4">
<div class="group p-6 -mx-6 rounded-2xl hover:bg-[#0f0f0f] transition-colors duration-500 hover-target"> <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]"> <section id="projects" class="py-32 px-6 md:px-20 bg-[#0f0f0f]">
<div class="max-w-7xl mx-auto"> <div class="max-w-7xl mx-auto">
<div class="flex justify-between items-end mb-20 reveal-text"> <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> <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> </div>
@ -164,9 +208,9 @@
</div> </div>
<h3 class="text-3xl font-display font-bold mb-4">Movie Match</h3> <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> <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"> <div class="flex gap-3 flex-wrap">
<span class="px-4 py-1 rounded-full border border-gray-700 text-xs uppercase tracking-wider">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-typescript-plain text-blue-400 text-base"></i> Typescript</span>
<span class="px-4 py-1 rounded-full border border-gray-700 text-xs uppercase tracking-wider">Docker</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> </div>
</a> </a>
</div> </div>
@ -176,6 +220,7 @@
<!-- Photography Section --> <!-- Photography Section -->
<section id="photography" class="py-32 px-6 md:px-20 bg-dark overflow-hidden"> <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"> <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> <h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Through<br>The Lens</h2>
</div> </div>
@ -222,6 +267,7 @@
<!-- Contact Section --> <!-- Contact Section -->
<section id="contact" class="py-32 px-6 md:px-20 bg-[#0f0f0f] relative overflow-hidden"> <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"> <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"> <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> <a href="mailto:hello@plexi09.me" class="inline-block hover:scale-110 hover:stroke-text transition-all duration-300">Let's Talk</a>
</h2> </h2>
@ -240,6 +286,25 @@
</div> </div>
</section> </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> <script src="js/main.js"></script>
</body> </body>
</html> </html>