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

refactor: Improve code formatting and structure in LeadershipSection component

Browse Source
This commit is contained in:
Maaz Khokhar
2025-06-25 17:51:21 -04:00
parent 62c3ff0ec3
commit 8b31bbe5f8
1 changed files with 151 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/components/LeadershipSection.tsx
View File

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