-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add basic officer card component Co-authored-by: Phantom0110 <146048575+phantom0110@users.noreply.github.com> * Fix lint issues * Add multiple cards to officer section Co-authored-by: Phantom0110 <146048575+Phantom0110@users.noreply.github.com> * Decreased social link sizes. Added officer names and position. Need to add officer pictures and social links. * Added images of officers. Need to add social links. Some pictures also seem to not fit well in the officer card and social media icons popping out of card as a result. #18 * Add styles to make officer portraits the same size * Change officer social links to use their real links * Update size of cards to fit 3 columns in 800px content width * Change social links to open in new tab * Add web logo for officer cards * Change officer names to be center aligned * Delete eric-navar.webp * Remove unnecessary comments from CSS files * Remove alt prop from OfficerCard and data and export SocialLink * Rename OfficerCardProperties to -Props and add eslint exception * Change officer heading to be center aligned wrt container * Change .eslintrc.js to use LF line endings * Move officerCardData to separate officer-data.ts file --------- Co-authored-by: Phantom0110 <146048575+phantom0110@users.noreply.github.com> Co-authored-by: Phantom0110 <mohamali9173@gmail.com>
- Loading branch information
1 parent
47f701e
commit 251f61b
Showing
13 changed files
with
271 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
.officerCard { | ||
width: 250px; | ||
max-width: 100%; | ||
height: 320px; | ||
background-color: rgba(0, 0, 0, 0.4); | ||
border-radius: 10px; | ||
padding: 1rem; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
align-items: center; | ||
} | ||
|
||
.portrait { | ||
height: 180px; | ||
width: 180px; | ||
object-fit: cover; | ||
border-radius: 5px; | ||
} | ||
|
||
.officerCard h3 { | ||
font-size: 1.3rem; | ||
font-weight: 700; | ||
text-align: center; | ||
} | ||
|
||
.officerCard h4 { | ||
font-size: 1.25rem; | ||
font-weight: 700; | ||
text-align: center; | ||
} | ||
|
||
.socialLinks { | ||
display: flex; | ||
gap: 1rem; | ||
} | ||
|
||
/* | ||
The website logo is slightly smaller than the other logos. | ||
This scales it up a tiny bit. | ||
This is where the logo comes from: | ||
https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Alanguage%3AFILL%401%3Bwght%40400%3BGRAD%400%3Bopsz%4024 | ||
*/ | ||
.socialLinks img[data-name="Website"] { | ||
transform: scale(1.2); | ||
} | ||
|
||
.socialLinks a:hover { | ||
transform: scale(1.1); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import Image from "next/image"; | ||
import styles from "./OfficerCard.module.css"; | ||
|
||
export type SocialLink = { | ||
name: string; | ||
url: string; | ||
icon: string; | ||
}; | ||
|
||
export type OfficerCardProps = { | ||
position: string; | ||
image: string; | ||
name: string; | ||
socialLinksData: SocialLink[]; | ||
}; | ||
|
||
export default function OfficerCard({ | ||
position, | ||
image, | ||
name, | ||
socialLinksData, | ||
}: OfficerCardProps) { | ||
const socialLinks = socialLinksData.map((link) => ( | ||
<a | ||
href={link.url} | ||
key={link.name} | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<Image | ||
src={link.icon} | ||
alt={link.name} | ||
height={30} | ||
width={30} | ||
data-name={link.name} | ||
/> | ||
</a> | ||
)); | ||
|
||
return ( | ||
<div className={styles.officerCard}> | ||
<h3>{position}</h3> | ||
<Image | ||
className={styles.portrait} | ||
src={image} | ||
alt={`Profile picture of ${name}`} | ||
height={180} | ||
width={180} | ||
/> | ||
<h4>{name}</h4> | ||
<div className={styles.socialLinks}>{socialLinks}</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
import { OfficerCardProps } from "./officer-card"; | ||
|
||
const officerCardData: OfficerCardProps[] = [ | ||
{ | ||
position: "President", | ||
image: "public/officers/Yonas_Bahre.jpg", | ||
name: "Yonas Bahre", | ||
socialLinksData: [ | ||
{ | ||
name: "LinkedIn", | ||
url: "https://www.linkedin.com/in/yonasbahre/", | ||
icon: "/linkedin_logo.png", | ||
}, | ||
], | ||
}, | ||
{ | ||
position: "Vice President", | ||
image: "public/officers/Michael_Hayworth.jpg", | ||
name: "Michael Hayworth", | ||
socialLinksData: [ | ||
{ | ||
name: "LinkedIn", | ||
url: "https://www.linkedin.com/in/michaeldhayworth/", | ||
icon: "/linkedin_logo.png", | ||
}, | ||
], | ||
}, | ||
{ | ||
position: "Treasurer", | ||
image: "public/officers/Stephen_Coomes.jpg", | ||
name: "Stephen Coomes", | ||
socialLinksData: [ | ||
{ | ||
name: "LinkedIn", | ||
url: "https://www.linkedin.com/in/stephen-coomes-8a4885221/", | ||
icon: "/linkedin_logo.png", | ||
}, | ||
], | ||
}, | ||
{ | ||
position: "Outreach Officer", | ||
image: "public/officers/Angel_Lopez.png", | ||
name: "Angel Lopez", | ||
socialLinksData: [ | ||
{ | ||
name: "GitHub", | ||
url: "https://github.com/angel1254mc", | ||
icon: "/github_logo.svg", | ||
}, | ||
{ | ||
name: "LinkedIn", | ||
url: "https://www.linkedin.com/in/angel1254/", | ||
icon: "/linkedin_logo.png", | ||
}, | ||
{ | ||
name: "Website", | ||
url: "https://www.angel1254.com/", | ||
icon: "/web_logo.svg", | ||
}, | ||
], | ||
}, | ||
{ | ||
position: "Program Officer", | ||
image: "public/officers/Param_Gupta.jpg", | ||
name: "Param Gupta", | ||
socialLinksData: [ | ||
{ | ||
name: "LinkedIn", | ||
url: "https://www.linkedin.com/in/paramg/", | ||
icon: "/linkedin_logo.png", | ||
}, | ||
], | ||
}, | ||
{ | ||
position: "Involvement Officer", | ||
image: "public/officers/CJ_Weir.jpg", | ||
name: "CJ Weir", | ||
socialLinksData: [ | ||
{ | ||
name: "LinkedIn", | ||
url: "https://www.linkedin.com/in/cj-weir/", | ||
icon: "/linkedin_logo.png", | ||
}, | ||
], | ||
}, | ||
]; | ||
|
||
export default officerCardData; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters