diff --git a/package-lock.json b/package-lock.json
index 75d6ac4bd..01d23658a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
"react-ga4": "^2.1.0",
"react-h5-audio-player": "^3.8.6",
"react-router-dom": "^6.3.0",
+ "react-router-hash-link": "^2.4.3",
"react-scripts": "5.0.1",
"react-vertical-timeline-component": "^3.6.0",
"save-dev": "0.0.1-security",
@@ -2239,7 +2240,7 @@
"version": "11.10.6",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
"integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
- "devOptional": true,
+ "dev": true,
"dependencies": {
"@babel/helper-module-imports": "^7.16.7",
"@babel/runtime": "^7.18.3",
@@ -2270,7 +2271,7 @@
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
"integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==",
- "devOptional": true
+ "dev": true
},
"node_modules/@emotion/is-prop-valid": {
"version": "1.2.0",
@@ -2289,7 +2290,7 @@
"version": "11.10.6",
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
"integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
- "devOptional": true,
+ "dev": true,
"dependencies": {
"@babel/runtime": "^7.18.3",
"@emotion/babel-plugin": "^11.10.6",
@@ -2313,7 +2314,7 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
"integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
- "devOptional": true,
+ "dev": true,
"dependencies": {
"@emotion/hash": "^0.9.0",
"@emotion/memoize": "^0.8.0",
@@ -2331,7 +2332,7 @@
"version": "11.10.6",
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.6.tgz",
"integrity": "sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==",
- "devOptional": true,
+ "dev": true,
"dependencies": {
"@babel/runtime": "^7.18.3",
"@emotion/babel-plugin": "^11.10.6",
@@ -2354,13 +2355,13 @@
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
"integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==",
- "devOptional": true
+ "dev": true
},
"node_modules/@emotion/use-insertion-effect-with-fallbacks": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
"integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
- "devOptional": true,
+ "dev": true,
"peerDependencies": {
"react": ">=16.8.0"
}
@@ -8904,7 +8905,7 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
- "devOptional": true
+ "dev": true
},
"node_modules/find-up": {
"version": "4.1.0",
@@ -9580,7 +9581,7 @@
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
- "devOptional": true,
+ "dev": true,
"dependencies": {
"react-is": "^16.7.0"
}
@@ -9589,7 +9590,7 @@
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
- "devOptional": true
+ "dev": true
},
"node_modules/hoopy": {
"version": "0.1.4",
@@ -9898,7 +9899,7 @@
"version": "4.2.4",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
"integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
- "devOptional": true
+ "dev": true
},
"node_modules/import-fresh": {
"version": "3.3.0",
@@ -15733,6 +15734,18 @@
"react-dom": ">=16.8"
}
},
+ "node_modules/react-router-hash-link": {
+ "version": "2.4.3",
+ "resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-2.4.3.tgz",
+ "integrity": "sha512-NU7GWc265m92xh/aYD79Vr1W+zAIXDWp3L2YZOYP4rCqPnJ6LI6vh3+rKgkidtYijozHclaEQTAHaAaMWPVI4A==",
+ "dependencies": {
+ "prop-types": "^15.7.2"
+ },
+ "peerDependencies": {
+ "react": ">=15",
+ "react-router-dom": ">=4"
+ }
+ },
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -16479,7 +16492,7 @@
"version": "1.58.3",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
"integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
- "devOptional": true,
+ "dev": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
@@ -16843,7 +16856,7 @@
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
- "devOptional": true,
+ "dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -17789,19 +17802,6 @@
"is-typedarray": "^1.0.0"
}
},
- "node_modules/typescript": {
- "version": "4.9.5",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
- "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
- "peer": true,
- "bin": {
- "tsc": "bin/tsc",
- "tsserver": "bin/tsserver"
- },
- "engines": {
- "node": ">=4.2.0"
- }
- },
"node_modules/ua-parser-js": {
"version": "1.0.33",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
diff --git a/package.json b/package.json
index 5511e358b..0737f735c 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"react-ga4": "^2.1.0",
"react-h5-audio-player": "^3.8.6",
"react-router-dom": "^6.3.0",
+ "react-router-hash-link": "^2.4.3",
"react-scripts": "5.0.1",
"react-vertical-timeline-component": "^3.6.0",
"save-dev": "0.0.1-security",
diff --git a/public/assets/images/logo/GTVertical_RGB.png b/public/assets/images/logo/GTVertical_RGB.png
new file mode 100644
index 000000000..f6fe6a2c4
Binary files /dev/null and b/public/assets/images/logo/GTVertical_RGB.png differ
diff --git a/src/App.css b/src/App.css
index d15ee3d3a..3ffe2841f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,6 @@
.App {
text-align: center;
- background-color: #09295A;
+ background-color: #003057;
}
.App-logo {
diff --git a/src/Utils/colorUtils.js b/src/Utils/colorUtils.js
index 28af4b2dc..48b3995f6 100644
--- a/src/Utils/colorUtils.js
+++ b/src/Utils/colorUtils.js
@@ -14,7 +14,7 @@ export function fontColorForBackground(color) {
export function getBackgroundColor() {
// eslint-disable-next-line react-hooks/rules-of-hooks
const { isDarkMode } = useContext(ThemeContext)
- return isDarkMode ? '#09295A' : '#DEE4E7'
+ return isDarkMode ? '#003057' : '#DEE4E7'
}
export function getFontColorText() {
diff --git a/src/components/aboutpage/EducationTimeline.jsx b/src/components/aboutpage/EducationTimeline.jsx
index 0a05e9c1f..24663a928 100644
--- a/src/components/aboutpage/EducationTimeline.jsx
+++ b/src/components/aboutpage/EducationTimeline.jsx
@@ -9,55 +9,103 @@ import { ThemeContext } from '../../App'
import { fontColorForBackground } from '../../Utils/colorUtils'
-export default function EducationTimeline() {
- const { isDarkMode } = useContext(ThemeContext)
+function GeorgiaTech({ isDarkMode }) {
+ const techGold = '#b3a369'
+
+ const techIcon = '/assets/images/logo/GTVertical_RGB.png'
+
+ return (
+
+ }
+ position='right'
+ >
+
+ Georgia Institute of Technology
+
+
+ College of Computing
+
+ Atlanta, GA
+ Master of Science - MS, Computer Science
+
+ )
+}
+function TheOhioStateUniversity({ isDarkMode }) {
const osuColor = '#ba0c2f'
const osuEngineering = '/assets/images/logo/ohio-state-coe.svg'
+ return (
+
+ }
+ position='right'
+ >
+
+ The Ohio State University
+
+
+ College of Engineering
+
+ Columbus, OH
+
+ Bachelor of Science - BS, Computer Science and Engineering
+
+ Software Engineering Specialization
+
+
+ )
+}
+
+export default function EducationTimeline() {
+ const { isDarkMode } = useContext(ThemeContext)
+
return (
-
- }
- position='right'
- >
-
- The Ohio State University
-
-
- College of Engineering
-
-
- Columbus, OH
-
-
- BS Computer Science and Engineering
-
- Software Engineering Specialization
-
-
+
+
)
}
diff --git a/src/components/aboutpage/MyInfoBanner.jsx b/src/components/aboutpage/MyInfoBanner.jsx
index 0981500ee..6c7a8a4b3 100644
--- a/src/components/aboutpage/MyInfoBanner.jsx
+++ b/src/components/aboutpage/MyInfoBanner.jsx
@@ -1,10 +1,10 @@
import React, { useContext } from 'react'
import photo_of_me from '../../assets/images/photo_of_me.png'
-
import Emoji from '../Utils/Emoji'
-
import { isMobile } from 'react-device-detect'
import { ThemeContext } from '../../App'
+import { HashLink } from 'react-router-hash-link'
+import { getFontColorText } from '../../Utils/colorUtils'
export default function MyInfoBanner() {
const { isDarkMode } = useContext(ThemeContext)
@@ -18,14 +18,14 @@ export default function MyInfoBanner() {
style={{
height: containerHeight,
width: 'auto',
- marginTop: '1rem',
+ marginTop: '1rem'
}}
>
![]()
Hi , I'm John Choi,
- Full Stack Software Engineer at JPMorgan Chase & Co.
+
+ Full Stack Software Engineer at JPMorgan Chase &
+ Co.
+
+
+
+ Online MS Computer Science student at Georgia
+ Tech
+
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c058..000000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/pages/aboutpage/AboutPage.jsx b/src/pages/aboutpage/AboutPage.jsx
index dd20c12d7..432514b5b 100644
--- a/src/pages/aboutpage/AboutPage.jsx
+++ b/src/pages/aboutpage/AboutPage.jsx
@@ -71,10 +71,15 @@ export default function About() {
}}
>
- Experiences
-
- Education
-
+
+
+
Technologies I've used...