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

Added index.html

Browse source
This commit is contained in:
Plexi09 2026-02-22 23:05:11 +01:00
commit 3d7ae87d84
Signed by: Plexi09
GPG key ID: 20D439A69163544A
1 changed files with 269 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

269
index.html Normal file
View file

@ -0,0 +1,269 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plexi09 Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Lenis Smooth Scroll -->
<script src="https://unpkg.com/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script>
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#ffffff',
dark: '#0a0a0a',
accent: '#3b82f6'
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
display: ['Clash Display', 'sans-serif']
}
}
}
}
</script>
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-white font-sans antialiased overflow-x-hidden">
<!-- 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">
<span class="inline-block translate-y-full" id="loader-text">PLEXI09</span>
</div>
</div>
<!-- Custom Cursor -->
<div id="cursor" class="hidden md:block fixed top-0 left-0 w-8 h-8 rounded-full border border-white pointer-events-none z-[1000] mix-blend-difference transition-transform duration-100 ease-out -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 -->
<nav class="fixed w-full z-50 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>
</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>
</div>
</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>
<!-- About Section -->
<section id="about" class="py-32 px-6 md:px-20 relative z-10 bg-dark">
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
<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">
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">
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>
<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>
</div>
<div>
<h4 class="text-sm uppercase tracking-widest text-gray-500 mb-2">Photography gear</h4>
<p class="font-medium">Lumix S5, 18-40mm f/1.4</p>
</div>
</div>
</div>
<div class="relative h-[600px] w-full overflow-hidden rounded-2xl group">
<!-- <img src="images/hero.jpg" alt="hero" class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 parallax-img"> -->
<div class="absolute inset-0 bg-black/30 group-hover:bg-transparent transition duration-500"></div>
</div>
</div>
</section>
<!-- CV Section -->
<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">
<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>
<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">
<div class="flex justify-between items-baseline mb-2">
<h4 class="text-2xl font-bold group-hover:text-accent transition-colors">Founder & CEO</h4>
<span class="text-sm text-gray-500 font-medium tracking-widest">2023 - PRES</span>
</div>
<p class="text-gray-500 uppercase tracking-widest text-sm mb-4">Sunrise Network</p>
<p class="text-gray-400 font-light leading-relaxed">Building software solutions for startups and enterprises.</p>
</div>
<div class="group p-6 -mx-6 rounded-2xl hover:bg-[#0f0f0f] transition-colors duration-500 hover-target">
<div class="flex justify-between items-baseline mb-2">
<h4 class="text-2xl font-bold group-hover:text-accent transition-colors">Internship</h4>
<span class="text-sm text-gray-500 font-medium tracking-widest">June - July 2025</span>
</div>
<p class="text-gray-500 uppercase tracking-widest text-sm mb-4">Capgemini Engineering</p>
<p class="text-gray-400 font-light leading-relaxed">Work on software integration and Product Lifecycle Management for EDF and Dassault Systèmes.</p>
</div>
<div class="group p-6 -mx-6 rounded-2xl hover:bg-[#0f0f0f] transition-colors duration-500 hover-target">
<div class="flex justify-between items-baseline mb-2">
<h4 class="text-2xl font-bold group-hover:text-accent transition-colors">Internship</h4>
<span class="text-sm text-gray-500 font-medium tracking-widest">Dec 2023</span>
</div>
<p class="text-gray-500 uppercase tracking-widest text-sm mb-4">Celeste Technologies</p>
<p class="text-gray-400 font-light leading-relaxed">Worked on AI and machine learning projects using Python and TensorFlow.</p>
</div>
</div>
</div>
<!-- Education -->
<div>
<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">
<div class="flex justify-between items-baseline mb-2">
<h4 class="text-2xl font-bold group-hover:text-accent transition-colors">Institution Jeanne D'Arc</h4>
</div>
<p class="text-gray-500 uppercase tracking-widest text-sm mb-4">Highshool</p>
<p class="text-gray-400 font-light leading-relaxed">Specialised in Physics, Mathematics and Computer Science.</p>
</div>
</div>
<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">
<div class="flex justify-between items-baseline mb-2">
<h4 class="text-2xl font-bold group-hover:text-accent transition-colors">Onshape Course by PTC</h4>
</div>
<p class="text-gray-500 uppercase tracking-widest text-sm mb-4">License & Certification</p>
<p class="text-gray-400 font-light leading-relaxed">Onshape Parametric Feature-Based CAD Course Completion</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<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>
<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 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>
</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>
</a>
</div>
</div>
</section>
<!-- 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">
<h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Through<br>The Lens</h2>
</div>
<!-- Horizontal Scroll Gallery -->
<div class="gallery-wrapper relative w-full h-[60vh] md:h-[80vh] flex gap-8 overflow-x-hidden cursor-grab active:cursor-grabbing hover-target select-none" id="gallery">
<div class="gallery-item shrink-0 h-full relative overflow-hidden rounded-2xl group">
<img src="images/Photo 4.jpg" class="h-full w-auto object-contain parallax-img pointer-events-none" draggable="false" alt="The pyrapid of the Louvre museum in Paris">
<div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
<h4 class="text-xl font-display font-bold text-white mb-1">Architecture</h4>
<p class="text-sm text-gray-300 font-light">The pyrapid of the Louvre museum in Paris</p>
<p class="text-sm text-gray-300 font-light">Shot on Lumix S5, 40mm, f6.3, ISO 250, 1/100s</p>
</div>
</div>
<div class="gallery-item shrink-0 h-full relative overflow-hidden rounded-2xl group">
<img src="images/Photo 1.jpg" class="h-full w-auto object-contain parallax-img pointer-events-none" draggable="false" alt="Long exposure portrait in the Paris metro">
<div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
<h4 class="text-xl font-display font-bold text-white mb-1">Portraits</h4>
<p class="text-sm text-gray-300 font-light">Long exposure portrait in the Paris metro. Subject: <a href="https://instagram.com/@jo_gautrot" class="text-blue-400 hover:underline">@jo_gautrot</a> on Instagram</p>
<p class="text-sm text-gray-300 font-light">Shot on Lumix S5, 26mm, f5.6, ISO 100, 1s</p>
</div>
</div>
<div class="gallery-item shrink-0 h-full relative overflow-hidden rounded-2xl group">
<img src="images/Photo 2.jpg" class="h-full w-auto object-contain parallax-img pointer-events-none" draggable="false" alt="Cape D'aguilar lighthouse in infrared">
<div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
<h4 class="text-xl font-display font-bold text-white mb-1">Infrared photography</h4>
<p class="text-sm text-gray-300 font-light">Cape D'aguilar lighthouse in infrared</p>
<p class="text-sm text-gray-300 font-light">Shot on Sony RX100M2, 10mm, f11, ISO 160, 1/80s</p>
</div>
</div>
<div class="gallery-item shrink-0 h-full relative overflow-hidden rounded-2xl group">
<img src="images/Photo 3.jpg" class="h-full w-auto object-contain parallax-img pointer-events-none" draggable="false" alt="Long exposure timelapse in the Paris metro">
<div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
<h4 class="text-xl font-display font-bold text-white mb-1">Long exposure</h4>
<p class="text-sm text-gray-300 font-light">Long exposure timelapse in the Paris metro</p>
<p class="text-sm text-gray-300 font-light">Shot on Lumix S5, 18mm, f4.5, ISO 200, 12s</p>
</div>
</div>
</div>
<div class="text-center mt-12 text-gray-500 text-sm uppercase tracking-widest">
Drag to explore
</div>
</section>
<!-- 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">
<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>
<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>
</div>
<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">
PLEXI09
</div>
</section>
<script src="js/main.js"></script>
</body>
</html>