Kinou/portfolio-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed trad footer and background low ressources

Browse Source
This commit is contained in:
kinou-p 2025-10-02 15:47:32 +02:00
parent 3d301cd57f
commit 009ea87198
4 changed files with 81 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Footer.tsx
View File

@ -105,9 +105,12 @@ export const Footer = () => {
element.scrollIntoView({ behavior: "smooth" }); 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> </Button>
))} ))}
</nav> </nav>
@ -129,10 +132,13 @@ export const Footer = () => {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={link.onClick} 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="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> </Button>
))} ))}
</nav> </nav>

10
src/components/ParticlesBackground.tsx
View File

@ -26,7 +26,7 @@ export const ParticlesBackground = () => {
value: "transparent", value: "transparent",
}, },
}, },
fpsLimit: 120, fpsLimit: 60,
interactivity: { interactivity: {
events: { events: {
onClick: { onClick: {
@ -40,10 +40,10 @@ export const ParticlesBackground = () => {
}, },
modes: { modes: {
push: { push: {
quantity: 4, quantity: 2,
}, },
repulse: { repulse: {
distance: 200, distance: 150,
duration: 0.4, duration: 0.4,
}, },
}, },
@ -66,14 +66,14 @@ export const ParticlesBackground = () => {
default: "out" as const, default: "out" as const,
}, },
random: false, random: false,
speed: 2, speed: 1.5,
straight: false, straight: false,
}, },
number: { number: {
density: { density: {
enable: true, enable: true,
}, },
value: 80, value: 70,
}, },
opacity: { opacity: {
value: { min: 0.1, max: theme === "dark" ? 0.5 : 0.6 }, value: { min: 0.1, max: theme === "dark" ? 0.5 : 0.6 },

87
src/components/sections/ContactSection.tsx
View File

@ -1,6 +1,6 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useLanguage } from "@/contexts/LanguageContext"; 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 { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -100,7 +100,7 @@ export const ContactSection = () => {
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="space-y-6" 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"> <div className="space-y-4">
{contacts.map((contact, index) => ( {contacts.map((contact, index) => (
<motion.a <motion.a
@ -111,22 +111,27 @@ export const ContactSection = () => {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }} transition={{ duration: 0.2 }}
whileHover={{ x: 5 }} className="block"
> >
<Card className="hover:shadow-md transition-all duration-300 border-border/50 bg-card/50 backdrop-blur cursor-pointer"> <motion.div whileHover={{ x: 5 }} transition={{ duration: 0.2 }}>
<CardContent className="p-4 flex items-center space-x-4"> <Card className="hover:shadow-md transition-all duration-300 border-border/50 bg-card/50 backdrop-blur cursor-pointer group">
<div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary flex-shrink-0"> <CardContent className="p-4 flex items-center justify-between">
{contact.icon} <div className="flex items-center space-x-4">
</div> <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
<div> {contact.icon}
<p className="text-sm text-muted-foreground"> </div>
{contact.label} <div>
</p> <p className="text-sm text-muted-foreground">
<p className="font-medium">{contact.value}</p> {contact.label}
</div> </p>
</CardContent> <p className="font-medium">{contact.value}</p>
</Card> </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> </motion.a>
))} ))}
@ -135,23 +140,27 @@ export const ContactSection = () => {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.3 }} transition={{ duration: 0.2 }}
whileHover={{ x: 5 }}
onClick={handleShare}
className="cursor-pointer"
> >
<Button <Card className="hover:shadow-md transition-all duration-300 border-border/50 bg-card/50 backdrop-blur group">
onClick={handleShare} <CardContent className="p-4 flex items-center justify-between">
variant="outline" <div className="flex items-center space-x-4">
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 className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary flex-shrink-0"> </div>
<Share2 className="w-6 h-6" /> <div>
</div> <p className="text-sm text-muted-foreground">
<div className="text-left"> {t("contact.share")}
<p className="text-sm text-muted-foreground"> </p>
Partager <p className="font-medium">{t("contact.sharePortfolio")}</p>
</p> </div>
<p className="font-medium">Partager mon portfolio</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" />
</Button> </CardContent>
</Card>
</motion.div> </motion.div>
</div> </div>
</motion.div> </motion.div>
@ -165,13 +174,13 @@ export const ContactSection = () => {
> >
<Card className="border-border/50 bg-card/50 backdrop-blur"> <Card className="border-border/50 bg-card/50 backdrop-blur">
<CardContent className="p-6"> <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"> <form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<Input <Input
name="name" name="name"
placeholder="Votre nom" placeholder={t("contact.name")}
value={formData.name} value={formData.name}
onChange={handleInputChange} onChange={handleInputChange}
required required
@ -181,7 +190,7 @@ export const ContactSection = () => {
<Input <Input
name="email" name="email"
type="email" type="email"
placeholder="Votre email" placeholder={t("contact.emailPlaceholder")}
value={formData.email} value={formData.email}
onChange={handleInputChange} onChange={handleInputChange}
required required
@ -191,7 +200,7 @@ export const ContactSection = () => {
<div> <div>
<Input <Input
name="subject" name="subject"
placeholder="Sujet" placeholder={t("contact.subject")}
value={formData.subject} value={formData.subject}
onChange={handleInputChange} onChange={handleInputChange}
required required
@ -200,7 +209,7 @@ export const ContactSection = () => {
<div> <div>
<Textarea <Textarea
name="message" name="message"
placeholder="Votre message..." placeholder={t("contact.messagePlaceholder")}
rows={5} rows={5}
value={formData.message} value={formData.message}
onChange={handleInputChange} onChange={handleInputChange}
@ -209,7 +218,7 @@ export const ContactSection = () => {
</div> </div>
<Button type="submit" className="w-full" size="lg"> <Button type="submit" className="w-full" size="lg">
<Send className="w-4 h-4 mr-2" /> <Send className="w-4 h-4 mr-2" />
Envoyer le message {t("contact.send")}
</Button> </Button>
</form> </form>
</CardContent> </CardContent>

18
src/utils/translations.ts
View File

@ -57,6 +57,15 @@ export const translations = {
subtitle: "N'hésitez pas à me contacter", subtitle: "N'hésitez pas à me contacter",
email: "Email", email: "Email",
github: "GitHub", 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: { footer: {
description: "Étudiant développeur à 42, passionné par les technologies web et systèmes. Créateur de solutions innovantes pour un avenir numérique.", 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", subtitle: "Feel free to reach out",
email: "Email", email: "Email",
github: "GitHub", 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: { footer: {
description: "Developer student at 42, passionate about web technologies and systems. Creator of innovative solutions for a digital future.", description: "Developer student at 42, passionate about web technologies and systems. Creator of innovative solutions for a digital future.",