Merge branch 'main' into snyk-upgrade-4ebada4289f17a6cf9cbccf812f02658

package.json

@@ -5,13 +5,12 @@
   "homepage": "https://johnchoi96.com/",
   "dependencies": {
     "-": "0.0.1",
-    "@mui/icons-material": "^5.15.21",
+    "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "gh-pages": "^5.0.0",
     "react": "^18.3.1",
-    "react-bubble-ui": "^1.1.2",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",

src/App.css

@@ -14,17 +14,6 @@
   }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
@@ -36,11 +25,13 @@
 
 body {
   padding-top: 44px;
+  padding-bottom: 44px;
 }
 
 @media screen and (max-width: 768px) {
   body {
     padding-top: 0px;
+    padding-bottom: 0px;
   }
 }
 

src/components/aboutpage/MyInfoBanner.jsx

@@ -1,52 +1,37 @@
 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'
 import { Tooltip } from '@mui/material'
 import { gatechDescription } from './education_description'
+import SkillPills from './SkillPills'
+import './MyInfoBanner.styles.css'
 
 export default function MyInfoBanner() {
     const { isDarkMode } = useContext(ThemeContext)
-
-    const containerHeight = isMobile ? '60vh' : '30vh'
     const introFontSize = Math.max(window.innerWidth, window.innerHeight) * 0.02 // font is 2 percent of the longest side of screen
 
     return (
-        <div
-            className='container'
-            style={{
-                height: containerHeight,
-                width: 'auto',
-                marginTop: '1rem'
-            }}
-        >
+        <div className='my-info-banner'>
             <div className='row'>
-                <div
-                    className='col-lg-3 mb-5'
-                    style={{
-                        maxHeight: '35vh'
-                    }}
-                >
+                <div className='col-lg-4 mb-2'>
                     <img
-                        className='rounded-circle'
+                        className='my-info-banner-img rounded-circle'
                         src={photo_of_me}
                         alt='John Choi Pic'
-                        height='100%'
                     />
                 </div>
-                <div className='col-lg-9'>
+                <div className='col-lg-8'>
                     <div
                         className={`col align-self-center text-${
                             isDarkMode ? 'white' : 'dark'
                         }`}
                         style={{
-                            position: 'relative',
-                            left: '50%',
-                            top: '40%',
-                            transform: 'translate(-50%, -50%)'
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
                         }}
                     >
                         <span
@@ -83,9 +68,10 @@ export default function MyInfoBanner() {
                                 </div>
                             </Tooltip>
                         </span>
+                        <SkillPills />
                     </div>
                 </div>
             </div>
         </div>
     )
-}
+}

src/components/aboutpage/MyInfoBanner.styles.css

@@ -0,0 +1,39 @@
+.my-info-banner {
+    position: relative; /* Ensure z-index works */
+    z-index: 1000; /* Keeps it above other content */
+    margin-bottom: 3rem; /* Space for content below */
+    box-sizing: border-box; /* Include padding and border in the element's width and height */
+    padding: 1rem; /* Optional padding for better spacing */
+}
+
+.my-info-banner .row {
+    display: flex;
+    flex-wrap: wrap; /* Allow wrapping on smaller screens */
+    align-items: center;
+}
+
+.my-info-banner .col-lg-4,
+.my-info-banner .col-lg-8 {
+    flex: 100; /* Allow columns to scale */
+}
+
+@media (max-width: 768px) {
+    .my-info-banner .row {
+        flex-direction: column; /* Stack columns vertically on small screens */
+    }
+
+    .my-info-banner .col-lg-3,
+    .my-info-banner .col-lg-9 {
+        width: 100%; /* Full width for columns on small screens */
+    }
+
+    .my-info-banner {
+        margin-bottom: 1rem; /* Reduce margin for smaller screens */
+    }
+}
+
+.my-info-banner-img {
+    width: 25vw;
+    height: auto;
+    padding-top: 1rem;
+}