mirror of https://github.com/garritfra/garrit.xyz
garritfra
4 years ago
9 changed files with 4383 additions and 1694 deletions
@ -0,0 +1,6 @@
|
||||
# Garrits Portfolio |
||||
|
||||
## Workflow |
||||
|
||||
**Development** happens on the `develop` branch. |
||||
Once a deployment should be rolled out, merge `develop` into `release` |
||||
@ -0,0 +1,57 @@
|
||||
import React from "react"; |
||||
import styled from "styled-components"; |
||||
import "./ProjectCard.scss"; |
||||
import AnalyticsProvider from "../../../util/AnalyticsProvider"; |
||||
|
||||
export default function ProjectCard({ name, description, url, year }) { |
||||
return ( |
||||
<Container |
||||
onClick={() => |
||||
AnalyticsProvider.getInstance().logEvent("Project", "clicked", name) |
||||
} |
||||
> |
||||
<NameText className="text">{name}</NameText> |
||||
<DescriptionText>{description}</DescriptionText> |
||||
</Container> |
||||
); |
||||
} |
||||
|
||||
const Container = styled.div` |
||||
position: relative; |
||||
width: fit-content; |
||||
height: 10em; |
||||
height: fit-content; |
||||
align-content: center; |
||||
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); |
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); |
||||
border-radius: 20px; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
height: auto; |
||||
transition-duration: 200ms; |
||||
|
||||
&:hover { |
||||
transform: scale(1.1); |
||||
} |
||||
`;
|
||||
|
||||
const NameText = styled.div` |
||||
text-align: center; |
||||
font-family: "Roboto", sans-serif; |
||||
font-weight: 300; |
||||
font-size: 18px; |
||||
line-height: 21px; |
||||
margin: 1em; |
||||
`;
|
||||
|
||||
const DescriptionText = styled.div` |
||||
text-align: center; |
||||
font-family: "Roboto", sans-serif; |
||||
font-weight: 300; |
||||
font-size: 14px; |
||||
line-height: 21px; |
||||
margin-bottom: 1em; |
||||
margin-left: 1em; |
||||
margin-right: 1em; |
||||
`;
|
||||
@ -0,0 +1,53 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Roboto"); |
||||
.card { |
||||
position: relative; |
||||
width: 10em; |
||||
height: 10em; |
||||
height: fit-content; |
||||
align-content: center; |
||||
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); |
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); |
||||
border-radius: 20px; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
height: auto; |
||||
transition-duration: 200ms; |
||||
} |
||||
|
||||
.card:hover { |
||||
transform: scale(1.1); |
||||
} |
||||
|
||||
.text { |
||||
text-align: center; |
||||
|
||||
font-family: "Roboto", sans-serif; |
||||
font-weight: 300; |
||||
font-size: 18px; |
||||
line-height: 21px; |
||||
} |
||||
|
||||
/* image */ |
||||
.skill-logo { |
||||
margin: 1em; |
||||
height: 50px; |
||||
max-width: 80px; |
||||
align-content: center; |
||||
justify-content: center; |
||||
align-self: center; |
||||
} |
||||
|
||||
.star-container { |
||||
display: flex; |
||||
margin-bottom: 1em; |
||||
justify-content: center; |
||||
} |
||||
|
||||
/* Star */ |
||||
.star { |
||||
margin: 3%; |
||||
background: #f2c94c; |
||||
width: 10px; |
||||
height: 10px; |
||||
} |
||||
@ -0,0 +1,68 @@
|
||||
import React from "react"; |
||||
import styled from "styled-components"; |
||||
import ProjectCard from "./ProjectCard/ProjectCard"; |
||||
import ProjectSet from "./assets/projects"; |
||||
|
||||
export default function Projects() { |
||||
return ( |
||||
<Container id="skills"> |
||||
<Title>Projects</Title> |
||||
{ProjectSet.map(topic => { |
||||
return ( |
||||
<div key={topic.name}> |
||||
<TopicHeader>{topic.name}</TopicHeader> |
||||
<div key={topic.name}> |
||||
<ProjectsContainer> |
||||
{topic.projects.map(project => { |
||||
return ( |
||||
<ProjectCardContainer key={project.name}> |
||||
<ProjectCard |
||||
name={project.name} |
||||
description={project.description} |
||||
url={project.url} |
||||
year={project.year} |
||||
/> |
||||
</ProjectCardContainer> |
||||
); |
||||
})} |
||||
</ProjectsContainer> |
||||
</div> |
||||
</div> |
||||
); |
||||
})} |
||||
</Container> |
||||
); |
||||
} |
||||
|
||||
const Container = styled.div` |
||||
margin-bottom: 1em; |
||||
padding-top: 2em; |
||||
`;
|
||||
|
||||
const Title = styled.h1` |
||||
text-align: center; |
||||
font-family: Montserrat, sans-serif; |
||||
font-size: 6em; |
||||
color: white; |
||||
position: relative; |
||||
`;
|
||||
|
||||
const TopicHeader = styled.p` |
||||
text-align: center; |
||||
font-family: Montserrat, sans-serif; |
||||
font-size: 2em; |
||||
color: white; |
||||
position: relative; |
||||
`;
|
||||
|
||||
const ProjectsContainer = styled.div` |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
font: inherit; |
||||
justify-content: center; |
||||
`;
|
||||
|
||||
const ProjectCardContainer = styled.div` |
||||
margin: 1em; |
||||
`;
|
||||
@ -0,0 +1,30 @@
|
||||
export default [ |
||||
{ |
||||
name: "Web", |
||||
projects: [ |
||||
{ |
||||
name: "Imf & Firus", |
||||
description: "Daily challenges for children of work-from-home-parents", |
||||
url: "https://imfundfirus.de/", |
||||
year: "2020" |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
name: "Systems", |
||||
projects: [ |
||||
{ |
||||
name: "Ditto", |
||||
description: "A simple educational blockchain concept", |
||||
url: "https://github.com/garritfra/blockchain-project", |
||||
year: "2018" |
||||
}, |
||||
{ |
||||
name: "Rustfuck", |
||||
description: "A brainfuck compiler written in rust", |
||||
url: "https://github.com/garritfra/rustfuck", |
||||
year: "2018" |
||||
} |
||||
] |
||||
} |
||||
]; |
||||
Loading…
Reference in new issue