Merge pull request #140 from johnchoi96/feature/139-gtech

Feature/139 gtech
johnchoi96 · Sep 17, 2023 · 739c530 · 739c530
2 parents 4386492 + 2ac393f
commit 739c530
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 82 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
diff --git 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
@@ -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
@@ -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 (
+        <VerticalTimelineElement
+            className='vertical-timeline-element--education'
+            contentStyle={{
+                background: techGold,
+                color: `${fontColorForBackground(techGold)}`
+            }}
+            contentArrowStyle={{ borderRight: `7px solid ${techGold}` }}
+            date='Starts 2024'
+            dateClassName={`${isDarkMode ? 'text-light' : 'text-dark'}`}
+            iconStyle={{
+                background: techGold,
+                color: `${fontColorForBackground(techGold)}`
+            }}
+            icon={
+                <img
+                    style={{
+                        width: '80%',
+                        marginTop: '0.5rem'
+                    }}
+                    src={techIcon}
+                    alt='GaTech logo'
+                />
+            }
+            position='right'
+        >
+            <h3 className='vertical-timeline-element-title fw-bold'>
+                Georgia Institute of Technology
+            </h3>
+            <h5 className='vertical-timeline-element-subtitle'>
+                College of Computing
+            </h5>
+            <h6 className='vertical-timeline-element-subtitle'>Atlanta, GA</h6>
+            <p>Master of Science - MS, Computer Science</p>
+        </VerticalTimelineElement>
+    )
+}
 
+function TheOhioStateUniversity({ isDarkMode }) {
     const osuColor = '#ba0c2f'
 
     const osuEngineering = '/assets/images/logo/ohio-state-coe.svg'
 
+    return (
+        <VerticalTimelineElement
+            className='vertical-timeline-element--education'
+            contentStyle={{
+                background: osuColor,
+                color: `${fontColorForBackground(osuColor)}`
+            }}
+            contentArrowStyle={{ borderRight: `7px solid ${osuColor}` }}
+            date='May 2022'
+            dateClassName={`${isDarkMode ? 'text-light' : 'text-dark'}`}
+            iconStyle={{
+                background: osuColor,
+                color: `${fontColorForBackground(osuColor)}`
+            }}
+            icon={
+                <img
+                    style={{
+                        width: '80%',
+                        marginTop: '0.5rem'
+                    }}
+                    src={osuEngineering}
+                    alt='OSU logo'
+                />
+            }
+            position='right'
+        >
+            <h3 className='vertical-timeline-element-title fw-bold'>
+                The Ohio State University
+            </h3>
+            <h5 className='vertical-timeline-element-subtitle'>
+                College of Engineering
+            </h5>
+            <h6 className='vertical-timeline-element-subtitle'>Columbus, OH</h6>
+            <p>
+                Bachelor of Science - BS, Computer Science and Engineering
+                <br />
+                Software Engineering Specialization
+            </p>
+        </VerticalTimelineElement>
+    )
+}
+
+export default function EducationTimeline() {
+    const { isDarkMode } = useContext(ThemeContext)
+
     return (
         <VerticalTimeline>
-            <VerticalTimelineElement
-                className='vertical-timeline-element--education'
-                contentStyle={{
-                    background: osuColor,
-                    color: `${fontColorForBackground(osuColor)}`
-                }}
-                contentArrowStyle={{ borderRight: `7px solid ${osuColor}` }}
-                date='May 2022'
-                dateClassName={`${isDarkMode ? '' : 'text-dark'}`}
-                iconStyle={{
-                    background: osuColor,
-                    color: `${fontColorForBackground(osuColor)}`
-                }}
-                icon={
-                    <img
-                        style={{
-                            width: '80%',
-                            marginTop: '0.5rem'
-                        }}
-                        src={osuEngineering}
-                        alt='OSU logo'
-                    />
-                }
-                position='right'
-            >
-                <h3 className='vertical-timeline-element-title fw-bold'>
-                    The Ohio State University
-                </h3>
-                <h5 className='vertical-timeline-element-subtitle'>
-                    College of Engineering
-                </h5>
-                <h6 className='vertical-timeline-element-subtitle'>
-                    Columbus, OH
-                </h6>
-                <p>
-                    BS Computer Science and Engineering
-                    <br />
-                    Software Engineering Specialization
-                </p>
-            </VerticalTimelineElement>
+            <GeorgiaTech isDarkMode={isDarkMode} />
+            <TheOhioStateUniversity isDarkMode={isDarkMode} />
         </VerticalTimeline>
     )
 }