camerin
/
portfolio
mirror of https://github.com/RaspberryProgramming/portfolio.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed mobile bugs and Moved social to About 

On mobile, width added horizontal scroll
The social buttons from /social moved to About page
This commit is contained in:
Camerin 2021-09-23 19:50:56 -04:00
parent 550518031a
commit b5fe69b9c4
13 changed files with 381 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

530
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

BIN
public/img/hackerrank.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

19
src/components/About.js
View File

@ -26,6 +26,25 @@ class About extends React.Component {
<a href="https://github.com/RaspberryProgramming" target="_blank" rel="noreferrer"> Github</a> or look through a list in the
<Link to="/github"> Github Page</Link>. You can email me at <a href="mailto:camerin@camsprojects.online">camerin@camsprojects.online</a>
</Card>
<div className="social">
<div className="title">
Social Media:
</div>
<div className="links">
<a href="https://github.com/RaspberryProgramming" target="_blank" rel="noreferrer" className="link">
<img src="/img/github.webp" alt="Github"/>
</a>
<a href="https://www.linkedin.com/in/camerin-figueroa-2662bb157/" target="_blank" rel="noreferrer" className="link">
<img src="/img/linkedin.webp" alt="linked in"/>
</a>
<a href="https://www.hackerrank.com/figueroa0609" target="_blank" rel="noreferrer" className="link">
<img src="/img/hackerrank.webp" alt="Hacker Rank"/>
</a>
</div>
</div>
</div>
);
}

2
src/components/App.js
View File

@ -5,7 +5,6 @@ import Navigation from './Navigation';
import Home from './Home';
import Github from './Github';
import About from './About';
import Social from './Social';
const App = (props) => {
return (
@ -16,7 +15,6 @@ const App = (props) => {
<Route path="/" exact component={Home} />
<Route path="/github" component={Github} />
<Route path="/about" component={About} />
<Route path="/social" component={Social} />
</Switch>
</div>
</BrowserRouter>

6
src/components/Navigation.js
View File

@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import {toggleContactModal} from '../actions'
import './css/Navigation.css';
import { HouseDoor, FileEarmarkPerson, Github, Envelope, Share } from 'react-bootstrap-icons';
import { HouseDoor, FileEarmarkPerson, Github, Envelope } from 'react-bootstrap-icons';
import ContactModal from './subcomponents/ContactModal';
const Navigation = (props) => {
@ -22,10 +22,6 @@ const Navigation = (props) => {
About
<FileEarmarkPerson />
</Link>
<Link to="/social">
Social Media
<Share />
</Link>
<button className="end" onClick={()=>props.toggleContactModal()}>
Contact Me
<Envelope />

33
src/components/Social.js
View File

@ -1,33 +0,0 @@
import React from 'react';
import './css/Social.css';
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" alt="Github"/>
</a>
<a href="https://www.linkedin.com/in/camerin-figueroa-2662bb157/" target="_blank" rel="noreferrer">
<img src="/img/linkedin.webp" alt="linked in"/>
</a>
</div>
</div>
);
}
}
export default Social;

37
src/components/css/About.css
View File

@ -1,10 +1,47 @@
.About {
background-color: #3F3F4A;
color: #AA9AA0;
max-width:100vw;
width:100%;
padding-bottom: 5.5rem;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.About .title {
margin-top: 2rem;
color: #BF8D8C !important;
font-size: 48px;
}
.About .social {
padding:10px;
width: 85vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items:flex-start;
}
.About .links {
display:flex;
flex-direction:row;
align-content:center;
justify-content:center;
align-items:center;
flex-wrap: wrap;
width:85vw;
}
.About .links .link img {
width: 10rem;
}
.About .links * {
margin: 10px;
}

6
src/components/css/Card.css
View File

@ -3,8 +3,7 @@
flex-direction: row;
padding: 10px;
width: 85vw;
margin-left: auto;
margin-right: auto;
margin:0 !important;
}
.card .title {
@ -15,7 +14,8 @@
.card .content {
font-size:xx-large;
margin-right: 10px;
margin-right: 2rem;
margin-top: 2rem;
}
.card img {

6
src/components/css/Home.css
View File

@ -14,11 +14,9 @@ a:visited {
cursor: pointer;
}
body {
html, body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; margin:0;
width: 100vw;
overflow-x: hidden;
width:100%;
}
.App {

8
src/components/css/Modal.css
View File

@ -10,16 +10,14 @@
background-color: rgba(0,0,0,0);
justify-content: center;
align-items: center;
transition-delay: 70ms, 70ms, 0ms;
transition: opacity 300ms ease-out, width 300ms ease-out, background-color 50ms ease-out;
transition: opacity 300ms ease-out 50ms, width 300ms ease-out 50ms, background-color 80ms ease-out;
}
.modal.show {
width: 100vw;
width: 100%;
background-color: rgba(0,0,0,0.4);
opacity: 1;
transition-delay: 0ms, 0ms, 300ms;
transition: opacity 300ms ease-in, width 300ms ease-in, background-color 300ms ease-in;
transition: opacity 300ms ease-in, width 300ms ease-in, background-color 300ms ease-in 200ms;
}
.modal .box {

9
src/components/css/Navigation.css
View File

@ -2,12 +2,12 @@
z-index:9;
position: relative;
height: 4rem;
width: 100vw;
display: flex;
flex-direction: row;
background-color: #3F3F4A;
background-color: #373747;
margin:0;
padding:0;
width:100%;
}
.Navigation a, .Navigation button {
@ -59,6 +59,7 @@
bottom:0;
left:0;
height: 5.5rem;
justify-content: space-around;
}
.Navigation a, .Navigation button {
@ -72,4 +73,8 @@
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.Navigation .end {
margin:0;
}
}

27
src/components/css/Social.css
View File

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

9
src/components/css/Theater.css
View File

@ -1,4 +1,5 @@
.theater {
width:100%;
display: grid;
place-items:center;
grid-template-areas: "inner-div";
@ -9,13 +10,13 @@
}
.theater.h-50v {
height:50vw;
height:50vh;
}
.theater-bg {
height: 100%;
width:100vw;
width:100%;
background-size: cover;
background-image: url('../../img/background.webp');
filter: blur(2px);
@ -37,8 +38,8 @@
color: #FAFCF0;
grid-area: inner-div;
font-weight:bolder;
max-width: 100vw;
width:100vw;
max-width: 100%;
width:100%;
background: rgba(76, 76, 80, 0.75);
align-items: center;
}