feat: ajout sitemap, api et components
This commit is contained in:
@@ -0,0 +1,206 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import nodemailer from "nodemailer";
|
||||
|
||||
// Fonction pour vérifier le token Turnstile
|
||||
async function verifyTurnstileToken(token: string): Promise<boolean> {
|
||||
const response = await fetch(
|
||||
"https://challenges.cloudflare.com/turnstile/v0/siteverify",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
secret: process.env.TURNSTILE_SECRET_KEY,
|
||||
response: token,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
const data = await response.json();
|
||||
return data.success;
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const { name, email, message, captchaToken } = await request.json();
|
||||
|
||||
// Validation
|
||||
if (!name || !email || !message) {
|
||||
return NextResponse.json(
|
||||
{ error: "Tous les champs sont requis" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Vérifier le captcha
|
||||
if (!captchaToken) {
|
||||
return NextResponse.json(
|
||||
{ error: "Captcha requis" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const isCaptchaValid = await verifyTurnstileToken(captchaToken);
|
||||
|
||||
if (!isCaptchaValid) {
|
||||
return NextResponse.json(
|
||||
{ error: "Captcha invalide. Veuillez réessayer." },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Configuration du transporteur SMTP
|
||||
const transporter = nodemailer.createTransport({
|
||||
host: process.env.SMTP_HOST,
|
||||
port: parseInt(process.env.SMTP_PORT || "587"),
|
||||
secure: process.env.SMTP_PORT === "465",
|
||||
auth: {
|
||||
user: process.env.SMTP_USER,
|
||||
pass: process.env.SMTP_PASSWORD,
|
||||
},
|
||||
tls: {
|
||||
rejectUnauthorized: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Vérifier la connexion SMTP
|
||||
await transporter.verify();
|
||||
|
||||
// HTML de l'email
|
||||
const htmlContent = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 20px auto;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
.content {
|
||||
padding: 30px;
|
||||
}
|
||||
.info-box {
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid #667eea;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.label {
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.message-content {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
margin-top: 15px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.footer {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>✉️ Nouveau message depuis votre portfolio</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="info-box">
|
||||
<div class="label">👤 Nom</div>
|
||||
<div>${name}</div>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<div class="label">📧 Email</div>
|
||||
<div><a href="mailto:${email}" style="color: #667eea; text-decoration: none;">${email}</a></div>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<div class="label">💬 Message</div>
|
||||
<div class="message-content">${message}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>Ce message a été envoyé depuis le formulaire de contact de jessy-david.dev</p>
|
||||
<p>✅ Captcha vérifié - Message légitime</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
const textContent = `
|
||||
Nouveau message depuis votre portfolio
|
||||
|
||||
Nom: ${name}
|
||||
Email: ${email}
|
||||
|
||||
Message:
|
||||
${message}
|
||||
|
||||
---
|
||||
Pour répondre, envoyez un email à: ${email}
|
||||
Captcha vérifié
|
||||
`;
|
||||
|
||||
const mailOptions = {
|
||||
from: process.env.SMTP_FROM,
|
||||
to: process.env.EMAIL_TO,
|
||||
replyTo: email,
|
||||
subject: `💬 Nouveau message de ${name}`,
|
||||
text: textContent,
|
||||
html: htmlContent,
|
||||
};
|
||||
|
||||
const info = await transporter.sendMail(mailOptions);
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
messageId: info.messageId,
|
||||
});
|
||||
} catch (error: unknown) {
|
||||
const errorMessage =
|
||||
error instanceof Error ? error.message : "Erreur inconnue";
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: "Erreur lors de l'envoi du message",
|
||||
details:
|
||||
process.env.NODE_ENV === "development"
|
||||
? errorMessage
|
||||
: "Erreur serveur",
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1 +1,95 @@
|
||||
/* globals.css */
|
||||
@import "tailwindcss";
|
||||
|
||||
/* BASE */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* GRID PATTERNS (Light) */
|
||||
.grid-wrapper {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.grid-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
|
||||
background-size: 20px 30px;
|
||||
-webkit-mask-image: radial-gradient(
|
||||
ellipse 70% 60% at 50% 0%,
|
||||
#000 60%,
|
||||
transparent 100%
|
||||
);
|
||||
mask-image: radial-gradient(
|
||||
ellipse 70% 60% at 50% 0%,
|
||||
#000 60%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* GRID PATTERNS (Dark) */
|
||||
.grid-wrapper-dark {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: #0f172a;
|
||||
}
|
||||
|
||||
.grid-background-dark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
background-image: linear-gradient(to right, #1e293b 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #1e293b 1px, transparent 1px);
|
||||
background-size: 20px 30px;
|
||||
-webkit-mask-image: radial-gradient(
|
||||
ellipse 70% 60% at 50% 0%,
|
||||
#000 60%,
|
||||
transparent 100%
|
||||
);
|
||||
mask-image: radial-gradient(
|
||||
ellipse 70% 60% at 50% 0%,
|
||||
#000 60%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* GRID UTILITY */
|
||||
.bg-grid-slate-200\/50 {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgb(226 232 240 / 0.5) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
linear-gradient(to bottom, rgb(226 232 240 / 0.5) 1px, transparent 1px);
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
|
||||
/* ANIMATIONS */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 1s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
+207
-5
@@ -1,10 +1,187 @@
|
||||
import type { Metadata } from "next";
|
||||
import Footer from "@/component/layout/Footer";
|
||||
import NavBar from "@/component/layout/NavBar";
|
||||
import GridBackground from "@/component/ui/GridBackground";
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { ReactNode } from "react";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
variable: "--font-inter",
|
||||
});
|
||||
|
||||
const siteConfig = {
|
||||
name: "Jessy David",
|
||||
title: "Jessy David | Développeur Web Full-Stack",
|
||||
description:
|
||||
"Développeur Web Full-Stack passionné, spécialisé en React, Next.js et Node.js. Création de sites web modernes, applications web performantes et solutions digitales sur mesure.",
|
||||
url: "https://jessy-david.dev",
|
||||
ogImage: "https://jessy-david.dev/og-image.jpg",
|
||||
author: "Jessy David",
|
||||
keywords: [
|
||||
"développeur web",
|
||||
"développeur full-stack",
|
||||
"React",
|
||||
"Next.js",
|
||||
"Node.js",
|
||||
"TypeScript",
|
||||
"JavaScript",
|
||||
"création site web",
|
||||
"freelance",
|
||||
"France",
|
||||
"portfolio",
|
||||
"Jessy David",
|
||||
],
|
||||
twitterHandle: "@jessydavid",
|
||||
};
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Portfolio · Jessy David",
|
||||
description: "Portfolio de Jessy David",
|
||||
title: {
|
||||
default: siteConfig.title,
|
||||
template: `%s | ${siteConfig.name}`,
|
||||
},
|
||||
description: siteConfig.description,
|
||||
keywords: siteConfig.keywords,
|
||||
authors: [{ name: siteConfig.author, url: siteConfig.url }],
|
||||
creator: siteConfig.author,
|
||||
publisher: siteConfig.author,
|
||||
|
||||
metadataBase: new URL(siteConfig.url),
|
||||
alternates: {
|
||||
canonical: "/",
|
||||
languages: {
|
||||
"fr-FR": "/",
|
||||
},
|
||||
},
|
||||
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
nocache: false,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
noimageindex: false,
|
||||
"max-video-preview": -1,
|
||||
"max-image-preview": "large",
|
||||
"max-snippet": -1,
|
||||
},
|
||||
},
|
||||
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "fr_FR",
|
||||
url: siteConfig.url,
|
||||
siteName: siteConfig.name,
|
||||
title: siteConfig.title,
|
||||
description: siteConfig.description,
|
||||
images: [
|
||||
{
|
||||
url: siteConfig.ogImage,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: `${siteConfig.name} - Portfolio Développeur Web`,
|
||||
type: "image/jpeg",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: siteConfig.title,
|
||||
description: siteConfig.description,
|
||||
creator: siteConfig.twitterHandle,
|
||||
images: [siteConfig.ogImage],
|
||||
},
|
||||
|
||||
icons: {
|
||||
icon: [
|
||||
{ url: "/favicon.ico", sizes: "any" },
|
||||
{ url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
|
||||
{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
|
||||
],
|
||||
apple: [
|
||||
{
|
||||
url: "/apple-touch-icon.png",
|
||||
sizes: "180x180",
|
||||
type: "image/png",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
manifest: "/site.webmanifest",
|
||||
|
||||
category: "technology",
|
||||
|
||||
verification: {
|
||||
google: "ton-code-google-search-console",
|
||||
},
|
||||
|
||||
other: {
|
||||
"msapplication-TileColor": "#0f172a",
|
||||
"theme-color": "#0f172a",
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
themeColor: [
|
||||
{ media: "(prefers-color-scheme: light)", color: "#ffffff" },
|
||||
{ media: "(prefers-color-scheme: dark)", color: "#0f172a" },
|
||||
],
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
maximumScale: 5,
|
||||
userScalable: true,
|
||||
colorScheme: "dark",
|
||||
};
|
||||
|
||||
const jsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{
|
||||
"@type": "WebSite",
|
||||
"@id": `${siteConfig.url}/#website`,
|
||||
url: siteConfig.url,
|
||||
name: siteConfig.name,
|
||||
description: siteConfig.description,
|
||||
inLanguage: "fr-FR",
|
||||
},
|
||||
{
|
||||
"@type": "Person",
|
||||
"@id": `${siteConfig.url}/#person`,
|
||||
name: siteConfig.name,
|
||||
url: siteConfig.url,
|
||||
image: siteConfig.ogImage,
|
||||
jobTitle: "Développeur Web Full-Stack",
|
||||
description: siteConfig.description,
|
||||
sameAs: [
|
||||
"https://github.com/jessydavid-dev",
|
||||
"https://linkedin.com/in/jessy-david",
|
||||
"https://twitter.com/jessydavid",
|
||||
],
|
||||
knowsAbout: [
|
||||
"React",
|
||||
"Next.js",
|
||||
"TypeScript",
|
||||
"Node.js",
|
||||
"JavaScript",
|
||||
"Tailwind CSS",
|
||||
"PostgreSQL",
|
||||
"MongoDB",
|
||||
],
|
||||
},
|
||||
{
|
||||
"@type": "ProfilePage",
|
||||
"@id": `${siteConfig.url}/#profilepage`,
|
||||
url: siteConfig.url,
|
||||
name: `Portfolio de ${siteConfig.name}`,
|
||||
description: siteConfig.description,
|
||||
mainEntity: { "@id": `${siteConfig.url}/#person` },
|
||||
inLanguage: "fr-FR",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -13,8 +190,33 @@ export default function RootLayout({
|
||||
children: ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="fr">
|
||||
<body className="antialiased">{children}</body>
|
||||
<html lang="fr" className={inter.variable}>
|
||||
<head>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossOrigin="anonymous"
|
||||
/>
|
||||
|
||||
<link
|
||||
rel="dns-prefetch"
|
||||
href="https://www.google-analytics.com"
|
||||
/>
|
||||
</head>
|
||||
<body className={`${inter.className} antialiased`}>
|
||||
<GridBackground variant="light" />
|
||||
<NavBar />
|
||||
<main id="main-content" className="relative z-10">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
+13
-4
@@ -1,8 +1,17 @@
|
||||
import About from "@/component/sections/About";
|
||||
import Contact from "@/component/sections/Contact";
|
||||
import Hero from "@/component/sections/Hero";
|
||||
import Projects from "@/component/sections/Projects";
|
||||
import Skills from "@/component/sections/Skills";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="p-4">
|
||||
<h1 className="text-2xl font-bold">Jessy David</h1>
|
||||
<p>Hello World !</p>
|
||||
</div>
|
||||
<main className="min-h-screen">
|
||||
<Hero />
|
||||
<About />
|
||||
<Skills />
|
||||
<Projects />
|
||||
<Contact />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { MetadataRoute } from "next";
|
||||
|
||||
export default function sitemap(): MetadataRoute.Sitemap {
|
||||
const baseUrl = "https://jessy-david.dev";
|
||||
|
||||
return [
|
||||
{
|
||||
url: baseUrl,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "monthly",
|
||||
priority: 1,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/#about`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "monthly",
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/#projects`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "weekly",
|
||||
priority: 0.9,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/#contact`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "yearly",
|
||||
priority: 0.7,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { siteConfig } from "@/config/site";
|
||||
import { Github, Heart, Linkedin, Mail } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
const socials = [
|
||||
{ name: "GitHub", href: "https://github.com/jessydavid-dev", icon: Github },
|
||||
{
|
||||
name: "LinkedIn",
|
||||
href: "https://linkedin.com/in/jessy-david",
|
||||
icon: Linkedin,
|
||||
},
|
||||
{ name: "Email", href: "mailto:contact@jessy-david.dev", icon: Mail },
|
||||
];
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="relative z-10 bg-slate-900 border-t border-slate-800">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
{/* Logo et nom du site - lien vers l'accueil */}
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg">
|
||||
<Image
|
||||
src="/logo.webp"
|
||||
width={500}
|
||||
height={500}
|
||||
className="w-12 h-12"
|
||||
alt="Image de profile"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-lg font-bold text-white">
|
||||
{siteConfig.name}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Icônes des réseaux sociaux */}
|
||||
<div className="flex items-center gap-2">
|
||||
{socials.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 bg-slate-800 hover:bg-linear-to-br hover:from-blue-500 hover:to-purple-500 rounded-lg transition-all duration-300 group"
|
||||
aria-label={item.name}
|
||||
>
|
||||
<item.icon className="w-4 h-4 text-slate-400 group-hover:text-white transition-colors" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Copyright avec année dynamique */}
|
||||
<p className="text-slate-500 text-sm flex items-center gap-1.5">
|
||||
© {new Date().getFullYear()} • Fait avec
|
||||
<Heart className="w-3.5 h-3.5 text-red-500 fill-red-500" />
|
||||
par Jessy DAVID
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,299 @@
|
||||
"use client";
|
||||
|
||||
// Importation des composants et hooks nécessaires
|
||||
import SmoothLink from "@/component/ui/SmoothLink";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import {
|
||||
Code2,
|
||||
FolderKanban,
|
||||
Home,
|
||||
LucideIcon,
|
||||
Mail,
|
||||
Menu,
|
||||
User,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
// Interface définissant la structure d'un lien de navigation
|
||||
interface NavLink {
|
||||
href: string;
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
}
|
||||
|
||||
// Configuration des liens de navigation avec leurs icônes
|
||||
const navLinks: NavLink[] = [
|
||||
{ href: "#home", label: "Accueil", icon: Home },
|
||||
{ href: "#about", label: "À propos", icon: User },
|
||||
{ href: "#skills", label: "Compétences", icon: Code2 },
|
||||
{ href: "#projects", label: "Projets", icon: FolderKanban },
|
||||
{ href: "#contact", label: "Contact", icon: Mail },
|
||||
];
|
||||
|
||||
export default function NavBar() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [activeSection, setActiveSection] = useState("home");
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
// Effet pour gérer le scroll et détecter la section active
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setScrolled(window.scrollY > 20);
|
||||
|
||||
const sections = navLinks.map((link) => link.href.replace("#", ""));
|
||||
|
||||
const currentSection = sections.find((section) => {
|
||||
const element = document.getElementById(section);
|
||||
if (element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
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]);
|
||||
|
||||
const handleLinkClick = () => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.nav
|
||||
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 */}
|
||||
<div className="hidden md:flex items-center gap-1">
|
||||
{navLinks.map((link) => {
|
||||
const isActive =
|
||||
activeSection === link.href.replace("#", "");
|
||||
const Icon = link.icon;
|
||||
return (
|
||||
<SmoothLink
|
||||
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 */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden relative z-50 p-2 text-slate-300 hover:text-white transition-colors"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<motion.div
|
||||
animate={isOpen ? "open" : "closed"}
|
||||
className="w-6 h-6 flex items-center justify-center"
|
||||
>
|
||||
{/* 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"
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
"use client";
|
||||
|
||||
import { motion, useInView } from "framer-motion";
|
||||
import { Code2, Rocket, Sparkles, Zap } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
const technologies = [
|
||||
"React",
|
||||
"Next.js",
|
||||
"TypeScript",
|
||||
"Node.js",
|
||||
"Tailwind CSS",
|
||||
"Git",
|
||||
];
|
||||
|
||||
export default function About() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
||||
|
||||
return (
|
||||
<section
|
||||
id="about"
|
||||
className="py-20 bg-slate-50 relative overflow-hidden"
|
||||
>
|
||||
{/* Grid Background subtil */}
|
||||
<div className="absolute inset-0 bg-grid-slate-200/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"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||
À 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>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,382 @@
|
||||
"use client";
|
||||
|
||||
import { Turnstile } from "@marsidev/react-turnstile";
|
||||
import { motion, useInView } from "framer-motion";
|
||||
import {
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
Github,
|
||||
Linkedin,
|
||||
Mail,
|
||||
MapPin,
|
||||
Send,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
const contactMethods = [
|
||||
{
|
||||
icon: Mail,
|
||||
label: "Email",
|
||||
value: "contact@jessy-david.dev",
|
||||
href: "mailto:contact@jessy-david.dev",
|
||||
color: "from-blue-500 to-cyan-500",
|
||||
},
|
||||
{
|
||||
icon: Github,
|
||||
label: "GitHub",
|
||||
value: "@jessydavid",
|
||||
href: "https://github.com/jessydavid-dev",
|
||||
color: "from-slate-700 to-slate-900",
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
label: "LinkedIn",
|
||||
value: "Jessy David",
|
||||
href: "https://linkedin.com/in/jessy-david",
|
||||
color: "from-blue-600 to-blue-800",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Contact() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [captchaToken, setCaptchaToken] = useState<string>("");
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setError("");
|
||||
setIsSubmitted(false);
|
||||
|
||||
// Vérifier que le captcha est validé
|
||||
if (!captchaToken) {
|
||||
setError("Veuillez valider le captcha");
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const data = {
|
||||
name: formData.get("name") as string,
|
||||
email: formData.get("email") as string,
|
||||
message: formData.get("message") as string,
|
||||
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);
|
||||
e.currentTarget.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"
|
||||
>
|
||||
<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-400" />
|
||||
<span className="text-sm font-semibold text-slate-300">
|
||||
Restons en contact
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
Contactez-moi
|
||||
</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">
|
||||
<MapPin className="w-5 h-5 text-blue-400 mt-1" />
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import GlowButton from "@/component/ui/GlowButton";
|
||||
import { motion, useInView } from "framer-motion";
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function Hero() {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const isInView = useInView(ref, { amount: 0.3 });
|
||||
|
||||
return (
|
||||
<section
|
||||
id="home"
|
||||
ref={ref}
|
||||
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 }}
|
||||
>
|
||||
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
|
||||
className="text-xl md:text-2xl text-slate-300 mb-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 20,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
>
|
||||
Développeur Full Stack | Créateur d'expériences web
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="flex gap-4 justify-center flex-wrap"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 20,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 0.8 }}
|
||||
>
|
||||
<GlowButton href="#projects" variant="secondary">
|
||||
Voir mes projets
|
||||
</GlowButton>
|
||||
|
||||
<GlowButton href="#contact" variant="primary">
|
||||
Me contacter
|
||||
</GlowButton>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
"use client";
|
||||
|
||||
import { motion, useInView } from "framer-motion";
|
||||
import { ExternalLink, Github } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { useRef } from "react";
|
||||
|
||||
const projects = [
|
||||
{
|
||||
title: "Portfolio",
|
||||
description:
|
||||
"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",
|
||||
},
|
||||
{
|
||||
title: "ultralion.xyz",
|
||||
description:
|
||||
"Portfolio professionnel et moderne pour UltraLion avec design épuré et optimisé.",
|
||||
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
||||
link: "https://ultralion.xyz",
|
||||
},
|
||||
{
|
||||
title: "Radio Box",
|
||||
description:
|
||||
"Bot Discord permettant d'écouter des web radios dans un salon vocal avec interface intuitive.",
|
||||
tags: ["Discord.js", "JavaScript", "Prisma"],
|
||||
link: "https://radio-box.app",
|
||||
},
|
||||
{
|
||||
title: "QuantumCraft Studios",
|
||||
description:
|
||||
"Plateforme d'hébergement de serveurs de jeux avec panel d'administration complet.",
|
||||
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
||||
link: "https://quantumcraft-studios.com",
|
||||
},
|
||||
{
|
||||
title: "bôba là",
|
||||
description:
|
||||
"Application web de fidélité client avec système de points.",
|
||||
tags: ["Next.js", "TypeScript", "TailwindCSS"],
|
||||
link: "https://fidelite.boba-la.fr",
|
||||
collaborators: [
|
||||
{
|
||||
name: "Philippe",
|
||||
github: "https://github.com/PHlLlPPE",
|
||||
avatar: "https://github.com/PHlLlPPE.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function Projects() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
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"
|
||||
>
|
||||
{/* 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"
|
||||
>
|
||||
<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 */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate={isInView ? "visible" : "hidden"}
|
||||
className="grid md:grid-cols-2 gap-6"
|
||||
>
|
||||
{projects.map((project, index) => (
|
||||
<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">
|
||||
{/* Title */}
|
||||
<h3 className="text-xl font-bold text-slate-900 mb-3">
|
||||
{project.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-slate-600 mb-4 text-sm leading-relaxed">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{project.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-medium"
|
||||
>
|
||||
{tag}
|
||||
</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>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,261 @@
|
||||
"use client";
|
||||
|
||||
import { motion, useInView } from "framer-motion";
|
||||
import {
|
||||
Code2,
|
||||
Layers,
|
||||
Server,
|
||||
Sparkles,
|
||||
TrendingUp,
|
||||
Wrench,
|
||||
} from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
const skills = {
|
||||
frontend: {
|
||||
category: "Frontend",
|
||||
icon: Code2,
|
||||
color: "from-blue-500 to-cyan-500",
|
||||
items: [
|
||||
"React",
|
||||
"Next.js",
|
||||
"TypeScript",
|
||||
"Tailwind CSS",
|
||||
"Bootstrap",
|
||||
"HTML/CSS",
|
||||
],
|
||||
},
|
||||
backend: {
|
||||
category: "Backend",
|
||||
icon: Server,
|
||||
color: "from-purple-500 to-pink-500",
|
||||
items: ["Node.js", "Express", "PostgreSQL", "MongoDB", "REST API"],
|
||||
},
|
||||
tools: {
|
||||
category: "Outils",
|
||||
icon: Wrench,
|
||||
color: "from-orange-500 to-red-500",
|
||||
items: [
|
||||
"Github",
|
||||
"Docker",
|
||||
"VS Code",
|
||||
"Linux",
|
||||
"Cloudflare",
|
||||
"Proxmox",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default function Skills() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: false, amount: 0.2 });
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<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"
|
||||
>
|
||||
{/* 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 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" />
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
interface GlowButtonProps {
|
||||
href: string;
|
||||
children: ReactNode;
|
||||
variant?: "primary" | "secondary";
|
||||
}
|
||||
|
||||
export default function GlowButton({
|
||||
href,
|
||||
children,
|
||||
variant = "primary",
|
||||
}: GlowButtonProps) {
|
||||
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = href.replace("#", "");
|
||||
const element = document.getElementById(targetId);
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (variant === "primary") {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
onClick={handleClick}
|
||||
className="relative inline-block px-8 py-3 bg-black text-white font-semibold rounded-lg border-2 border-purple-500 hover:border-purple-400 transition-all duration-300 hover:shadow-[0_0_20px_10px_rgba(168,85,247,0.6)] active:scale-95 active:shadow-[0_0_10px_5px_rgba(168,85,247,0.4)] group cursor-pointer"
|
||||
>
|
||||
<span className="flex items-center justify-center space-x-2 relative z-10">
|
||||
<span>{children}</span>
|
||||
</span>
|
||||
<span className="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-linear-to-r from-purple-500/20 to-indigo-500/20"></span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
// Variante secondaire (bleu)
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
onClick={handleClick}
|
||||
className="relative inline-block px-8 py-3 bg-black text-white font-semibold rounded-lg border-2 border-blue-500 hover:border-blue-400 transition-all duration-300 hover:shadow-[0_0_20px_10px_rgba(59,130,246,0.6)] active:scale-95 active:shadow-[0_0_10px_5px_rgba(59,130,246,0.4)] group cursor-pointer"
|
||||
>
|
||||
<span className="flex items-center justify-center space-x-2 relative z-10">
|
||||
<span>{children}</span>
|
||||
</span>
|
||||
<span className="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-linear-to-r from-blue-500/20 to-cyan-500/20"></span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
|
||||
interface GridBackgroundProps {
|
||||
variant?: "dark" | "light";
|
||||
}
|
||||
|
||||
export default function GridBackground({
|
||||
variant = "light",
|
||||
}: GridBackgroundProps) {
|
||||
const { scrollY } = useScroll();
|
||||
|
||||
const opacity = useTransform(scrollY, [0, 400, 800], [1, 0.4, 0.2]);
|
||||
|
||||
const y = useTransform(scrollY, [0, 1000], [0, 100]);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="fixed inset-0 pointer-events-none z-0"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1 }}
|
||||
style={{
|
||||
opacity,
|
||||
y,
|
||||
backgroundImage:
|
||||
variant === "dark"
|
||||
? "linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)"
|
||||
: "linear-gradient(to right, #e2e8f0 1px, transparent 1px), linear-gradient(to bottom, #e2e8f0 1px, transparent 1px)",
|
||||
backgroundSize: "100px 100px",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
interface SmoothLinkProps {
|
||||
href: string;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export default function SmoothLink({
|
||||
href,
|
||||
children,
|
||||
className,
|
||||
onClick,
|
||||
}: SmoothLinkProps) {
|
||||
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = href.replace("#", "");
|
||||
const element = document.getElementById(targetId);
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
}
|
||||
|
||||
if (onClick) {
|
||||
onClick();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<a href={href} onClick={handleClick} className={className}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +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",
|
||||
location: "France",
|
||||
socials: {
|
||||
github: "https://github.com/jessydavid-dev",
|
||||
linkedin: "https://linkedin.com/in/jessy-david",
|
||||
},
|
||||
};
|
||||
+12
-1
@@ -1,7 +1,18 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "github.com",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "avatars.githubusercontent.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
+29
-24
@@ -1,26 +1,31 @@
|
||||
{
|
||||
"name": "jessy-david.dev",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "16.0.3",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.0.3",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
"name": "jessy-david.dev",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"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"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+1077
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 884 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 884 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
@@ -0,0 +1,11 @@
|
||||
# Robots.txt pour jessy-david.dev
|
||||
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
# Sitemap
|
||||
Sitemap: https://jessy-david.dev/sitemap.xml
|
||||
|
||||
# Bloquer les ressources inutiles pour le crawl
|
||||
Disallow: /api/
|
||||
Disallow: /_next/static/
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "Jessy David - Portfolio",
|
||||
"short_name": "JD Portfolio",
|
||||
"description": "Portfolio de Jessy David, Développeur Web Full-Stack",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#0f172a",
|
||||
"theme_color": "#3b82f6",
|
||||
"orientation": "portrait-primary",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user