social links added

src/App.css

@@ -41,3 +41,34 @@
     transform: rotate(360deg);
   }
 }
+
+.social-container {
+  position: fixed;
+  top: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 25px 50px;
+}
+
+a.social {
+  margin: 0 1rem;
+  transition: transform 250ms;
+  display: inline-block;
+}
+
+a.social:hover {
+  transform: translateY(-2px);
+}
+
+a.github {
+  color: white;
+}
+
+a.linkedin {
+  color: royalblue;
+}
+
+a.instagram {
+  color: indianred;
+}

src/App.js

@@ -4,6 +4,7 @@ import './App.css';
 import Logo from './components/Logo/Logo';
 import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
 import FaceRecognition from './components/FaceRecognition/FaceRecognition';
+import SocialFollow from './SocialFollow';
 
 const returnClarifaiRequestOptions = (imageUrl) => {
   const PAT = '9a79ac5267f54073853713833271f89d';
@@ -91,6 +92,7 @@ class App extends Component{
         onButtonSubmit = {this.onButtonSubmit} 
       />
       <FaceRecognition box = {this.state.box} imageUrl = {this.state.imageUrl}/>
+      <SocialFollow />
       <ParticlesBg type="circle" bg={true}/>
     </div>
     );

src/SocialFollow.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faGithub,
+  faLinkedin,
+  faInstagram
+} from "@fortawesome/free-brands-svg-icons";
+
+export default function SocialFollow() {
+  return (
+    <div className="social-container">
+        <p className="white"></p>
+        <a href="https://github.com/TanmayMachkar" className="github social">
+          <FontAwesomeIcon icon={faGithub} size="2x" />
+        </a>
+        <a href="https://www.linkedin.com/in/tanmay-machkar-9369a0299" className="linkedin social">
+          <FontAwesomeIcon icon={faLinkedin} size="2x" />
+        </a>
+        <a href="https://www.instagram.com/_tanaana_02/" className="instagram social">
+          <FontAwesomeIcon icon={faInstagram} size="2x" />
+        </a>
+    </div>
+  );
+}

src/components/FaceRecognition/FaceRecognition.js

@@ -4,7 +4,7 @@ import './FaceRecognition.css';
 const FaceRecognition = ({imageUrl, box}) => {
 	return(
 		<div className = 'center ma'>
-			<div className = 'absolute mt2'>
+			<div className = 'absolute mt2 mb2'>
 				<img id = 'inputimage' alt = '' src = {imageUrl} width = '500px' height = 'auto'/>
 				<div className = 'bounding-box' style = {{top: box.topRow, bottom: box.bottomRow, left: box.leftCol, right: box.rightCol}}></div>
 			</div>

src/index.js

@@ -4,7 +4,6 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import 'tachyons';
-import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(