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

src/components/blogs/Blogs.css

@@ -0,0 +1,24 @@
+.react-tabs__tab--selected {
+    transition: 1s;
+    border-top: 1px #00AA00 solid;
+}
+
+.tab-btn {
+    background-color: #121212;
+    transition: 1s;
+
+
+    border-bottom: 1px #FFFFFF solid;
+}
+
+.btn-beg {
+    border-bottom-left-radius: 10px;
+    border-top-left-radius: 10px;
+    border-left: 1px #FFFFFF solid;
+}
+
+.btn-end {
+    border-bottom-right-radius: 10px;
+    border-top-right-radius: 10px;
+    border-right: 1px #FFFFFF solid;
+}

src/components/blogs/Blogs.tsx

@@ -0,0 +1,22 @@
+import React, {useState} from "react";
+import "./Blogs.css";
+import BlogCard from "../blog-card/BlogCard";
+import {AllBlogs} from "../../static/data/Blogs";
+
+export default function Blogs() {
+
+    let blogId = 0;
+
+    return (
+        <div className={"child"}>
+            <div className={"row"} style={{alignContent: "center", padding: 50}}>
+                {AllBlogs.reverse().map((blog, i) => {
+                    blogId++;
+                    if(!blog.private) {
+                        return <BlogCard num={AllBlogs.length - blogId} className={"col-md-4"} blog={blog}/>
+                    }
+                })}
+            </div>
+        </div>
+    )
+}

src/components/social-bar/SocialBar.tsx

@@ -23,6 +23,10 @@ export default function SocialBar(props: {style: any}) {
             <div className={"col-md-2 col-4 fade-up-3 fade-up-md-3"} style={{display: "flex", justifyContent: "center"}}>
                 <svg onClick={ () => window.location.href="mailto:nickorlow@nickorlow.com"} className={"mail-icon icon"} viewBox="0 0 100 100" width="100px" height="100px"><g id="surface12014155"><path  d="M 28 8 C 16.976562 8 8 16.976562 8 28 L 8 72 C 8 83.023438 16.976562 92 28 92 L 72 92 C 83.023438 92 92 83.023438 92 72 L 92 28 C 92 16.976562 83.023438 8 72 8 Z M 26 32 L 74 32 C 74.359375 32 74.699219 32.039062 75.019531 32.140625 L 55.359375 51.78125 C 52.398438 54.742188 47.582031 54.742188 44.621094 51.78125 L 24.980469 32.140625 C 25.300781 32.039062 25.640625 32 26 32 Z M 22.140625 34.980469 L 37.179688 50 L 22.140625 65.019531 C 22.039062 64.699219 22 64.359375 22 64 L 22 36 C 22 35.640625 22.039062 35.300781 22.140625 34.980469 Z M 77.859375 34.980469 C 77.960938 35.300781 78 35.640625 78 36 L 78 64 C 78 64.359375 77.960938 64.699219 77.859375 65.019531 L 62.800781 50 Z M 40 52.820312 L 41.78125 54.621094 C 44.042969 56.882812 47.019531 58 49.980469 58 C 52.960938 58 55.917969 56.882812 58.179688 54.621094 L 59.980469 52.820312 L 75.019531 67.859375 C 74.699219 67.960938 74.359375 68 74 68 L 26 68 C 25.640625 68 25.300781 67.960938 24.980469 67.859375 Z M 40 52.820312 "/></g></svg>
             </div>
+
+            <div className={"col-md-12 col-12 fade-up-3 fade-up-md-2"} style={{display: "flex", justifyContent: "center"}}>
+                <a href={"/blogs"}>Read My Blog</a>
+            </div>
         </div>
     );
 }