|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Sophia Laurent | Creative Developer</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Raleway:wght@300;400;500;700;800&display=swap" rel="stylesheet"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#9d50ff', |
|
|
secondary: '#6038f0', |
|
|
accent: '#ff3d86', |
|
|
dark: '#0e0617', |
|
|
light: '#f0edff', |
|
|
}, |
|
|
fontFamily: { |
|
|
'montserrat': ['Montserrat', 'sans-serif'], |
|
|
'raleway': ['Raleway', 'sans-serif'], |
|
|
}, |
|
|
keyframes: { |
|
|
float: { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-20px)' }, |
|
|
}, |
|
|
pulseGlow: { |
|
|
'0%, 100%': { boxShadow: '0 0 15px rgba(157, 80, 255, 0.5)' }, |
|
|
'50%': { boxShadow: '0 0 25px rgba(157, 80, 255, 0.8), 0 0 35px rgba(157, 80, 255, 0.6)' }, |
|
|
} |
|
|
}, |
|
|
animation: { |
|
|
float: 'float 5s ease-in-out infinite', |
|
|
pulseGlow: 'pulseGlow 3s ease-in-out infinite', |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style type="text/tailwindcss"> |
|
|
@layer base { |
|
|
html { |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
body { |
|
|
@apply bg-dark text-light font-montserrat overflow-x-hidden; |
|
|
background: radial-gradient(ellipse at center, #1b0a2d 0%, #0e0617 70%); |
|
|
} |
|
|
::-webkit-scrollbar { |
|
|
width: 10px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
@apply bg-primary rounded-full; |
|
|
} |
|
|
} |
|
|
@layer components { |
|
|
.btn { |
|
|
@apply px-8 py-3 rounded-full font-bold tracking-wider transition-all duration-300; |
|
|
background: linear-gradient(45deg, theme('colors.primary'), theme('colors.secondary')); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.3); |
|
|
} |
|
|
.btn:hover { |
|
|
@apply scale-105 shadow-xl; |
|
|
box-shadow: 0 15px 25px rgba(157, 80, 255, 0.5); |
|
|
} |
|
|
.section-title { |
|
|
@apply text-4xl md:text-6xl font-bold mb-16 text-center font-raleway; |
|
|
background: linear-gradient(90deg, theme('colors.primary'), theme('colors.accent')); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
.floating-shape { |
|
|
@apply absolute rounded-full z-0 blur-xl opacity-40; |
|
|
filter: blur(50px); |
|
|
} |
|
|
.project-card { |
|
|
@apply bg-[#1a1129] rounded-3xl overflow-hidden relative z-10 h-full; |
|
|
box-shadow: 0 15px 35px rgba(0,0,0,0.5); |
|
|
transition: transform 0.5s ease, box-shadow 0.5s ease; |
|
|
} |
|
|
.project-card:hover { |
|
|
transform: translateY(-15px); |
|
|
box-shadow: 0 25px 45px rgba(157, 80, 255, 0.3); |
|
|
} |
|
|
} |
|
|
.floating-gradient { |
|
|
animation: float 8s ease-in-out infinite; |
|
|
} |
|
|
.glow { |
|
|
filter: drop-shadow(0 0 20px rgba(157, 80, 255, 0.7)); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="floating-shape bg-primary w-96 h-96 -top-40 -left-40"></div> |
|
|
<div class="floating-shape bg-accent w-80 h-80 -bottom-40 -right-40"></div> |
|
|
|
|
|
|
|
|
<header class="fixed w-full z-50"> |
|
|
<div class="container mx-auto px-6 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="text-xl font-bold"> |
|
|
<span class="text-primary font-raleway">SL</span> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-10 font-semibold"> |
|
|
<a href="#home" class="hover:text-primary transition-colors">Accueil</a> |
|
|
<a href="#about" class="hover:text-primary transition-colors">À Propos</a> |
|
|
<a href="#projects" class="hover:text-primary transition-colors">Projets</a> |
|
|
<a href="#skills" class="hover:text-primary transition-colors">Compétences</a> |
|
|
<a href="#contact" class="hover:text-primary transition-colors">Contact</a> |
|
|
</nav> |
|
|
<div class="md:hidden text-xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="home" class="min-h-screen flex items-center relative overflow-hidden pt-20"> |
|
|
<div class="container mx-auto px-6 py-20 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 flex justify-center md:justify-start mb-16 md:mb-0"> |
|
|
<div class="relative"> |
|
|
<div class="w-64 h-64 md:w-96 md:h-96 rounded-full overflow-hidden border-8 border-white/10 relative glow"> |
|
|
<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=600" alt="Portrait" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 -right-6 bg-accent px-6 py-3 rounded-full font-bold"> |
|
|
<span>Disponible</span> |
|
|
</div> |
|
|
<div class="absolute w-72 h-72 rounded-full border-2 border-primary/50 top-6 left-6 animate-pulseGlow"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 text-center md:text-left"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6"> |
|
|
<span class="block text-light font-raleway">Sophia</span> |
|
|
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent mt-2 font-raleway">Laurent</span> |
|
|
</h1> |
|
|
<h2 class="text-2xl md:text-4xl mb-8 font-montserrat font-light"> |
|
|
Designer UI/UX & <span class="text-primary">Développeuse Frontend</span> |
|
|
</h2> |
|
|
<p class="max-w-2xl mb-12 text-lg opacity-80"> |
|
|
Je transforme des concepts en expériences numériques immersives avec une esthétique futuriste et des solutions innovantes. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-6"> |
|
|
<a href="#projects" class="btn">Voir Mon Travail</a> |
|
|
<a href="#contact" class="px-8 py-3 rounded-full font-bold tracking-wider bg-transparent border-2 border-primary transition-all hover:bg-primary/10">Contactez-moi</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="section-title">À Propos de Moi</h2> |
|
|
<div class="flex flex-col lg:flex-row gap-16 items-center"> |
|
|
<div class="lg:w-1/2"> |
|
|
<p class="text-lg mb-6 leading-relaxed"> |
|
|
Designer et développeuse frontend passionnée avec 5 ans d'expérience dans la création d'interfaces utilisateur captivantes et de sites web révolutionnaires. |
|
|
</p> |
|
|
<p class="text-lg mb-8 leading-relaxed"> |
|
|
Spécialisée dans le développement d'expériences digitales qui allient élégance et technologie de pointe, je m'engage à dépasser les attentes en matière de design et d'innovation technique. |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-6 mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-rocket text-primary text-xl"></i> |
|
|
</div> |
|
|
<span>Design Innovant</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-laptop-code text-primary text-xl"></i> |
|
|
</div> |
|
|
<span>Développement de Pointe</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-lightbulb text-primary text-xl"></i> |
|
|
</div> |
|
|
<span>Solutions Créatives</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-bolt text-primary text-xl"></i> |
|
|
</div> |
|
|
<span>Résultats Rapides</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2"> |
|
|
<div class="relative p-12 rounded-[40px] overflow-hidden" style="background: linear-gradient(145deg, #120829, #1c103d);"> |
|
|
<div class="absolute -top-16 -right-16 w-64 h-64 bg-primary rounded-full opacity-20 blur-3xl"></div> |
|
|
<div class="relative z-10"> |
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>UI/UX Design</span> |
|
|
<span>95%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-white/10"> |
|
|
<div class="h-2 rounded-full bg-gradient-to-r from-primary to-secondary" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Développement Frontend</span> |
|
|
<span>90%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-white/10"> |
|
|
<div class="h-2 rounded-full bg-gradient-to-r from-primary to-secondary" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Design Graphique</span> |
|
|
<span>85%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-white/10"> |
|
|
<div class="h-2 rounded-full bg-gradient-to-r from-primary to-secondary" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Animation & Interactivité</span> |
|
|
<span>88%</span> |
|
|
</div> |
|
|
<div class="w-full h-2 rounded-full bg-white/10"> |
|
|
<div class="h-2 rounded-full bg-gradient-to-r from-primary to-secondary" style="width: 88%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="section-title">Mes Projets Récents</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="h-60 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&q=80&w=1000" alt="Project" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">Interface Fintech</h3> |
|
|
<div class="flex gap-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
<div class="text-sm">Live</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-light/70 mb-4">Dashboard financier avec visualisations de données en temps réel et expérience utilisateur fluide</p> |
|
|
<div class="flex justify-between"> |
|
|
<a href="#" class="text-primary font-semibold flex items-center"> |
|
|
Voir le projet <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<div class="flex gap-3"> |
|
|
<i class="fab fa-react text-blue-400"></i> |
|
|
<i class="fab fa-figma text-purple-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="h-60 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&q=80&w=1000" alt="Project" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">E-commerce Luxe</h3> |
|
|
<div class="flex gap-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-blue-500"></div> |
|
|
<div class="text-sm">Dev</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-light/70 mb-4">Expérience d'achat premium avec navigation 3D et réalité augmentée intégrée</p> |
|
|
<div class="flex justify-between"> |
|
|
<a href="#" class="text-primary font-semibold flex items-center"> |
|
|
Voir le projet <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<div class="flex gap-3"> |
|
|
<i class="fab fa-js text-yellow-500"></i> |
|
|
<i class="fab fa-css3-alt text-blue-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="h-60 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&q=80&w=1000" alt="Project" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">Portail Immobilier</h3> |
|
|
<div class="flex gap-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
<div class="text-sm">Live</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-light/70 mb-4">Plateforme avec technologies de mapping avancé et visite virtuelle immersive</p> |
|
|
<div class="flex justify-between"> |
|
|
<a href="#" class="text-primary font-semibold flex items-center"> |
|
|
Voir le projet <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<div class="flex gap-3"> |
|
|
<i class="fab fa-vuejs text-green-500"></i> |
|
|
<i class="fas fa-map-marker-alt text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="section-title">Mes Compétences</h2> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-10"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10"> |
|
|
<i class="fab fa-figma text-4xl text-primary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">UI/UX Design</h3> |
|
|
<p class="text-center opacity-80">Design systèmes, prototypage, expérience utilisateur</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10"> |
|
|
<i class="fab fa-react text-4xl text-primary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">React</h3> |
|
|
<p class="text-center opacity-80">Applications performantes avec hooks et context API</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10"> |
|
|
<i class="fas fa-paint-brush text-4xl text-primary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Motion Design</h3> |
|
|
<p class="text-center opacity-80">Animations Framer, GSAP, et effets interactifs</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10"> |
|
|
<i class="fab fa-js text-4xl text-primary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">JavaScript</h3> |
|
|
<p class="text-center opacity-80">ES6+, manipulation DOM, requêtes API</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10"> |
|
|
<i class="fab fa-css3-alt text-4xl text-primary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">CSS/SASS</h3> |
|
|
<p class="text-center opacity-80">Styles avancés, animations, effets créatifs</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-24 h-24 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary/20 to-primary/10"> |
|
|
<i class="fas fa-mobile-alt text-4xl text-primary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Responsive Design</h3> |
|
|
<p class="text-center opacity-80">Sites optimisés pour tous les appareils</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="section-title">Contactez-moi</h2> |
|
|
<div class="flex flex-col lg:flex-row gap-16 max-w-5xl mx-auto"> |
|
|
<div class="lg:w-1/2"> |
|
|
<h3 class="text-2xl font-bold mb-6">Travaillons ensemble</h3> |
|
|
<p class="mb-8 opacity-80 leading-relaxed"> |
|
|
Vous avez un projet ambitieux qui nécessite une approche créative et techniquement experte? Discutons-en et créons quelque chose d'extraordinaire ensemble. |
|
|
</p> |
|
|
<div class="space-y-6 mb-10"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mr-6"> |
|
|
<i class="fas fa-envelope text-primary text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Email</h4> |
|
|
<p>sophia@designluxe.com</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mr-6"> |
|
|
<i class="fas fa-map-marker-alt text-primary text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Localisation</h4> |
|
|
<p>Paris, France</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mr-6"> |
|
|
<i class="fas fa-phone text-primary text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Téléphone</h4> |
|
|
<p>+33 6 12 34 56 78</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex gap-4"> |
|
|
<a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-white/5 hover:bg-primary/10 transition-colors"> |
|
|
<i class="fab fa-dribbble text-light"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-white/5 hover:bg-primary/10 transition-colors"> |
|
|
<i class="fab fa-linkedin-in text-light"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-white/5 hover:bg-primary/10 transition-colors"> |
|
|
<i class="fab fa-behance text-light"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-white/5 hover:bg-primary/10 transition-colors"> |
|
|
<i class="fab fa-github text-light"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2"> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block mb-2">Nom complet</label> |
|
|
<input type="text" id="name" class="w-full px-6 py-4 rounded-2xl bg-[#1a1129] border border-white/5 focus:outline-none focus:ring-2 focus:ring-primary"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full px-6 py-4 rounded-2xl bg-[#1a1129] border border-white/5 focus:outline-none focus:ring-2 focus:ring-primary"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="project" class="block mb-2">Type de projet</label> |
|
|
<select id="project" class="w-full px-6 py-4 rounded-2xl bg-[#1a1129] border border-white/5 focus:outline-none focus:ring-2 focus:ring-primary"> |
|
|
<option value="">Sélectionnez...</option> |
|
|
<option value="website">Site Web</option> |
|
|
<option value="app">Application Mobile</option> |
|
|
<option value="design">Design UI/UX</option> |
|
|
<option value="other">Autre</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block mb-2">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-6 py-4 rounded-2xl bg-[#1a1129] border border-white/5 focus:outline-none focus:ring-2 focus:ring-primary"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="btn w-full">Envoyer le Message</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 border-t border-white/10"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="text-xl font-bold mb-6 md:mb-0"> |
|
|
<span class="text-primary font-raleway">Sophia Laurent</span> |
|
|
</div> |
|
|
<div class="flex gap-8 mb-6 md:mb-0"> |
|
|
<a href="#home">Accueil</a> |
|
|
<a href="#about">À Propos</a> |
|
|
<a href="#projects">Projets</a> |
|
|
<a href="#contact">Contact</a> |
|
|
</div> |
|
|
<div class="text-sm opacity-70"> |
|
|
© 2023 Sophia Laurent. Tous droits réservés. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<a href="#home" class="fixed bottom-8 right-8 w-14 h-14 rounded-full flex items-center justify-center bg-primary hover:bg-secondary transition-colors"> |
|
|
<i class="fas fa-arrow-up text-white"></i> |
|
|
</a> |
|
|
|
|
|
|
|
|
<div id="particles-js" class="absolute inset-0"></div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
particlesJS('particles-js', { |
|
|
particles: { |
|
|
number: { value: 50, density: { enable: true, value_area: 800 } }, |
|
|
color: { value: '#9d50ff' }, |
|
|
shape: { type: 'circle' }, |
|
|
opacity: { value: 0.5, random: true }, |
|
|
size: { value: 3, random: true }, |
|
|
line_linked: { |
|
|
enable: true, |
|
|
distance: 150, |
|
|
color: '#9d50ff', |
|
|
opacity: 0.1, |
|
|
width: 1 |
|
|
}, |
|
|
move: { |
|
|
enable: true, |
|
|
speed: 1, |
|
|
direction: 'none', |
|
|
random: true, |
|
|
straight: false, |
|
|
out_mode: 'out' |
|
|
} |
|
|
}, |
|
|
interactivity: { |
|
|
detect_on: 'window', |
|
|
events: { |
|
|
onhover: { enable: true, mode: 'grab' }, |
|
|
onclick: { enable: true, mode: 'push' }, |
|
|
resize: true |
|
|
}, |
|
|
modes: { |
|
|
grab: { distance: 140, line_linked: { opacity: 1 } }, |
|
|
push: { particles_nb: 4 } |
|
|
} |
|
|
}, |
|
|
retina_detect: true |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
const header = document.querySelector('header'); |
|
|
if (window.scrollY > 50) { |
|
|
header.classList.add('bg-dark'); |
|
|
header.classList.add('shadow-xl'); |
|
|
} else { |
|
|
header.classList.remove('bg-dark'); |
|
|
header.classList.remove('shadow-xl'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=KINGFAUS/porto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
