added contact page

Author: martinez-ml

my-app/package-lock.json

@@ -11,6 +11,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "react-scripts": "5.0.1",
     "react-simple-maps": "^3.0.0",
     "reactstrap": "^9.2.0",

my-app/package.json

@@ -0,0 +1,32 @@
+.text {
+  color: rgb(154, 157, 158);
+}
+
+.contact {
+  height: 95vh;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.icon {
+  fill: white;
+  margin-right: 20px;
+  svg {
+    fill: white;
+  }
+}
+
+.header {
+  font-weight: 400;
+  font-size: 24px;
+}
+
+.body {
+  display: flex;
+  justify-content: space-between;
+}
+
+a {
+  margin-left: 0;
+}

my-app/src/pages/Contact.css

@@ -1,5 +1,38 @@
+import "./Contact.css";
+import { AiFillLinkedin } from "react-icons/ai";
+import { AiFillGithub } from "react-icons/ai";
+
 const Contact = () => {
-  return <h1>Contact Me</h1>;
+  return (
+    <div className="contact bg-dark">
+      <div className="title text">
+        <h1>Contact Info</h1>
+      </div>
+      <div className="body text">
+        <div className="email">
+          <div className="header">Please feel free to reach me at: </div>
+          <div>
+            Email:{" "}
+            <a href="mailto: [email protected]">
+              [email protected]
+            </a>
+          </div>
+          <div>Phone Number: 617-961-2158</div>
+        </div>
+        <div className="header">
+          Or follow me here!
+          <div className="icons">
+            <a href="https://www.linkedin.com/in/joseph-martinez-0b8624124">
+              <AiFillLinkedin className="icon" size={32} />
+            </a>
+            <a href="https://github.com/csmartinez22">
+              <AiFillGithub className="icon" size={32} />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Contact;

my-app/src/pages/Contact.js

@@ -1,5 +1,5 @@
 .main {
-  height: 100vh;
+  height: 95vh;
   display: flex;
   justify-content: center;
   align-items: center;