first commit

2025-02-12 15:47:51 +01:00 · 2025-02-12 15:47:51 +01:00 · 041385ccd3
commit 041385ccd3
28 changed files with 6798 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;
--- a/next.config.ts
+++ b/next.config.ts
@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,30 @@
+{
+  "name": "p003",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "lucide-react": "^0.474.0",
+    "next": "15.1.6",
+    "next-themes": "^0.4.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.6",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
--- a/src/app/api/og/route.tsx
+++ b/src/app/api/og/route.tsx
@ -0,0 +1,70 @@
+import { ImageResponse } from 'next/og'
+
+export const runtime = 'edge'
+export const revalidate = 3600; // Cache pendant 1 heure
+
+// Optimisation des polices
+const font = fetch(
+  new URL('../../fonts/geist-sans.ttf', import.meta.url)
+).then((res) => res.arrayBuffer())
+
+export async function GET() {
+  const fontData = await font;
+  
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: 'linear-gradient(to bottom right, #1a1a1a, #0a0a0a)',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '40px',
+        }}
+      >
+        <svg
+          width="200"
+          height="200"
+          viewBox="0 -960 960 960"
+          fill="#e8eaed"
+        >
+          <path d="m297-581 149-243q6-10 15-14.5t19-4.5q10 0 19 4.5t15 14.5l149 243q6 10 6 21t-5 20q-5 9-14 14.5t-21 5.5H331q-12 0-21-5.5T296-540q-5-9-5-20t6-21ZM700-80q-75 0-127.5-52.5T520-260q0-75 52.5-127.5T700-440q75 0 127.5 52.5T880-260q0 75-52.5 127.5T700-80Zm-580-60v-240q0-17 11.5-28.5T160-420h240q17 0 28.5 11.5T440-380v240q0 17-11.5 28.5T400-100H160q-17 0-28.5-11.5T120-140Z" />
+        </svg>
+        <div
+          style={{
+            fontSize: 60,
+            fontWeight: 'bold',
+            color: '#e8eaed',
+            marginTop: 40,
+          }}
+        >
+          A.B.
+        </div>
+        <div
+          style={{
+            fontSize: 30,
+            color: '#e8eaed',
+            opacity: 0.8,
+            marginTop: 20,
+          }}
+        >
+          Développeur & Chef de projet
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        {
+          name: 'Geist',
+          data: fontData,
+          weight: 700,
+        },
+      ],
+    },
+  )
+} 
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/fonts/geist-sans.ttf
+++ b/src/app/fonts/geist-sans.ttf
--- a/src/app/fv.png
+++ b/src/app/fv.png
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 90%;
+    --input: 0 0% 90%;
+    --ring: 0 0% 9%;
+
+    --radius: 0.75rem;
+  }
+
+  .dark {
+    --background: 0 0% 4%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 4%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 4%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 15%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 15%;
+    --muted-foreground: 0 0% 65%;
+
+    --accent: 0 0% 15%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 15%;
+    --input: 0 0% 15%;
+    --ring: 0 0% 83%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.3s ease-out;
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -0,0 +1,80 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/ThemeProvider";
+
+const geistSans = Geist({
+  subsets: ['latin'],
+  display: 'swap',
+  adjustFontFallback: true,
+  preload: true,
+  variable: '--font-geist-sans',
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://ab.wilmoredynamics.com'),
+  title: {
+    default: 'Amin Beressa | Développeur & Chef de projet',
+    template: '%s | Amin Beressa'
+  },
+  description: 'Portfolio d\'Amin Beressa, développeur full-stack et chef de projet spécialisé en React, TypeScript et technologies web modernes.',
+  keywords: ['développeur', 'chef de projet', 'react', 'typescript', 'next.js', 'web development'],
+  authors: [{ name: 'Amin Beressa' }],
+  creator: 'Amin Beressa',
+  openGraph: {
+    type: 'website',
+    locale: 'fr_FR',
+    url: 'https://ab.wilmoredynamics.com',
+    title: 'Amin Beressa | Développeur & Chef de projet',
+    description: 'Portfolio d\'Amin Beressa, développeur full-stack et chef de projet spécialisé en React, TypeScript et technologies web modernes.',
+    siteName: 'Portfolio Amin Beressa',
+    images: [{
+      url: '/api/og',
+      width: 1200,
+      height: 630,
+      alt: 'A.B. - Portfolio'
+    }]
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Amin Beressa | Développeur & Chef de projet',
+    description: 'Portfolio d\'Amin Beressa, développeur full-stack et chef de projet spécialisé en React, TypeScript et technologies web modernes.',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="fr" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -0,0 +1,147 @@
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { ContactButton } from "@/components/ContactButton";
+import { Navigation } from "@/components/Navigation";
+import { Metadata } from 'next'
+
+const featuredProjects = [
+  {
+    id: 1,
+    title: "Application Web",
+    description: "React, TypeScript, TailwindCSS",
+    tags: ["React", "TypeScript", "TailwindCSS"],
+    href: "/projects",
+    pattern: (
+      <svg 
+        className="absolute inset-0 w-full h-full text-foreground/[0.05] [mask-image:linear-gradient(to_bottom_right,white_40%,transparent_50%)]" 
+        xmlns="http://www.w3.org/2000/svg" 
+        viewBox="0 -960 960 960"
+        aria-hidden="true"
+        role="presentation"
+        width="100%"
+        height="100%"
+      >
+        <path fill="currentColor" d="m297-581 149-243q6-10 15-14.5t19-4.5q10 0 19 4.5t15 14.5l149 243q6 10 6 21t-5 20q-5 9-14 14.5t-21 5.5H331q-12 0-21-5.5T296-540q-5-9-5-20t6-21ZM700-80q-75 0-127.5-52.5T520-260q0-75 52.5-127.5T700-440q75 0 127.5 52.5T880-260q0 75-52.5 127.5T700-80Zm-580-60v-240q0-17 11.5-28.5T160-420h240q17 0 28.5 11.5T440-380v240q0 17-11.5 28.5T400-100H160q-17 0-28.5-11.5T120-140Z"/>
+      </svg>
+    )
+  },
+  {
+    id: 2,
+    title: "Application Mobile",
+    description: "Une application mobile native avec React Native et Expo",
+    tags: ["React Native", "Expo", "TypeScript"],
+    href: "/projects",
+    pattern: (
+      <svg className="absolute inset-0 w-full h-full text-foreground/[0.05] rotate-180 [mask-image:linear-gradient(to_bottom_right,white_40%,transparent_50%)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+        <path fill="currentColor" d="m297-581 149-243q6-10 15-14.5t19-4.5q10 0 19 4.5t15 14.5l149 243q6 10 6 21t-5 20q-5 9-14 14.5t-21 5.5H331q-12 0-21-5.5T296-540q-5-9-5-20t6-21ZM700-80q-75 0-127.5-52.5T520-260q0-75 52.5-127.5T700-440q75 0 127.5 52.5T880-260q0 75-52.5 127.5T700-80Zm-580-60v-240q0-17 11.5-28.5T160-420h240q17 0 28.5 11.5T440-380v240q0 17-11.5 28.5T400-100H160q-17 0-28.5-11.5T120-140Z"/>
+      </svg>
+    )
+  },
+];
+
+export const metadata: Metadata = {
+  openGraph: {
+    title: 'Amin Beressa | Développeur & Chef de projet',
+    description: 'Bienvenue sur mon portfolio. Découvrez mes projets et compétences en développement web et gestion de projet.',
+    images: [
+      {
+        url: '/api/og',
+        width: 1200,
+        height: 630,
+        alt: 'Amin Beressa - Portfolio'
+      }
+    ]
+  }
+}
+
+export default function Home() {
+  return (
+    <>
+      <Navigation />
+      <main className="relative min-h-screen">
+        <div className="min-h-screen pt-20 flex flex-col items-center justify-center p-4 space-y-12">
+          {/* Hero Section */}
+          <div className="max-w-3xl text-center">
+            <h1 className="text-6xl sm:text-7xl font-bold">
+              Amin Beressa
+              <span className="block mt-4 text-2xl sm:text-3xl text-foreground/60 font-normal">
+                Développeur & Chef de projet
+              </span>
+            </h1>
+          </div>
+
+          {/* Actions */}
+          <div className="flex flex-col sm:flex-row gap-4 items-center">
+            <Link 
+              href="/projects"
+              className="group flex items-center gap-2 px-6 py-3 bg-foreground text-background rounded-full hover:bg-foreground/90 transition-colors"
+            >
+              Projets
+              <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+            </Link>
+            <ContactButton />
+          </div>
+
+          {/* Section Projets avec marges harmonisées */}
+          <div className="w-full max-w-7xl mx-auto">
+            <div className="flex items-center justify-between mb-12">
+              <h2 className="text-3xl font-bold">Projets récents</h2>
+              <Link 
+                href="/projects"
+                className="group flex items-center gap-2 text-sm text-foreground/60 hover:text-foreground transition-colors"
+              >
+                Voir tous les projets
+                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+              </Link>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {featuredProjects.map((project) => (
+                <Link
+                  key={project.id}
+                  href={project.href}
+                  className="group relative aspect-square bg-gradient-to-br from-foreground/10 to-foreground/5 rounded-3xl overflow-hidden hover:from-foreground/15 hover:to-foreground/10 transition-all duration-300 border border-foreground/10"
+                  aria-label={`Voir le projet ${project.title}`}
+                >
+                  {project.pattern}
+                  <div 
+                    className="absolute inset-0 p-8 flex flex-col justify-between bg-gradient-to-t from-background/80 via-background/20 to-transparent"
+                  >
+                    <div className="flex flex-wrap gap-2">
+                      {project.tags.map((tag, index) => (
+                        <span 
+                          key={index}
+                          className="px-3 py-1 text-xs font-medium rounded-full bg-foreground/10 text-foreground/80 backdrop-blur-sm border border-foreground/10"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                    <div className="space-y-3">
+                      <h3 className="text-2xl font-semibold group-hover:text-foreground transition-colors">
+                        {project.title}
+                      </h3>
+                      <p className="text-base text-foreground/70 line-clamp-2">
+                        {project.description}
+                      </p>
+                      <div className="flex items-center gap-2 text-sm font-medium text-foreground/70">
+                        <span className="group-hover:translate-x-0.5 transition-transform">
+                          En savoir plus
+                        </span>
+                        <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                      </div>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Location en position fixe en bas */}
+        <div className="bottom-8 left-0 right-0 text-center text-foreground/60 pointer-events-none">
+          <p>Paris, France</p>
+        </div>
+      </main>
+    </>
+  );
+}
--- a/src/app/projects/layout.tsx
+++ b/src/app/projects/layout.tsx
@ -0,0 +1,18 @@
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Projets',
+  description: 'Découvrez mon portfolio de projets en développement web, incluant des applications React, TypeScript et des solutions web modernes.',
+  openGraph: {
+    title: 'Projets | Amin Beressa',
+    description: 'Découvrez mon portfolio de projets en développement web, incluant des applications React, TypeScript et des solutions web modernes.',
+  }
+}
+
+export default function ProjectsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+} 
--- a/src/app/projects/metadata.ts
+++ b/src/app/projects/metadata.ts
@ -0,0 +1,10 @@
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Projets',
+  description: 'Découvrez mon portfolio de projets en développement web, incluant des applications React, TypeScript et des solutions web modernes.',
+  openGraph: {
+    title: 'Projets | Amin Beressa',
+    description: 'Découvrez mon portfolio de projets en développement web, incluant des applications React, TypeScript et des solutions web modernes.',
+  }
+} 
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@ -0,0 +1,331 @@
+'use client';
+
+import { ArrowLeft, ArrowRight, ArrowUp, Search } from "lucide-react";
+import Link from "next/link";
+import { Navigation } from "@/components/Navigation";
+import { useState, useEffect, memo } from "react";
+import dynamic from "next/dynamic";
+
+type Project = {
+  id: number;
+  title: string;
+  description: string;
+  longDescription?: string;
+  tags: string[];
+  category: 'web' | 'mobile' | 'desktop';
+  status: 'completed' | 'in-progress' | 'planned' | 'canceled' | 'on-hold' | 'labs';
+  links?: {
+    demo?: string;
+    github?: string;
+  };
+  pattern: React.ReactNode;
+};
+
+const projects: Project[] = [
+  {
+    id: 1,
+    title: "Wilmore Dynamics",
+    description: "Une application web moderne construite avec React, TypeScript et TailwindCSS",
+    longDescription: "Une application web complète construite avec les dernières technologies. Utilisation de React pour une interface utilisateur réactive, TypeScript pour un code plus robuste, et TailwindCSS pour un design moderne et responsive.",
+    tags: ["React", "TypeScript", "TailwindCSS"],
+    category: 'web',
+    status: 'labs',
+    links: {
+      demo: "https://demo.example.com",
+      github: "https://github.com/example/project"
+    },
+    pattern: (
+      <svg className="absolute inset-0 w-full h-full text-foreground/[0.05] [mask-image:linear-gradient(to_bottom_right,white_40%,transparent_50%)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+        <path fill="currentColor" d="m297-581 149-243q6-10 15-14.5t19-4.5q10 0 19 4.5t15 14.5l149 243q6 10 6 21t-5 20q-5 9-14 14.5t-21 5.5H331q-12 0-21-5.5T296-540q-5-9-5-20t6-21ZM700-80q-75 0-127.5-52.5T520-260q0-75 52.5-127.5T700-440q75 0 127.5 52.5T880-260q0 75-52.5 127.5T700-80Zm-580-60v-240q0-17 11.5-28.5T160-420h240q17 0 28.5 11.5T440-380v240q0 17-11.5 28.5T400-100H160q-17 0-28.5-11.5T120-140Z" />
+      </svg>
+    )
+  },
+  {
+    id: 2,
+    title: "Application Mobile",
+    description: "Une application mobile native développée avec React Native et Expo",
+    tags: ["React Native", "Expo", "TypeScript"],
+    category: 'mobile',
+    status: 'in-progress',
+    links: {
+      demo: "https://demo.example.com",
+      github: "https://github.com/example/project"
+    },
+    pattern: (
+      <svg className="absolute inset-0 w-full h-full text-foreground/[0.05] rotate-180 [mask-image:linear-gradient(to_bottom_right,white_40%,transparent_50%)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+        <path fill="currentColor" d="m297-581 149-243q6-10 15-14.5t19-4.5q10 0 19 4.5t15 14.5l149 243q6 10 6 21t-5 20q-5 9-14 14.5t-21 5.5H331q-12 0-21-5.5T296-540q-5-9-5-20t6-21ZM700-80q-75 0-127.5-52.5T520-260q0-75 52.5-127.5T700-440q75 0 127.5 52.5T880-260q0 75-52.5 127.5T700-80Zm-580-60v-240q0-17 11.5-28.5T160-420h240q17 0 28.5 11.5T440-380v240q0 17-11.5 28.5T400-100H160q-17 0-28.5-11.5T120-140Z" />
+      </svg>
+    )
+  },
+  {
+    id: 3,
+    title: "Application Web",
+    description: "Une application web moderne construite avec React, TypeScript et TailwindCSS",
+    tags: ["React", "TypeScript", "TailwindCSS"],
+    category: 'web',
+    status: 'labs',
+    pattern: (
+      <svg className="absolute inset-0 w-full h-full text-foreground/[0.05] [mask-image:linear-gradient(to_bottom_right,white_40%,transparent_50%)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+        <path fill="currentColor" d="m297-581 149-243q6-10 15-14.5t19-4.5q10 0 19 4.5t15 14.5l149 243q6 10 6 21t-5 20q-5 9-14 14.5t-21 5.5H331q-12 0-21-5.5T296-540q-5-9-5-20t6-21ZM700-80q-75 0-127.5-52.5T520-260q0-75 52.5-127.5T700-440q75 0 127.5 52.5T880-260q0 75-52.5 127.5T700-80Zm-580-60v-240q0-17 11.5-28.5T160-420h240q17 0 28.5 11.5T440-380v240q0 17-11.5 28.5T400-100H160q-17 0-28.5-11.5T120-140Z" />
+      </svg>
+    )
+  }
+      // Vous pouvez ajouter d'autres projets ici
+      ];
+
+// Extraire les données uniques pour les filtres
+const allTags = Array.from(new Set(projects.flatMap(project => project.tags)));
+const allCategories = Array.from(new Set(projects.map(project => project.category)));
+
+const ProjectCard = memo(({ project, onClick }: { project: Project, onClick: () => void }) => (
+  <button
+    onClick={onClick}
+    className="text-left group relative aspect-[4/3] bg-gradient-to-br from-foreground/10 to-foreground/5 rounded-3xl overflow-hidden hover:from-foreground/15 hover:to-foreground/10 transition-all duration-300 border border-foreground/10"
+  >
+    {project.pattern}
+    <div className="absolute inset-0 p-8 flex flex-col justify-between bg-gradient-to-t from-background/80 via-background/20 to-transparent">
+      <div className="flex flex-wrap gap-2">
+        <span className={`px-3 py-1 text-xs font-medium rounded-full border ${
+          project.status === 'completed' ? 'bg-green-500/10 text-green-500 border-green-500/20' :
+          project.status === 'in-progress' ? 'bg-blue-500/10 text-blue-500 border-blue-500/20' :
+          project.status === 'planned' ? 'bg-orange-500/10 text-orange-500 border-orange-500/20' :
+          project.status === 'canceled' ? 'bg-red-500/10 text-red-500 border-red-500/20' :
+          project.status === 'on-hold' ? 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20' :
+          'bg-purple-500/10 text-purple-500 border-purple-500/20'
+        }`}>
+          {project.status === 'completed' ? 'Terminé' :
+           project.status === 'in-progress' ? 'En cours' :
+           project.status === 'planned' ? 'Planifié' :
+           project.status === 'canceled' ? 'Annulé' :
+           project.status === 'on-hold' ? 'En pause' :
+           'Laboratoire'}
+        </span>
+        {project.tags.map((tag, index) => (
+          <span
+            key={index}
+            className="px-3 py-1 text-xs font-medium rounded-full bg-foreground/10 text-foreground/80 backdrop-blur-sm border border-foreground/10"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+      <div className="space-y-3">
+        <h3 className="text-2xl font-semibold group-hover:text-foreground transition-colors">
+          {project.title}
+        </h3>
+        <p className="text-base text-foreground/70 line-clamp-2">
+          {project.description}
+        </p>
+        <div className="flex items-center gap-2 text-sm font-medium text-foreground/70">
+          <span className="group-hover:translate-x-0.5 transition-transform">
+            En savoir plus
+          </span>
+          <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+        </div>
+      </div>
+    </div>
+  </button>
+));
+ProjectCard.displayName = 'ProjectCard';
+
+const DynamicProjectModal = dynamic(() => import('@/components/ProjectModal').then(mod => mod.ProjectModal), {
+  loading: () => <div>Chargement...</div>,
+  ssr: false,
+})
+
+export default function Projects() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
+  const [showScrollTop, setShowScrollTop] = useState(false);
+
+  // Fonction pour réinitialiser tous les filtres
+  const resetFilters = () => {
+    setSearchQuery("");
+    setSelectedTags([]);
+    setSelectedCategories([]);
+  };
+
+  // Suggestions de tags basées sur la recherche
+  const suggestedTags = searchQuery
+    ? allTags.filter(tag => 
+        tag.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        !selectedTags.includes(tag)
+      )
+    : [];
+
+  const filteredProjects = projects
+    .filter(project => {
+      const matchesSearch = 
+        project.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        project.description.toLowerCase().includes(searchQuery.toLowerCase());
+      
+      const matchesTags = 
+        selectedTags.length === 0 || 
+        selectedTags.every(tag => project.tags.includes(tag));
+      
+      const matchesCategories = 
+        selectedCategories.length === 0 || 
+        selectedCategories.includes(project.category);
+
+      return matchesSearch && matchesTags && matchesCategories;
+    });
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags(prev =>
+      prev.includes(tag)
+        ? prev.filter(t => t !== tag)
+        : [...prev, tag]
+    );
+  };
+
+  // Gérer l'affichage du bouton de retour en haut
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowScrollTop(window.scrollY > 400);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <>
+      <Navigation />
+      <div className="pt-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          {/* En-tête avec titre et bouton retour */}
+          <div className="flex items-center gap-6 mb-12">
+            <Link
+              href="/"
+              className="group flex items-center gap-2 px-4 py-2 rounded-full bg-foreground/5 hover:bg-foreground/10 transition-colors"
+            >
+              <ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
+              Retour
+            </Link>
+            <h1 className="text-4xl font-bold">Projets</h1>
+          </div>
+
+          {/* Filtres et recherche améliorés */}
+          <div className="space-y-6 mb-12">
+            {/* Barre de recherche avec suggestions */}
+            <div className="relative">
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground/60" />
+              <input
+                type="text"
+                placeholder="Rechercher un projet..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-12 pr-4 py-3 rounded-2xl bg-foreground/5 border border-foreground/10 focus:outline-none focus:border-foreground/20 transition-colors placeholder:text-foreground/40"
+              />
+              {/* Suggestions de tags */}
+              {suggestedTags.length > 0 && searchQuery && (
+                <div className="absolute top-full left-0 right-0 mt-2 p-2 rounded-xl bg-background border border-foreground/10 shadow-lg">
+                  {suggestedTags.map(tag => (
+                    <button
+                      key={tag}
+                      onClick={() => {
+                        setSelectedTags(prev => [...prev, tag]);
+                        setSearchQuery("");
+                      }}
+                      className="block w-full text-left px-3 py-2 rounded-lg hover:bg-foreground/5 transition-colors"
+                    >
+                      {tag}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Filtres */}
+            <div className="flex flex-wrap items-center gap-4">
+              {/* Technologies */}
+              <div className="flex flex-wrap gap-2">
+                {allTags.map((tag) => (
+                  <button
+                    key={tag}
+                    onClick={() => toggleTag(tag)}
+                    className={`px-4 py-2 rounded-full border transition-colors ${
+                      selectedTags.includes(tag)
+                        ? "bg-foreground text-background border-foreground"
+                        : "bg-foreground/5 border-foreground/10 hover:bg-foreground/10"
+                    }`}
+                  >
+                    {tag}
+                  </button>
+                ))}
+              </div>
+
+              {/* Catégories */}
+              <div className="flex flex-wrap gap-2">
+                {allCategories.map((category) => (
+                  <button
+                    key={category}
+                    onClick={() => {
+                      setSelectedCategories(prev =>
+                        prev.includes(category)
+                          ? prev.filter(c => c !== category)
+                          : [...prev, category]
+                      );
+                    }}
+                    className={`px-4 py-2 rounded-full border transition-colors ${
+                      selectedCategories.includes(category)
+                        ? "bg-foreground text-background border-foreground"
+                        : "bg-foreground/5 border-foreground/10 hover:bg-foreground/10"
+                    }`}
+                  >
+                    {category.charAt(0).toUpperCase() + category.slice(1)}
+                  </button>
+                ))}
+              </div>
+
+              {/* Bouton de réinitialisation - visible uniquement si des filtres sont actifs */}
+              {(selectedTags.length > 0 || selectedCategories.length > 0 || searchQuery) && (
+                <button
+                  onClick={resetFilters}
+                  className="px-4 py-2 rounded-full border border-foreground/10 bg-foreground/5 hover:bg-foreground/10 transition-colors text-sm"
+                >
+                  Réinitialiser les filtres
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Grille de projets */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredProjects.map((project) => (
+              <ProjectCard
+                key={project.id}
+                project={project}
+                onClick={() => setSelectedProject(project)}
+              />
+            ))}
+          </div>
+
+          {/* Bouton retour en haut */}
+          {showScrollTop && (
+            <button
+              onClick={scrollToTop}
+              className="fixed bottom-8 right-8 p-4 rounded-full bg-foreground text-background shadow-lg hover:bg-foreground/90 transition-all duration-300 animate-fade-in"
+            >
+              <ArrowUp className="w-5 h-5" />
+            </button>
+          )}
+
+          {/* Modal */}
+          {selectedProject && (
+            <DynamicProjectModal
+              project={selectedProject}
+              onClose={() => setSelectedProject(null)}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+} 
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@ -0,0 +1,11 @@
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: 'https://ab.wilmoredynamics.com/sitemap.xml',
+  }
+} 
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@ -0,0 +1,20 @@
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = 'https://ab.wilmoredynamics.com'
+  
+  return [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 1,
+    },
+    {
+      url: `${baseUrl}/projects`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.8,
+    },
+  ]
+} 
--- a/src/components/ContactButton.tsx
+++ b/src/components/ContactButton.tsx
@ -0,0 +1,15 @@
+'use client';
+
+import { Mail } from "lucide-react";
+
+export const ContactButton = () => {
+  return (
+    <button 
+      className="flex items-center gap-2 px-6 py-3 border border-foreground/20 rounded-full hover:bg-foreground/5 transition-colors"
+      onClick={() => window.location.href = 'mailto:el.beressa@gmail.com'}
+    >
+      <Mail className="w-4 h-4" />
+      Me contacter
+    </button>
+  );
+}; 
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@ -0,0 +1,7 @@
+export const Logo = () => {
+  return (
+    <div className="fixed top-8 left-8 font-bold text-2xl">
+      AB
+    </div>
+  );
+}; 
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@ -0,0 +1,37 @@
+import Link from "next/link";
+import { ThemeToggle } from "./ThemeToggle";
+import { memo } from "react";
+
+export const Navigation = memo(() => {
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-sm" role="navigation" aria-label="Navigation principale">
+      <div className="max-w-7xl mx-auto px-8 h-20 flex justify-between items-center">
+        <Link 
+          href="/" 
+          className="font-bold text-2xl"
+          aria-label="Retour à l'accueil"
+        >
+          AB
+        </Link>
+        <div className="flex items-center gap-6">
+          <Link 
+            href="/" 
+            className="hover:text-foreground/80 transition-colors"
+            aria-label="Accueil"
+          >
+            Accueil
+          </Link>
+          <Link 
+            href="/projects" 
+            className="hover:text-foreground/80 transition-colors"
+            aria-label="Voir tous les projets"
+          >
+            Projets
+          </Link>
+          <ThemeToggle />
+        </div>
+      </div>
+    </nav>
+  );
+});
+Navigation.displayName = 'Navigation'; 
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+
+interface ProjectCardProps {
+  project: {
+    title: string;
+    // ... ajoutez les autres propriétés du projet selon vos besoins
+  };
+  onClick: () => void;
+}
+
+export const ProjectCard = memo(({ project, onClick }: ProjectCardProps) => {
+  return (
+    <article
+      role="article"
+      className="group relative..."
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onClick();
+        }
+      }}
+      tabIndex={0}
+      aria-label={`Projet : ${project.title}`}
+    >
+      {/* ... reste du code ... */}
+    </article>
+  );
+});
+ProjectCard.displayName = 'ProjectCard'; 
--- a/src/components/ProjectModal.tsx
+++ b/src/components/ProjectModal.tsx
@ -0,0 +1,119 @@
+'use client';
+
+import { X } from "lucide-react";
+import { useEffect } from "react";
+
+type ProjectModalProps = {
+  project: {
+    title: string;
+    description: string;
+    tags: string[];
+    status: 'completed' | 'in-progress' | 'planned' | 'canceled' | 'on-hold' | 'labs';
+    links?: {
+      demo?: string;
+      github?: string;
+    };
+    longDescription?: string;
+  };
+  onClose: () => void;
+};
+
+export function ProjectModal({ project, onClose }: ProjectModalProps) {
+  // Fermer avec Escape
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [onClose]);
+
+  const statusLabels = {
+    'completed': 'Terminé',
+    'in-progress': 'En cours',
+    'planned': 'Planifié',
+    'canceled': 'Annulé',
+    'on-hold': 'En pause',
+    'labs': 'Le Lab'
+  };
+
+  const statusColors = {
+    'completed': 'bg-green-500/10 text-green-500 border-green-500/20',
+    'in-progress': 'bg-blue-500/10 text-blue-500 border-blue-500/20',
+    'planned': 'bg-orange-500/10 text-orange-500 border-orange-500/20',
+    'canceled': 'bg-red-500/10 text-red-500 border-red-500/20',
+    'on-hold': 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
+    'labs': 'bg-purple-500/10 text-purple-500 border-purple-500/20'
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm">
+      <div 
+        className="relative w-full max-w-2xl bg-background border border-foreground/10 rounded-3xl shadow-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-foreground/10">
+          <div className="space-y-1">
+            <h2 className="text-2xl font-semibold">{project.title}</h2>
+            <span className={`inline-flex px-3 py-1 text-xs font-medium rounded-full border ${statusColors[project.status]}`}>
+              {statusLabels[project.status]}
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-full hover:bg-foreground/5 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {/* Tags */}
+          <div className="flex flex-wrap gap-2">
+            {project.tags.map((tag, index) => (
+              <span
+                key={index}
+                className="px-3 py-1 text-xs font-medium rounded-full bg-foreground/10 text-foreground/80 border border-foreground/10"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+
+          {/* Description */}
+          <p className="text-foreground/70">
+            {project.longDescription || project.description}
+          </p>
+
+          {/* Links */}
+          {project.links && (
+            <div className="flex gap-4">
+              {project.links.demo && (
+                <a
+                  href={project.links.demo}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-2 px-4 py-2 rounded-full bg-foreground text-background hover:bg-foreground/90 transition-colors"
+                >
+                  Voir la démo
+                </a>
+              )}
+              {project.links.github && (
+                <a
+                  href={project.links.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-2 px-4 py-2 rounded-full border border-foreground/10 hover:bg-foreground/5 transition-colors"
+                >
+                  Voir sur GitHub
+                </a>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+} 
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@ -0,0 +1,8 @@
+'use client';
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+} 
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@ -0,0 +1,31 @@
+'use client';
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export const ThemeToggle = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="p-2 rounded-full hover:bg-foreground/5 transition-colors relative"
+      aria-label="Changer le thème"
+    >
+      <div className="relative w-5 h-5">
+        <Sun className="absolute inset-0 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+        <Moon className="absolute inset-0 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      </div>
+    </button>
+  );
+}; 
--- a/src/store/theme.ts
+++ b/src/store/theme.ts
@ -0,0 +1,12 @@
+// Création d'un store global avec Zustand pour la gestion du thème
+import { create } from 'zustand'
+
+interface ThemeStore {
+  theme: 'light' | 'dark' | 'system'
+  setTheme: (theme: 'light' | 'dark' | 'system') => void
+}
+
+export const useThemeStore = create<ThemeStore>((set) => ({
+  theme: 'system',
+  setTheme: (theme) => set({ theme }),
+})) 
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -0,0 +1,65 @@
+import type { Config } from "tailwindcss";
+
+const config = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+} satisfies Config;
+
+export default config;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}