footer and contact exported

bunday · Mar 18, 2020 · edbae7f · edbae7f
1 parent b05a772
commit edbae7f
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 46 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
     "workbench.colorCustomizations": {
         "activityBar.background": "#d04649",
+        "activityBar.activeBackground": "#d04649",
         "activityBar.activeBorder": "#37cb34",
         "activityBar.foreground": "#e7e7e7",
         "activityBar.inactiveForeground": "#e7e7e799",

diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "./index.css";
 import { motion } from "framer-motion";
-import { FaExternalLinkAlt, FaLinkedinIn, FaTwitter, FaGithub, FaFileDownload } from 'react-icons/fa'
+import Footer from "./components/Footer";
 
 function App() {
   return (
@@ -12,52 +12,10 @@ function App() {
         </p>
         <p> then the short story goes here bro then the short story goes here bro then the short story goes here bro</p>
 
-        <div className="py-4">
-          <p className="text-2xl text-gray-500 font-extrabold">Contact Me <span role="img" aria-label="Envelope">📩</span></p>
-          <div className="pr-8">
-            <div className="my-4">
-              <p className="text-gray-400 text-sm">Your Name</p>
-              <input className="px-3 py-2 border-b bg-transparent w-full" placeholder="What can I address you as"/>
-            </div>
-            <div className="my-4">
-              <p className="text-gray-400 text-sm">Your Email Address</p>
-              <input className="px-3 py-2 border-b bg-transparent w-full" placeholder="Where I can reach you to respond"/>
-            </div>
-            <div className="py-4">
-              <p className="text-gray-400 text-sm">Your Message</p>
-              <textarea className="px-3 py-2 border-b bg-transparent w-full" rows="4" 
-                placeholder="Hi, I would like to speak to you concerning a solution I want to build"></textarea>
-            </div>
-            <div>
-              <button className="border text-center w-full py-3 rounded-md hover:bg-white hover:text-black">Contact Zadat!</button>
-            </div>
-          </div>
-        </div>
-
+        {/* <Contact/> */}
 
-        <div className="bottom-0 absolute py-8 flex">
-          <img className="h-16 w-16 object-cover rounded-full" src="images/avatar.jpg" alt="Zadat Olayinka"/>
-          <div className="flex items-center px-4">
-            <a href="https://twitter.com/bundayyo" className="flex items-center" target="_blank" rel="noopener noreferrer">
-            <FaTwitter/> <span className="px-4"> Twitter</span> <FaExternalLinkAlt/>
-            </a>
-          </div>
-          <div className="flex items-center px-4">
-            <a href="https://twitter.com/bundayyo" className="flex items-center" target="_blank" rel="noopener noreferrer">
-            <FaLinkedinIn/> <span className="px-4"> LinkedIn</span> <FaExternalLinkAlt/>
-            </a>
-          </div>
-          <div className="flex items-center px-4">
-            <a href="https://twitter.com/bundayyo" className="flex items-center" target="_blank" rel="noopener noreferrer">
-            <FaGithub/> <span className="px-4"> GitHub</span> <FaExternalLinkAlt/>
-            </a>
-          </div>
-          <div className="flex items-center px-4">
-            <a href="https://twitter.com/bundayyo" className="flex items-center" target="_blank" rel="noopener noreferrer">
-            <FaFileDownload/> <span className="px-4"> Resume</span> <FaExternalLinkAlt/>
-            </a>
-          </div>
-        </div>
+        <Footer/>
+
       </div>
       <div className="w-3/4 py-12">
         <p className="text-2xl text-gray-500 font-extrabold text-center">My Works <span role="img" aria-label="Developer">👨🏾‍💻</span></p>

diff --git a/src/components/Contact.js b/src/components/Contact.js
@@ -0,0 +1,29 @@
+import React from 'react'
+
+function Contact () {
+    return (
+        <div className="py-4">
+          <p className="text-2xl text-gray-500 font-extrabold">Contact Me <span role="img" aria-label="Envelope">📩</span></p>
+          <div className="pr-8">
+            <div className="my-4">
+              <p className="text-gray-400 text-sm">Your Name</p>
+              <input className="px-3 py-2 border-b bg-transparent w-full" placeholder="What can I address you as"/>
+            </div>
+            <div className="my-4">
+              <p className="text-gray-400 text-sm">Your Email Address</p>
+              <input className="px-3 py-2 border-b bg-transparent w-full" placeholder="Where I can reach you to respond"/>
+            </div>
+            <div className="py-4">
+              <p className="text-gray-400 text-sm">Your Message</p>
+              <textarea className="px-3 py-2 border-b bg-transparent w-full" rows="4" 
+                placeholder="Hi, I would like to speak to you concerning a solution I want to build"></textarea>
+            </div>
+            <div>
+              <button className="border text-center w-full py-3 rounded-md hover:bg-white hover:text-black">Contact Zadat!</button>
+            </div>
+          </div>
+        </div>
+    );
+}
+
+export default Contact;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,60 @@
+import React from "react";
+import { FaExternalLinkAlt, FaLinkedinIn, FaTwitter, FaGithub, FaFileDownload } from 'react-icons/fa'
+
+function Footer() {
+  return (
+    <div className="bottom-0 absolute py-8 flex">
+      <img
+        className="h-16 w-16 object-cover rounded-full"
+        src="images/avatar.jpg"
+        alt="Zadat Olayinka"
+      />
+      <div className="flex items-center px-4">
+        <a
+          href="https://twitter.com/bundayyo"
+          className="flex items-center"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FaTwitter /> <span className="px-4"> Twitter</span>{" "}
+          <FaExternalLinkAlt />
+        </a>
+      </div>
+      <div className="flex items-center px-4">
+        <a
+          href="https://twitter.com/bundayyo"
+          className="flex items-center"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FaLinkedinIn /> <span className="px-4"> LinkedIn</span>{" "}
+          <FaExternalLinkAlt />
+        </a>
+      </div>
+      <div className="flex items-center px-4">
+        <a
+          href="https://twitter.com/bundayyo"
+          className="flex items-center"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FaGithub /> <span className="px-4"> GitHub</span>{" "}
+          <FaExternalLinkAlt />
+        </a>
+      </div>
+      <div className="flex items-center px-4">
+        <a
+          href="https://twitter.com/bundayyo"
+          className="flex items-center"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FaFileDownload /> <span className="px-4"> Resume</span>{" "}
+          <FaExternalLinkAlt />
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default Footer;