Made changes that fix mobile styling.

src/components/About.js

@@ -47,7 +47,7 @@ class About extends React.Component {
             </a>
 
             <a href="https://www.linkedin.com/in/camerin-figueroa-2662bb157/" target="_blank" rel="noreferrer" className="link">
-              <img src="/img/linkedin.webp" alt="linked in"/>
+              <img src="/img/linkedin.webp" alt="LinkedIn"/>
             </a>
 
             <a href="https://www.hackerrank.com/figueroa0609" target="_blank" rel="noreferrer" className="link">
@@ -56,6 +56,9 @@ class About extends React.Component {
             <a href="https://app.hackthebox.eu/profile/734741" target="_blank" rel="noreferrer" className="link">
               <img src="/img/hackthebox.webp" alt="Hack The Box"/>
             </a>
+            <a href="https://www.udemy.com/user/camerin-figueroa/" target="_blank" rel="noreferrer" className="link">
+              <img src="/img/udemy.webp" alt="Udemy"/>
+            </a>
 
           </div>
 

src/components/App.js

@@ -11,11 +11,13 @@ const App = (props) => {
     <BrowserRouter>
       <div className="App">
         <Navigation />
-        <Switch>
-          <Route path="/" exact component={Intro} />
-          <Route path="/github" render={(props) => <Github {...props} />} />
-          <Route path="/about" component={About} />
-        </Switch>
+        <div className="app-content">
+          <Switch>
+            <Route path="/" exact component={Intro} />
+            <Route path="/github" render={(props) => <Github {...props} />} />
+            <Route path="/about" component={About} />
+          </Switch>
+        </div>
       </div>
     </BrowserRouter>
   );

src/components/css/App.css

@@ -26,8 +26,15 @@ html, body {
     flex-direction:column;
 }
 
+.App .app-content {
+    height:100%;
+}
+
 @media only screen and (max-width: 600px) {
     .App {
         flex-direction: column-reverse;
     }
+    .App .app-content {
+        margin-bottom: 5.5rem;
+    }
 }

src/components/css/Card.css

@@ -13,9 +13,10 @@
 }
 
 .card .content {
-   font-size:xx-large;
-   margin-right: 2rem;
-   margin-top: 2rem;
+    text-align:left;
+    font-size:xx-large;
+    margin-right: 2rem;
+    margin-top: 2rem;
 }
 
 .card img {

src/components/css/Github.css

@@ -24,7 +24,7 @@
 
 .repo .title {
     color: #BF8D8C !important;
-    font-size: 48px;
+    font-size: 28px;
     margin-top: 10px;
     font-weight:bold;
     width:fit-content;

src/components/css/Intro.css

@@ -2,7 +2,7 @@
     opacity: 0;
     transition: opacity 1s ease-in-out;
     width:100vw;
-    height:100vh;
+    height:100%;
     display:flex;
     flex-direction: column;
 }
@@ -29,7 +29,7 @@
 .intro .current {
     z-index: 10;
     opacity: 1;
-    height:100vh;
+    height:100%;
     width:100vw;
     display: flex;
     position:fixed;
@@ -47,7 +47,7 @@
     display: flex;
     position:fixed;
     transition: opacity 500ms ease-out, height 500ms ease-out, top 500ms ease-out;
-    top:100vh;
+    top:100%;
     left:0;
     justify-content: center;
     align-items: center;

src/components/css/Navigation.css

@@ -55,11 +55,12 @@
 
 @media only screen and (max-width: 600px) {
     .Navigation {
-        position: fixed;
+        position:fixed;
         bottom:0;
         left:0;
         height: 5.5rem;
         justify-content: space-around;
+        width:100vw;
     }
 
     .Navigation a, .Navigation button {

src/components/css/Theater.css

@@ -55,6 +55,11 @@
     color: #CFCFBA !important;
 }
 
+.theater-content h1 {
+    width:100%;
+    text-align:center;
+}
+
 @media only screen and (max-width: 600px) {
     .theater-content .description {
         width: 80vw;