fixed trad footer and background low ressources
This commit is contained in:
parent
3d301cd57f
commit
009ea87198
@ -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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@ -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 },
|
||||
|
||||
@ -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,11 +111,13 @@ 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">
|
||||
<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>
|
||||
@ -125,8 +127,11 @@ export const ContactSection = () => {
|
||||
</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 }}
|
||||
>
|
||||
<Button
|
||||
transition={{ duration: 0.2 }}
|
||||
whileHover={{ x: 5 }}
|
||||
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"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<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 className="text-left">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Partager
|
||||
{t("contact.share")}
|
||||
</p>
|
||||
<p className="font-medium">Partager mon portfolio</p>
|
||||
<p className="font-medium">{t("contact.sharePortfolio")}</p>
|
||||
</div>
|
||||
</Button>
|
||||
</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>
|
||||
|
||||
@ -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.",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user