Add translations for banner and skills sections in English and Persian; update Footer and Certifications components for localization and styling improvements.

Author: ahmadrasouli-dev

public/locales/en/translation.json

@@ -9,6 +9,10 @@
     "portfolio": "Portfolio",
     "services": "Services"
   },
+  "banner": {
+    "name": "Ahmad Rasouli",
+    "jobTitle": "Front-End Developer"
+  },
   "name": "Ahmad Rasouli",
   "jobTitle": "Front-End Developer & Cybersecurity Specialist",
   "about": {
@@ -286,6 +290,12 @@
   },
   "footer": {
     "rights": "All rights reserved",
-    "contact": "Contact"
+    "contact": "Contact",
+    "developedBy": "Developed by",
+    "openSourceText": "The project is completely open source, but to support me, please fork and star me before cloning.."
+  },
+  "skills": {
+    "title": "Skills & Expertise",
+    "subtitle": "Professional expertise and technical proficiency"
   }
 }

public/locales/fa/translation.json

@@ -9,6 +9,10 @@
     "portfolio": "نمونه کارها",
     "services": "خدمات"
   },
+  "banner": {
+    "name": "احمد رسولی",
+    "jobTitle": "توسعه‌دهنده فرانت‌اند"
+  },
   "name": "احمد رسولی",
   "jobTitle": "توسعه‌دهنده فرانت‌اند و متخصص امنیت سایبری",
   "about": {
@@ -190,6 +194,12 @@
   },
   "footer": {
     "rights": "تمامی حقوق محفوظ است",
-    "contact": "تماس"
+    "contact": "تماس",
+    "developedBy": "توسعه یافته توسط",
+    "openSourceText": "این پروژه کاملاً متن‌باز است، اما برای حمایت از من، لطفاً قبل از کلون کردن، فورک و ستاره دهید."
+  },
+  "skills": {
+    "title": "مهارت‌ها و تخصص",
+    "subtitle": "تخصص حرفه‌ای و مهارت فنی"
   }
 }

src/Components/About/About.jsx

@@ -157,7 +157,7 @@ function About() {
             <div className="max-w-7xl mx-auto">
                 {/* Header Section */}
                 <div className="text-center mb-20">
-                    <h3 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 bg-clip-text text-transparent mb-4">
+                    <h3 className="text-5xl p-2 md:text-6xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 bg-clip-text text-transparent mb-4">
                         {t('about.title')}
                     </h3>
                     <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"></div>

src/Components/Education/Education.jsx

@@ -19,7 +19,7 @@ function EducationTimeline() {
 
             <div className="max-w-7xl mx-auto">
                 <div className="text-center mb-20">
-                    <h3 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 bg-clip-text text-transparent mb-4">
+                    <h3 className="text-5xl pb-2 md:text-6xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 bg-clip-text text-transparent mb-4">
                         {t('education.title')}
                     </h3>
                     <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"></div>

src/Components/Skill/Skill.jsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import skillsData from './Skill.json';
 
 function Skills() {
+    const { t } = useTranslation();
     const [skills, setSkills] = useState([]);
 
     useEffect(() => {
@@ -32,10 +34,10 @@ function Skills() {
             <div className="max-w-6xl mx-auto">
                 <div className="text-center mb-16">
                     <h3 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 bg-clip-text text-transparent mb-3">
-                        Skills & Expertise
+                        {t('skills.title')}
                     </h3>
                     <div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"></div>
-                    <p className="text-gray-600 mt-6 text-sm">Professional expertise and technical proficiency</p>
+                    <p className="text-gray-600 mt-6 text-sm">{t('skills.subtitle')}</p>
                 </div>
 
                 <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 gap-4">

src/Components/banner/Banner.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
+import { useTranslation } from 'react-i18next';
 import {
     FaGithub, 
     FaTelegram, 
@@ -21,7 +21,10 @@ const iconComponents = {
 
 function Banner() {
     const [hue, setHue] = useState(220);
-    const {name, jobTitle, profileImage, socialLinks} = data;
+    const { t } = useTranslation();
+    const {profileImage, socialLinks} = data;
+    const name = t('banner.name');
+    const jobTitle = t('banner.jobTitle');
 
     return (<section
         id="home"
@@ -56,7 +59,7 @@ function Banner() {
 
                 {/* متن اصلی */}
                 <div className="space-y-6" data-aos="fade-up" data-aos-duration="1000">
-                    <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-blue-400
+                    <h1 className="text-5xl pb-2 md:text-6xl font-bold bg-gradient-to-r from-blue-400
                     to-cyan-400 bg-clip-text text-transparent">
                         {name}
                     </h1>

src/Components/certifica/Certifications.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import certifications from './Certifications.json'; // Fix problem for Vercel server
+import { useTranslation } from 'react-i18next';
 
 function Certifications() {
+    const { t } = useTranslation();
     return (
         <section className="relative py-20 px-4 md:px-8" id="certifications">
             {/* Animated Gradient Circles */}
@@ -10,24 +12,24 @@ function Certifications() {
 
             <div className="max-w-7xl mx-auto">
                 <div className="text-center mb-20">
-                    <h3 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 bg-clip-text text-transparent mb-4">
-                        Certifications
+                    <h3 className="text-5xl pt-2 md:text-6xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 bg-clip-text text-transparent mb-4">
+                        {t('certifications.title')}
                     </h3>
                     <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"></div>
                 </div>
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
-                    {certifications.map((certification) => (
+                    {certifications.map((certification, index) => (
                         <div
-                            key={certification.id}
-                            className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl p-6 
+                            key={certification.id || index}
+                            className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl p-6
                             shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 group overflow-hidden"
-                        >Fix problem for Vircel server
-                            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 
+                        >
+                            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10
                                         opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl"></div>
-                            <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-blue-400/20 to-purple-400/20 
+                            <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-blue-400/20 to-purple-400/20
                                         rounded-bl-2xl opacity-50"></div>
-                            <div className="absolute bottom-0 left-0 w-12 h-12 bg-gradient-to-tr from-pink-400/20 to-orange-400/20 
+                            <div className="absolute bottom-0 left-0 w-12 h-12 bg-gradient-to-tr from-pink-400/20 to-orange-400/20
                                         rounded-tr-2xl opacity-50"></div>
 
                             <a
@@ -42,14 +44,14 @@ function Certifications() {
                                     className="w-full h-48 object-contain rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm"
                                 />
                             </a>
-                            
+
                             <div className="space-y-3 relative z-10">
                                 <h4 className="text-xl font-semibold text-gray-800 group-hover:text-gray-900 transition-colors">
                                     {certification.title}
                                 </h4>
                                 <p className="text-sm font-medium text-gray-900">{certification.issuer}</p>
                                 <p className="text-sm text-gray-500 bg-white/50 backdrop-blur-sm px-3 py-1 rounded-full inline-block">
-                                    Issued {certification.issuedDate}
+                                    {certification.issuedDate}
                                 </p>
                             </div>
                         </div>

src/Components/footer/Footer.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import {
     FaGithub,
     FaTelegram,
@@ -31,22 +32,21 @@ const footerData = {
         },
     ],
     copyright: {
-        text: "The project is completely open source, but to support me, please fork and star me before cloning..",
+        text: "footer.openSourceText",
         author: {
-            name: "Ahmad Rasouli",
+            name: "name",
             email: "darkcodeit@protonmail.com"
         },
-       
+
     }
 };
 
 function Footer() {
+    const { t } = useTranslation();
+
     return (
         <footer className=" text-gray-300 py-12 relative overflow-hidden">
             {/* Animated Gradient Circles */}
-            <div className="absolute top-0 left-20 w-48 h-48 bg-gradient-to-r from-slate-400 to-gray-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse"></div>
-            <div className="absolute bottom-0 right-20 w-48 h-48 bg-gradient-to-r from-blue-400 to-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-1000"></div>
-            
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div className="flex flex-col items-center">
 
@@ -71,15 +71,15 @@ function Footer() {
 
                     {/* Copyright Text */}
                     <div className="flex flex-col md:flex-row items-center text-center text-gray-400 text-sm space-y-2 md:space-y-0 md:space-x-4">
-                        <p>{footerData.copyright.text}</p>
+                        <p>{t(footerData.copyright.text)}</p>
                         <div className="hidden md:block">•</div>
                         <p>
-                            Developed by{" "}
+                            {t('footer.developedBy')}{" "}
                             <a
                                 href={`mailto:${footerData.copyright.author.email}`}
                                 className="text-blue-400 hover:text-blue-300 transition-colors"
                             >
-                                {footerData.copyright.author.name}
+                                {t(footerData.copyright.author.name)}
                             </a>
                         </p>