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

Updated visual look

Browse source
This commit is contained in:
Plexi09 2026-02-23 00:36:21 +01:00
parent 91936e441f
commit c965168ef2
Signed by: Plexi09
GPG key ID: 20D439A69163544A
3 changed files with 471 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

84
index.html
View file

@ -19,7 +19,8 @@
colors: {
primary: '#ffffff',
dark: '#0a0a0a',
accent: '#3b82f6'
accent: '#6366f1',
'accent-2': '#8b5cf6'
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
@ -83,11 +84,28 @@
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 class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-50">
<span class="text-xs uppercase tracking-[0.3em]">Scroll to explore</span>
<div class="w-px h-8 bg-gradient-to-b from-white/60 to-transparent animate-pulse"></div>
</div>
</section>
<!-- Marquee / Ticker -->
<div class="marquee py-6 bg-dark relative z-10">
<div class="marquee-inner">
<span class="marquee-item">Developer <span class="dot"></span></span>
<span class="marquee-item">Photographer <span class="dot"></span></span>
<span class="marquee-item">Open Source <span class="dot"></span></span>
<span class="marquee-item">Self-Hosted <span class="dot"></span></span>
<span class="marquee-item">Creative <span class="dot"></span></span>
<span class="marquee-item">Developer <span class="dot"></span></span>
<span class="marquee-item">Photographer <span class="dot"></span></span>
<span class="marquee-item">Open Source <span class="dot"></span></span>
<span class="marquee-item">Self-Hosted <span class="dot"></span></span>
<span class="marquee-item">Creative <span class="dot"></span></span>
</div>
</div>
<!-- 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>
@ -102,17 +120,17 @@
<div class="max-w-3xl mx-auto">
<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>
<h2 class="hero-title text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">The Mind <br>Behind <span class="gradient-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="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="hero-subtitle pt-8 border-t border-gray-800 flex gap-12">
<div class="hero-subtitle pt-8 border-t border-gray-800 flex flex-wrap 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>
<p class="font-medium">TS, React, Tailwind, Python, Java, Docker</p>
</div>
<div>
<h4 class="text-sm uppercase tracking-widest text-gray-500 mb-2">Photography gear</h4>
@ -128,9 +146,9 @@
<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>
<a href="#" class="cv-download-btn 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 mt-8 inline-block">
<i class="fas fa-download mr-2"></i> Download CV
<h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Experience <br>& <span class="gradient-text">Journey</span></h2>
<a href="#" class="cv-download-btn magnetic-btn hover-target mt-8 inline-block">
<i class="fas fa-download"></i> <span>Download CV</span>
</a>
</div>
@ -200,20 +218,21 @@
<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 magnetic-btn hover-target"><span>View Forgejo</span> <i class="fas fa-arrow-up-right-from-square text-xs"></i></a>
</div>
<div class="grid md:grid-cols-2 gap-10">
<!-- Project Card -->
<a href="https://git.plexi09.me/plexi09/cinematch" target="_blank" rel="noopener noreferrer" class="project-card group relative overflow-hidden rounded-2xl bg-dark border border-gray-800 p-10 hover-target cursor-none block">
<div class="absolute top-0 right-0 p-8 opacity-0 group-hover:opacity-100 transition-opacity duration-500 translate-x-4 group-hover:translate-x-0">
<i class="fas fa-arrow-right text-2xl"></i>
<a href="https://git.plexi09.me/plexi09/cinematch" target="_blank" rel="noopener noreferrer" class="project-card group relative overflow-hidden rounded-2xl p-10 hover-target cursor-none block">
<div class="absolute top-0 right-0 p-8 opacity-0 group-hover:opacity-100 transition-all duration-500 translate-x-4 group-hover:translate-x-0">
<i class="fas fa-arrow-right text-2xl gradient-text"></i>
</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>
<span class="text-xs uppercase tracking-[0.2em] text-gray-600 mb-3 block">Featured Project</span>
<h3 class="text-3xl font-display font-bold mb-4 group-hover:gradient-text transition-colors duration-500">Movie Match</h3>
<p class="text-gray-400 mb-8 font-light leading-relaxed">An application that helps couples and friends discover compatible movies to watch together.</p>
<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>
<span class="tech-badge flex items-center gap-2 px-4 py-1.5 rounded-full text-xs uppercase tracking-wider"><i class="devicon-typescript-plain text-blue-400 text-base"></i> Typescript</span>
<span class="tech-badge flex items-center gap-2 px-4 py-1.5 rounded-full text-xs uppercase tracking-wider"><i class="devicon-docker-plain text-base" style="color:#2496ed"></i> Docker</span>
</div>
</a>
</div>
@ -269,22 +288,31 @@
<!-- Contact Section -->
<section id="contact" class="py-32 px-6 md:px-20 bg-[#0f0f0f] relative overflow-hidden">
<!-- Floating background shapes -->
<div class="floating-shape floating-shape-1"></div>
<div class="floating-shape floating-shape-2"></div>
<div class="contact-glow"></div>
<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 class="text-[10vw] leading-none font-display font-bold uppercase tracking-tighter mb-6 hover-target">
<a href="mailto:hello@plexi09.me" class="inline-block hover:scale-105 transition-transform duration-500">Let's Talk</a>
</h2>
<div class="flex justify-center gap-8 text-xl">
<a href="https://git.plexi09.me/plexi09" target="_blank" rel="noopener noreferrer" class="hover-target hover:text-gray-400 transition"><i class="fab fa-git-alt"></i></a>
<a href="https://linkedin.com/in/pierre-emmanuel-gobillard-04933a305" target="_blank" rel="noopener noreferrer" class="hover-target hover:text-gray-400 transition"><i class="fab fa-linkedin"></i></a>
<a href="https://instagram.com/plexi09_" target="_blank" rel="noopener noreferrer" class="hover-target hover:text-gray-400 transition"><i class="fab fa-instagram"></i></a>
<p class="text-gray-500 text-lg font-light mb-12 max-w-md mx-auto">Have a project in mind or just want to say hello? I'd love to hear from you.</p>
<div class="flex justify-center gap-5 mb-16">
<a href="https://git.plexi09.me/plexi09" target="_blank" rel="noopener noreferrer" class="social-link hover-target"><i class="fab fa-git-alt text-lg"></i></a>
<a href="https://linkedin.com/in/pierre-emmanuel-gobillard-04933a305" target="_blank" rel="noopener noreferrer" class="social-link hover-target"><i class="fab fa-linkedin text-lg"></i></a>
<a href="https://instagram.com/plexi09_" target="_blank" rel="noopener noreferrer" class="social-link hover-target"><i class="fab fa-instagram text-lg"></i></a>
</div>
<a href="mailto:hello@plexi09.me" class="magnetic-btn hover-target">
<i class="fas fa-envelope"></i> <span>hello@plexi09.me</span>
</a>
<p class="mt-20 text-gray-600 text-sm uppercase tracking-widest">
© 2026 Plexi09. All rights reserved.
</p>
</div>
<!-- Huge background text -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[20vw] font-display font-bold uppercase tracking-tighter text-white/[0.02] whitespace-nowrap pointer-events-none">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[20vw] font-display font-bold uppercase tracking-tighter text-white/[0.02] whitespace-nowrap pointer-events-none select-none">
PLEXI09
</div>
</section>
@ -310,10 +338,10 @@
</div>
<!-- Footer -->
<footer class="bg-dark border-t border-gray-900 py-10 px-6 md:px-20">
<footer class="bg-dark 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>
<span class="font-display font-bold text-xl tracking-tighter uppercase gradient-text">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">
@ -322,8 +350,8 @@
<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="cv-download-btn 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 href="#" class="cv-download-btn magnetic-btn hover-target">
<i class="fas fa-download"></i> <span>Download CV</span>
</a>
</div>
</footer>