Finished blogs

src/components/blog-card/BlogCard.css

@@ -0,0 +1,36 @@
+
+@media only screen and (max-width: 768px) {
+    .blog-card {
+        margin-top: 100px;
+    }
+}
+
+.blog-card {
+    padding: 10px;
+}
+
+.blog-card-img {
+    background-color: #FFFFFF;
+    padding: 20px;
+    width: 100%;
+    height: 100%;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.blog-card-info {
+    padding-bottom: 5px;
+    padding-top: 10px;
+}
+
+.blog-card-int {
+    border-radius: 10px;
+    background-color: #1a1a1e;
+    transition: 1s;
+}
+
+.blog-card-int:hover {
+    transform: translateY(-5px);
+    transition: .5s;
+    cursor: pointer;
+}

src/components/blog-card/BlogCard.tsx

@@ -0,0 +1,19 @@
+import ScrollAnimation from "react-animate-on-scroll";
+import React from "react";
+import Job from "../../types/Job";
+import "./BlogCard.css";
+import Blog from "../../types/Blog";
+
+export default function BlogCard(props: {style?: any, className?: string, blog: Blog, num: number}){
+    return (
+        <ScrollAnimation className={"blog-card "+(props.className || "")} style={props.style} animateIn="fade-up" duration={2} animateOnce={true} offset={50} delay={200}>
+            <div onClick={()=>{window.location.href="/blog?id="+props.num}} className={"blog-card-int"}>
+                {/*<img className={"blog-card-img"} src={props.blog.image}/>*/}
+                <div className={"blog-card-info"}>
+                    <h3>{props.blog.title}</h3>
+                    <p>{props.blog.date.toLocaleDateString()}</p>
+                </div>
+            </div>
+        </ScrollAnimation>
+    );
+}