Jessy/jessy-david.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update links and refactor components

Browse Source
This commit is contained in:
jessy-david-dev
2026-01-27 16:41:48 +01:00
parent cccabd840e
commit bc1aefc70b
10 changed files with 1818 additions and 2935 deletions
Download Patch File Download Diff File Expand all files Collapse all files
component/layout/Footer.tsx
+2 -5
View File
@@ -7,7 +7,7 @@ import Image from "next/image";
import Link from "next/link";
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",
href: "https://linkedin.com/in/jessy-david",
@@ -55,10 +55,7 @@ export default function Footer() {
>
{/* Logo */}
<motion.div variants={itemVariants}>
<Link
href="/"
className="inline-flex items-center gap-3 group"
>
<Link href="/" className="inline-flex items-center gap-3 group">
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
component/layout/NavBar.tsx
+5 -13
View File
@@ -106,9 +106,7 @@ export default function NavBar() {
</div>
{/* Nom avec effet de soulignement au hover */}
<div>
<span className="text-xl font-bold text-white">
Jessy David
</span>
<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>
@@ -116,8 +114,7 @@ export default function NavBar() {
{/* Navigation pc - cachée sur mobile */}
<div className="hidden md:flex items-center gap-1">
{navLinks.map((link) => {
const isActive =
activeSection === link.href.replace("#", "");
const isActive = activeSection === link.href.replace("#", "");
const Icon = link.icon;
return (
<SmoothLink
@@ -227,8 +224,7 @@ export default function NavBar() {
{/* Boucle sur les liens avec animation décalée */}
{navLinks.map((link, index) => {
const isActive =
activeSection ===
link.href.replace("#", "");
activeSection === link.href.replace("#", "");
const Icon = link.icon;
return (
<motion.div
@@ -261,15 +257,11 @@ export default function NavBar() {
>
<Icon
className={`w-5 h-5 ${
isActive
? "text-white"
: "text-blue-400"
isActive ? "text-white" : "text-blue-400"
}`}
/>
</div>
<span>
{link.label}
</span>
<span>{link.label}</span>
</div>
{/* Indicateur de section active */}
{isActive && (
component/sections/About.tsx
+16 -45
View File
@@ -18,23 +18,15 @@ export default function About() {
const isInView = useInView(ref, { once: false, amount: 0.2 });
return (
<section
id="about"
className="py-20 bg-sky-50 relative overflow-hidden"
>
<section id="about" className="py-20 bg-sky-50 relative overflow-hidden">
{/* Grid Background subtil */}
<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"
>
<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 }
}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.6 }}
className="text-center mb-16"
>
@@ -42,8 +34,8 @@ export default function About() {
À 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
Développeur web créatif, combinant frontend et backend pour des
solutions digitales impactantes
</p>
</motion.div>
@@ -52,11 +44,7 @@ export default function About() {
{/* Large card - Présentation */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={
isInView
? { opacity: 1, y: 0 }
: { 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"
>
@@ -65,26 +53,21 @@ export default function About() {
Créateur d&apos;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.
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.
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 }
}
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"
>
@@ -99,11 +82,7 @@ export default function About() {
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={
isInView
? { opacity: 1, y: 0 }
: { 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"
>
@@ -118,11 +97,7 @@ export default function About() {
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={
isInView
? { opacity: 1, y: 0 }
: { 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"
>
@@ -138,11 +113,7 @@ export default function About() {
{/* Technologies grid */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={
isInView
? { opacity: 1, y: 0 }
: { 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"
>
component/sections/Contact.tsx
+14 -48
View File
@@ -25,7 +25,7 @@ const contactMethods = [
icon: Github,
label: "GitHub",
value: "@jessydavid",
href: "https://github.com/jessydavid-dev",
href: "https://github.com/jessy-david-dev",
color: "from-slate-700 to-slate-900",
},
{
@@ -92,9 +92,7 @@ export default function Contact() {
} catch (err) {
console.error("Erreur:", err);
setError(
err instanceof Error
? err.message
: "Impossible d'envoyer le message."
err instanceof Error ? err.message : "Impossible d'envoyer le message.",
);
setCaptchaToken("");
} finally {
@@ -121,16 +119,11 @@ export default function Contact() {
<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"
>
<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 }
}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.6 }}
className="text-center mb-16"
>
@@ -144,8 +137,7 @@ export default function Contact() {
Contactez-moi
</h2>
<p className="text-xl text-slate-400 max-w-2xl mx-auto">
Un projet en tête ? Une question ? N&apos;hésitez pas à
me contacter
Un projet en tête ? Une question ? N&apos;hésitez pas à me contacter
</p>
</motion.div>
@@ -153,11 +145,7 @@ export default function Contact() {
{/* Colonne de gauche - Méthodes de contact */}
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={
isInView
? { opacity: 1, x: 0 }
: { 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"
>
@@ -171,9 +159,7 @@ export default function Contact() {
rel="noopener noreferrer"
initial={{ opacity: 0, y: 20 }}
animate={
isInView
? { opacity: 1, y: 0 }
: { opacity: 0, y: 20 }
isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }
}
transition={{
duration: 0.5,
@@ -206,11 +192,7 @@ export default function Contact() {
{/* Informations complémentaires */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={
isInView
? { opacity: 1, y: 0 }
: { 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"
>
@@ -226,8 +208,7 @@ export default function Contact() {
Disponibilité
</h3>
<p className="text-slate-400">
Actuellement disponible pour vos
projets.
Actuellement disponible pour vos projets.
</p>
</div>
</div>
@@ -237,11 +218,7 @@ export default function Contact() {
{/* Colonne de droite - Formulaire de contact */}
<motion.div
initial={{ opacity: 0, x: 50 }}
animate={
isInView
? { opacity: 1, x: 0 }
: { 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">
@@ -303,14 +280,8 @@ export default function Contact() {
{/* Cloudflare Turnstile */}
<div className="flex justify-center">
<Turnstile
siteKey={
process.env
.NEXT_PUBLIC_TURNSTILE_SITE_KEY ||
""
}
onSuccess={(token) =>
setCaptchaToken(token)
}
siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || ""}
onSuccess={(token) => setCaptchaToken(token)}
onError={() => setCaptchaToken("")}
onExpire={() => setCaptchaToken("")}
options={{
@@ -341,19 +312,14 @@ export default function Contact() {
>
<CheckCircle2 className="w-5 h-5 shrink-0" />
<span>
Message envoyé avec succès ! Je vous
répondrai bientôt.
Message envoyé avec succès ! Je vous répondrai bientôt.
</span>
</motion.div>
)}
<button
type="submit"
disabled={
isSubmitting ||
isSubmitted ||
!captchaToken
}
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>
component/sections/Projects.tsx
+15 -43
View File
@@ -12,14 +12,14 @@ const projects = [
"Portfolio moderne et interactif avec animations fluides et design épuré.",
tags: ["Next.js", "TypeScript", "TailwindCSS"],
link: "/",
github: "https://github.com/jessydavid-dev/jessy-david.dev",
github: "https://github.com/jessy-david-dev/jessy-david.dev",
},
{
title: "ultralion.xyz",
description:
"Portfolio professionnel et moderne pour UltraLion avec design épuré et optimisé.",
tags: ["Next.js", "TypeScript", "TailwindCSS"],
link: "https://ultralion.xyz",
link: "https://v1.jessy-david.dev",
},
{
title: "Radio Box",
@@ -37,8 +37,7 @@ const projects = [
},
{
title: "bôba là",
description:
"Application web de fidélité client avec système de points.",
description: "Application web de fidélité client avec système de points.",
tags: ["Next.js", "TypeScript", "TailwindCSS"],
link: "https://fidelite.boba-la.fr",
collaborators: [
@@ -79,16 +78,11 @@ export default function Projects() {
id="projects"
className="py-20 bg-slate-50 relative overflow-hidden"
>
<div
ref={ref}
className="container mx-auto px-4 max-w-6xl relative z-10"
>
<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 }
}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.6 }}
className="text-center mb-16"
>
@@ -108,11 +102,7 @@ export default function Projects() {
className="grid md:grid-cols-2 gap-6"
>
{projects.map((project, index) => (
<motion.div
key={index}
variants={itemVariants}
className="group"
>
<motion.div key={index} variants={itemVariants} className="group">
<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">
{/* Card content */}
<div className="p-6">
@@ -143,42 +133,28 @@ export default function Projects() {
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) => (
{project.collaborators.map((collab, idx) => (
<a
key={idx}
href={
collab.github
}
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
}
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
}
{collab.name}
</span>
</a>
)
)}
))}
</div>
</div>
)}
@@ -187,11 +163,7 @@ export default function Projects() {
<div className="flex gap-3">
<a
href={project.link}
target={
project.link.startsWith("/")
? "_self"
: "_blank"
}
target={project.link.startsWith("/") ? "_self" : "_blank"}
rel={
project.link.startsWith("/")
? ""
component/sections/Skills.tsx
+12 -39
View File
@@ -35,14 +35,7 @@ const skills = {
category: "Outils",
icon: Wrench,
color: "from-orange-500 to-red-500",
items: [
"Github",
"Docker",
"VS Code",
"Linux",
"Cloudflare",
"Proxmox",
],
items: ["Github", "Docker", "VS Code", "Linux", "Cloudflare", "Proxmox"],
},
};
@@ -70,24 +63,16 @@ export default function Skills() {
};
return (
<section
id="skills"
className="py-20 bg-white relative overflow-hidden"
>
<section id="skills" className="py-20 bg-white relative overflow-hidden">
{/* Decorative blobs */}
<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"
>
<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 }
}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.6 }}
className="text-center mb-16"
>
@@ -101,8 +86,8 @@ export default function Skills() {
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
Un ensemble de technologies modernes maîtrisées pour créer des
applications web performantes et innovantes
</p>
</motion.div>
@@ -114,10 +99,7 @@ export default function Skills() {
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"
>
<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>
@@ -147,10 +129,7 @@ export default function Skills() {
</motion.div>
{/* Backend - Medium card */}
<motion.div
variants={itemVariants}
className="md:col-span-5 group"
>
<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>
@@ -178,10 +157,7 @@ export default function Skills() {
</motion.div>
{/* Tools - Medium card */}
<motion.div
variants={itemVariants}
className="md:col-span-5 group"
>
<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>
@@ -209,10 +185,7 @@ export default function Skills() {
</motion.div>
{/* Additional info card */}
<motion.div
variants={itemVariants}
className="md:col-span-7 group"
>
<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>
@@ -229,8 +202,8 @@ export default function Skills() {
</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.
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">
config/site.ts
+3 -3
View File
@@ -1,11 +1,11 @@
export const siteConfig = {
name: "Jessy David",
description: "Développeur Web Full-Stack | React, Next.js, Node.js",
url: "https://jessydavid.dev",
email: "contact@jessydavid.dev",
url: "https://jessy-david.dev",
email: "contact@jessy-david.dev",
location: "France",
socials: {
github: "https://github.com/jessydavid-dev",
github: "https://github.com/jessy-david-dev",
linkedin: "https://linkedin.com/in/jessy-david",
},
};
package.json
+40 -16
View File
@@ -2,6 +2,30 @@
"name": "jessy-david.dev",
"version": "1.0.0",
"private": true,
"description": "Site personnel et portfolio de Jessy David, développé avec Next.js, TypeScript et Tailwind CSS.",
"license": "MIT",
"author": {
"name": "Jessy David",
"email": "contact@jessy-david.dev",
"url": "https://jessy-david.dev"
},
"homepage": "https://jessy-david.dev",
"repository": {
"type": "git",
"url": "https://github.com/jessy-david-dev/jessy-david.dev"
},
"bugs": {
"url": "https://github.com/jessy-david-dev/jessy-david.dev/issues"
},
"keywords": [
"portfolio",
"nextjs",
"react",
"typescript",
"tailwindcss",
"web developer",
"frontend"
],
"scripts": {
"dev": "next dev",
"build": "next build",
@@ -9,23 +33,23 @@
"lint": "eslint"
},
"dependencies": {
"@marsidev/react-turnstile": "^1.3.1",
"framer-motion": "^12.23.24",
"lucide-react": "^0.554.0",
"next": "16.0.3",
"nodemailer": "^7.0.10",
"react": "19.2.0",
"react-dom": "19.2.0"
"@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",
"@types/node": "^20",
"@types/nodemailer": "^7.0.4",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "16.0.3",
"tailwindcss": "^4",
"typescript": "^5"
"@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"
}
}
pnpm-lock.yaml
Generated
+461 -1473
View File
File diff suppressed because it is too large Load Diff