From 009ea871982a5f2795ee8d5059c8e473410bca7d Mon Sep 17 00:00:00 2001
From: kinou-p <alexpomms@gmail.com>
Date: Thu, 2 Oct 2025 15:47:32 +0200
Subject: [PATCH] fixed trad footer and background low ressources

---
 src/components/Footer.tsx                  | 14 +++-
 src/components/ParticlesBackground.tsx     | 10 +--
 src/components/sections/ContactSection.tsx | 87 ++++++++++++----------
 src/utils/translations.ts                  | 18 +++++
 4 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 0dc683c..9605484 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -105,9 +105,12 @@ export const Footer = () => {
                       element.scrollIntoView({ behavior: "smooth" });
                     }
                   }}
-                  className="justify-start h-auto p-2 text-muted-foreground hover:text-foreground"
+                  className="justify-start h-auto p-2 text-muted-foreground hover:text-foreground hover:bg-transparent relative group"
                 >
-                  {t(`nav.${item}`)}
+                  <span className="relative">
+                    {t(`nav.${item}`)}
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary group-hover:w-full transition-all duration-300" />
+                  </span>
                 </Button>
               ))}
             </nav>
@@ -129,10 +132,13 @@ export const Footer = () => {
                   variant="ghost"
                   size="sm"
                   onClick={link.onClick}
-                  className="justify-start h-auto p-2 text-muted-foreground hover:text-foreground"
+                  className="justify-start h-auto p-2 text-muted-foreground hover:text-foreground hover:bg-transparent relative group"
                 >
                   <span className="mr-2">{link.icon}</span>
-                  {link.label}
+                  <span className="relative">
+                    {link.label}
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary group-hover:w-full transition-all duration-300" />
+                  </span>
                 </Button>
               ))}
             </nav>
diff --git a/src/components/ParticlesBackground.tsx b/src/components/ParticlesBackground.tsx
index cdabc99..2b6b6ab 100644
--- a/src/components/ParticlesBackground.tsx
+++ b/src/components/ParticlesBackground.tsx
@@ -26,7 +26,7 @@ export const ParticlesBackground = () => {
           value: "transparent",
         },
       },
-      fpsLimit: 120,
+      fpsLimit: 60,
         interactivity: {
           events: {
             onClick: {
@@ -40,10 +40,10 @@ export const ParticlesBackground = () => {
           },
           modes: {
             push: {
-              quantity: 4,
+              quantity: 2,
             },
             repulse: {
-              distance: 200,
+              distance: 150,
               duration: 0.4,
             },
           },
@@ -66,14 +66,14 @@ export const ParticlesBackground = () => {
               default: "out" as const,
             },
             random: false,
-            speed: 2,
+            speed: 1.5,
             straight: false,
           },
           number: {
             density: {
               enable: true,
             },
-            value: 80,
+            value: 70,
           },
           opacity: {
             value: { min: 0.1, max: theme === "dark" ? 0.5 : 0.6 },
diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
index e6c1cf6..dbb5084 100644
--- a/src/components/sections/ContactSection.tsx
+++ b/src/components/sections/ContactSection.tsx
@@ -1,6 +1,6 @@
 import { motion } from "framer-motion";
 import { useLanguage } from "@/contexts/LanguageContext";
-import { Mail, Github, Send, Share2, Briefcase } from "lucide-react";
+import { Mail, Github, Send, Share2, Briefcase, ArrowRight } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -100,7 +100,7 @@ export const ContactSection = () => {
             transition={{ duration: 0.5 }}
             className="space-y-6"
           >
-            <h3 className="text-2xl font-semibold mb-6">Restons en contact</h3>
+            <h3 className="text-2xl font-semibold mb-6">{t("contact.stayInTouch")}</h3>
             <div className="space-y-4">
               {contacts.map((contact, index) => (
                 <motion.a
@@ -111,22 +111,27 @@ export const ContactSection = () => {
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
-                  whileHover={{ x: 5 }}
+                  transition={{ duration: 0.2 }}
+                  className="block"
                 >
-                  <Card className="hover:shadow-md transition-all duration-300 border-border/50 bg-card/50 backdrop-blur cursor-pointer">
-                    <CardContent className="p-4 flex items-center space-x-4">
-                      <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
-                        {contact.icon}
-                      </div>
-                      <div>
-                        <p className="text-sm text-muted-foreground">
-                          {contact.label}
-                        </p>
-                        <p className="font-medium">{contact.value}</p>
-                      </div>
-                    </CardContent>
-                  </Card>
+                  <motion.div whileHover={{ x: 5 }} transition={{ duration: 0.2 }}>
+                    <Card className="hover:shadow-md transition-all duration-300 border-border/50 bg-card/50 backdrop-blur cursor-pointer group">
+                      <CardContent className="p-4 flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                          <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
+                            {contact.icon}
+                          </div>
+                          <div>
+                            <p className="text-sm text-muted-foreground">
+                              {contact.label}
+                            </p>
+                            <p className="font-medium">{contact.value}</p>
+                          </div>
+                        </div>
+                        <ArrowRight className="w-5 h-5 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all duration-300" />
+                      </CardContent>
+                    </Card>
+                  </motion.div>
                 </motion.a>
               ))}
               
@@ -135,23 +140,27 @@ export const ContactSection = () => {
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: 0.3 }}
+                transition={{ duration: 0.2 }}
+                whileHover={{ x: 5 }}
+                onClick={handleShare}
+                className="cursor-pointer"
               >
-                <Button
-                  onClick={handleShare}
-                  variant="outline"
-                  className="w-full p-4 h-auto justify-start space-x-4 hover:shadow-md transition-all duration-300 border-border/50 bg-card/50 backdrop-blur"
-                >
-                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
-                    <Share2 className="w-6 h-6" />
-                  </div>
-                  <div className="text-left">
-                    <p className="text-sm text-muted-foreground">
-                      Partager
-                    </p>
-                    <p className="font-medium">Partager mon portfolio</p>
-                  </div>
-                </Button>
+                <Card className="hover:shadow-md transition-all duration-300 border-border/50 bg-card/50 backdrop-blur group">
+                  <CardContent className="p-4 flex items-center justify-between">
+                    <div className="flex items-center space-x-4">
+                      <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
+                        <Share2 className="w-6 h-6" />
+                      </div>
+                      <div>
+                        <p className="text-sm text-muted-foreground">
+                          {t("contact.share")}
+                        </p>
+                        <p className="font-medium">{t("contact.sharePortfolio")}</p>
+                      </div>
+                    </div>
+                    <ArrowRight className="w-5 h-5 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all duration-300" />
+                  </CardContent>
+                </Card>
               </motion.div>
             </div>
           </motion.div>
@@ -165,13 +174,13 @@ export const ContactSection = () => {
           >
             <Card className="border-border/50 bg-card/50 backdrop-blur">
               <CardContent className="p-6">
-                <h3 className="text-2xl font-semibold mb-6">Envoyez-moi un message</h3>
+                <h3 className="text-2xl font-semibold mb-6">{t("contact.sendMessage")}</h3>
                 <form onSubmit={handleSubmit} className="space-y-4">
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
                       <Input
                         name="name"
-                        placeholder="Votre nom"
+                        placeholder={t("contact.name")}
                         value={formData.name}
                         onChange={handleInputChange}
                         required
@@ -181,7 +190,7 @@ export const ContactSection = () => {
                       <Input
                         name="email"
                         type="email"
-                        placeholder="Votre email"
+                        placeholder={t("contact.emailPlaceholder")}
                         value={formData.email}
                         onChange={handleInputChange}
                         required
@@ -191,7 +200,7 @@ export const ContactSection = () => {
                   <div>
                     <Input
                       name="subject"
-                      placeholder="Sujet"
+                      placeholder={t("contact.subject")}
                       value={formData.subject}
                       onChange={handleInputChange}
                       required
@@ -200,7 +209,7 @@ export const ContactSection = () => {
                   <div>
                     <Textarea
                       name="message"
-                      placeholder="Votre message..."
+                      placeholder={t("contact.messagePlaceholder")}
                       rows={5}
                       value={formData.message}
                       onChange={handleInputChange}
@@ -209,7 +218,7 @@ export const ContactSection = () => {
                   </div>
                   <Button type="submit" className="w-full" size="lg">
                     <Send className="w-4 h-4 mr-2" />
-                    Envoyer le message
+                    {t("contact.send")}
                   </Button>
                 </form>
               </CardContent>
diff --git a/src/utils/translations.ts b/src/utils/translations.ts
index db01004..d2b5729 100644
--- a/src/utils/translations.ts
+++ b/src/utils/translations.ts
@@ -57,6 +57,15 @@ export const translations = {
       subtitle: "N'hésitez pas à me contacter",
       email: "Email",
       github: "GitHub",
+      stayInTouch: "Restons en contact",
+      share: "Partager",
+      sharePortfolio: "Partager mon portfolio",
+      sendMessage: "Envoyez-moi un message",
+      name: "Votre nom",
+      emailPlaceholder: "Votre email",
+      subject: "Sujet",
+      messagePlaceholder: "Votre message...",
+      send: "Envoyer le message",
     },
     footer: {
       description: "Étudiant développeur à 42, passionné par les technologies web et systèmes. Créateur de solutions innovantes pour un avenir numérique.",
@@ -141,6 +150,15 @@ export const translations = {
       subtitle: "Feel free to reach out",
       email: "Email",
       github: "GitHub",
+      stayInTouch: "Let's stay in touch",
+      share: "Share",
+      sharePortfolio: "Share my portfolio",
+      sendMessage: "Send me a message",
+      name: "Your name",
+      emailPlaceholder: "Your email",
+      subject: "Subject",
+      messagePlaceholder: "Your message...",
+      send: "Send message",
     },
     footer: {
       description: "Developer student at 42, passionate about web technologies and systems. Creator of innovative solutions for a digital future.",