485 lines
33 KiB
HTML
485 lines
33 KiB
HTML
<!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: '#6366f1',
|
|
'accent-2': '#8b5cf6'
|
|
},
|
|
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">
|
|
<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">
|
|
<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-[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="#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" 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 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>
|
|
<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">
|
|
<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 Plexi09</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 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, Tailwind, 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>
|
|
</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">
|
|
<span class="section-num">02 / Experience</span>
|
|
<h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Experience <br>& Journey</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>
|
|
|
|
<div class="grid md:grid-cols-2 gap-16">
|
|
<!-- Experience -->
|
|
<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">
|
|
<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 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">
|
|
<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>
|
|
<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">
|
|
<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 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 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>
|
|
<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="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>
|
|
</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">
|
|
<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>
|
|
|
|
<!-- 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">
|
|
<!-- 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-6 hover-target">
|
|
<a href="mailto:hello@plexi09.me" class="inline-block hover:scale-105 transition-transform duration-500">Let's Talk</a>
|
|
</h2>
|
|
<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. <br>This website was made by a human. No AI was harmed in the making of this portfolio.
|
|
</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 select-none">
|
|
PLEXI09
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CV Language Modal -->
|
|
<div id="cv-modal" class="fixed inset-0 z-[800] flex items-center justify-center pointer-events-none opacity-0 transition-opacity duration-300">
|
|
<div id="cv-modal-backdrop" class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
|
|
<div id="cv-modal-card" class="relative bg-[#111] border border-gray-800 rounded-2xl p-10 max-w-sm w-[90%] text-center transform scale-95 transition-transform duration-300">
|
|
<button id="cv-modal-close" class="absolute top-4 right-4 text-gray-500 hover:text-white transition text-xl hover-target" aria-label="Close">×</button>
|
|
<h3 class="text-2xl font-display font-bold uppercase tracking-tight mb-2">Download CV</h3>
|
|
<p class="text-sm text-gray-500 uppercase tracking-widest mb-8">Choose your language</p>
|
|
<div class="flex gap-4">
|
|
<a href="/cv/CV_EN.pdf" download class="cv-lang-btn group flex-1 flex flex-col items-center gap-3 border border-gray-800 hover:border-white rounded-xl py-6 px-4 transition-all duration-300 hover-target">
|
|
<span class="text-3xl">🇬🇧</span>
|
|
<span class="text-xs uppercase tracking-[0.2em] text-gray-400 group-hover:text-white transition">English</span>
|
|
</a>
|
|
<a href="/cv/CV_FR.pdf" download class="cv-lang-btn group flex-1 flex flex-col items-center gap-3 border border-gray-800 hover:border-white rounded-xl py-6 px-4 transition-all duration-300 hover-target">
|
|
<span class="text-3xl">🇫🇷</span>
|
|
<span class="text-xs uppercase tracking-[0.2em] text-gray-400 group-hover:text-white transition">Français</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Hacker Space Section -->
|
|
<section id="hacker-space" class="py-20 px-6 md:px-20 bg-dark text-white relative z-10 border-t border-white/5">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="mb-16">
|
|
<h2 class="text-4xl md:text-6xl font-display font-bold tracking-tighter mb-6">
|
|
<span class="stroke-text">Hacker</span> <span class="gradient-text">Space</span>
|
|
</h2>
|
|
<p class="text-lg md:text-xl text-gray-400 font-light max-w-2xl leading-relaxed">
|
|
Verify the authenticity of my digital identity, commits, and messages using the cryptographic keys provided below.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-10">
|
|
|
|
<!-- GPG Key -->
|
|
<div class="space-card">
|
|
<h3 class="text-xl font-display font-bold uppercase mb-4 flex items-center gap-3">
|
|
<i class="fas fa-key text-accent"></i> Public GPG Key
|
|
</h3>
|
|
<div class="relative bg-white/5 border border-white/10 rounded-xl p-6 hover:border-accent/50 transition-colors duration-300 group">
|
|
<div class="key-wrapper relative overflow-hidden max-h-40 transition-all duration-500 ease-in-out">
|
|
<pre class="text-xs text-gray-400 font-mono overflow-x-auto whitespace-pre-wrap break-all custom-scrollbar select-all pb-8">-----BEGIN PGP PUBLIC KEY BLOCK-----
|
|
|
|
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
|
|
=afRP
|
|
-----END PGP PUBLIC KEY BLOCK-----</pre>
|
|
<div class="fade-overlay absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-dark to-transparent pointer-events-none transition-opacity duration-300"></div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center mt-4">
|
|
<button class="toggle-btn text-xs font-bold uppercase tracking-widest text-accent hover:text-white transition-colors flex items-center gap-2">
|
|
<span>Show More</span> <i class="fas fa-chevron-down text-[10px]"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<button class="absolute top-4 right-4 bg-white/10 hover:bg-accent text-white p-2 rounded-lg transition-colors copy-btn" aria-label="Copy GPG Key">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
<!-- SSH Key -->
|
|
<div class="space-card">
|
|
<h3 class="text-xl font-display font-bold uppercase mb-4 flex items-center gap-3">
|
|
<i class="fas fa-terminal text-accent"></i> Public SSH Key
|
|
</h3>
|
|
<div class="relative bg-white/5 border border-white/10 rounded-xl p-6 hover:border-accent/50 transition-colors duration-300 h-full flex flex-col justify-center">
|
|
<code class="text-sm text-gray-400 font-mono break-all select-all block">ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAILL6VG06YjdEn8VLCWkmNSz76duWB2n9+S7vEcx8JoEe pierre.emmanuel.gobillard@gmail.com</code>
|
|
<button class="absolute top-4 right-4 bg-white/10 hover:bg-accent text-white p-2 rounded-lg transition-colors copy-btn" aria-label="Copy SSH Key">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bitcoin Address -->
|
|
<div class="space-card">
|
|
<h3 class="text-xl font-display font-bold uppercase mb-4 flex items-center gap-3">
|
|
<i class="fab fa-bitcoin text-accent"></i> Bitcoin Address
|
|
</h3>
|
|
<div class="relative bg-white/5 border border-white/10 rounded-xl p-6 hover:border-accent/50 transition-colors duration-300 h-full flex flex-col justify-center items-center text-center gap-4">
|
|
<div class="w-32 h-32 bg-white rounded-lg p-2">
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=bc1qg5h6wfgvus8x36vpejvruc8hd4vqcvv8030vat" alt="Bitcoin QR Code" class="w-full h-full object-contain">
|
|
</div>
|
|
<code class="text-sm text-gray-400 font-mono break-all select-all">bc1qg5h6wfgvus8x36vpejvruc8hd4vqcvv8030vat</code>
|
|
<button class="absolute top-4 right-4 bg-white/10 hover:bg-accent text-white p-2 rounded-lg transition-colors copy-btn" aria-label="Copy Bitcoin Address">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<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 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">
|
|
<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="cv-download-btn magnetic-btn hover-target">
|
|
<i class="fas fa-download"></i> <span>Download CV</span>
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|