Skip to content

Add new content to about page and minor redesigns #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 9, 2024
Merged

Add new content to about page and minor redesigns #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3b4b610
Update about page description
ZackGoldblum Sep 9, 2024
41a8c1b
Move certifications to bottom of the about page
ZackGoldblum Sep 9, 2024
e9b831d
Update about page descriptions
ZackGoldblum Sep 9, 2024
5875d57
Add Nucleate to about page timeline
ZackGoldblum Sep 9, 2024
956f85b
Update layout and content of affiliations on about page
ZackGoldblum Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/about/dban.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/about/nucleate.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/about/nucleate_thumbnail.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/about/pint_of_science.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,7 @@ h3 {
display: flex;
align-items: top;
justify-content: center;
margin: 50px 10% 0px 10%;
margin: 50px 7% 0px 10%;
}

.about_image {
Expand Down Expand Up @@ -575,9 +575,10 @@ h3 {
}

#affiliations_container {
display: flex;
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
width: 100%;
max-width: 920px;
margin: 0 auto;
Expand Down
112 changes: 66 additions & 46 deletions src/pages/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,22 @@ function About() {
useSmoothScroll();

const timelineEntries = [
{
date: "Sept 2024-<br>Present",
imageUrl: "/about/nucleate_thumbnail.webp",
imageAlt: "Nucleate thumbnail",
title: "Leadership Team, Philadelphia",
subheader: "Nucleate",
bullets: ["Nucleate is a student-led, non-profit organization that empowers the next generation of biotech leaders by educating today's academic trainees."]
},
{
date: "Aug 2024-<br>Present",
imageUrl: "/about/penn_thumbnail.webp",
imageAlt: "Penn thumbnail",
title: "Bioengineering PhD Student",
subheader: "University of Pennsylvania",
subtitle: "School of Engineering and Applied Science",
bullets: ["Litt Lab under Brian Litt, MD.<br><br>"]
bullets: ["Litt Lab under Brian Litt, MD.", "Ashton Fellow."]
},
{
date: "Sept 2023-<br>Aug 2024",
Expand Down Expand Up @@ -168,8 +176,7 @@ function About() {
alt="Zack Goldblum profile picture"
/>
<div className="about_text item_container">
I am an engineer and scientist doing research at the intersection of artificial intelligence and
neurotechnology.
I am an engineer and scientist doing research at the intersection of neurotechnology and artificial intelligence.
</div>
</div>
<br />
Expand All @@ -182,49 +189,36 @@ function About() {
<br />
<Section title="Current Affiliations">
<div id="affiliations_container">
<div className="flex_container">
<div id="left" className="box">
<a href="https://seas.upenn.edu/">
<img src="/about/penn_engineering.webp" alt="Penn Engineering image" width="210" height="80" />
</a>
</div>
<div id="middle" className="box">
<a href="https://cnt.upenn.edu/">
<img src="/about/cnt.webp" alt="Center for Neuroengineering and Therapeutics image" width="333" height="80" />
</a>
</div>
<div id="right" className="box">
<a href="https://littlab.seas.upenn.edu/">
<img src="/about/littlab.webp" alt="Litt Lab image" width="278" height="80" />
</a>
</div>
<div id="left" className="box">
<a href="https://seas.upenn.edu/">
<img src="/about/penn_engineering.webp" alt="Penn Engineering image" width="210" height="80" />
</a>
</div>
<div id="middle" className="box">
<a href="https://cnt.upenn.edu/">
<img src="/about/cnt.webp" alt="Center for Neuroengineering and Therapeutics image" width="333" height="80" />
</a>
</div>
<div id="right" className="box">
<a href="https://littlab.seas.upenn.edu/">
<img src="/about/littlab.webp" alt="Litt Lab image" width="278" height="80" />
</a>
</div>
<div id="left" className="box">
<a href="https://nucleate.xyz/">
<img src="/about/nucleate.webp" alt="Nucleate image" width="533" height="80" />
</a>
</div>
<div id="middle" className="box">
<a href="https://drexel.edu/biomed/resources/alumni/">
<img src="/about/dban.webp" alt="Drexel Biomed Alumni Network image" width="250" height="80" />
</a>
</div>
<div id="right" className="box">
<a href="https://pintofscience.com/">
<img src="/about/pint_of_science.webp" alt="Pint of Science image" width="250" height="80" />
</a>
</div>
</div>
</Section>
<br />
<Section title="Certifications">
<div>
<h4 className="header about_header">Biomedical Research</h4>
<p className="timeline_subtitle" style={{ paddingBottom: '0px' }}>
CITI Program <span style={{ fontSize: '18px' }}>(Sept 2023 - N/A)</span>
</p>
<a className="check_it_out" href="https://www.citiprogram.org/verify/?w05306b68-a365-4ec3-ba07-d8522b3b0dfd-58123920">Check it out!</a>
</div>
<br />
<div>
<h4 className="header about_header">Good Clinical Practice</h4>
<p className="timeline_subtitle" style={{ paddingBottom: '0px' }}>
CITI Program <span style={{ fontSize: '18px' }}>(Sept 2023 - Sept 2026)</span>
</p>
<a className="check_it_out" href="https://www.citiprogram.org/verify/?w4c47456a-6a05-400a-b30c-adee6ec9d829-58147870">Check it out!</a>
</div>
<br />
<div>
<h4 className="header about_header">Human Subjects Research - Social Behavioral</h4>
<p className="timeline_subtitle" style={{ paddingBottom: '0px' }}>
CITI Program <span style={{ fontSize: '18px' }}>(Feb 2022 - Feb 2025)</span>
</p>
<a className="check_it_out" href="https://www.citiprogram.org/verify/?w098eae68-b03c-4ce7-b76a-cafb17f52784-47523437">Check it out!</a>
</div>
</Section>
<br />
Expand Down Expand Up @@ -269,7 +263,7 @@ function About() {
<div>
<h4 className="header about_header">Event Manager, Philadelphia</h4>
<p className="timeline_subtitle" style={{ paddingBottom: '0px' }}>
Pint of Science US <span style={{ fontSize: '18px' }}>(May 2024)</span>
Pint of Science US <span style={{ fontSize: '18px' }}>(May 2024 - Present)</span>
</p>
</div>
<br />
Expand Down Expand Up @@ -338,6 +332,32 @@ function About() {
</p>
</div>
</Section>
<br />
<Section title="Certifications">
<div>
<h4 className="header about_header">Biomedical Research</h4>
<p className="timeline_subtitle" style={{ paddingBottom: '0px' }}>
CITI Program <span style={{ fontSize: '18px' }}>(Sept 2023 - N/A)</span>
</p>
<a className="check_it_out" href="https://www.citiprogram.org/verify/?w05306b68-a365-4ec3-ba07-d8522b3b0dfd-58123920">Check it out!</a>
</div>
<br />
<div>
<h4 className="header about_header">Good Clinical Practice</h4>
<p className="timeline_subtitle" style={{ paddingBottom: '0px' }}>
CITI Program <span style={{ fontSize: '18px' }}>(Sept 2023 - Sept 2026)</span>
</p>
<a className="check_it_out" href="https://www.citiprogram.org/verify/?w4c47456a-6a05-400a-b30c-adee6ec9d829-58147870">Check it out!</a>
</div>
<br />
<div>
<h4 className="header about_header">Human Subjects Research - Social Behavioral</h4>
<p className="timeline_subtitle" style={{ paddingBottom: '0px' }}>
CITI Program <span style={{ fontSize: '18px' }}>(Feb 2022 - Feb 2025)</span>
</p>
<a className="check_it_out" href="https://www.citiprogram.org/verify/?w098eae68-b03c-4ce7-b76a-cafb17f52784-47523437">Check it out!</a>
</div>
</Section>
</div>
<div style={{ textAlign: 'center' }}>
<a className="back_to_top" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} href="#">
Expand Down