364 lines
25 KiB
HTML
364 lines
25 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>
|
|
|
|
<!-- Footer -->
|
|
<div id="my-banner"></div>
|
|
<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="https://keepandroidopen.org/banner.js?size=mini&id=my-banner"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|