feat: simple project card

src/components/projects/ProjectCard/ProjectCard.js

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faStar } from "@fortawesome/free-solid-svg-icons";
+import "./ProjectCard.scss";
+import AnalyticsProvider from "../../../util/AnalyticsProvider";
+
+export default function ProjectCard({ name, description, url, year }) {
+  return (
+    <div
+      className="card"
+      onClick={() =>
+        AnalyticsProvider.getInstance().logEvent("Project", "clicked", name)
+      }
+    >
+      <div className="text">{name}</div>
+    </div>
+  );
+}
+
+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;
+`;

src/components/projects/ProjectCard/ProjectCard.scss

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

src/components/projects/Projects.js

@@ -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;
+`;

src/components/projects/assets/projects.js

@@ -0,0 +1,13 @@
+export default [
+  {
+    name: "Web",
+    projects: [
+      {
+        name: "Imf & Firus",
+        description: "Daily challenges for children of work-from-home-parents",
+        url: "https://imfundfirus.de/",
+        year: "2020"
+      }
+    ]
+  }
+];

src/home/Home.js

@@ -5,6 +5,7 @@ import Skills from "../components/skills/Skills";
 import "./Home.scss";
 import config from "./particleConfig";
 import Landing from "../landing/Landing";
+import Projects from "../components/projects/Projects";
 
 export default function Home() {
   return (
@@ -13,6 +14,7 @@ export default function Home() {
       <Navbar />
       <Landing />
       <Skills />
+      <Projects />
     </div>
   );
 }