effects

app/components/ChatBot.js

@@ -1,65 +1,59 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { askAI } from "../utils/askAI";
 
-export default function ChatBot() {
+export default function ChatBot({ onClose }) {
     const [question, setQuestion] = useState("");
     const [messages, setMessages] = useState([]);
-
+    const [isWaiting, setIsWaiting] = useState(false);
-    // Afficher le message d'introduction une seule fois au chargement du chatbot
-    useEffect(() => {
-        const introMessage = {
-            sender: "bot",
-            text: "Bonjour ! Je suis GrasBot, une intelligence artificielle locale basée sur Mistral 7B et hébergée sur un serveur Windows. Je suis là pour répondre à vos questions. Posez-moi votre question ! 😊"
-        };
-        setMessages([introMessage]);
-    }, []);
 
     const handleAsk = async () => {
-        if (!question.trim()) return; // Évite d'envoyer un message vide
+        if (!question.trim()) return;
 
         const userMessage = { sender: "user", text: question };
-        setMessages((prevMessages) => [...prevMessages, userMessage]); // Ajoute le message utilisateur
+        setMessages([...messages, userMessage]);
 
-        setQuestion(""); // Réinitialise le champ après l'envoi
+        setQuestion("");
+        setIsWaiting(true);
 
         try {
             const botResponse = await askAI(question);
             const botMessage = { sender: "bot", text: botResponse };
-            setMessages((prevMessages) => [...prevMessages, botMessage]); // Ajoute la réponse du bot
+            setMessages((prevMessages) => [...prevMessages, botMessage]);
         } catch (error) {
-            setMessages((prevMessages) => [
+            setMessages([...messages, { sender: "bot", text: "❌ Erreur de réponse. Réessayez plus tard." }]);
-                ...prevMessages,
+        } finally {
-                { sender: "bot", text: "❌ Erreur de réponse. Réessayez plus tard." }
+            setIsWaiting(false);
-            ]);
         }
     };
 
     return (
         <div className="flex flex-col w-96 bg-white shadow-lg rounded-lg border border-gray-300">
-            {/* En-tête du chatbot */}
             <div className="bg-blue-600 text-white p-3 rounded-t-lg flex justify-between items-center">
-                <span className="font-bold">💬 GrasBot</span>
+                <span className="font-orbitron-16-bold">💬 GrasBot</span>
-                <button className="text-white hover:text-red-400 text-xl" onClick={() => setMessages([])}>❌</button>
+                <button className="text-white hover:text-red-400 text-xl" onClick={onClose}>❌</button>
             </div>
 
-            {/* Zone d'affichage des messages */}
             <div className="h-64 overflow-y-auto p-4 space-y-2">
                 {messages.map((msg, index) => (
                     <div
                         key={index}
-                        className={`p-2 rounded-lg text-white ${msg.sender === "user" ? "bg-blue-500 ml-auto" : "bg-gray-500 mr-auto"}`}
+                        className={`p-2 rounded-lg text-white font-orbitron-12 ${msg.sender === "user" ? "bg-blue-500 ml-auto" : "bg-gray-500 mr-auto"}`}
                         style={{ maxWidth: "80%" }}
                     >
                         {msg.text}
                     </div>
                 ))}
+                {isWaiting && (
+                    <div className="p-2 rounded-lg text-white bg-gray-500 mr-auto wait-animation" style={{ maxWidth: "80%" }}>
+                        wait<span className="dot-1">.</span><span className="dot-2">.</span><span className="dot-3">.</span>
+                    </div>
+                )}
             </div>
 
-            {/* Zone d'entrée utilisateur */}
             <div className="flex p-3 border-t border-gray-300">
                 <input
                     type="text"
-                    className="flex-1 p-2 border border-gray-300 rounded-l-lg focus:outline-none"
+                    className="flex-1 p-2 border border-gray-300 font-orbitron-12 rounded-l-lg focus:outline-none"
                     placeholder="Posez votre question..."
                     value={question}
                     onChange={(e) => setQuestion(e.target.value)}
@@ -73,4 +67,4 @@ export default function ChatBot() {
             </div>
         </div>
     );
-}
+}

app/components/ContentSectionCompetences.tsx

@@ -148,7 +148,7 @@ export default function ContentSectionCompetences({
       {/* 🔥 Chatbot affiché uniquement si isChatbotOpen est vrai */}
       {isChatbotOpen && (
         <div className="fixed bottom-10 right-10 p-4 w-96">
-          <ChatBot />
+          <ChatBot onClose={() => setIsChatbotOpen(false)} />
         </div>
       )}
     </div>

app/globals.css

@@ -40,3 +40,21 @@ body {
 .animate-fade-in {
   animation: fade-in 0.5s ease-out; /* Animation de 0.5s avec une courbe de transition */
 }
+
+@keyframes blink {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+.wait-animation .dot-1 {
+  animation: blink 1s infinite 0s;
+}
+
+.wait-animation .dot-2 {
+  animation: blink 1s infinite 0.2s;
+}
+
+.wait-animation .dot-3 {
+  animation: blink 1s infinite 0.4s;
+}

app/layout.tsx

@@ -1,15 +1,31 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Footer from "./components/Footer";
 import "./assets/main.css";
 import NavLink from "./components/NavLink";
 
 export default function RootLayout({ children }) {
+  const [visitCount, setVisitCount] = useState(0);
+
+  useEffect(() => {
+    // Récupère le compteur de visites depuis localStorage
+    const visits = localStorage.getItem("visitCount");
+    const newVisitCount = visits ? parseInt(visits) + 1 : 1;
+    localStorage.setItem("visitCount", newVisitCount.toString());
+    setVisitCount(newVisitCount);
+  }, []);
+
   return (
     <html lang="fr">
       <body>
-        <div className="bg-wallpaper min-h-[100dvh] grid grid-rows-[auto_1fr_auto]">
+        <div className="relative bg-wallpaper min-h-[100dvh] grid grid-rows-[auto_1fr_auto]">
+          {/* Cercles animés */}
+          <div className="absolute z-0 inset-0 overflow-hidden">
+            <div className="circle-one blur-3xl w-64 h-64 rounded-full bg-rose-400/60 top-0 right-28 absolute"></div>
+            <div className="circle-two blur-3xl w-64 h-64 rounded-full bg-indigo-400/60 bottom-0 left-28 absolute"></div>
+          </div>
+
           <header className="z-10 bg-white/50 backdrop-blur rounded-lg border-2 border-gray-500">
             <div className="max-w-4xl mx-auto flex items-center justify-between p-4">
               <h2 className="text-2xl font-orbitron-24-bold-italic">Portfolio Gras-Calvet Fernand</h2>
@@ -25,13 +41,18 @@ export default function RootLayout({ children }) {
           </header>
 
           {/* Ne pas forcer de largeur ici, chaque page gère son `main` */}
-          <main >
+          <main className="relative z-10">
             {children}
           </main>
 
           <Footer />
+
+          {/* Affichage du compteur de visites */}
+          <div className="absolute bottom-0 right-0 p-4 text-sm text-gray-500">
+            NV : {visitCount}
+          </div>
         </div>
       </body>
     </html>
   );
-}
+}