Skip to content

Commit 3453d2c

Browse files
Darkcode-itDarkcode-it
committed
update header
1 parent fed6c85 commit 3453d2c

14 files changed

Lines changed: 467 additions & 289 deletions

File tree

‎src/App.jsx‎

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,37 +20,55 @@ import Footer from "./Components/footer/Footer.jsx";
2020
import PWAInstallPrompt from './components/PWAInstallPrompt';
2121
import './global.css'
2222
import {useTranslation} from "react-i18next";
23-
import { ThemeProvider } from './Components/Menu/Context';
23+
import { ThemeProvider, useTheme } from './Components/Menu/Context';
2424

25-
export default function App() {
25+
function AppContent() {
2626
const {t} = useTranslation();
27+
const { currentTheme } = useTheme();
28+
const isDark = currentTheme.name === 'dark';
2729

2830
return (
29-
<ThemeProvider>
30-
<div className="min-h-screen bg-theme relative overflow-hidden">
31-
{/* Overlay Gradient */}
32-
<div className="absolute inset-0 bg-gradient-theme opacity-5"></div>
33-
34-
{/* Animated Gradient Circles */}
35-
<div className="absolute top-20 left-10 w-72 h-72 bg-gradient-theme rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse"></div>
36-
<div className="absolute top-40 right-10 w-72 h-72 bg-gradient-theme rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-1000"></div>
37-
<div className="absolute bottom-20 left-1/2 w-72 h-72 bg-gradient-theme rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-2000"></div>
38-
39-
{/* Main Content */}
40-
<div className="relative">
41-
<Menu/>
42-
<Banner/>
43-
<About/>
44-
<Experience/>
45-
<Education/>
46-
<Certifications/>
47-
<Skills/>
48-
<Portfolio/>
49-
<Services/>
50-
<Footer/>
51-
<PWAInstallPrompt />
52-
</div>
31+
<div className={`min-h-screen relative overflow-hidden transition-colors duration-300 ${
32+
isDark
33+
? 'bg-gradient-to-br from-gray-900 via-slate-900 to-gray-800'
34+
: 'bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100'
35+
}`}>
36+
{/* Overlay Gradient */}
37+
<div className={`absolute inset-0 ${
38+
isDark
39+
? 'bg-gradient-to-br from-blue-900/10 via-purple-900/10 to-pink-900/10'
40+
: 'bg-gradient-to-br from-blue-400/5 via-purple-400/5 to-pink-400/5'
41+
}`}></div>
42+
43+
{/* Animated Gradient Circles */}
44+
<div className={`absolute bottom-20 left-1/2 w-72 h-72 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-2000 ${
45+
isDark
46+
? 'bg-gradient-to-r from-pink-600 to-orange-600'
47+
: 'bg-gradient-to-r from-pink-400 to-orange-400'
48+
}`}></div>
49+
50+
{/* Main Content */}
51+
<div className="relative">
52+
<Menu/>
53+
<Banner/>
54+
<About/>
55+
<Experience/>
56+
<Education/>
57+
<Certifications/>
58+
<Skills/>
59+
<Portfolio/>
60+
<Services/>
61+
<Footer/>
62+
<PWAInstallPrompt />
5363
</div>
64+
</div>
65+
);
66+
}
67+
68+
export default function App() {
69+
return (
70+
<ThemeProvider>
71+
<AppContent />
5472
</ThemeProvider>
5573
)
5674
}

‎src/Components/About/About.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ function About() {
3030

3131
return (
3232
<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+
3337
<div className="max-w-7xl mx-auto">
3438
{/* Header Section */}
3539
<div className="text-center mb-20">

‎src/Components/Education/Education.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ function EducationTimeline() {
1313

1414
return (
1515
<section className="relative py-20 px-4 md:px-8" id="education">
16+
{/* Animated Gradient Circles */}
17+
<div className="absolute top-32 left-12 w-64 h-64 bg-gradient-to-r from-amber-400 to-orange-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse"></div>
18+
<div className="absolute bottom-32 right-12 w-64 h-64 bg-gradient-to-r from-violet-400 to-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-1000"></div>
19+
1620
<div className="max-w-7xl mx-auto">
1721
<div className="text-center mb-20">
1822
<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">

‎src/Components/Experience/Experience.jsx‎

Lines changed: 72 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -201,90 +201,87 @@ function Experience() {
201201
const { t } = useTranslation();
202202

203203
return (
204-
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 relative overflow-hidden">
205-
<div className="absolute inset-0 bg-gradient-to-br from-blue-400/5 via-purple-400/5 to-pink-400/5"></div>
206-
<div className="absolute top-20 left-10 w-72 h-72 bg-gradient-to-r from-blue-400 to-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse"></div>
207-
<div className="absolute top-40 right-10 w-72 h-72 bg-gradient-to-r from-purple-400 to-pink-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-1000"></div>
208-
<div className="absolute bottom-20 left-1/2 w-72 h-72 bg-gradient-to-r from-pink-400 to-orange-400 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-2000"></div>
209-
210-
<section className="relative py-20 px-4 md:px-8" id="experience">
211-
<div className="max-w-7xl mx-auto">
212-
<div className="text-center mb-20">
213-
<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">
214-
{t('experience.title')}
215-
</h3>
216-
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"></div>
217-
</div>
204+
<section className="relative py-20 px-4 md:px-8" id="experience">
205+
{/* Animated Gradient Circles */}
206+
<div className="absolute top-20 left-16 w-64 h-64 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse"></div>
207+
<div className="absolute bottom-20 right-16 w-64 h-64 bg-gradient-to-r from-pink-400 to-rose-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-1000"></div>
208+
209+
<div className="max-w-7xl mx-auto">
210+
<div className="text-center mb-20">
211+
<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">
212+
{t('experience.title')}
213+
</h3>
214+
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"></div>
215+
</div>
218216

219-
<div className="space-y-8">
220-
{t('experience.items', { returnObjects: true }).map((item) => (
221-
<article
222-
key={item.id}
223-
className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8
224-
shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2
225-
group overflow-hidden"
226-
>
227-
{/* Gradient Overlays */}
228-
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10
229-
opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl"></div>
230-
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-blue-400/20 to-purple-400/20
231-
rounded-bl-2xl opacity-50"></div>
232-
<div className="absolute bottom-0 left-0 w-12 h-12 bg-gradient-to-tr from-pink-400/20 to-orange-400/20
233-
rounded-tr-2xl opacity-50"></div>
217+
<div className="space-y-8">
218+
{t('experience.items', { returnObjects: true }).map((item) => (
219+
<article
220+
key={item.id}
221+
className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8
222+
shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2
223+
group overflow-hidden"
224+
>
225+
{/* Gradient Overlays */}
226+
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10
227+
opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl"></div>
228+
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-blue-400/20 to-purple-400/20
229+
rounded-bl-2xl opacity-50"></div>
230+
<div className="absolute bottom-0 left-0 w-12 h-12 bg-gradient-to-tr from-pink-400/20 to-orange-400/20
231+
rounded-tr-2xl opacity-50"></div>
234232

235-
{/* Header */}
236-
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
237-
<div className="flex items-center gap-4">
238-
<div className="p-3 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-xl backdrop-blur-sm">
239-
<BriefcaseIcon className="w-8 h-8 text-blue-600" />
240-
</div>
241-
<div>
242-
<h3 className="text-2xl font-bold text-gray-800">{item.role}</h3>
243-
<span className="inline-block mt-2 bg-gradient-to-r from-blue-500/20 to-purple-500/20
244-
text-blue-800 px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">
245-
{item.type}
246-
</span>
247-
</div>
233+
{/* Header */}
234+
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
235+
<div className="flex items-center gap-4">
236+
<div className="p-3 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-xl backdrop-blur-sm">
237+
<BriefcaseIcon className="w-8 h-8 text-blue-600" />
238+
</div>
239+
<div>
240+
<h3 className="text-2xl font-bold text-gray-800">{item.role}</h3>
241+
<span className="inline-block mt-2 bg-gradient-to-r from-blue-500/20 to-purple-500/20
242+
text-blue-800 px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">
243+
{item.type}
244+
</span>
248245
</div>
249-
<span className="text-sm font-medium text-gray-600 bg-white/50 px-3 py-1
250-
rounded-full backdrop-blur-sm border border-white/30">
251-
{item.period}
252-
</span>
253246
</div>
247+
<span className="text-sm font-medium text-gray-600 bg-white/50 px-3 py-1
248+
rounded-full backdrop-blur-sm border border-white/30">
249+
{item.period}
250+
</span>
251+
</div>
254252

255-
{/* Description */}
256-
<p className="text-gray-600 leading-relaxed mb-8 text-lg relative z-10">
257-
{item.description}
258-
</p>
253+
{/* Description */}
254+
<p className="text-gray-600 leading-relaxed mb-8 text-lg relative z-10">
255+
{item.description}
256+
</p>
259257

260-
{/* Skills Grid */}
261-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10">
262-
<SkillCategory
263-
title={t('experience.skillCategories.development')}
264-
icon={<CodeBracketIcon className="w-6 h-6 text-blue-600" />}
265-
skills={item.skills.development}
266-
color="blue"
267-
/>
258+
{/* Skills Grid */}
259+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10">
260+
<SkillCategory
261+
title={t('experience.skillCategories.development')}
262+
icon={<CodeBracketIcon className="w-6 h-6 text-blue-600" />}
263+
skills={item.skills.development}
264+
color="blue"
265+
/>
268266

269-
<SkillCategory
270-
title={t('experience.skillCategories.security')}
271-
icon={<ShieldCheckIcon className="w-6 h-6 text-green-600" />}
272-
skills={item.skills.cybersecurity}
273-
color="green"
274-
/>
267+
<SkillCategory
268+
title={t('experience.skillCategories.security')}
269+
icon={<ShieldCheckIcon className="w-6 h-6 text-green-600" />}
270+
skills={item.skills.cybersecurity}
271+
color="green"
272+
/>
275273

276-
<SkillCategory
277-
title={t('experience.skillCategories.tools')}
278-
skills={item.skills.tools}
279-
color="purple"
280-
/>
281-
</div>
282-
</article>
283-
))}
284-
</div>
274+
<SkillCategory
275+
title={t('experience.skillCategories.tools')}
276+
skills={item.skills.tools}
277+
color="purple"
278+
/>
279+
</div>
280+
</article>
281+
))}
285282
</div>
286-
</section>
287-
</div>
283+
</div>
284+
</section>
288285
);
289286
}
290287

‎src/Components/Menu/Context.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export const ThemeProvider = ({ children }) => {
6060
document.documentElement.style.setProperty('--primary-color', currentTheme.colors.primary);
6161
document.documentElement.style.setProperty('--secondary-color', currentTheme.colors.secondary);
6262
document.documentElement.style.setProperty('--accent-color', currentTheme.colors.accent);
63+
document.documentElement.setAttribute('data-theme', currentTheme.name);
6364
}, [currentTheme]);
6465

6566
const toggleTheme = (themeName) => {

‎src/Components/Services/Services.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ function Services() {
1919
id="services"
2020
data-aos="fade-up"
2121
>
22+
{/* Animated Gradient Circles */}
23+
<div className="absolute top-36 left-10 w-64 h-64 bg-gradient-to-r from-emerald-400 to-teal-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse"></div>
24+
<div className="absolute bottom-36 right-10 w-64 h-64 bg-gradient-to-r from-purple-400 to-indigo-600 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse delay-1000"></div>
25+
2226
<div className="max-w-7xl mx-auto">
2327
{/* Header Section */}
2428
<div className="text-center mb-16">

0 commit comments

Comments
 (0)