fixed styling issues updated links

src/AboutMe/index.jsx

@@ -5,9 +5,9 @@ export default class AboutMe extends React.Component {
   render() {
     return (
       <div className="about-me">
-        <p>Hello, I'm Oliver Martin. Formerly known as Genesis. I was born and raised in San Diego, and currently reside in Orange County, CA. My coding journey started in my late teens when MySpace and Tumblr was at its peak. I wondered how everything worked, so I tinkered with code until I could figure out how everything functioned. I enjoyed putting the pieces together. After the popularity of those websites died, I stopped coding. I found out as an adult that careers existed with this, so I happily made the switch into this field.</p>
+        <p>Hello, I'm Oliver Martin. Formerly known as Genesis. I was born and raised in San Diego, and currently reside in Orange County, CA. </p>
 
-        <p>Besides coding, I love art and design in general. I started my childhood with drawing, then I got inspired in my early teens to pick up the guitar, sing, and make music. In my late teens, I started to dance, and also fell in love with photography. Most recently, I've tried acting and worked behind the scenes for short films thanks to my connections. Please click the contact link to get a hold of me and thank you for stopping by! </p> 
+        <p>Besides coding, I love photography, acting, singing, playing the guitar, BTS work for film production, making coffee, fashion, architecture, interior design, going to live shows, playing games, and trying new restaurants.</p> 
       </div>
     );
   }

src/App/App.css

@@ -25,5 +25,6 @@
     .wrapper.needs-scrolling {
         z-index: 2;
         position: relative;
+        padding-bottom: 30px;
     }
 }

src/Contact/Contact.css

@@ -1,12 +1,30 @@
 .contact {
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.contact .contact-field {
+.contact .link-text {
+    width: 166px;
+    font-size: 1.75rem; 
+    font-weight: 600;
+    text-decoration: none;
     position: relative;
     z-index: 2;
-    height: 100%;
-    width: 90%;
-    margin-left: auto;
-    display: block;
+}
+
+.contact .link-text svg {
+    display: inline-block;
+    margin-left: 8px;
+}
+
+.contact .link-text:visited,
+.contact .link-text:active,
+.contact .link-text {
+    color: initial;
+}
+
+.contact .link-text:hover {
+    color:lavender;
 }

src/Contact/index.jsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import './Contact.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSquareUpRight } from '@fortawesome/free-solid-svg-icons';
 
 export default class Contact extends React.Component {
   render() {
     return (
       <div className="contact">
-      <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfSBmUqFku_Ta8YkIQ3FO1C82Yb2f5nyx1rN_fFLSWp_oNylQ/viewform?embedded=true" className='contact-field' title='contact'>Loading…</iframe>
+        <a href="https://forms.gle/FKC8YM7vAnffsNnt6" target="_blank" rel="noreferrer" className="link-text">
+          CONTACT
+          <FontAwesomeIcon size='sm' icon={faSquareUpRight} />
+        </a>
       </div>
     );
   }

src/Navigation/Navigation.css

@@ -1,7 +1,7 @@
 .navigation {
     display: flex;
     position: relative;
-    z-index: 2;
+    z-index: 5;
     flex-direction: column;
 }
 
@@ -27,6 +27,11 @@
 .navigation .navigation-socials {
     padding-left: 6px;
     padding-bottom: 3px;
+    position: fixed;
+    bottom: 23px;
+    left: 23px;
+    z-index: 5;
+    background-color: white;
 }
 
 .navigation .navigation-social-links:visited,

src/Resume/Resume.css

@@ -1,12 +1,30 @@
 .resume {
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.resume .oliver-resume {
+.resume .link-text {
+    width: 166px;
+    font-size: 1.75rem; 
+    font-weight: 600;
+    text-decoration: none;
     position: relative;
     z-index: 2;
-    height: 100%;
-    width: 90%;
-    margin-left: auto;
-    display: block;
+}
+
+.resume .link-text svg {
+    display: inline-block;
+    margin-left: 8px;
+}
+
+.resume .link-text:visited,
+.resume .link-text:active,
+.resume .link-text {
+    color: initial;
+}
+
+.resume .link-text:hover {
+    color:lavender;
 }

src/Resume/index.jsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import './Resume.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSquareUpRight } from '@fortawesome/free-solid-svg-icons';
 
 export default class Resume extends React.Component {
   render() {
     return (
       <div className="resume">
-      <iframe src="/assets/documents/OliverExample.pdf" className='oliver-resume' title='resume' />
+        <a href="/assets/documents/OliverExample.pdf" target="_blank" rel="noreferrer" className="link-text">
+          RESUME
+          <FontAwesomeIcon size='sm' icon={faSquareUpRight} />
+        </a>
       </div>
     );
   }