add ProjectsList component

Author: Beelink

src/assets/images/projects/quick-picture-viewer.png

@@ -1,10 +1,7 @@
 // colors
-$accent-color-pale: #bc8cf2;
-$accent-color: #aa14f0;
-$border-color: #aaa;
-$back-color: #eee;
-$back-hover-color: #ddd;
-$outline-color: #000;
+$accent-color-pale: #EDC9FD;
+$accent-color: #AA14F0;
+$second-color: #aaa;
 
 // durations
 $transition-duration: 0.25s;

src/assets/scss/variables.scss

@@ -1,4 +1,9 @@
 .app {
-  max-width: 600px;
+  max-width: 632px;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  justify-content: space-between;
+  padding: 0 16px;
 }

src/components/App/index.scss

@@ -1,5 +1,6 @@
 import Header from "../Header";
 import ProjectList from "../ProjectsList";
+import Footer from "../Footer";
 import { FunctionComponent } from "react";
 import "./index.scss";
 import MainConfig from "../../config/Main";
@@ -9,6 +10,7 @@ const App: FunctionComponent = () => {
     <div className="app">
       <Header />
       <ProjectList projects={MainConfig.projects} />
+      <Footer />
     </div>
   );
 };

src/components/App/index.tsx

@@ -0,0 +1,12 @@
+@import "../../assets/scss/variables.scss";
+
+.footer {
+  text-align: center;
+  padding: 16px 0;
+  margin: 64px 0 0;
+
+  &__copyright {
+    color: $second-color;
+    font-size: 14px;
+  }
+}

src/components/Footer/index.scss

@@ -0,0 +1,14 @@
+import "./index.scss";
+import { FunctionComponent } from "react";
+
+const Footer: FunctionComponent = () => {
+  return (
+    <footer className="footer">
+      <span className="footer__copyright">
+        Copyright © 2021 Connection Beats. All rights reserved.
+      </span>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Footer/index.tsx

@@ -2,7 +2,7 @@
 
 .header {
   text-align: center;
-  padding: 16px 0;
+  padding: 32px 0;
 
   &__logo {
     font: 42px/150% Pacifico;

src/components/Header/index.scss

@@ -1,7 +1,11 @@
+import Platform from "../../enums/Platform";
+
 interface Props {
+  className: string;
   title: string;
   href: string;
-  imageUrl: string;
+  image: string;
+  platform: Platform
 }
 
 export default Props;

src/components/ProjectCard/Props.ts

@@ -1,3 +1,34 @@
+@import "../../assets/scss/variables.scss";
+
 .project-card {
-  background: #eee;
+  &__title {
+    margin-bottom: 8px;
+
+    & > a {
+      text-decoration: none;
+      color: $accent-color;
+    }
+  }
+
+  &__platform {
+    color: $second-color;
+  }
+
+  &__image {
+    display: block;
+    overflow: hidden;
+    background: $accent-color-pale;
+    
+    & > img {
+      width: 100%;
+      vertical-align: top;
+      transition: transform $animation-duration;
+    }
+
+    &:hover {
+      & > img {
+        transform: translateY(16px);
+      }
+    }
+  }
 }

src/components/ProjectCard/index.scss

@@ -2,10 +2,24 @@ import "./index.scss";
 import { FunctionComponent } from "react";
 import Props from "./Props";
 
-const ProjectCard: FunctionComponent<Props> = ({ title, href, imageUrl }) => {
+const ProjectCard: FunctionComponent<Props> = ({
+  className,
+  title,
+  href,
+  image,
+  platform,
+}) => {
   return (
-    <div className="project-card">
-      <h2 className="project-card__title">{title}</h2>
+    <div className={"project-card " + className}>
+      <h2 className="project-card__title">
+        <a href={href}>
+          {title}
+          <span className="project-card__platform"> for {platform}</span>
+        </a>
+      </h2>
+      <a className="project-card__image" href={href}>
+        <img src={image} alt={title} />
+      </a>
     </div>
   );
 };