pure_sagacity/Portfolio-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement dark mode theme support across components

Browse Source 
- Added ThemeContext for managing theme state and toggling between light and dark modes.
- Updated components (EntrepreneurshipSection, Footer, HeroSection, LeadershipSection, ReviewSection, TechSection, UniqueSection) to utilize theme context and apply conditional styling based on the current theme.
- Enhanced CSS with custom properties for theming and transitions.
- Configured Tailwind CSS to support dark mode.
- Ensured consistent styling and transitions for text and background colors in dark mode.
This commit is contained in:
Maaz Khokhar
2025-06-25 12:40:38 -04:00
parent 5b7ff93406
commit 7119d7a48d
14 changed files with 640 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Footer.tsx
View File

@@ -1,22 +1,29 @@
import { Mail, Linkedin, Github } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
interface Props {
isOutOfCollege?: boolean;
}
const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
const { theme } = useTheme();
return (
<section className="mb-16">
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl shadow-xl text-white p-12 text-center">
<h2 className="text-4xl font-bold mb-6">Let's Connect</h2>
<p className="text-xl mb-8 opacity-90">
<div className={`rounded-2xl shadow-xl text-white p-12 text-center transition-all duration-300 ${
theme === 'dark'
? 'bg-gradient-to-r from-indigo-700 to-purple-700'
: 'bg-gradient-to-r from-indigo-600 to-purple-600'
}`}>
<h2 className="mb-6 text-4xl font-bold">Let's Connect</h2>
<p className="mb-8 text-xl opacity-90">
Ready to collaborate on something amazing? I'm always excited to
discuss new opportunities and innovative projects.
</p>
<div className="flex flex-wrap justify-center gap-6">
<a
href="khokharmaaz@gmail.com"
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
className="flex items-center gap-2 px-6 py-3 transition-colors rounded-lg bg-white/20 backdrop-blur-sm hover:bg-white/30"
>
<Mail className="w-5 h-5" />
Email Me
@@ -24,7 +31,7 @@ const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
{isOutOfCollege && (
<a
href="https://linkedin.com/MyLinkedinProfile"
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
className="flex items-center gap-2 px-6 py-3 transition-colors rounded-lg bg-white/20 backdrop-blur-sm hover:bg-white/30"
>
<Linkedin className="w-5 h-5" />
LinkedIn
@@ -32,7 +39,7 @@ const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
)}
<a
href="https://github.com/coolestcoder655"
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
className="flex items-center gap-2 px-6 py-3 transition-colors rounded-lg bg-white/20 backdrop-blur-sm hover:bg-white/30"
>
<Github className="w-5 h-5" />
GitHub