📦 EqualifyEverything / equalify-reflow-docs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114import React from 'react';
import { Linkedin, Globe } from 'lucide-react';
import blakeImg from '../assets/blake.jpeg';
import stefinImg from '../assets/stefin.jpeg';
import jemmaImg from '../assets/jemma.jpg';
import maryImg from '../assets/mary.jpg';
import jasonImg from '../assets/jason.jpg';
import michelleImg from '../assets/michelle.jpg';

interface TeamMemberProps {
    name: string;
    bio: string;
    imageUrl: string;
    linkedinUrl: string;
    websiteUrl?: string;
}

const TeamMember: React.FC<TeamMemberProps> = ({ name, bio, imageUrl, linkedinUrl, websiteUrl }) => (
    <div className="bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center border border-gray-100 hover:shadow-xl transition-shadow duration-300">
        <div className="w-32 h-32 mb-4 rounded-full overflow-hidden border-4 border-gray-50 shadow-inner">
            <img src={imageUrl} alt={name} className="w-full h-full object-cover" />
        </div>
        <h3 className="text-lg font-bold text-gray-900 mb-1">{name}</h3>
        <p className="text-gray-600 text-sm mb-6 leading-relaxed">
            {bio}
        </p>
        <div className="flex space-x-4 mt-auto">
            <a
                href={linkedinUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="p-2 text-gray-400 hover:text-uic-blue hover:bg-blue-50 rounded-full transition-colors"
                aria-label={`${name}'s LinkedIn`}
            >
                <Linkedin className="w-5 h-5" />
            </a>
            {websiteUrl && (
                <a
                    href={websiteUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="p-2 text-gray-400 hover:text-uic-blue hover:bg-blue-50 rounded-full transition-colors"
                    aria-label={`${name}'s Website`}
                >
                    <Globe className="w-5 h-5" />
                </a>
            )}
        </div>
    </div>
);

export const Team: React.FC = () => {
    return (
        <section className="py-20 bg-gray-50 border-t border-gray-200">
            <div className="container mx-auto px-4">
                <div className="text-center mb-16">
                    <h2 className="text-3xl md:text-4xl font-bold text-uic-blue mb-4">Meet the Team</h2>
                    <p className="text-xl text-gray-600 max-w-2xl mx-auto">
                        Dedicated individuals using technology to do good.
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto justify-items-center">
                    <TeamMember
                        name="Blake Bertuccelli-Booth"
                        bio="Setting the fund vision and fostering new partnerships."
                        imageUrl={blakeImg}
                        linkedinUrl="https://www.linkedin.com/in/blake1111/"
                        websiteUrl="http://blake.bertuccelli-booth.org/"
                    />

                    <TeamMember
                        name="Stefin Pasternak"
                        bio="Ensuring equity and sustainability through fund initiatives."
                        imageUrl={stefinImg}
                        linkedinUrl="https://www.linkedin.com/in/stephen-pasternak-11979b155/"
                        websiteUrl="https://www.stefinpasternak.com/"
                    />

                    <TeamMember
                        name="JaEun Jemma Ku"
                        bio="Managing UIC relationships to ensure maximum impact."
                        imageUrl={jemmaImg}
                        linkedinUrl="https://www.linkedin.com/in/jemmaku/"
                        websiteUrl="https://it.uic.edu/profiles/jaeun-jemma-ku/"
                    />

                    <TeamMember
                        name="Michelle Mitchell"
                        bio="Elevating relevant work and solving problems before they exist. Making the fund work."
                        imageUrl={michelleImg}
                        linkedinUrl="https://www.linkedin.com/in/michelle-mitchell-3a6a5017b/"
                    />

                    <TeamMember
                        name="Mary Hubbard"
                        bio="Overseeing WordPress project integration and qualification standards within the open source ecosystem."
                        imageUrl={maryImg}
                        linkedinUrl="https://www.linkedin.com/in/maryfhubbard/"
                        websiteUrl="https://mary.blog/"
                    />

                    <TeamMember
                        name="Jason Maslanka"
                        bio="Sets accountability measures to drive and determine success."
                        imageUrl={jasonImg}
                        linkedinUrl="https://www.linkedin.com/in/jasonmaslanka/"
                    />
                </div>
            </div>
        </section>
    );
};