Skip to content

Commit 12387a5

Browse files
ktrinh20ktrinh20
committed
I'm trying to include for equally-sized icons (Google Scholar, Notion, Twitter, and GitHub) under my profile picture in the AboutUs.js page. However, I'm struggling to get the icons to be positioned and sized correctly.
1 parent e91a106 commit 12387a5

26 files changed

+259
-46
lines changed

‎public/favicon.ico

11.3 KB
Binary file not shown.

‎public/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="%PUBLIC_URL%/moon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta
@@ -25,7 +25,7 @@
2525
work correctly both with client-side routing and a non-root public URL.
2626
Learn how to configure a non-root public URL by running `npm run build`.
2727
-->
28-
<title>React App</title>
28+
<title>Kevin T. Trinh</title>
2929
</head>
3030
<body>
3131
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252

5353
.horizontal-flex {
5454
display: flex;
55-
flex-direction: horizontal;
55+
flex-direction: row;
5656
}
5757

5858
.vertical-flex {

‎src/App.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import ResearchPage from './pages/ResearchPage';
66
import PublicationsPage from './pages/PublicationsPage';
77
import OutreachPage from './pages/OutreachPage';
88
import VolunteerPage from './pages/VolunteerPage';
9+
//import SciCommPage from './pages/SciCommPage';
10+
import PressPage from './pages/PressPage';
911
import KevinLogo from './photos/Europa-kevin-icon.png';
12+
import MoonLogo from './photos/moon-logo.png';
1013
import './App.css';
1114

1215
function App() {
@@ -17,7 +20,7 @@ function App() {
1720

1821
<div className="main-header">
1922
<div className="left">
20-
<img id="kevin-logo" src={KevinLogo}/>
23+
<img id="kevin-logo" src={MoonLogo}/>
2124
</div>
2225
<div className="right">
2326
<h1 id="full-name-header">Kevin T. Trinh</h1>
@@ -34,8 +37,7 @@ function App() {
3437
<Route exact path="/research" component={ResearchPage} />
3538
<Route exact path="/publications" component={PublicationsPage}/>
3639
<Route exact path="/outreach" component={OutreachPage}/>
37-
<Route exact path="/volunteer" component={VolunteerPage}/>
38-
40+
<Route exact path="/press" component={PressPage}/>
3941
</Switch>
4042
<hr id="bottom-hr"/>
4143
<p id="footer-text">Website coded by me :)</p>

‎src/components/Navbar/MenuItems.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,14 @@ export const MenuItems = [
1919
url: '/outreach',
2020
cName: 'nav-links'
2121
},
22+
{
23+
title: 'Press',
24+
url: '/press',
25+
cName: 'nav-links'
26+
},
2227
{
2328
title: 'CV',
24-
url: 'https://drive.google.com/file/d/1yPEUiLy8qIrNcUc4HHHbdzTzI41xdCuw/view?usp=sharing',
29+
url: 'https://drive.google.com/file/d/18jXPmr5ih9FAD72XX5GrAomYb6LfLHTj/view?usp=sharing',
2530
cName: 'nav-links'
2631
},
2732
]

‎src/pages/AboutPage.css

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@media screen and (min-width: 801px) {
2+
23
#profile-pic {
34
height: auto;
45
width: 250px;
5-
margin: 25px 0 25px 30px;
6+
margin: 25px 0 10px 30px;
67
}
78

89
.about-text {
@@ -14,6 +15,23 @@
1415
margin-top: 20px;
1516
margin-bottom: 20px;
1617
}
18+
19+
.logo-icon-container {
20+
width: 250px;
21+
object-fit: cover;
22+
margin-left: 30px;
23+
margin-bottom: 5px;
24+
}
25+
26+
.logo-icon {
27+
height: 17%;
28+
width: 17%;
29+
}
30+
31+
.align-items-center {
32+
align-items: center;
33+
}
34+
1735
}
1836

1937
@media screen and (max-width: 800px) {
@@ -29,4 +47,17 @@
2947
text-align: left;
3048
vertical-align: middle;
3149
}
50+
51+
.logo-icon-container {
52+
width: 100%;
53+
object-fit: contain;
54+
margin-bottom: 15px;
55+
}
56+
57+
.logo-icon {
58+
height: 12%;
59+
width: 12%;
60+
margin-left: 7px;
61+
margin-right: 7px;
62+
}
3263
}

‎src/pages/AboutPage.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React from 'react';
22
import { useMediaQuery } from 'react-responsive';
33
import ProfilePic from '../photos/AGU-headshot.png';
4+
import TwitterLogo from '../photos/twitter-logo.png';
5+
import GithubLogo from '../photos/github-logo.png';
6+
import GoogleScholarLogo from '../photos/google-scholar-logo.png';
7+
import NotionLogo from '../photos/notion-logo.png';
48
import './AboutPage.css';
59

610
function AboutPage() {
@@ -11,13 +15,21 @@ function AboutPage() {
1115
return(
1216
<div className="about-page">
1317
<div className={isWideScreen ? "horizontal-flex center-in-flex" : "vertical-flex center-in-flex"}>
14-
<img id="profile-pic" src={ProfilePic}/>
18+
<div className='vertical-flex'>
19+
<img id="profile-pic" src={ProfilePic}/>
20+
<div className='horizontal-flex center-in-flex logo-icon-container'>
21+
<a target="_blank" className = 'align-items-center' href='https://twitter.com/IcyMoonsKevin'><img className='logo-icon' src={TwitterLogo}/></a>
22+
<a target="_blank" href='https://github.com/ktrinh20'><img className='logo-icon' src={GithubLogo}/></a>
23+
<a target="_blank" href='https://scholar.google.com/citations?user=zpvV860AAAAJ&hl=en'><img className='logo-icon' src={GoogleScholarLogo}/></a>
24+
<a target="_blank" href='https://picturesque-freezer-4ae.notion.site/KEVIN-T-TRINH-002e7f267b2442b4b6d20dcf61004fe9'><img className='logo-icon' src={NotionLogo}/></a>
25+
</div>
26+
</div>
1527
<p className="about-text">I am a PhD candidate at the Arizona State University in the School of
16-
Earth and Space Exploration, advised by Dr. Joseph G. O’Rourke. I received my BA in Physics from
28+
Earth and Space Exploration, advised by <a href="https://josephgorourke.com/">Dr. Joseph G. O’Rourke</a>. I received my BA in Physics from
1729
Bowdoin College in 2019 as a first-generation student. Also, I am a NASA FINESST future investigator
1830
(FI) studying the internal differentiation, evolution, and potential habitability of Jupiter’s moon,
1931
Europa.<br/><br/>
20-
In my research, I use numerical models to investigate the <b>geophysics and geochemistry of
32+
In my research, I use numerical models and fundamental theory to investigate the <b>geophysics and geochemistry of
2133
icy moons</b>. I am particularly interested in large-scale processes such as ocean formation,
2234
metallic core formation, dynamo activity, and (seafloor) volcanism.
2335
<br/><br/>

‎src/pages/OutreachPage.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function OutreachPage() {
6464

6565
<div className={isWideScreen ? "horizontal-flex outreach-container" : "vertical-flex outreach-container"}>
6666
<img className="outreach-pic" src={WSYCS}/>
67-
<p className="outreach-text"><strong>Why Should You Care Science (WSYCS) (2021)</strong><br/>
67+
<p className="outreach-text"><strong>Why Should You Care Science (WSYCS) (2021 - now)</strong><br/>
6868
I created a STEAM (STEM + Art) outreach page on Instagram where each
6969
post is a visual slideshow talking about STEM in plain-speak. Posts are generally created
7070
by different graduate students and postdocs in a variety of disciplines, but we all

‎src/pages/PressPage.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.publications-alignment {
2+
align-items: start;
3+
}
4+
5+
ol {
6+
text-align: left;
7+
list-style-position: outside;
8+
}
9+
10+
.remove-bullet {
11+
list-style-type: none;
12+
}
13+
14+
@media screen and (min-width: 961px) {
15+
ol li {
16+
margin: 0 40px 10px 40px;
17+
font-size: 12pt;
18+
}
19+
20+
#google-scholar-text {
21+
font-size: 12pt;
22+
display: inline;
23+
text-align: center;
24+
margin: 10px auto;
25+
}
26+
27+
.publications-header {
28+
font-size: 18pt;
29+
font-weight: bold;
30+
align-self: center;
31+
margin-top: 10px;
32+
margin-bottom: 10px;
33+
}
34+
}
35+
36+
@media screen and (max-width: 960px) {
37+
38+
.body-text{
39+
font-size: 10pt;
40+
margin: 15px;
41+
}
42+
43+
#google-scholar-text {
44+
font-size: 10pt;
45+
display: block;
46+
text-align: center;
47+
margin: 5px auto;
48+
}
49+
50+
.publications-header {
51+
font-size: 14pt;
52+
font-weight: bold;
53+
align-self: center;
54+
margin-top: 3px;
55+
}
56+
}

‎src/pages/PressPage.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { useMediaQuery } from 'react-responsive';
3+
import './PressPage.css';
4+
5+
function PressPage() {
6+
7+
const isWideScreen = useMediaQuery({query: '(min-width: 961px)'});
8+
const isNarrowScreen = useMediaQuery({query: '(max-width: 960px)'});
9+
10+
return(
11+
<div className="about-page">
12+
<div className="vertical-flex publications-alignment">
13+
<p className="publications-header">Selected Press</p>
14+
<ol className="remove-bullet">
15+
<li>
16+
Coming soon: the Planetary Radio Podcast (via Planetary Society).
17+
</li>
18+
<br/>
19+
<li>
20+
<b>2023 - </b>Slow Evolution of Europa's Interior
21+
: <a href='https://azpbs.org/horizon/2023/07/exploring-jupiters-moon-europa/'>Arizona PBS</a>
22+
, <a href='https://news.asu.edu/20230616-asu-study-jupiters-moon-europa-may-have-had-slow-evolution?utm_content=bufferb256d&utm_medium=social&utm_source=linkedin.com&utm_campaign=buffer'>ASU News</a>
23+
, <a href='https://phys.org/news/2023-06-jupiter-moon-europa-evolution.html'>phys.org</a>
24+
, <a href='https://www.space.com/jupiter-ocean-moon-europa-no-fully-formed-core'>space.com</a>.
25+
</li>
26+
</ol>
27+
</div>
28+
</div>
29+
)
30+
}
31+
32+
export default PressPage;

0 commit comments

Comments
 (0)