Skip to content

Commit 97dd00a

Browse files
ahmadrasouli-devahmadrasouli-dev
committed
Enhance About component with download and view resume functionality; add Instagram link to Banner and Footer components.
1 parent 451f175 commit 97dd00a

4 files changed

Lines changed: 168 additions & 22 deletions

File tree

‎src/Components/About/About.jsx‎

Lines changed: 148 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,126 @@
1+
// import React from 'react';
2+
// import PropTypes from 'prop-types';
3+
// import { FaDownload } from 'react-icons/fa6';
4+
// import { useTranslation } from 'react-i18next';
5+
6+
// function About() {
7+
// const { t } = useTranslation();
8+
9+
// const handleDownload = async (e) => {
10+
// e.preventDefault();
11+
// try {
12+
// const response = await fetch(t('about.resume.url'));
13+
// if (!response.ok) {
14+
// throw new Error('File not found');
15+
// }
16+
// const blob = await response.blob();
17+
// const url = window.URL.createObjectURL(blob);
18+
// const link = document.createElement('a');
19+
// link.href = url;
20+
// link.download = 'AhmadRasouli.pdf';
21+
// document.body.appendChild(link);
22+
// link.click();
23+
// document.body.removeChild(link);
24+
// window.URL.revokeObjectURL(url);
25+
// } catch (error) {
26+
// console.error('Download failed:', error);
27+
// alert('متأسفانه دانلود فایل با مشکل مواجه شد. لطفاً دوباره تلاش کنید.');
28+
// }
29+
// };
30+
31+
// return (
32+
// <section className="relative py-20 px-4 md:px-8" id="about">
33+
// {/* Animated Gradient Circles */}
34+
// <div className="absolute top-40 left-10 w-64 h-64 bg-gradient-to-r from-green-400 to-emerald-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse"></div>
35+
// <div className="absolute bottom-40 right-10 w-64 h-64 bg-gradient-to-r from-blue-400 to-cyan-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-1000"></div>
36+
37+
// <div className="max-w-7xl mx-auto">
38+
// {/* Header Section */}
39+
// <div className="text-center mb-20">
40+
// <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">
41+
// {t('about.title')}
42+
// </h3>
43+
// <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"></div>
44+
// </div>
45+
46+
// {/* Content Grid */}
47+
// <div className="grid lg:grid-cols-3 gap-8 items-start">
48+
// {/* Text Content */}
49+
// <div className="lg:col-span-2 space-y-6">
50+
// {t('about.description', { returnObjects: true }).map((paragraph, index) => (
51+
// <div
52+
// key={`para-${index}`}
53+
// className="relative bg-white/20 backdrop-blur-lg border border-white/30
54+
// rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-500
55+
// hover:-translate-y-2 group"
56+
// >
57+
// <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10
58+
// opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl"></div>
59+
// <p className="text-lg leading-relaxed text-gray-800 relative z-10">
60+
// {paragraph}
61+
// </p>
62+
// </div>
63+
// ))}
64+
// </div>
65+
66+
// {/* Download Card */}
67+
// <div className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl
68+
// p-8 shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2
69+
// group overflow-hidden">
70+
// <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10
71+
// opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl"></div>
72+
// <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-blue-400/20 to-purple-400/20
73+
// rounded-bl-2xl opacity-50"></div>
74+
// <div className="absolute bottom-0 left-0 w-12 h-12 bg-gradient-to-tr from-pink-400/20 to-orange-400/20
75+
// rounded-tr-2xl opacity-50"></div>
76+
77+
// <div className="text-center relative z-10">
78+
// <div className="mb-6">
79+
// <span className="inline-block bg-gradient-to-br from-blue-500/20 to-purple-500/20
80+
// text-blue-600 p-4 rounded-2xl backdrop-blur-sm">
81+
// <FaDownload className="w-8 h-8" />
82+
// </span>
83+
// </div>
84+
// <h3 className="text-xl font-bold mb-4 text-gray-800">
85+
// {t('about.portfolio')}
86+
// </h3>
87+
// <button
88+
// onClick={handleDownload}
89+
// className="inline-flex items-center justify-center w-full bg-gradient-to-r from-blue-600 to-purple-600
90+
// hover:from-blue-700 hover:to-purple-700 text-white px-6 py-4 rounded-xl
91+
// transition-all duration-300 group shadow-lg hover:shadow-xl"
92+
// aria-label={t('about.resume.label')}
93+
// >
94+
// <span className="font-medium">{t('about.resume.label')}</span>
95+
// <FaDownload className="ml-3 w-5 h-5 transition-transform group-hover:translate-y-1" />
96+
// </button>
97+
// </div>
98+
// </div>
99+
// </div>
100+
// </div>
101+
// </section>
102+
// );
103+
// }
104+
// About.propTypes = {
105+
// aboutContent: PropTypes.shape({
106+
// title: PropTypes.string,
107+
// description: PropTypes.arrayOf(PropTypes.string),
108+
// resume: PropTypes.shape({
109+
// url: PropTypes.string,
110+
// label: PropTypes.string
111+
// })
112+
// })
113+
// };
114+
115+
// export default About;
116+
117+
118+
119+
120+
1121
import React from 'react';
2122
import PropTypes from 'prop-types';
3-
import { FaDownload } from 'react-icons/fa6';
123+
import { FaDownload, FaEye } from 'react-icons/fa6';
4124
import { useTranslation } from 'react-i18next';
5125

6126
function About() {
@@ -33,7 +153,7 @@ function About() {
33153
{/* Animated Gradient Circles */}
34154
<div className="absolute top-40 left-10 w-64 h-64 bg-gradient-to-r from-green-400 to-emerald-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse"></div>
35155
<div className="absolute bottom-40 right-10 w-64 h-64 bg-gradient-to-r from-blue-400 to-cyan-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-1000"></div>
36-
156+
37157
<div className="max-w-7xl mx-auto">
38158
{/* Header Section */}
39159
<div className="text-center mb-20">
@@ -83,17 +203,31 @@ function About() {
83203
</div>
84204
<h3 className="text-xl font-bold mb-4 text-gray-800">
85205
{t('about.portfolio')}
86-
</h3>
87-
<button
88-
onClick={handleDownload}
89-
className="inline-flex items-center justify-center w-full bg-gradient-to-r from-blue-600 to-purple-600
90-
hover:from-blue-700 hover:to-purple-700 text-white px-6 py-4 rounded-xl
91-
transition-all duration-300 group shadow-lg hover:shadow-xl"
92-
aria-label={t('about.resume.label')}
93-
>
94-
<span className="font-medium">{t('about.resume.label')}</span>
95-
<FaDownload className="ml-3 w-5 h-5 transition-transform group-hover:translate-y-1" />
96-
</button>
206+
</h3> {/* Actions: Download + View */}
207+
<div className="space-y-3">
208+
<button
209+
onClick={handleDownload}
210+
className="inline-flex items-center justify-center w-full bg-gradient-to-r from-blue-600 to-purple-600
211+
hover:from-blue-700 hover:to-purple-700 text-white px-4 py-3 rounded-xl
212+
transition-all duration-300 group shadow-lg hover:shadow-xl"
213+
aria-label={t('about.resume.label')}
214+
>
215+
<span className="font-medium">{t('about.resume.label')}</span>
216+
<FaDownload className="ml-3 w-5 h-5 transition-transform group-hover:translate-y-1" />
217+
</button>
218+
219+
<a
220+
href="https://resume-seven-dusky.vercel.app/"
221+
target="_blank"
222+
rel="noopener noreferrer"
223+
className="inline-flex items-center justify-center w-full
224+
text-white rounded-xl
225+
transition-all duration-300 group "
226+
aria-label="View Resume Online"
227+
>
228+
<FaEye className="text-gray-600 hover:text-blue-400 transition-colors duration-300" />
229+
</a>
230+
</div>
97231
</div>
98232
</div>
99233
</div>
@@ -112,4 +246,4 @@ About.propTypes = {
112246
})
113247
};
114248

115-
export default About;
249+
export default About;

‎src/Components/banner/Banner.json‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,14 @@
1010
"icon": "FaGithub"
1111
},
1212
{
13-
"name": "Telegram",
14-
"url": "https://t.me/Darkcodeit",
15-
"icon": "FaTelegram"
13+
"name": "Telegram",
14+
"url": "https://t.me/Darkcodeit",
15+
"icon": "FaTelegram"
16+
},
17+
{
18+
"name": "Instagram",
19+
"url": "https://www.instagram.com/darkcodeit?igsh=ZmE1cjNnbGp4aGMy",
20+
"icon": "FaInstagram"
1621
}
1722

1823
]

‎src/Components/banner/Banner.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import {
55
FaGithub,
66
FaTelegram,
77
FaAngleDown,
8-
FaGlobe
8+
FaGlobe,
9+
FaInstagram
910
} from 'react-icons/fa';
1011

1112
import data from './Banner.json';
@@ -14,7 +15,8 @@ import Lightning from './Lightning.jsx';
1415
const iconComponents = {
1516
FaGithub: FaGithub,
1617
FaTelegram: FaTelegram,
17-
FaGlobe: FaGlobe
18+
FaGlobe: FaGlobe,
19+
FaInstagram: FaInstagram
1820
};
1921

2022
function Banner() {

‎src/Components/footer/Footer.jsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
FaFacebook,
77
FaLinkedin,
88
FaCodepen,
9-
FaGlobe
9+
FaInstagram
1010
} from 'react-icons/fa';
1111

1212
const footerData = {
@@ -23,7 +23,12 @@ const footerData = {
2323
icon: <FaTelegram className="w-5 h-5" />,
2424
ariaLabel: "Contact via Telegram"
2525
},
26-
26+
{
27+
name: "Instagram",
28+
url: "https://www.instagram.com/darkcodeit/",
29+
icon: <FaInstagram className="w-5 h-5" />,
30+
ariaLabel: "Visit Instagram profile"
31+
},
2732
],
2833
copyright: {
2934
text: "The project is completely open source, but to support me, please fork and star me before cloning..",
@@ -53,7 +58,7 @@ function Footer() {
5358
href={link.url}
5459
target="_blank"
5560
rel="noopener noreferrer"
56-
className="text-gray-300 hover:text-white transition-all duration-300 group"
61+
className="text-gray-600 hover:text-blue-400 transition-colors duration-300"
5762
aria-label={link.ariaLabel}
5863
>
5964
<span className="sr-only">{link.name}</span>

0 commit comments

Comments
 (0)