Added social media page

Modified the card to
github and linkedin added to social media page
This commit is contained in:
Camerin 2021-09-23 13:53:15 -04:00
parent b62caf02d4
commit 4657f60136
5 changed files with 59 additions and 0 deletions

BIN
public/img/github.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/img/linkedin.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/img/social.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

35
src/components/Social.js Normal file
View File

@ -0,0 +1,35 @@
import React from 'react';
import { Link } from 'react-router-dom';
import './css/Social.css';
import Card from './subcomponents/Card';
import Theater from './subcomponents/Theater';
class Social extends React.Component {
componentDidMount () {
document.title = "Social Media";
}
render() {
return (
<div className="Social">
<Theater
title="Social Media"
background="/img/social.webp"
extraClasses="h-50v"
/>
<div className="links">
<a href="https://github.com/RaspberryProgramming" target="_blank" rel="noreferrer">
<img src="/img/github.webp"/>
</a>
<a href="https://www.linkedin.com/in/camerin-figueroa-2662bb157/" target="_blank" rel="noreferrer">
<img src="/img/linkedin.webp"/>
</a>
</div>
</div>
);
}
}
export default Social;

View File

@ -0,0 +1,24 @@
.Social {
background-color: #3D3C3F;
min-height: 100vh;
color: #AA9AA0;
}
.Social .links {
display:flex;
flex-direction:row;
align-content:center;
justify-content:center;
align-items:start;
width:75vw;
margin-left: auto;
margin-right: auto;
}
.Social .links img {
height: 10vh;
}
.Social .links * {
margin: 25px;
}