Update links and refactor components
This commit is contained in:
jessy-david-dev
+110
-113
@@ -7,131 +7,128 @@ import Image from "next/image";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
const socials = [
|
const socials = [
|
||||||
{ name: "GitHub", href: "https://github.com/jessydavid-dev", icon: Github },
|
{ name: "GitHub", href: "https://github.com/jessy-david-dev", icon: Github },
|
||||||
{
|
{
|
||||||
name: "LinkedIn",
|
name: "LinkedIn",
|
||||||
href: "https://linkedin.com/in/jessy-david",
|
href: "https://linkedin.com/in/jessy-david",
|
||||||
icon: Linkedin,
|
icon: Linkedin,
|
||||||
},
|
},
|
||||||
{ name: "Email", href: "mailto:contact@jessy-david.dev", icon: Mail },
|
{ name: "Email", href: "mailto:contact@jessy-david.dev", icon: Mail },
|
||||||
];
|
];
|
||||||
|
|
||||||
const containerVariants: Variants = {
|
const containerVariants: Variants = {
|
||||||
hidden: { opacity: 0 },
|
hidden: { opacity: 0 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: {
|
transition: {
|
||||||
staggerChildren: 0.1,
|
staggerChildren: 0.1,
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const itemVariants: Variants = {
|
const itemVariants: Variants = {
|
||||||
hidden: { opacity: 0, y: 20 },
|
hidden: { opacity: 0, y: 20 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
y: 0,
|
y: 0,
|
||||||
transition: { duration: 0.5 },
|
transition: { duration: 0.5 },
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="relative z-10 overflow-hidden">
|
<footer className="relative z-10 overflow-hidden">
|
||||||
<div className="relative bg-slate-900/95 backdrop-blur-xl">
|
<div className="relative bg-slate-900/95 backdrop-blur-xl">
|
||||||
{/* Background orbs */}
|
{/* Background orbs */}
|
||||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||||
<div className="absolute -top-24 -left-24 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl" />
|
<div className="absolute -top-24 -left-24 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl" />
|
||||||
<div className="absolute -bottom-24 -right-24 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl" />
|
<div className="absolute -bottom-24 -right-24 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="container mx-auto px-4 py-10 relative">
|
<div className="container mx-auto px-4 py-10 relative">
|
||||||
<motion.div
|
<motion.div
|
||||||
variants={containerVariants}
|
variants={containerVariants}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
whileInView="visible"
|
whileInView="visible"
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
className="flex flex-col md:flex-row items-center justify-between gap-6"
|
className="flex flex-col md:flex-row items-center justify-between gap-6"
|
||||||
>
|
>
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<motion.div variants={itemVariants}>
|
<motion.div variants={itemVariants}>
|
||||||
<Link
|
<Link href="/" className="inline-flex items-center gap-3 group">
|
||||||
href="/"
|
<motion.div
|
||||||
className="inline-flex items-center gap-3 group"
|
whileHover={{ scale: 1.05 }}
|
||||||
>
|
whileTap={{ scale: 0.95 }}
|
||||||
<motion.div
|
className="relative"
|
||||||
whileHover={{ scale: 1.05 }}
|
>
|
||||||
whileTap={{ scale: 0.95 }}
|
<div className="absolute inset-0 bg-linear-to-br from-blue-500 to-purple-500 rounded-xl blur-lg opacity-50 group-hover:opacity-75 transition-opacity" />
|
||||||
className="relative"
|
<Image
|
||||||
>
|
src="/logo.webp"
|
||||||
<div className="absolute inset-0 bg-linear-to-br from-blue-500 to-purple-500 rounded-xl blur-lg opacity-50 group-hover:opacity-75 transition-opacity" />
|
width={56}
|
||||||
<Image
|
height={56}
|
||||||
src="/logo.webp"
|
className="relative w-14 h-14 rounded-xl ring-2 ring-white/10"
|
||||||
width={56}
|
alt="Logo"
|
||||||
height={56}
|
/>
|
||||||
className="relative w-14 h-14 rounded-xl ring-2 ring-white/10"
|
</motion.div>
|
||||||
alt="Logo"
|
<span className="text-xl font-bold bg-linear-to-r from-white to-slate-300 bg-clip-text text-transparent">
|
||||||
/>
|
{siteConfig.name}
|
||||||
</motion.div>
|
</span>
|
||||||
<span className="text-xl font-bold bg-linear-to-r from-white to-slate-300 bg-clip-text text-transparent">
|
</Link>
|
||||||
{siteConfig.name}
|
</motion.div>
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Social icons */}
|
{/* Social icons */}
|
||||||
<motion.div
|
<motion.div
|
||||||
variants={itemVariants}
|
variants={itemVariants}
|
||||||
className="flex flex-col items-center gap-3"
|
className="flex flex-col items-center gap-3"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
{socials.map((item) => (
|
{socials.map((item) => (
|
||||||
<motion.a
|
<motion.a
|
||||||
key={item.name}
|
key={item.name}
|
||||||
href={item.href}
|
href={item.href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
whileHover={{ scale: 1.1, y: -2 }}
|
whileHover={{ scale: 1.1, y: -2 }}
|
||||||
whileTap={{ scale: 0.95 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
className="p-2.5 bg-slate-800/80 border border-slate-700/50 hover:border-blue-500/50 hover:bg-linear-to-br hover:from-blue-500/20 hover:to-purple-500/20 rounded-xl transition-all duration-300 group"
|
className="p-2.5 bg-slate-800/80 border border-slate-700/50 hover:border-blue-500/50 hover:bg-linear-to-br hover:from-blue-500/20 hover:to-purple-500/20 rounded-xl transition-all duration-300 group"
|
||||||
aria-label={item.name}
|
aria-label={item.name}
|
||||||
>
|
>
|
||||||
<item.icon className="w-5 h-5 text-slate-400 group-hover:text-white transition-colors" />
|
<item.icon className="w-5 h-5 text-slate-400 group-hover:text-white transition-colors" />
|
||||||
</motion.a>
|
</motion.a>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
variants={itemVariants}
|
variants={itemVariants}
|
||||||
className="text-slate-500 text-sm"
|
className="text-slate-500 text-sm"
|
||||||
>
|
>
|
||||||
Propulsé par{" "}
|
Propulsé par{" "}
|
||||||
<Link
|
<Link
|
||||||
href="https://quantumcraft-studios.com"
|
href="https://quantumcraft-studios.com"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="font-medium text-blue-400 hover:text-purple-400 transition-colors"
|
className="font-medium text-blue-400 hover:text-purple-400 transition-colors"
|
||||||
>
|
>
|
||||||
QuantumCraft Studios
|
QuantumCraft Studios
|
||||||
</Link>
|
</Link>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Copyright */}
|
{/* Copyright */}
|
||||||
<motion.p
|
<motion.p
|
||||||
variants={itemVariants}
|
variants={itemVariants}
|
||||||
className="text-slate-500 text-sm flex items-center gap-2 flex-wrap"
|
className="text-slate-500 text-sm flex items-center gap-2 flex-wrap"
|
||||||
>
|
>
|
||||||
© {new Date().getFullYear()} • Fait avec
|
© {new Date().getFullYear()} • Fait avec
|
||||||
<Heart className="w-4 h-4 text-red-500 fill-red-500" />
|
<Heart className="w-4 h-4 text-red-500 fill-red-500" />
|
||||||
par{" "}
|
par{" "}
|
||||||
<span className="font-medium bg-linear-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
<span className="font-medium bg-linear-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||||||
Jessy DAVID
|
Jessy DAVID
|
||||||
</span>
|
</span>
|
||||||
</motion.p>
|
</motion.p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+257
-265
@@ -4,296 +4,288 @@
|
|||||||
import SmoothLink from "@/component/ui/SmoothLink";
|
import SmoothLink from "@/component/ui/SmoothLink";
|
||||||
import { AnimatePresence, motion } from "framer-motion";
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
import {
|
import {
|
||||||
Code2,
|
Code2,
|
||||||
FolderKanban,
|
FolderKanban,
|
||||||
Home,
|
Home,
|
||||||
LucideIcon,
|
LucideIcon,
|
||||||
Mail,
|
Mail,
|
||||||
Menu,
|
Menu,
|
||||||
User,
|
User,
|
||||||
X,
|
X,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
// Interface définissant la structure d'un lien de navigation
|
// Interface définissant la structure d'un lien de navigation
|
||||||
interface NavLink {
|
interface NavLink {
|
||||||
href: string;
|
href: string;
|
||||||
label: string;
|
label: string;
|
||||||
icon: LucideIcon;
|
icon: LucideIcon;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Configuration des liens de navigation avec leurs icônes
|
// Configuration des liens de navigation avec leurs icônes
|
||||||
const navLinks: NavLink[] = [
|
const navLinks: NavLink[] = [
|
||||||
{ href: "#home", label: "Accueil", icon: Home },
|
{ href: "#home", label: "Accueil", icon: Home },
|
||||||
{ href: "#about", label: "À propos", icon: User },
|
{ href: "#about", label: "À propos", icon: User },
|
||||||
{ href: "#skills", label: "Compétences", icon: Code2 },
|
{ href: "#skills", label: "Compétences", icon: Code2 },
|
||||||
{ href: "#projects", label: "Projets", icon: FolderKanban },
|
{ href: "#projects", label: "Projets", icon: FolderKanban },
|
||||||
{ href: "#contact", label: "Contact", icon: Mail },
|
{ href: "#contact", label: "Contact", icon: Mail },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function NavBar() {
|
export default function NavBar() {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [activeSection, setActiveSection] = useState("home");
|
const [activeSection, setActiveSection] = useState("home");
|
||||||
const [scrolled, setScrolled] = useState(false);
|
const [scrolled, setScrolled] = useState(false);
|
||||||
|
|
||||||
// Effet pour gérer le scroll et détecter la section active
|
// Effet pour gérer le scroll et détecter la section active
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
setScrolled(window.scrollY > 20);
|
setScrolled(window.scrollY > 20);
|
||||||
|
|
||||||
const sections = navLinks.map((link) => link.href.replace("#", ""));
|
const sections = navLinks.map((link) => link.href.replace("#", ""));
|
||||||
|
|
||||||
const currentSection = sections.find((section) => {
|
const currentSection = sections.find((section) => {
|
||||||
const element = document.getElementById(section);
|
const element = document.getElementById(section);
|
||||||
if (element) {
|
if (element) {
|
||||||
const rect = element.getBoundingClientRect();
|
const rect = element.getBoundingClientRect();
|
||||||
return rect.top <= 100 && rect.bottom >= 100;
|
return rect.top <= 100 && rect.bottom >= 100;
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (currentSection) {
|
|
||||||
setActiveSection(currentSection);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("scroll", handleScroll);
|
|
||||||
return () => window.removeEventListener("scroll", handleScroll);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Effet pour bloquer le scroll du body quand le menu mobile est ouvert
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen) {
|
|
||||||
document.body.style.overflow = "hidden";
|
|
||||||
} else {
|
|
||||||
document.body.style.overflow = "unset";
|
|
||||||
}
|
}
|
||||||
}, [isOpen]);
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
const handleLinkClick = () => {
|
if (currentSection) {
|
||||||
setIsOpen(false);
|
setActiveSection(currentSection);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
window.addEventListener("scroll", handleScroll);
|
||||||
<motion.nav
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
initial={{ y: -100 }}
|
}, []);
|
||||||
animate={{ y: 0 }}
|
|
||||||
transition={{ duration: 0.5 }}
|
|
||||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
||||||
scrolled
|
|
||||||
? "bg-slate-900/95 backdrop-blur-md shadow-lg border-b border-slate-800"
|
|
||||||
: "bg-slate-900/80 backdrop-blur-sm border-b border-slate-800/50"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="container mx-auto px-4">
|
|
||||||
<div className="flex items-center justify-between h-16">
|
|
||||||
{/* Logo et nom - lien vers l'accueil */}
|
|
||||||
<SmoothLink
|
|
||||||
href="#home"
|
|
||||||
className="relative group flex items-center gap-3"
|
|
||||||
onClick={handleLinkClick}
|
|
||||||
>
|
|
||||||
{/* Conteneur du logo avec effet hover */}
|
|
||||||
<div className="relative p-1.5 rounded-xl bg-slate-800/50 backdrop-blur-sm border border-slate-700 group-hover:border-blue-500/50 group-hover:bg-slate-700/50 transition-all duration-300">
|
|
||||||
<Image
|
|
||||||
src="/logo.webp"
|
|
||||||
width={500}
|
|
||||||
height={500}
|
|
||||||
className="w-8 h-8 rounded-lg object-cover"
|
|
||||||
alt="Logo Jessy David"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/* Nom avec effet de soulignement au hover */}
|
|
||||||
<div>
|
|
||||||
<span className="text-xl font-bold text-white">
|
|
||||||
Jessy David
|
|
||||||
</span>
|
|
||||||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-linear-to-r from-blue-500 to-purple-500 group-hover:w-full transition-all duration-300" />
|
|
||||||
</div>
|
|
||||||
</SmoothLink>
|
|
||||||
|
|
||||||
{/* Navigation pc - cachée sur mobile */}
|
// Effet pour bloquer le scroll du body quand le menu mobile est ouvert
|
||||||
<div className="hidden md:flex items-center gap-1">
|
useEffect(() => {
|
||||||
{navLinks.map((link) => {
|
if (isOpen) {
|
||||||
const isActive =
|
document.body.style.overflow = "hidden";
|
||||||
activeSection === link.href.replace("#", "");
|
} else {
|
||||||
const Icon = link.icon;
|
document.body.style.overflow = "unset";
|
||||||
return (
|
}
|
||||||
<SmoothLink
|
}, [isOpen]);
|
||||||
key={link.href}
|
|
||||||
href={link.href}
|
|
||||||
className="relative px-4 py-2 text-sm font-medium transition-colors group"
|
|
||||||
>
|
|
||||||
{/* Icône et label du lien */}
|
|
||||||
<span
|
|
||||||
className={`flex items-center gap-2 ${
|
|
||||||
isActive
|
|
||||||
? "text-white"
|
|
||||||
: "text-slate-400 group-hover:text-white"
|
|
||||||
} transition-colors`}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
className={`w-4 h-4 ${
|
|
||||||
isActive
|
|
||||||
? "text-blue-400"
|
|
||||||
: "text-slate-500 group-hover:text-blue-400"
|
|
||||||
} transition-colors`}
|
|
||||||
/>
|
|
||||||
{link.label}
|
|
||||||
</span>
|
|
||||||
{/* Indicateur animé de la section active */}
|
|
||||||
{isActive && (
|
|
||||||
<motion.span
|
|
||||||
layoutId="activeSection"
|
|
||||||
className="absolute bottom-0 left-0 right-0 h-0.5 bg-linear-to-r from-blue-500 to-purple-500"
|
|
||||||
transition={{
|
|
||||||
type: "spring",
|
|
||||||
stiffness: 380,
|
|
||||||
damping: 30,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</SmoothLink>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bouton hamburger pour mobile */}
|
const handleLinkClick = () => {
|
||||||
<button
|
setIsOpen(false);
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
};
|
||||||
className="md:hidden relative z-50 p-2 text-slate-300 hover:text-white transition-colors"
|
|
||||||
aria-label="Toggle menu"
|
return (
|
||||||
>
|
<motion.nav
|
||||||
<motion.div
|
initial={{ y: -100 }}
|
||||||
animate={isOpen ? "open" : "closed"}
|
animate={{ y: 0 }}
|
||||||
className="w-6 h-6 flex items-center justify-center"
|
transition={{ duration: 0.5 }}
|
||||||
>
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||||
{/* Affiche X si ouvert, sinon affiche Menu */}
|
scrolled
|
||||||
{isOpen ? (
|
? "bg-slate-900/95 backdrop-blur-md shadow-lg border-b border-slate-800"
|
||||||
<X className="w-6 h-6" />
|
: "bg-slate-900/80 backdrop-blur-sm border-b border-slate-800/50"
|
||||||
) : (
|
}`}
|
||||||
<Menu className="w-6 h-6" />
|
>
|
||||||
)}
|
<div className="container mx-auto px-4">
|
||||||
</motion.div>
|
<div className="flex items-center justify-between h-16">
|
||||||
</button>
|
{/* Logo et nom - lien vers l'accueil */}
|
||||||
</div>
|
<SmoothLink
|
||||||
|
href="#home"
|
||||||
|
className="relative group flex items-center gap-3"
|
||||||
|
onClick={handleLinkClick}
|
||||||
|
>
|
||||||
|
{/* Conteneur du logo avec effet hover */}
|
||||||
|
<div className="relative p-1.5 rounded-xl bg-slate-800/50 backdrop-blur-sm border border-slate-700 group-hover:border-blue-500/50 group-hover:bg-slate-700/50 transition-all duration-300">
|
||||||
|
<Image
|
||||||
|
src="/logo.webp"
|
||||||
|
width={500}
|
||||||
|
height={500}
|
||||||
|
className="w-8 h-8 rounded-lg object-cover"
|
||||||
|
alt="Logo Jessy David"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{/* Nom avec effet de soulignement au hover */}
|
||||||
|
<div>
|
||||||
|
<span className="text-xl font-bold text-white">Jessy David</span>
|
||||||
|
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-linear-to-r from-blue-500 to-purple-500 group-hover:w-full transition-all duration-300" />
|
||||||
|
</div>
|
||||||
|
</SmoothLink>
|
||||||
|
|
||||||
{/* Menu mobile avec animations */}
|
{/* Navigation pc - cachée sur mobile */}
|
||||||
<AnimatePresence>
|
<div className="hidden md:flex items-center gap-1">
|
||||||
{isOpen && (
|
{navLinks.map((link) => {
|
||||||
<>
|
const isActive = activeSection === link.href.replace("#", "");
|
||||||
{/* Overlay sombre derrière le menu */}
|
const Icon = link.icon;
|
||||||
<motion.div
|
return (
|
||||||
initial={{ opacity: 0 }}
|
<SmoothLink
|
||||||
animate={{ opacity: 1 }}
|
key={link.href}
|
||||||
exit={{ opacity: 0 }}
|
href={link.href}
|
||||||
transition={{ duration: 0.2 }}
|
className="relative px-4 py-2 text-sm font-medium transition-colors group"
|
||||||
className="fixed inset-0 bg-black/60 backdrop-blur-sm md:hidden z-40"
|
>
|
||||||
onClick={() => setIsOpen(false)}
|
{/* Icône et label du lien */}
|
||||||
/>
|
<span
|
||||||
|
className={`flex items-center gap-2 ${
|
||||||
|
isActive
|
||||||
|
? "text-white"
|
||||||
|
: "text-slate-400 group-hover:text-white"
|
||||||
|
} transition-colors`}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
className={`w-4 h-4 ${
|
||||||
|
isActive
|
||||||
|
? "text-blue-400"
|
||||||
|
: "text-slate-500 group-hover:text-blue-400"
|
||||||
|
} transition-colors`}
|
||||||
|
/>
|
||||||
|
{link.label}
|
||||||
|
</span>
|
||||||
|
{/* Indicateur animé de la section active */}
|
||||||
|
{isActive && (
|
||||||
|
<motion.span
|
||||||
|
layoutId="activeSection"
|
||||||
|
className="absolute bottom-0 left-0 right-0 h-0.5 bg-linear-to-r from-blue-500 to-purple-500"
|
||||||
|
transition={{
|
||||||
|
type: "spring",
|
||||||
|
stiffness: 380,
|
||||||
|
damping: 30,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</SmoothLink>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Panneau du menu mobile coulissant depuis la droite */}
|
{/* Bouton hamburger pour mobile */}
|
||||||
<motion.div
|
<button
|
||||||
initial={{ x: "100%" }}
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
animate={{ x: 0 }}
|
className="md:hidden relative z-50 p-2 text-slate-300 hover:text-white transition-colors"
|
||||||
exit={{ x: "100%" }}
|
aria-label="Toggle menu"
|
||||||
transition={{
|
>
|
||||||
type: "spring",
|
<motion.div
|
||||||
damping: 25,
|
animate={isOpen ? "open" : "closed"}
|
||||||
stiffness: 200,
|
className="w-6 h-6 flex items-center justify-center"
|
||||||
}}
|
>
|
||||||
className="fixed top-0 right-0 bottom-0 w-72 bg-slate-950 border-l border-slate-700 md:hidden shadow-2xl z-50"
|
{/* Affiche X si ouvert, sinon affiche Menu */}
|
||||||
|
{isOpen ? (
|
||||||
|
<X className="w-6 h-6" />
|
||||||
|
) : (
|
||||||
|
<Menu className="w-6 h-6" />
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Menu mobile avec animations */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{isOpen && (
|
||||||
|
<>
|
||||||
|
{/* Overlay sombre derrière le menu */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="fixed inset-0 bg-black/60 backdrop-blur-sm md:hidden z-40"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Panneau du menu mobile coulissant depuis la droite */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ x: "100%" }}
|
||||||
|
animate={{ x: 0 }}
|
||||||
|
exit={{ x: "100%" }}
|
||||||
|
transition={{
|
||||||
|
type: "spring",
|
||||||
|
damping: 25,
|
||||||
|
stiffness: 200,
|
||||||
|
}}
|
||||||
|
className="fixed top-0 right-0 bottom-0 w-72 bg-slate-950 border-l border-slate-700 md:hidden shadow-2xl z-50"
|
||||||
|
>
|
||||||
|
{/* Dégradé décoratif en haut du menu */}
|
||||||
|
<div className="absolute top-0 left-0 right-0 h-32 bg-linear-to-b from-blue-500/5 to-transparent pointer-events-none"></div>
|
||||||
|
|
||||||
|
{/* Bouton de fermeture du menu */}
|
||||||
|
<motion.button
|
||||||
|
initial={{ opacity: 0, rotate: -90 }}
|
||||||
|
animate={{ opacity: 1, rotate: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
className="absolute top-4 right-4 p-2 rounded-full bg-slate-800/80 border border-slate-700 text-slate-400 hover:text-white hover:bg-slate-700 hover:border-slate-600 transition-all z-10"
|
||||||
|
aria-label="Fermer le menu"
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
{/* Contenu du menu mobile */}
|
||||||
|
<div className="flex flex-col h-full pt-20 px-6 relative">
|
||||||
|
<nav className="flex-1 space-y-3">
|
||||||
|
{/* Boucle sur les liens avec animation décalée */}
|
||||||
|
{navLinks.map((link, index) => {
|
||||||
|
const isActive =
|
||||||
|
activeSection === link.href.replace("#", "");
|
||||||
|
const Icon = link.icon;
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={link.href}
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{
|
||||||
|
delay: index * 0.1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Lien de navigation mobile */}
|
||||||
|
<SmoothLink
|
||||||
|
href={link.href}
|
||||||
|
onClick={handleLinkClick}
|
||||||
|
className={`group block px-5 py-4 rounded-xl font-semibold transition-all ${
|
||||||
|
isActive
|
||||||
|
? "bg-linear-to-r from-blue-600 to-purple-600 text-white shadow-lg shadow-blue-500/20"
|
||||||
|
: "bg-slate-800/80 text-slate-300 hover:text-white hover:bg-slate-700/80 border border-slate-700/50 hover:border-slate-600"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
{/* Dégradé décoratif en haut du menu */}
|
<div className="flex items-center justify-between">
|
||||||
<div className="absolute top-0 left-0 right-0 h-32 bg-linear-to-b from-blue-500/5 to-transparent pointer-events-none"></div>
|
<div className="flex items-center gap-3">
|
||||||
|
{/* Conteneur de l'icône */}
|
||||||
{/* Bouton de fermeture du menu */}
|
<div
|
||||||
<motion.button
|
className={`p-2 rounded-lg ${
|
||||||
initial={{ opacity: 0, rotate: -90 }}
|
isActive
|
||||||
animate={{ opacity: 1, rotate: 0 }}
|
? "bg-white/20"
|
||||||
transition={{ delay: 0.2 }}
|
: "bg-slate-700/50 group-hover:bg-slate-600/50"
|
||||||
onClick={() => setIsOpen(false)}
|
} transition-colors`}
|
||||||
className="absolute top-4 right-4 p-2 rounded-full bg-slate-800/80 border border-slate-700 text-slate-400 hover:text-white hover:bg-slate-700 hover:border-slate-600 transition-all z-10"
|
>
|
||||||
aria-label="Fermer le menu"
|
<Icon
|
||||||
>
|
className={`w-5 h-5 ${
|
||||||
<X className="w-5 h-5" />
|
isActive ? "text-white" : "text-blue-400"
|
||||||
</motion.button>
|
}`}
|
||||||
|
/>
|
||||||
{/* Contenu du menu mobile */}
|
</div>
|
||||||
<div className="flex flex-col h-full pt-20 px-6 relative">
|
<span>{link.label}</span>
|
||||||
<nav className="flex-1 space-y-3">
|
|
||||||
{/* Boucle sur les liens avec animation décalée */}
|
|
||||||
{navLinks.map((link, index) => {
|
|
||||||
const isActive =
|
|
||||||
activeSection ===
|
|
||||||
link.href.replace("#", "");
|
|
||||||
const Icon = link.icon;
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
key={link.href}
|
|
||||||
initial={{ opacity: 0, x: 20 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{
|
|
||||||
delay: index * 0.1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Lien de navigation mobile */}
|
|
||||||
<SmoothLink
|
|
||||||
href={link.href}
|
|
||||||
onClick={handleLinkClick}
|
|
||||||
className={`group block px-5 py-4 rounded-xl font-semibold transition-all ${
|
|
||||||
isActive
|
|
||||||
? "bg-linear-to-r from-blue-600 to-purple-600 text-white shadow-lg shadow-blue-500/20"
|
|
||||||
: "bg-slate-800/80 text-slate-300 hover:text-white hover:bg-slate-700/80 border border-slate-700/50 hover:border-slate-600"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{/* Conteneur de l'icône */}
|
|
||||||
<div
|
|
||||||
className={`p-2 rounded-lg ${
|
|
||||||
isActive
|
|
||||||
? "bg-white/20"
|
|
||||||
: "bg-slate-700/50 group-hover:bg-slate-600/50"
|
|
||||||
} transition-colors`}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
className={`w-5 h-5 ${
|
|
||||||
isActive
|
|
||||||
? "text-white"
|
|
||||||
: "text-blue-400"
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span>
|
|
||||||
{link.label}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{/* Indicateur de section active */}
|
|
||||||
{isActive && (
|
|
||||||
<motion.div
|
|
||||||
initial={{
|
|
||||||
scale: 0,
|
|
||||||
}}
|
|
||||||
animate={{
|
|
||||||
scale: 1,
|
|
||||||
}}
|
|
||||||
className="w-2 h-2 bg-white rounded-full"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</SmoothLink>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
{/* Indicateur de section active */}
|
||||||
</>
|
{isActive && (
|
||||||
)}
|
<motion.div
|
||||||
</AnimatePresence>
|
initial={{
|
||||||
</motion.nav>
|
scale: 0,
|
||||||
);
|
}}
|
||||||
|
animate={{
|
||||||
|
scale: 1,
|
||||||
|
}}
|
||||||
|
className="w-2 h-2 bg-white rounded-full"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</SmoothLink>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.nav>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+121
-150
@@ -5,163 +5,134 @@ import { Code2, Rocket, Sparkles, Zap } from "lucide-react";
|
|||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
|
|
||||||
const technologies = [
|
const technologies = [
|
||||||
"React",
|
"React",
|
||||||
"Next.js",
|
"Next.js",
|
||||||
"TypeScript",
|
"TypeScript",
|
||||||
"Node.js",
|
"Node.js",
|
||||||
"Tailwind CSS",
|
"Tailwind CSS",
|
||||||
"Git",
|
"Git",
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function About() {
|
export default function About() {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section id="about" className="py-20 bg-sky-50 relative overflow-hidden">
|
||||||
id="about"
|
{/* Grid Background subtil */}
|
||||||
className="py-20 bg-sky-50 relative overflow-hidden"
|
<div className="absolute inset-0 bg-grid-slate-400/50 mask-[linear-gradient(to_bottom,white,transparent)]"></div>
|
||||||
|
|
||||||
|
<div ref={ref} className="container mx-auto px-4 max-w-7xl relative z-10">
|
||||||
|
{/* Header */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="text-center mb-16"
|
||||||
>
|
>
|
||||||
{/* Grid Background subtil */}
|
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||||
<div className="absolute inset-0 bg-grid-slate-400/50 mask-[linear-gradient(to_bottom,white,transparent)]"></div>
|
À propos de moi
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-slate-600 max-w-2xl mx-auto">
|
||||||
|
Développeur web créatif, combinant frontend et backend pour des
|
||||||
|
solutions digitales impactantes
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
<div
|
{/* Bento Grid */}
|
||||||
ref={ref}
|
<div className="grid md:grid-cols-12 gap-4">
|
||||||
className="container mx-auto px-4 max-w-7xl relative z-10"
|
{/* Large card - Présentation */}
|
||||||
>
|
<motion.div
|
||||||
{/* Header */}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<motion.div
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
transition={{ duration: 0.5, delay: 0.1 }}
|
||||||
animate={
|
className="md:col-span-8 bg-linear-to-r from-blue-500 to-purple-600 rounded-3xl p-8 text-white shadow-2xl"
|
||||||
isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
|
>
|
||||||
}
|
<Sparkles className="w-12 h-12 mb-4 opacity-80" />
|
||||||
transition={{ duration: 0.6 }}
|
<h3 className="text-3xl font-bold mb-4">
|
||||||
className="text-center mb-16"
|
Créateur d'expériences digitales
|
||||||
|
</h3>
|
||||||
|
<p className="text-lg text-blue-50 leading-relaxed mb-4">
|
||||||
|
Passionné par le développement web, je crée des applications
|
||||||
|
modernes, performantes et élégantes. Mon objectif est de
|
||||||
|
transformer des idées en solutions digitales innovantes.
|
||||||
|
</p>
|
||||||
|
<p className="text-lg text-blue-50 leading-relaxed">
|
||||||
|
Avec une expertise en développement full-stack, je maîtrise aussi
|
||||||
|
bien le front-end que le back-end, me permettant de concevoir des
|
||||||
|
projets de A à Z.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Small cards - Stats/Features */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||||||
|
className="md:col-span-4 bg-white rounded-3xl p-6 shadow-lg border border-slate-200"
|
||||||
|
>
|
||||||
|
<Code2 className="w-10 h-10 mb-3 text-blue-600" />
|
||||||
|
<h4 className="text-xl font-bold text-slate-900 mb-2">
|
||||||
|
Code Propre
|
||||||
|
</h4>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
Architecture scalable et maintenable
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.3 }}
|
||||||
|
className="md:col-span-4 bg-white rounded-3xl p-6 shadow-lg border border-slate-200"
|
||||||
|
>
|
||||||
|
<Rocket className="w-10 h-10 mb-3 text-purple-600" />
|
||||||
|
<h4 className="text-xl font-bold text-slate-900 mb-2">
|
||||||
|
Performance
|
||||||
|
</h4>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
Applications ultra-rapides et optimisées
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.4 }}
|
||||||
|
className="md:col-span-4 bg-white rounded-3xl p-6 shadow-lg border border-slate-200"
|
||||||
|
>
|
||||||
|
<Zap className="w-10 h-10 mb-3 text-yellow-500" />
|
||||||
|
<h4 className="text-xl font-bold text-slate-900 mb-2">
|
||||||
|
Innovation
|
||||||
|
</h4>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
Technologies modernes et best practices
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Technologies grid */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.5 }}
|
||||||
|
className="md:col-span-4 bg-slate-900 rounded-3xl p-8 shadow-2xl"
|
||||||
|
>
|
||||||
|
<h4 className="text-xl font-bold text-white mb-6">
|
||||||
|
Stack Technique
|
||||||
|
</h4>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{technologies.map((tech) => (
|
||||||
|
<div
|
||||||
|
key={tech}
|
||||||
|
className="bg-slate-800 rounded-lg p-3 text-center text-sm font-semibold text-slate-200 hover:bg-slate-700 transition-colors"
|
||||||
>
|
>
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
{tech}
|
||||||
À propos de moi
|
|
||||||
</h2>
|
|
||||||
<p className="text-xl text-slate-600 max-w-2xl mx-auto">
|
|
||||||
Développeur web créatif, combinant frontend et backend
|
|
||||||
pour des solutions digitales impactantes
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Bento Grid */}
|
|
||||||
<div className="grid md:grid-cols-12 gap-4">
|
|
||||||
{/* Large card - Présentation */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={
|
|
||||||
isInView
|
|
||||||
? { opacity: 1, y: 0 }
|
|
||||||
: { opacity: 0, y: 20 }
|
|
||||||
}
|
|
||||||
transition={{ duration: 0.5, delay: 0.1 }}
|
|
||||||
className="md:col-span-8 bg-linear-to-r from-blue-500 to-purple-600 rounded-3xl p-8 text-white shadow-2xl"
|
|
||||||
>
|
|
||||||
<Sparkles className="w-12 h-12 mb-4 opacity-80" />
|
|
||||||
<h3 className="text-3xl font-bold mb-4">
|
|
||||||
Créateur d'expériences digitales
|
|
||||||
</h3>
|
|
||||||
<p className="text-lg text-blue-50 leading-relaxed mb-4">
|
|
||||||
Passionné par le développement web, je crée des
|
|
||||||
applications modernes, performantes et élégantes.
|
|
||||||
Mon objectif est de transformer des idées en
|
|
||||||
solutions digitales innovantes.
|
|
||||||
</p>
|
|
||||||
<p className="text-lg text-blue-50 leading-relaxed">
|
|
||||||
Avec une expertise en développement full-stack, je
|
|
||||||
maîtrise aussi bien le front-end que le back-end, me
|
|
||||||
permettant de concevoir des projets de A à Z.
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Small cards - Stats/Features */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={
|
|
||||||
isInView
|
|
||||||
? { opacity: 1, y: 0 }
|
|
||||||
: { opacity: 0, y: 20 }
|
|
||||||
}
|
|
||||||
transition={{ duration: 0.5, delay: 0.2 }}
|
|
||||||
className="md:col-span-4 bg-white rounded-3xl p-6 shadow-lg border border-slate-200"
|
|
||||||
>
|
|
||||||
<Code2 className="w-10 h-10 mb-3 text-blue-600" />
|
|
||||||
<h4 className="text-xl font-bold text-slate-900 mb-2">
|
|
||||||
Code Propre
|
|
||||||
</h4>
|
|
||||||
<p className="text-slate-600">
|
|
||||||
Architecture scalable et maintenable
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={
|
|
||||||
isInView
|
|
||||||
? { opacity: 1, y: 0 }
|
|
||||||
: { opacity: 0, y: 20 }
|
|
||||||
}
|
|
||||||
transition={{ duration: 0.5, delay: 0.3 }}
|
|
||||||
className="md:col-span-4 bg-white rounded-3xl p-6 shadow-lg border border-slate-200"
|
|
||||||
>
|
|
||||||
<Rocket className="w-10 h-10 mb-3 text-purple-600" />
|
|
||||||
<h4 className="text-xl font-bold text-slate-900 mb-2">
|
|
||||||
Performance
|
|
||||||
</h4>
|
|
||||||
<p className="text-slate-600">
|
|
||||||
Applications ultra-rapides et optimisées
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={
|
|
||||||
isInView
|
|
||||||
? { opacity: 1, y: 0 }
|
|
||||||
: { opacity: 0, y: 20 }
|
|
||||||
}
|
|
||||||
transition={{ duration: 0.5, delay: 0.4 }}
|
|
||||||
className="md:col-span-4 bg-white rounded-3xl p-6 shadow-lg border border-slate-200"
|
|
||||||
>
|
|
||||||
<Zap className="w-10 h-10 mb-3 text-yellow-500" />
|
|
||||||
<h4 className="text-xl font-bold text-slate-900 mb-2">
|
|
||||||
Innovation
|
|
||||||
</h4>
|
|
||||||
<p className="text-slate-600">
|
|
||||||
Technologies modernes et best practices
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Technologies grid */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={
|
|
||||||
isInView
|
|
||||||
? { opacity: 1, y: 0 }
|
|
||||||
: { opacity: 0, y: 20 }
|
|
||||||
}
|
|
||||||
transition={{ duration: 0.5, delay: 0.5 }}
|
|
||||||
className="md:col-span-4 bg-slate-900 rounded-3xl p-8 shadow-2xl"
|
|
||||||
>
|
|
||||||
<h4 className="text-xl font-bold text-white mb-6">
|
|
||||||
Stack Technique
|
|
||||||
</h4>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
{technologies.map((tech) => (
|
|
||||||
<div
|
|
||||||
key={tech}
|
|
||||||
className="bg-slate-800 rounded-lg p-3 text-center text-sm font-semibold text-slate-200 hover:bg-slate-700 transition-colors"
|
|
||||||
>
|
|
||||||
{tech}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</motion.div>
|
||||||
);
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+329
-363
@@ -3,386 +3,352 @@
|
|||||||
import { Turnstile } from "@marsidev/react-turnstile";
|
import { Turnstile } from "@marsidev/react-turnstile";
|
||||||
import { motion, useInView } from "framer-motion";
|
import { motion, useInView } from "framer-motion";
|
||||||
import {
|
import {
|
||||||
AlertCircle,
|
AlertCircle,
|
||||||
CheckCircle2,
|
CheckCircle2,
|
||||||
Github,
|
Github,
|
||||||
Linkedin,
|
Linkedin,
|
||||||
Mail,
|
Mail,
|
||||||
Send,
|
Send,
|
||||||
Sparkles,
|
Sparkles,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useRef, useState } from "react";
|
import { useRef, useState } from "react";
|
||||||
|
|
||||||
const contactMethods = [
|
const contactMethods = [
|
||||||
{
|
{
|
||||||
icon: Mail,
|
icon: Mail,
|
||||||
label: "Email",
|
label: "Email",
|
||||||
value: "contact@jessy-david.dev",
|
value: "contact@jessy-david.dev",
|
||||||
href: "mailto:contact@jessy-david.dev",
|
href: "mailto:contact@jessy-david.dev",
|
||||||
color: "from-blue-500 to-cyan-500",
|
color: "from-blue-500 to-cyan-500",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Github,
|
icon: Github,
|
||||||
label: "GitHub",
|
label: "GitHub",
|
||||||
value: "@jessydavid",
|
value: "@jessydavid",
|
||||||
href: "https://github.com/jessydavid-dev",
|
href: "https://github.com/jessy-david-dev",
|
||||||
color: "from-slate-700 to-slate-900",
|
color: "from-slate-700 to-slate-900",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Linkedin,
|
icon: Linkedin,
|
||||||
label: "LinkedIn",
|
label: "LinkedIn",
|
||||||
value: "Jessy David",
|
value: "Jessy David",
|
||||||
href: "https://linkedin.com/in/jessy-david",
|
href: "https://linkedin.com/in/jessy-david",
|
||||||
color: "from-blue-600 to-blue-800",
|
color: "from-blue-600 to-blue-800",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Contact() {
|
export default function Contact() {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
||||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
const [captchaToken, setCaptchaToken] = useState<string>("");
|
const [captchaToken, setCaptchaToken] = useState<string>("");
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const form = e.currentTarget;
|
const form = e.currentTarget;
|
||||||
|
|
||||||
setIsSubmitting(true);
|
setIsSubmitting(true);
|
||||||
setError("");
|
setError("");
|
||||||
setIsSubmitted(false);
|
setIsSubmitted(false);
|
||||||
|
|
||||||
if (!captchaToken) {
|
if (!captchaToken) {
|
||||||
setError("Veuillez valider le captcha");
|
setError("Veuillez valider le captcha");
|
||||||
setIsSubmitting(false);
|
setIsSubmitting(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const formData = new FormData(form);
|
const formData = new FormData(form);
|
||||||
const data = {
|
const data = {
|
||||||
name: formData.get("name") as string,
|
name: formData.get("name") as string,
|
||||||
email: formData.get("email") as string,
|
email: formData.get("email") as string,
|
||||||
message: formData.get("message") as string,
|
message: formData.get("message") as string,
|
||||||
captchaToken,
|
captchaToken,
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/contact", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify(data),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const result = await response.json();
|
|
||||||
throw new Error(result.error || "Erreur lors de l'envoi");
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
console.log("Succès:", result);
|
|
||||||
|
|
||||||
setIsSubmitted(true);
|
|
||||||
form.reset();
|
|
||||||
setCaptchaToken("");
|
|
||||||
setTimeout(() => setIsSubmitted(false), 5000);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Erreur:", err);
|
|
||||||
setError(
|
|
||||||
err instanceof Error
|
|
||||||
? err.message
|
|
||||||
: "Impossible d'envoyer le message."
|
|
||||||
);
|
|
||||||
setCaptchaToken("");
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
try {
|
||||||
<section
|
const response = await fetch("/api/contact", {
|
||||||
id="contact"
|
method: "POST",
|
||||||
className="py-20 bg-slate-900 relative overflow-hidden"
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
throw new Error(result.error || "Erreur lors de l'envoi");
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
console.log("Succès:", result);
|
||||||
|
|
||||||
|
setIsSubmitted(true);
|
||||||
|
form.reset();
|
||||||
|
setCaptchaToken("");
|
||||||
|
setTimeout(() => setIsSubmitted(false), 5000);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Erreur:", err);
|
||||||
|
setError(
|
||||||
|
err instanceof Error ? err.message : "Impossible d'envoyer le message.",
|
||||||
|
);
|
||||||
|
setCaptchaToken("");
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
id="contact"
|
||||||
|
className="py-20 bg-slate-900 relative overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Grid Background */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 opacity-20"
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
|
||||||
|
backgroundSize: "60px 60px",
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
|
||||||
|
{/* Decorative blobs */}
|
||||||
|
<div className="absolute top-20 left-10 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||||
|
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div ref={ref} className="container mx-auto px-4 max-w-7xl relative z-10">
|
||||||
|
{/* Header */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="text-center mb-16"
|
||||||
>
|
>
|
||||||
{/* Grid Background */}
|
<div className="inline-flex items-center gap-2 bg-linear-to-r from-blue-500/10 to-purple-500/10 rounded-full px-4 py-2 mb-4">
|
||||||
<div
|
<Sparkles className="w-4 h-4 text-blue-400" />
|
||||||
className="absolute inset-0 opacity-20"
|
<span className="text-sm font-semibold text-slate-300">
|
||||||
style={{
|
Entrons en contact
|
||||||
backgroundImage:
|
</span>
|
||||||
"linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
|
</div>
|
||||||
backgroundSize: "60px 60px",
|
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||||
}}
|
Contactez-moi
|
||||||
></div>
|
</h2>
|
||||||
|
<p className="text-xl text-slate-400 max-w-2xl mx-auto">
|
||||||
|
Un projet en tête ? Une question ? N'hésitez pas à me contacter
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
{/* Decorative blobs */}
|
<div className="grid lg:grid-cols-2 gap-8">
|
||||||
<div className="absolute top-20 left-10 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
{/* Colonne de gauche - Méthodes de contact */}
|
||||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
<div
|
animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
|
||||||
ref={ref}
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
className="container mx-auto px-4 max-w-7xl relative z-10"
|
className="space-y-6"
|
||||||
>
|
>
|
||||||
{/* Header */}
|
{/* Cartes de contact */}
|
||||||
<motion.div
|
<div className="space-y-4">
|
||||||
initial={{ opacity: 0, y: 20 }}
|
{contactMethods.map((method, index) => (
|
||||||
animate={
|
<motion.a
|
||||||
isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
|
key={method.label}
|
||||||
}
|
href={method.href}
|
||||||
transition={{ duration: 0.6 }}
|
target="_blank"
|
||||||
className="text-center mb-16"
|
rel="noopener noreferrer"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={
|
||||||
|
isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
|
||||||
|
}
|
||||||
|
transition={{
|
||||||
|
duration: 0.5,
|
||||||
|
delay: 0.3 + index * 0.1,
|
||||||
|
}}
|
||||||
|
className="block group"
|
||||||
>
|
>
|
||||||
<div className="inline-flex items-center gap-2 bg-linear-to-r from-blue-500/10 to-purple-500/10 rounded-full px-4 py-2 mb-4">
|
<div className="relative bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6 hover:border-blue-500/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-blue-500/10">
|
||||||
<Sparkles className="w-4 h-4 text-blue-400" />
|
<div className="flex items-center gap-4">
|
||||||
<span className="text-sm font-semibold text-slate-300">
|
<div
|
||||||
Entrons en contact
|
className={`p-3 bg-linear-to-br ${method.color} rounded-xl group-hover:scale-110 transition-transform duration-300`}
|
||||||
</span>
|
>
|
||||||
|
<method.icon className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-sm font-semibold text-slate-400 mb-1">
|
||||||
|
{method.label}
|
||||||
|
</h3>
|
||||||
|
<p className="text-white font-semibold">
|
||||||
|
{method.value}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Send className="w-5 h-5 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-1 transition-all duration-300" />
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
</div>
|
||||||
Contactez-moi
|
</motion.a>
|
||||||
</h2>
|
))}
|
||||||
<p className="text-xl text-slate-400 max-w-2xl mx-auto">
|
|
||||||
Un projet en tête ? Une question ? N'hésitez pas à
|
|
||||||
me contacter
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<div className="grid lg:grid-cols-2 gap-8">
|
|
||||||
{/* Colonne de gauche - Méthodes de contact */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: -50 }}
|
|
||||||
animate={
|
|
||||||
isInView
|
|
||||||
? { opacity: 1, x: 0 }
|
|
||||||
: { opacity: 0, x: -50 }
|
|
||||||
}
|
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
|
||||||
className="space-y-6"
|
|
||||||
>
|
|
||||||
{/* Cartes de contact */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
{contactMethods.map((method, index) => (
|
|
||||||
<motion.a
|
|
||||||
key={method.label}
|
|
||||||
href={method.href}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={
|
|
||||||
isInView
|
|
||||||
? { opacity: 1, y: 0 }
|
|
||||||
: { opacity: 0, y: 20 }
|
|
||||||
}
|
|
||||||
transition={{
|
|
||||||
duration: 0.5,
|
|
||||||
delay: 0.3 + index * 0.1,
|
|
||||||
}}
|
|
||||||
className="block group"
|
|
||||||
>
|
|
||||||
<div className="relative bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6 hover:border-blue-500/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-blue-500/10">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div
|
|
||||||
className={`p-3 bg-linear-to-br ${method.color} rounded-xl group-hover:scale-110 transition-transform duration-300`}
|
|
||||||
>
|
|
||||||
<method.icon className="w-6 h-6 text-white" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h3 className="text-sm font-semibold text-slate-400 mb-1">
|
|
||||||
{method.label}
|
|
||||||
</h3>
|
|
||||||
<p className="text-white font-semibold">
|
|
||||||
{method.value}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Send className="w-5 h-5 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-1 transition-all duration-300" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Informations complémentaires */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={
|
|
||||||
isInView
|
|
||||||
? { opacity: 1, y: 0 }
|
|
||||||
: { opacity: 0, y: 20 }
|
|
||||||
}
|
|
||||||
transition={{ duration: 0.5, delay: 0.6 }}
|
|
||||||
className="bg-linear-to-br from-blue-500/10 to-purple-500/10 backdrop-blur-sm border border-blue-500/20 rounded-2xl p-6"
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div className="relative h-3 w-3 mt-1">
|
|
||||||
{/* Effet ping */}
|
|
||||||
<span className="absolute h-3 w-3 rounded-full bg-green-500 opacity-75 animate-ping"></span>
|
|
||||||
{/* Pastille fixe */}
|
|
||||||
<span className="absolute h-3 w-3 rounded-full bg-green-500"></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-white font-semibold mb-2">
|
|
||||||
Disponibilité
|
|
||||||
</h3>
|
|
||||||
<p className="text-slate-400">
|
|
||||||
Actuellement disponible pour vos
|
|
||||||
projets.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Colonne de droite - Formulaire de contact */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: 50 }}
|
|
||||||
animate={
|
|
||||||
isInView
|
|
||||||
? { opacity: 1, x: 0 }
|
|
||||||
: { opacity: 0, x: 50 }
|
|
||||||
}
|
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
|
||||||
>
|
|
||||||
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-8">
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="name"
|
|
||||||
className="block text-sm font-semibold text-slate-300 mb-2"
|
|
||||||
>
|
|
||||||
Nom
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="w-full px-4 py-3 bg-slate-900/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
placeholder="Votre Nom et Prénom"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="email"
|
|
||||||
className="block text-sm font-semibold text-slate-300 mb-2"
|
|
||||||
>
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
required
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="w-full px-4 py-3 bg-slate-900/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
placeholder="votre@email.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="message"
|
|
||||||
className="block text-sm font-semibold text-slate-300 mb-2"
|
|
||||||
>
|
|
||||||
Message
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="message"
|
|
||||||
name="message"
|
|
||||||
rows={5}
|
|
||||||
required
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="w-full px-4 py-3 bg-slate-900/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 resize-none disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
placeholder="Parlez-moi de votre projet..."
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Cloudflare Turnstile */}
|
|
||||||
<div className="flex justify-center">
|
|
||||||
<Turnstile
|
|
||||||
siteKey={
|
|
||||||
process.env
|
|
||||||
.NEXT_PUBLIC_TURNSTILE_SITE_KEY ||
|
|
||||||
""
|
|
||||||
}
|
|
||||||
onSuccess={(token) =>
|
|
||||||
setCaptchaToken(token)
|
|
||||||
}
|
|
||||||
onError={() => setCaptchaToken("")}
|
|
||||||
onExpire={() => setCaptchaToken("")}
|
|
||||||
options={{
|
|
||||||
theme: "dark",
|
|
||||||
size: "normal",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Message d'erreur */}
|
|
||||||
{error && (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: -10 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
className="flex items-center gap-2 p-4 bg-red-500/10 border border-red-500/50 rounded-lg text-red-400 text-sm"
|
|
||||||
>
|
|
||||||
<AlertCircle className="w-5 h-5 shrink-0" />
|
|
||||||
<span>{error}</span>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Message de succès */}
|
|
||||||
{isSubmitted && (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: -10 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
className="flex items-center gap-2 p-4 bg-green-500/10 border border-green-500/50 rounded-lg text-green-400 text-sm"
|
|
||||||
>
|
|
||||||
<CheckCircle2 className="w-5 h-5 shrink-0" />
|
|
||||||
<span>
|
|
||||||
Message envoyé avec succès ! Je vous
|
|
||||||
répondrai bientôt.
|
|
||||||
</span>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={
|
|
||||||
isSubmitting ||
|
|
||||||
isSubmitted ||
|
|
||||||
!captchaToken
|
|
||||||
}
|
|
||||||
className="w-full relative group disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
<div className="absolute inset-0 bg-linear-to-r from-blue-600 to-purple-600 rounded-lg opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
|
|
||||||
<div className="absolute inset-0 bg-linear-to-r from-purple-600 to-blue-600 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
||||||
|
|
||||||
<div className="relative px-8 py-3 text-white font-semibold flex items-center justify-center gap-2">
|
|
||||||
{isSubmitting ? (
|
|
||||||
<>
|
|
||||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
|
||||||
Envoi en cours...
|
|
||||||
</>
|
|
||||||
) : isSubmitted ? (
|
|
||||||
<>
|
|
||||||
<CheckCircle2 className="w-5 h-5" />
|
|
||||||
Message envoyé !
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Send className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" />
|
|
||||||
Envoyer le message
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
);
|
{/* Informations complémentaires */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.6 }}
|
||||||
|
className="bg-linear-to-br from-blue-500/10 to-purple-500/10 backdrop-blur-sm border border-blue-500/20 rounded-2xl p-6"
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="relative h-3 w-3 mt-1">
|
||||||
|
{/* Effet ping */}
|
||||||
|
<span className="absolute h-3 w-3 rounded-full bg-green-500 opacity-75 animate-ping"></span>
|
||||||
|
{/* Pastille fixe */}
|
||||||
|
<span className="absolute h-3 w-3 rounded-full bg-green-500"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-white font-semibold mb-2">
|
||||||
|
Disponibilité
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-400">
|
||||||
|
Actuellement disponible pour vos projets.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Colonne de droite - Formulaire de contact */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 50 }}
|
||||||
|
animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-8">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="name"
|
||||||
|
className="block text-sm font-semibold text-slate-300 mb-2"
|
||||||
|
>
|
||||||
|
Nom
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
required
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="w-full px-4 py-3 bg-slate-900/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
placeholder="Votre Nom et Prénom"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="email"
|
||||||
|
className="block text-sm font-semibold text-slate-300 mb-2"
|
||||||
|
>
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
required
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="w-full px-4 py-3 bg-slate-900/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
placeholder="votre@email.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="message"
|
||||||
|
className="block text-sm font-semibold text-slate-300 mb-2"
|
||||||
|
>
|
||||||
|
Message
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
name="message"
|
||||||
|
rows={5}
|
||||||
|
required
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="w-full px-4 py-3 bg-slate-900/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 resize-none disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
placeholder="Parlez-moi de votre projet..."
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cloudflare Turnstile */}
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<Turnstile
|
||||||
|
siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || ""}
|
||||||
|
onSuccess={(token) => setCaptchaToken(token)}
|
||||||
|
onError={() => setCaptchaToken("")}
|
||||||
|
onExpire={() => setCaptchaToken("")}
|
||||||
|
options={{
|
||||||
|
theme: "dark",
|
||||||
|
size: "normal",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message d'erreur */}
|
||||||
|
{error && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: -10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="flex items-center gap-2 p-4 bg-red-500/10 border border-red-500/50 rounded-lg text-red-400 text-sm"
|
||||||
|
>
|
||||||
|
<AlertCircle className="w-5 h-5 shrink-0" />
|
||||||
|
<span>{error}</span>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Message de succès */}
|
||||||
|
{isSubmitted && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: -10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="flex items-center gap-2 p-4 bg-green-500/10 border border-green-500/50 rounded-lg text-green-400 text-sm"
|
||||||
|
>
|
||||||
|
<CheckCircle2 className="w-5 h-5 shrink-0" />
|
||||||
|
<span>
|
||||||
|
Message envoyé avec succès ! Je vous répondrai bientôt.
|
||||||
|
</span>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSubmitting || isSubmitted || !captchaToken}
|
||||||
|
className="w-full relative group disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-linear-to-r from-blue-600 to-purple-600 rounded-lg opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
|
||||||
|
<div className="absolute inset-0 bg-linear-to-r from-purple-600 to-blue-600 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||||
|
|
||||||
|
<div className="relative px-8 py-3 text-white font-semibold flex items-center justify-center gap-2">
|
||||||
|
{isSubmitting ? (
|
||||||
|
<>
|
||||||
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||||||
|
Envoi en cours...
|
||||||
|
</>
|
||||||
|
) : isSubmitted ? (
|
||||||
|
<>
|
||||||
|
<CheckCircle2 className="w-5 h-5" />
|
||||||
|
Message envoyé !
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Send className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" />
|
||||||
|
Envoyer le message
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+85
-85
@@ -5,94 +5,94 @@ import { motion, useInView } from "framer-motion";
|
|||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
|
|
||||||
export default function Hero() {
|
export default function Hero() {
|
||||||
const ref = useRef<HTMLElement>(null);
|
const ref = useRef<HTMLElement>(null);
|
||||||
const isInView = useInView(ref, { amount: 0.3 });
|
const isInView = useInView(ref, { amount: 0.3 });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
id="home"
|
id="home"
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className="min-h-screen flex items-center justify-center relative bg-slate-900"
|
className="min-h-screen flex items-center justify-center relative bg-slate-900"
|
||||||
|
>
|
||||||
|
{/* Grid Background animée */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: isInView ? 1 : 0 }}
|
||||||
|
transition={{ duration: 1 }}
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
|
||||||
|
backgroundSize: "100px 100px",
|
||||||
|
}}
|
||||||
|
></motion.div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<motion.div
|
||||||
|
className="container mx-auto px-4 text-center relative z-10"
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{
|
||||||
|
opacity: isInView ? 1 : 0,
|
||||||
|
y: isInView ? 0 : 30,
|
||||||
|
}}
|
||||||
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<motion.h1
|
||||||
|
className="text-5xl md:text-7xl font-bold text-white mb-6"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{
|
||||||
|
opacity: isInView ? 1 : 0,
|
||||||
|
y: isInView ? 0 : 20,
|
||||||
|
}}
|
||||||
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||||||
>
|
>
|
||||||
{/* Grid Background animée */}
|
Bonjour👋, je suis{" "}
|
||||||
<motion.div
|
<span className="text-transparent bg-clip-text bg-linear-to-r from-blue-400 to-purple-600">
|
||||||
className="absolute inset-0"
|
Jessy
|
||||||
initial={{ opacity: 0 }}
|
</span>
|
||||||
animate={{ opacity: isInView ? 1 : 0 }}
|
</motion.h1>
|
||||||
transition={{ duration: 1 }}
|
|
||||||
style={{
|
|
||||||
backgroundImage:
|
|
||||||
"linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
|
|
||||||
backgroundSize: "100px 100px",
|
|
||||||
}}
|
|
||||||
></motion.div>
|
|
||||||
|
|
||||||
{/* Content */}
|
<motion.p
|
||||||
<motion.div
|
className="text-xl md:text-2xl text-slate-300 mb-8"
|
||||||
className="container mx-auto px-4 text-center relative z-10"
|
initial={{ opacity: 0, y: 20 }}
|
||||||
initial={{ opacity: 0, y: 30 }}
|
animate={{
|
||||||
animate={{
|
opacity: isInView ? 1 : 0,
|
||||||
opacity: isInView ? 1 : 0,
|
y: isInView ? 0 : 20,
|
||||||
y: isInView ? 0 : 30,
|
}}
|
||||||
}}
|
transition={{ duration: 0.8, delay: 0.6 }}
|
||||||
transition={{ duration: 0.8, delay: 0.2 }}
|
>
|
||||||
>
|
Développeur Full Stack | Créateur d'expériences web
|
||||||
<motion.h1
|
</motion.p>
|
||||||
className="text-5xl md:text-7xl font-bold text-white mb-6"
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{
|
|
||||||
opacity: isInView ? 1 : 0,
|
|
||||||
y: isInView ? 0 : 20,
|
|
||||||
}}
|
|
||||||
transition={{ duration: 0.8, delay: 0.4 }}
|
|
||||||
>
|
|
||||||
Bonjour👋, je suis{" "}
|
|
||||||
<span className="text-transparent bg-clip-text bg-linear-to-r from-blue-400 to-purple-600">
|
|
||||||
Jessy
|
|
||||||
</span>
|
|
||||||
</motion.h1>
|
|
||||||
|
|
||||||
<motion.p
|
<motion.div
|
||||||
className="text-xl md:text-2xl text-slate-300 mb-8"
|
className="flex gap-4 justify-center flex-wrap"
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{
|
animate={{
|
||||||
opacity: isInView ? 1 : 0,
|
opacity: isInView ? 1 : 0,
|
||||||
y: isInView ? 0 : 20,
|
y: isInView ? 0 : 20,
|
||||||
}}
|
}}
|
||||||
transition={{ duration: 0.8, delay: 0.6 }}
|
transition={{ duration: 0.8, delay: 0.8 }}
|
||||||
>
|
>
|
||||||
Développeur Full Stack | Créateur d'expériences web
|
<GlowButton href="#projects" variant="secondary">
|
||||||
</motion.p>
|
Voir mes projets
|
||||||
|
</GlowButton>
|
||||||
|
|
||||||
<motion.div
|
<GlowButton href="#contact" variant="primary">
|
||||||
className="flex gap-4 justify-center flex-wrap"
|
Me contacter
|
||||||
initial={{ opacity: 0, y: 20 }}
|
</GlowButton>
|
||||||
animate={{
|
</motion.div>
|
||||||
opacity: isInView ? 1 : 0,
|
<motion.cite
|
||||||
y: isInView ? 0 : 20,
|
className="block text-slate-400 italic mt-8 text-sm md:text-base"
|
||||||
}}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
transition={{ duration: 0.8, delay: 0.8 }}
|
animate={{
|
||||||
>
|
opacity: isInView ? 1 : 0,
|
||||||
<GlowButton href="#projects" variant="secondary">
|
y: isInView ? 0 : 20,
|
||||||
Voir mes projets
|
}}
|
||||||
</GlowButton>
|
transition={{ duration: 0.8, delay: 1 }}
|
||||||
|
>
|
||||||
<GlowButton href="#contact" variant="primary">
|
C'est une bonne situation ça, développeur Full Stack ?
|
||||||
Me contacter
|
</motion.cite>
|
||||||
</GlowButton>
|
</motion.div>
|
||||||
</motion.div>
|
</section>
|
||||||
<motion.cite
|
);
|
||||||
className="block text-slate-400 italic mt-8 text-sm md:text-base"
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{
|
|
||||||
opacity: isInView ? 1 : 0,
|
|
||||||
y: isInView ? 0 : 20,
|
|
||||||
}}
|
|
||||||
transition={{ duration: 0.8, delay: 1 }}
|
|
||||||
>
|
|
||||||
C'est une bonne situation ça, développeur Full Stack ?
|
|
||||||
</motion.cite>
|
|
||||||
</motion.div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
+178
-206
@@ -6,221 +6,193 @@ import Image from "next/image";
|
|||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
|
|
||||||
const projects = [
|
const projects = [
|
||||||
{
|
{
|
||||||
title: "Portfolio",
|
title: "Portfolio",
|
||||||
description:
|
description:
|
||||||
"Portfolio moderne et interactif avec animations fluides et design épuré.",
|
"Portfolio moderne et interactif avec animations fluides et design épuré.",
|
||||||
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
||||||
link: "/",
|
link: "/",
|
||||||
github: "https://github.com/jessydavid-dev/jessy-david.dev",
|
github: "https://github.com/jessy-david-dev/jessy-david.dev",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ultralion.xyz",
|
title: "ultralion.xyz",
|
||||||
description:
|
description:
|
||||||
"Portfolio professionnel et moderne pour UltraLion avec design épuré et optimisé.",
|
"Portfolio professionnel et moderne pour UltraLion avec design épuré et optimisé.",
|
||||||
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
||||||
link: "https://ultralion.xyz",
|
link: "https://v1.jessy-david.dev",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Radio Box",
|
title: "Radio Box",
|
||||||
description:
|
description:
|
||||||
"Bot Discord permettant d'écouter des web radios dans un salon vocal avec interface intuitive.",
|
"Bot Discord permettant d'écouter des web radios dans un salon vocal avec interface intuitive.",
|
||||||
tags: ["Discord.js", "JavaScript", "Prisma"],
|
tags: ["Discord.js", "JavaScript", "Prisma"],
|
||||||
link: "https://radio-box.app",
|
link: "https://radio-box.app",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "QuantumCraft Studios",
|
title: "QuantumCraft Studios",
|
||||||
description:
|
description:
|
||||||
"Plateforme d'hébergement de serveurs de jeux avec panel d'administration complet.",
|
"Plateforme d'hébergement de serveurs de jeux avec panel d'administration complet.",
|
||||||
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
||||||
link: "https://quantumcraft-studios.com",
|
link: "https://quantumcraft-studios.com",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "bôba là",
|
title: "bôba là",
|
||||||
description:
|
description: "Application web de fidélité client avec système de points.",
|
||||||
"Application web de fidélité client avec système de points.",
|
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
||||||
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
link: "https://fidelite.boba-la.fr",
|
||||||
link: "https://fidelite.boba-la.fr",
|
collaborators: [
|
||||||
collaborators: [
|
{
|
||||||
{
|
name: "Philippe",
|
||||||
name: "Philippe",
|
github: "https://github.com/PHlLlPPE",
|
||||||
github: "https://github.com/PHlLlPPE",
|
avatar: "https://github.com/PHlLlPPE.png",
|
||||||
avatar: "https://github.com/PHlLlPPE.png",
|
},
|
||||||
},
|
],
|
||||||
],
|
},
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Projects() {
|
export default function Projects() {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
||||||
|
|
||||||
const containerVariants = {
|
const containerVariants = {
|
||||||
hidden: { opacity: 0 },
|
hidden: { opacity: 0 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: {
|
transition: {
|
||||||
staggerChildren: 0.1,
|
staggerChildren: 0.1,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const itemVariants = {
|
const itemVariants = {
|
||||||
hidden: { opacity: 0, y: 20 },
|
hidden: { opacity: 0, y: 20 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
y: 0,
|
y: 0,
|
||||||
transition: { duration: 0.5 },
|
transition: { duration: 0.5 },
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
id="projects"
|
id="projects"
|
||||||
className="py-20 bg-slate-50 relative overflow-hidden"
|
className="py-20 bg-slate-50 relative overflow-hidden"
|
||||||
|
>
|
||||||
|
<div ref={ref} className="container mx-auto px-4 max-w-6xl relative z-10">
|
||||||
|
{/* Header */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="text-center mb-16"
|
||||||
>
|
>
|
||||||
<div
|
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||||
ref={ref}
|
Mes Projets
|
||||||
className="container mx-auto px-4 max-w-6xl relative z-10"
|
</h2>
|
||||||
>
|
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||||
{/* Header */}
|
Une sélection de mes réalisations récentes
|
||||||
<motion.div
|
</p>
|
||||||
initial={{ opacity: 0, y: 20 }}
|
</motion.div>
|
||||||
animate={
|
|
||||||
isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
|
|
||||||
}
|
|
||||||
transition={{ duration: 0.6 }}
|
|
||||||
className="text-center mb-16"
|
|
||||||
>
|
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
|
||||||
Mes Projets
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
|
||||||
Une sélection de mes réalisations récentes
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Projects Grid - 2 colonnes */}
|
{/* Projects Grid - 2 colonnes */}
|
||||||
<motion.div
|
<motion.div
|
||||||
variants={containerVariants}
|
variants={containerVariants}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
animate={isInView ? "visible" : "hidden"}
|
animate={isInView ? "visible" : "hidden"}
|
||||||
className="grid md:grid-cols-2 gap-6"
|
className="grid md:grid-cols-2 gap-6"
|
||||||
>
|
>
|
||||||
{projects.map((project, index) => (
|
{projects.map((project, index) => (
|
||||||
<motion.div
|
<motion.div key={index} variants={itemVariants} className="group">
|
||||||
key={index}
|
<div className="h-full bg-white rounded-xl border border-slate-200 hover:border-slate-900 transition-all duration-300 hover:shadow-lg overflow-hidden">
|
||||||
variants={itemVariants}
|
{/* Card content */}
|
||||||
className="group"
|
<div className="p-6">
|
||||||
>
|
{/* Title */}
|
||||||
<div className="h-full bg-white rounded-xl border border-slate-200 hover:border-slate-900 transition-all duration-300 hover:shadow-lg overflow-hidden">
|
<h3 className="text-xl font-bold text-slate-900 mb-3">
|
||||||
{/* Card content */}
|
{project.title}
|
||||||
<div className="p-6">
|
</h3>
|
||||||
{/* Title */}
|
|
||||||
<h3 className="text-xl font-bold text-slate-900 mb-3">
|
|
||||||
{project.title}
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
<p className="text-slate-600 mb-4 text-sm leading-relaxed">
|
<p className="text-slate-600 mb-4 text-sm leading-relaxed">
|
||||||
{project.description}
|
{project.description}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Tags */}
|
{/* Tags */}
|
||||||
<div className="flex flex-wrap gap-2 mb-6">
|
<div className="flex flex-wrap gap-2 mb-6">
|
||||||
{project.tags.map((tag) => (
|
{project.tags.map((tag) => (
|
||||||
<span
|
<span
|
||||||
key={tag}
|
key={tag}
|
||||||
className="px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-medium"
|
className="px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-medium"
|
||||||
>
|
>
|
||||||
{tag}
|
{tag}
|
||||||
</span>
|
</span>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Collaborators */}
|
|
||||||
{project.collaborators &&
|
|
||||||
project.collaborators.length > 0 && (
|
|
||||||
<div className="mb-6 pb-6 border-b border-slate-100">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{project.collaborators.map(
|
|
||||||
(collab, idx) => (
|
|
||||||
<a
|
|
||||||
key={idx}
|
|
||||||
href={
|
|
||||||
collab.github
|
|
||||||
}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="group/collab flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900 transition-colors"
|
|
||||||
>
|
|
||||||
<div className="w-6 h-6 rounded-full overflow-hidden border border-slate-200 group-hover/collab:border-slate-900 transition-colors">
|
|
||||||
<Image
|
|
||||||
src={
|
|
||||||
collab.avatar
|
|
||||||
}
|
|
||||||
alt={
|
|
||||||
collab.name
|
|
||||||
}
|
|
||||||
width={
|
|
||||||
24
|
|
||||||
}
|
|
||||||
height={
|
|
||||||
24
|
|
||||||
}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs font-medium">
|
|
||||||
{
|
|
||||||
collab.name
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Links */}
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<a
|
|
||||||
href={project.link}
|
|
||||||
target={
|
|
||||||
project.link.startsWith("/")
|
|
||||||
? "_self"
|
|
||||||
: "_blank"
|
|
||||||
}
|
|
||||||
rel={
|
|
||||||
project.link.startsWith("/")
|
|
||||||
? ""
|
|
||||||
: "noopener noreferrer"
|
|
||||||
}
|
|
||||||
className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors group/btn"
|
|
||||||
>
|
|
||||||
<span>Voir</span>
|
|
||||||
<ExternalLink className="w-4 h-4 group-hover/btn:translate-x-0.5 transition-transform" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{project.github && (
|
|
||||||
<a
|
|
||||||
href={project.github}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="flex items-center justify-center p-2 border border-slate-200 hover:border-slate-900 rounded-lg transition-colors group/github"
|
|
||||||
title="GitHub"
|
|
||||||
>
|
|
||||||
<Github className="w-4 h-4 text-slate-600 group-hover/github:text-slate-900" />
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
))}
|
||||||
</motion.div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
{/* Collaborators */}
|
||||||
);
|
{project.collaborators &&
|
||||||
|
project.collaborators.length > 0 && (
|
||||||
|
<div className="mb-6 pb-6 border-b border-slate-100">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{project.collaborators.map((collab, idx) => (
|
||||||
|
<a
|
||||||
|
key={idx}
|
||||||
|
href={collab.github}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group/collab flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="w-6 h-6 rounded-full overflow-hidden border border-slate-200 group-hover/collab:border-slate-900 transition-colors">
|
||||||
|
<Image
|
||||||
|
src={collab.avatar}
|
||||||
|
alt={collab.name}
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-medium">
|
||||||
|
{collab.name}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Links */}
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<a
|
||||||
|
href={project.link}
|
||||||
|
target={project.link.startsWith("/") ? "_self" : "_blank"}
|
||||||
|
rel={
|
||||||
|
project.link.startsWith("/")
|
||||||
|
? ""
|
||||||
|
: "noopener noreferrer"
|
||||||
|
}
|
||||||
|
className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors group/btn"
|
||||||
|
>
|
||||||
|
<span>Voir</span>
|
||||||
|
<ExternalLink className="w-4 h-4 group-hover/btn:translate-x-0.5 transition-transform" />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{project.github && (
|
||||||
|
<a
|
||||||
|
href={project.github}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center justify-center p-2 border border-slate-200 hover:border-slate-900 rounded-lg transition-colors group/github"
|
||||||
|
title="GitHub"
|
||||||
|
>
|
||||||
|
<Github className="w-4 h-4 text-slate-600 group-hover/github:text-slate-900" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+215
-242
@@ -2,260 +2,233 @@
|
|||||||
|
|
||||||
import { motion, useInView } from "framer-motion";
|
import { motion, useInView } from "framer-motion";
|
||||||
import {
|
import {
|
||||||
Code2,
|
Code2,
|
||||||
Layers,
|
Layers,
|
||||||
Server,
|
Server,
|
||||||
Sparkles,
|
Sparkles,
|
||||||
TrendingUp,
|
TrendingUp,
|
||||||
Wrench,
|
Wrench,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
|
|
||||||
const skills = {
|
const skills = {
|
||||||
frontend: {
|
frontend: {
|
||||||
category: "Frontend",
|
category: "Frontend",
|
||||||
icon: Code2,
|
icon: Code2,
|
||||||
color: "from-blue-500 to-cyan-500",
|
color: "from-blue-500 to-cyan-500",
|
||||||
items: [
|
items: [
|
||||||
"React",
|
"React",
|
||||||
"Next.js",
|
"Next.js",
|
||||||
"TypeScript",
|
"TypeScript",
|
||||||
"Tailwind CSS",
|
"Tailwind CSS",
|
||||||
"Bootstrap",
|
"Bootstrap",
|
||||||
"HTML/CSS",
|
"HTML/CSS",
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
backend: {
|
backend: {
|
||||||
category: "Backend",
|
category: "Backend",
|
||||||
icon: Server,
|
icon: Server,
|
||||||
color: "from-purple-500 to-pink-500",
|
color: "from-purple-500 to-pink-500",
|
||||||
items: ["Node.js", "Express", "PostgreSQL", "MongoDB", "REST API"],
|
items: ["Node.js", "Express", "PostgreSQL", "MongoDB", "REST API"],
|
||||||
},
|
},
|
||||||
tools: {
|
tools: {
|
||||||
category: "Outils",
|
category: "Outils",
|
||||||
icon: Wrench,
|
icon: Wrench,
|
||||||
color: "from-orange-500 to-red-500",
|
color: "from-orange-500 to-red-500",
|
||||||
items: [
|
items: ["Github", "Docker", "VS Code", "Linux", "Cloudflare", "Proxmox"],
|
||||||
"Github",
|
},
|
||||||
"Docker",
|
|
||||||
"VS Code",
|
|
||||||
"Linux",
|
|
||||||
"Cloudflare",
|
|
||||||
"Proxmox",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Skills() {
|
export default function Skills() {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
||||||
|
|
||||||
const containerVariants = {
|
const containerVariants = {
|
||||||
hidden: { opacity: 0 },
|
hidden: { opacity: 0 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: {
|
transition: {
|
||||||
staggerChildren: 0.1,
|
staggerChildren: 0.1,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const itemVariants = {
|
const itemVariants = {
|
||||||
hidden: { opacity: 0, y: 20 },
|
hidden: { opacity: 0, y: 20 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
y: 0,
|
y: 0,
|
||||||
transition: { duration: 0.5 },
|
transition: { duration: 0.5 },
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section id="skills" className="py-20 bg-white relative overflow-hidden">
|
||||||
id="skills"
|
{/* Decorative blobs */}
|
||||||
className="py-20 bg-white relative overflow-hidden"
|
<div className="absolute top-0 left-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||||
|
<div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div ref={ref} className="container mx-auto px-4 max-w-7xl relative z-10">
|
||||||
|
{/* Header */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="text-center mb-16"
|
||||||
>
|
>
|
||||||
{/* Decorative blobs */}
|
<div className="inline-flex items-center gap-2 bg-linear-to-r from-blue-500/10 to-purple-500/10 rounded-full px-4 py-2 mb-4">
|
||||||
<div className="absolute top-0 left-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl"></div>
|
<Sparkles className="w-4 h-4 text-blue-600" />
|
||||||
<div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl"></div>
|
<span className="text-sm font-semibold text-slate-700">
|
||||||
|
Expertise
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||||
|
Compétences & Technologies
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-slate-600 max-w-2xl mx-auto">
|
||||||
|
Un ensemble de technologies modernes maîtrisées pour créer des
|
||||||
|
applications web performantes et innovantes
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
<div
|
{/* Bento Grid */}
|
||||||
ref={ref}
|
<motion.div
|
||||||
className="container mx-auto px-4 max-w-7xl relative z-10"
|
variants={containerVariants}
|
||||||
>
|
initial="hidden"
|
||||||
{/* Header */}
|
animate={isInView ? "visible" : "hidden"}
|
||||||
<motion.div
|
className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-6"
|
||||||
initial={{ opacity: 0, y: 20 }}
|
>
|
||||||
animate={
|
{/* Frontend - Large card */}
|
||||||
isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
|
<motion.div variants={itemVariants} className="md:col-span-7 group">
|
||||||
}
|
<div className="relative h-full bg-linear-to-br from-blue-500 to-cyan-500 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
||||||
transition={{ duration: 0.6 }}
|
{/* Decorative circles */}
|
||||||
className="text-center mb-16"
|
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
|
||||||
>
|
<div className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
|
||||||
<div className="inline-flex items-center gap-2 bg-linear-to-r from-blue-500/10 to-purple-500/10 rounded-full px-4 py-2 mb-4">
|
|
||||||
<Sparkles className="w-4 h-4 text-blue-600" />
|
<div className="relative z-10">
|
||||||
<span className="text-sm font-semibold text-slate-700">
|
<div className="flex items-center gap-3 mb-6">
|
||||||
Expertise
|
<div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl group-hover:scale-110 transition-transform duration-300">
|
||||||
</span>
|
<skills.frontend.icon className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold text-white">
|
||||||
|
{skills.frontend.category}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{skills.frontend.items.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item}
|
||||||
|
className="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-3 text-white font-semibold hover:bg-white/30 transition-colors cursor-default"
|
||||||
|
>
|
||||||
|
{item}
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
))}
|
||||||
Compétences & Technologies
|
</div>
|
||||||
</h2>
|
</div>
|
||||||
<p className="text-xl text-slate-600 max-w-2xl mx-auto">
|
|
||||||
Un ensemble de technologies modernes maîtrisées pour
|
|
||||||
créer des applications web performantes et innovantes
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Bento Grid */}
|
|
||||||
<motion.div
|
|
||||||
variants={containerVariants}
|
|
||||||
initial="hidden"
|
|
||||||
animate={isInView ? "visible" : "hidden"}
|
|
||||||
className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-6"
|
|
||||||
>
|
|
||||||
{/* Frontend - Large card */}
|
|
||||||
<motion.div
|
|
||||||
variants={itemVariants}
|
|
||||||
className="md:col-span-7 group"
|
|
||||||
>
|
|
||||||
<div className="relative h-full bg-linear-to-br from-blue-500 to-cyan-500 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
|
||||||
{/* Decorative circles */}
|
|
||||||
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
|
|
||||||
<div className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
|
|
||||||
|
|
||||||
<div className="relative z-10">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl group-hover:scale-110 transition-transform duration-300">
|
|
||||||
<skills.frontend.icon className="w-8 h-8 text-white" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-3xl font-bold text-white">
|
|
||||||
{skills.frontend.category}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
{skills.frontend.items.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item}
|
|
||||||
className="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-3 text-white font-semibold hover:bg-white/30 transition-colors cursor-default"
|
|
||||||
>
|
|
||||||
{item}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Backend - Medium card */}
|
|
||||||
<motion.div
|
|
||||||
variants={itemVariants}
|
|
||||||
className="md:col-span-5 group"
|
|
||||||
>
|
|
||||||
<div className="relative h-full bg-linear-to-br from-purple-500 to-pink-500 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
|
||||||
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
|
|
||||||
|
|
||||||
<div className="relative z-10">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl group-hover:scale-110 transition-transform duration-300">
|
|
||||||
<skills.backend.icon className="w-8 h-8 text-white" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-3xl font-bold text-white">
|
|
||||||
{skills.backend.category}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
{skills.backend.items.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item}
|
|
||||||
className="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-3 text-center text-white font-semibold hover:bg-white/30 transition-colors cursor-default"
|
|
||||||
>
|
|
||||||
{item}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Tools - Medium card */}
|
|
||||||
<motion.div
|
|
||||||
variants={itemVariants}
|
|
||||||
className="md:col-span-5 group"
|
|
||||||
>
|
|
||||||
<div className="relative h-full bg-linear-to-br from-orange-500 to-red-500 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
|
||||||
<div className="absolute -top-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
|
|
||||||
|
|
||||||
<div className="relative z-10">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl group-hover:scale-110 transition-transform duration-300">
|
|
||||||
<skills.tools.icon className="w-8 h-8 text-white" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-3xl font-bold text-white">
|
|
||||||
{skills.tools.category}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
{skills.tools.items.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item}
|
|
||||||
className="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-3 text-center text-white font-semibold hover:bg-white/30 transition-colors cursor-default"
|
|
||||||
>
|
|
||||||
{item}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Additional info card */}
|
|
||||||
<motion.div
|
|
||||||
variants={itemVariants}
|
|
||||||
className="md:col-span-7 group"
|
|
||||||
>
|
|
||||||
<div className="relative h-full bg-slate-900 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
|
||||||
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
|
|
||||||
<div className="absolute bottom-0 left-0 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div className="relative z-10">
|
|
||||||
<div className="flex items-start justify-between mb-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Layers className="w-8 h-8 text-blue-400" />
|
|
||||||
<h3 className="text-2xl font-bold text-white">
|
|
||||||
Stack Full-Stack
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<TrendingUp className="w-6 h-6 text-green-400" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-slate-300 text-lg leading-relaxed mb-6">
|
|
||||||
Une expertise complète du développement web
|
|
||||||
moderne, du design à la mise en production.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3 mb-6">
|
|
||||||
<div className="bg-slate-800/50 backdrop-blur-sm rounded-xl p-4 border border-slate-700">
|
|
||||||
<div className="text-3xl font-bold text-blue-400 mb-1">
|
|
||||||
3+
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-slate-400">
|
|
||||||
Années d'expérience
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="bg-slate-800/50 backdrop-blur-sm rounded-xl p-4 border border-slate-700">
|
|
||||||
<div className="text-3xl font-bold text-purple-400 mb-1">
|
|
||||||
15+
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-slate-400">
|
|
||||||
Projets réalisés
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</motion.div>
|
||||||
);
|
|
||||||
|
{/* Backend - Medium card */}
|
||||||
|
<motion.div variants={itemVariants} className="md:col-span-5 group">
|
||||||
|
<div className="relative h-full bg-linear-to-br from-purple-500 to-pink-500 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
||||||
|
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
|
||||||
|
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl group-hover:scale-110 transition-transform duration-300">
|
||||||
|
<skills.backend.icon className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold text-white">
|
||||||
|
{skills.backend.category}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{skills.backend.items.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item}
|
||||||
|
className="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-3 text-center text-white font-semibold hover:bg-white/30 transition-colors cursor-default"
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Tools - Medium card */}
|
||||||
|
<motion.div variants={itemVariants} className="md:col-span-5 group">
|
||||||
|
<div className="relative h-full bg-linear-to-br from-orange-500 to-red-500 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
||||||
|
<div className="absolute -top-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
|
||||||
|
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl group-hover:scale-110 transition-transform duration-300">
|
||||||
|
<skills.tools.icon className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold text-white">
|
||||||
|
{skills.tools.category}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{skills.tools.items.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item}
|
||||||
|
className="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-3 text-center text-white font-semibold hover:bg-white/30 transition-colors cursor-default"
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Additional info card */}
|
||||||
|
<motion.div variants={itemVariants} className="md:col-span-7 group">
|
||||||
|
<div className="relative h-full bg-slate-900 rounded-3xl p-8 overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
||||||
|
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||||
|
<div className="absolute bottom-0 left-0 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Layers className="w-8 h-8 text-blue-400" />
|
||||||
|
<h3 className="text-2xl font-bold text-white">
|
||||||
|
Stack Full-Stack
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<TrendingUp className="w-6 h-6 text-green-400" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-slate-300 text-lg leading-relaxed mb-6">
|
||||||
|
Une expertise complète du développement web moderne, du design
|
||||||
|
à la mise en production.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3 mb-6">
|
||||||
|
<div className="bg-slate-800/50 backdrop-blur-sm rounded-xl p-4 border border-slate-700">
|
||||||
|
<div className="text-3xl font-bold text-blue-400 mb-1">
|
||||||
|
3+
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-slate-400">
|
||||||
|
Années d'expérience
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-800/50 backdrop-blur-sm rounded-xl p-4 border border-slate-700">
|
||||||
|
<div className="text-3xl font-bold text-purple-400 mb-1">
|
||||||
|
15+
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-slate-400">
|
||||||
|
Projets réalisés
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+9
-9
@@ -1,11 +1,11 @@
|
|||||||
export const siteConfig = {
|
export const siteConfig = {
|
||||||
name: "Jessy David",
|
name: "Jessy David",
|
||||||
description: "Développeur Web Full-Stack | React, Next.js, Node.js",
|
description: "Développeur Web Full-Stack | React, Next.js, Node.js",
|
||||||
url: "https://jessydavid.dev",
|
url: "https://jessy-david.dev",
|
||||||
email: "contact@jessydavid.dev",
|
email: "contact@jessy-david.dev",
|
||||||
location: "France",
|
location: "France",
|
||||||
socials: {
|
socials: {
|
||||||
github: "https://github.com/jessydavid-dev",
|
github: "https://github.com/jessy-david-dev",
|
||||||
linkedin: "https://linkedin.com/in/jessy-david",
|
linkedin: "https://linkedin.com/in/jessy-david",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
+53
-29
@@ -1,31 +1,55 @@
|
|||||||
{
|
{
|
||||||
"name": "jessy-david.dev",
|
"name": "jessy-david.dev",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"description": "Site personnel et portfolio de Jessy David, développé avec Next.js, TypeScript et Tailwind CSS.",
|
||||||
"dev": "next dev",
|
"license": "MIT",
|
||||||
"build": "next build",
|
"author": {
|
||||||
"start": "next start",
|
"name": "Jessy David",
|
||||||
"lint": "eslint"
|
"email": "contact@jessy-david.dev",
|
||||||
},
|
"url": "https://jessy-david.dev"
|
||||||
"dependencies": {
|
},
|
||||||
"@marsidev/react-turnstile": "^1.3.1",
|
"homepage": "https://jessy-david.dev",
|
||||||
"framer-motion": "^12.23.24",
|
"repository": {
|
||||||
"lucide-react": "^0.554.0",
|
"type": "git",
|
||||||
"next": "16.0.3",
|
"url": "https://github.com/jessy-david-dev/jessy-david.dev"
|
||||||
"nodemailer": "^7.0.10",
|
},
|
||||||
"react": "19.2.0",
|
"bugs": {
|
||||||
"react-dom": "19.2.0"
|
"url": "https://github.com/jessy-david-dev/jessy-david.dev/issues"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"keywords": [
|
||||||
"@tailwindcss/postcss": "^4",
|
"portfolio",
|
||||||
"@types/node": "^20",
|
"nextjs",
|
||||||
"@types/nodemailer": "^7.0.4",
|
"react",
|
||||||
"@types/react": "^19",
|
"typescript",
|
||||||
"@types/react-dom": "^19",
|
"tailwindcss",
|
||||||
"eslint": "^9",
|
"web developer",
|
||||||
"eslint-config-next": "16.0.3",
|
"frontend"
|
||||||
"tailwindcss": "^4",
|
],
|
||||||
"typescript": "^5"
|
"scripts": {
|
||||||
}
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "eslint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@marsidev/react-turnstile": "^1.4.1",
|
||||||
|
"framer-motion": "^12.29.2",
|
||||||
|
"lucide-react": "^0.563.0",
|
||||||
|
"next": "16.1.5",
|
||||||
|
"nodemailer": "^7.0.13",
|
||||||
|
"react": "19.2.4",
|
||||||
|
"react-dom": "19.2.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4.1.18",
|
||||||
|
"@types/node": "^25.0.10",
|
||||||
|
"@types/nodemailer": "^7.0.9",
|
||||||
|
"@types/react": "^19.2.10",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"eslint": "^9.39.2",
|
||||||
|
"eslint-config-next": "16.1.5",
|
||||||
|
"tailwindcss": "^4.1.18",
|
||||||
|
"typescript": "^5.9.3"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Generated
+461
-1473
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user