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

47
src/components/LeadershipSection.tsx
View File

@@ -1,57 +1,68 @@
import { Users } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
interface LeadershipSectionProps {
isOutOfCollege?: boolean;
}
const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege = false }) => {
const { theme } = useTheme();
return (
<section className="mb-16">
<div className="flex items-center gap-3 mb-8">
<Users className="w-8 h-8 text-indigo-600" />
<h2 className="text-3xl font-bold text-slate-800">
<Users className={`w-8 h-8 transition-colors duration-300 ${
theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'
}`} />
<h2 className={`text-3xl font-bold transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
Leadership & Service
</h2>
</div>
<div className="bg-white rounded-2xl shadow-lg p-8">
<div className="grid md:grid-cols-2 gap-8">
<div className={`rounded-2xl shadow-lg p-8 transition-all duration-300 ${
theme === 'dark' ? 'bg-slate-800' : 'bg-white'
}`}>
<div className="grid gap-8 md:grid-cols-2">
<div>
<h3 className="text-xl font-semibold text-slate-800 mb-6">
<h3 className={`text-xl font-semibold mb-6 transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
Leadership Roles
</h3>
<div className="space-y-4">
<div>
<h4 className="font-semibold text-slate-700">
<h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
NJHS Inductee
</h4>
<p className="text-slate-600">
<p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
National Junior Honor Society Inductee • 2024
</p>
<p className="text-sm text-slate-600">
<p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Recognized for academic excellence, leadership, and
community service in middle school
</p>
</div>
<div>
<h4 className="font-semibold text-slate-700">
<h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
"Fabulous Falcon" Award
</h4>
<p className="text-slate-600">
<p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
Forestwood Middle School • 2024
</p>
<p className="text-sm text-slate-600">
<p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Awarded for outstanding contributions to school community
and leadership in student activities
</p>
</div>
<div>
<h4 className="font-semibold text-slate-700">
<h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
Peer Learning Mentor
</h4>
<p className="text-slate-600">
<p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
Forestwood Middle School • 2023-2024
</p>
<p className="text-sm text-slate-600">
<p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Mentored 50+ students in computer science fundamentals,
fostering a collaborative learning environment
</p>
@@ -60,18 +71,18 @@ const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege =
</div>
{isOutOfCollege && (
<div>
<h3 className="text-xl font-semibold text-slate-800 mb-6">
<h3 className="mb-6 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
Community Service
</h3>
<div className="space-y-4">
<div>
<h4 className="font-semibold text-slate-700">
<h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
Code for Good Volunteer
</h4>
<p className="text-slate-600">
<p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
2020-Present • 500+ hours
</p>
<p className="text-sm text-slate-600">
<p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Built digital solutions for 10+ nonprofits, impacting
10,000+ lives
</p>