social links added

This commit is contained in:
Rakesh 2024-01-31 12:39:16 +05:30 committed by Kshitij
parent 5fc335dc3b
commit 93af8c6180
Signed by: notkshitij
GPG Key ID: C5B8BC7530F8F43F
5 changed files with 58 additions and 2 deletions

View File

@ -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;
}

View File

@ -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>
);

24
src/SocialFollow.js Normal file
View File

@ -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>
);
}

View File

@ -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>

View File

@ -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(