From 1d5b7d3519cc9cf601fc81ad6c04c4384488ef99 Mon Sep 17 00:00:00 2001
From: horhik <horhik@tuta.io>
Date: Mon, 25 May 2020 11:57:36 +0300
Subject: [PATCH] add blog page

---
 .idea/workspace.xml                           | 165 ++++++++++++++++--
 public/index.html                             |   1 +
 src/App.js                                    |   1 -
 src/components/pages/blog.jsx                 |  43 ++++-
 src/css/basic.scss                            |   4 +-
 src/css/elements/blog-post-preview.scss       |  58 ++++++
 .../░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png   | Bin 412 -> 0 bytes
 src/reducers/site-content-reducer.js          |  23 +++
 src/svg/stopwatch.svg                         |  11 ++
 src/svg/watch.svg                             |   4 +
 10 files changed, 292 insertions(+), 18 deletions(-)
 create mode 100644 src/css/elements/blog-post-preview.scss
 delete mode 100644 src/img/░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png
 create mode 100644 src/svg/stopwatch.svg
 create mode 100644 src/svg/watch.svg

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index ce0a847..9a5a204 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -11,17 +11,16 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="4b1db503-490b-4f06-812d-6b9b94d2764a" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/public/app-page.svg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/css/elements/blog-post-preview.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/svg/stopwatch.svg" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/svg/watch.svg" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/public/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/public/index.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/logo192.png" beforeDir="false" afterPath="$PROJECT_DIR$/public/logo192.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/navigation/page-links.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/navigation/page-links.jsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/pages/portfolio.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/portfolio.jsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/constants/routes.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/constants/routes.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/css/elements/portfolio-project.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/elements/portfolio-project.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/svg/app-page.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/svg/app-page.svg" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/pages/blog.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/blog.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/css/basic.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/basic.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/img/░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/reducers/site-content-reducer.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/reducers/site-content-reducer.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -85,7 +84,7 @@
       <workItem from="1589583447607" duration="5148000" />
       <workItem from="1590125952856" duration="14140000" />
       <workItem from="1590359928462" duration="4688000" />
-      <workItem from="1590372993882" duration="13297000" />
+      <workItem from="1590372993882" duration="18882000" />
     </task>
     <servers />
   </component>
@@ -144,10 +143,150 @@
       <screen x="0" y="0" width="1920" height="1080" />
     </state>
     <state x="391" y="182" key="SettingsEditor/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590389869850" />
-    <state x="568" y="130" width="774" height="774" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1590390024291">
+    <state x="538" y="-170" width="774" height="774" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1590396787684">
       <screen x="0" y="0" width="1920" height="1080" />
     </state>
-    <state x="568" y="130" width="774" height="774" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590390024291" />
+    <state x="538" y="-170" width="774" height="774" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590396787684" />
+    <state x="1710" y="11" width="99" height="1060" key="dock-window-1" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1710" y="11" width="99" height="1060" key="dock-window-1/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="934" y="11" width="58" height="1060" key="dock-window-10" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="934" y="11" width="58" height="1060" key="dock-window-10/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1252" y="11" width="48" height="1060" key="dock-window-11" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1252" y="11" width="48" height="1060" key="dock-window-11/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1124" y="11" width="72" height="1060" key="dock-window-12" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1124" y="11" width="72" height="1060" key="dock-window-12/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1604" y="11" width="307" height="1060" key="dock-window-13" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1604" y="11" width="307" height="1060" key="dock-window-13/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1650" y="11" width="261" height="1060" key="dock-window-14" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1650" y="11" width="261" height="1060" key="dock-window-14/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1343" y="11" width="75" height="1060" key="dock-window-15" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1343" y="11" width="75" height="1060" key="dock-window-15/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1402" y="11" width="79" height="1060" key="dock-window-16" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1402" y="11" width="79" height="1060" key="dock-window-16/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1594" y="11" width="47" height="1060" key="dock-window-17" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1594" y="11" width="47" height="1060" key="dock-window-17/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1469" y="11" width="83" height="1060" key="dock-window-18" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1469" y="11" width="83" height="1060" key="dock-window-18/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1540" y="11" width="88" height="1060" key="dock-window-19" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1540" y="11" width="88" height="1060" key="dock-window-19/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1811" y="11" width="100" height="1060" key="dock-window-2" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1811" y="11" width="100" height="1060" key="dock-window-2/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="112" y="11" width="46" height="1060" key="dock-window-20" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="112" y="11" width="46" height="1060" key="dock-window-20/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1284" y="11" width="627" height="1060" key="dock-window-21" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1284" y="11" width="627" height="1060" key="dock-window-21/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1124" y="11" width="152" height="1060" key="dock-window-22" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1124" y="11" width="152" height="1060" key="dock-window-22/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1444" y="11" width="467" height="1060" key="dock-window-23" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1444" y="11" width="467" height="1060" key="dock-window-23/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="874" y="11" width="167" height="1060" key="dock-window-24" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="874" y="11" width="167" height="1060" key="dock-window-24/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="964" y="11" width="184" height="1060" key="dock-window-25" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="964" y="11" width="184" height="1060" key="dock-window-25/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1540" y="11" width="371" height="1060" key="dock-window-26" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1540" y="11" width="371" height="1060" key="dock-window-26/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1284" y="11" width="120" height="1060" key="dock-window-27" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1284" y="11" width="120" height="1060" key="dock-window-27/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1072" y="11" width="205" height="1060" key="dock-window-28" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1072" y="11" width="205" height="1060" key="dock-window-28/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1204" y="11" width="232" height="1060" key="dock-window-29" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1204" y="11" width="232" height="1060" key="dock-window-29/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1621" y="11" width="93" height="1060" key="dock-window-3" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1621" y="11" width="93" height="1060" key="dock-window-3/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="904" y="11" width="52" height="1060" key="dock-window-30" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="904" y="11" width="52" height="1060" key="dock-window-30/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1001" y="11" width="63" height="1060" key="dock-window-31" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1001" y="11" width="63" height="1060" key="dock-window-31/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1036" y="11" width="66" height="1060" key="dock-window-32" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1036" y="11" width="66" height="1060" key="dock-window-32/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1077" y="11" width="69" height="1060" key="dock-window-33" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1077" y="11" width="69" height="1060" key="dock-window-33/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="958" y="11" width="61" height="1060" key="dock-window-34" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="958" y="11" width="61" height="1060" key="dock-window-34/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="769" y="11" width="47" height="1060" key="dock-window-35" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="769" y="11" width="47" height="1060" key="dock-window-35/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="964" y="11" width="947" height="1060" key="dock-window-4" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="964" y="11" width="947" height="1060" key="dock-window-4/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1184" y="11" width="140" height="1060" key="dock-window-5" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1184" y="11" width="140" height="1060" key="dock-window-5/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1239" y="11" width="129" height="1060" key="dock-window-6" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1239" y="11" width="129" height="1060" key="dock-window-6/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="1204" y="11" width="112" height="1060" key="dock-window-7" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="1204" y="11" width="112" height="1060" key="dock-window-7/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="870" y="11" width="54" height="1060" key="dock-window-8" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="870" y="11" width="54" height="1060" key="dock-window-8/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
+    <state x="900" y="11" width="56" height="1060" key="dock-window-9" timestamp="1590395037402">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="900" y="11" width="56" height="1060" key="dock-window-9/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
     <state x="653" y="275" width="614" height="512" key="find.popup" timestamp="1590385200980">
       <screen x="0" y="0" width="1920" height="1080" />
     </state>
@@ -156,9 +295,9 @@
       <screen x="0" y="0" width="1920" height="1080" />
     </state>
     <state x="622" y="249" key="run.anything.popup/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590363963127" />
-    <state x="623" y="240" width="672" height="678" key="search.everywhere.popup" timestamp="1589453965331">
+    <state x="623" y="240" width="672" height="678" key="search.everywhere.popup" timestamp="1590395597621">
       <screen x="0" y="0" width="1920" height="1080" />
     </state>
-    <state x="623" y="240" width="672" height="678" key="search.everywhere.popup/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1589453965331" />
+    <state x="623" y="240" width="672" height="678" key="search.everywhere.popup/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395597621" />
   </component>
 </project>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 6f94a33..681a7cb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,7 @@
       name="description"
       content="O. George's portfolio and blog"
     />
+    <link href="https://fonts.googleapis.com/css2?family=Cuprum:ital,wght@0,400;1,400;1,700&display=swap" rel="stylesheet">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/App.js b/src/App.js
index e5f9d3e..f8ba9fa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -20,7 +20,6 @@ function App(props) {
                 pages.map(page => {
                     return(
                         <Route exact path={page.src} component={page.page} key={page.src}/>
-
                     )
                 })
             }
diff --git a/src/components/pages/blog.jsx b/src/components/pages/blog.jsx
index a477627..95c2bd2 100644
--- a/src/components/pages/blog.jsx
+++ b/src/components/pages/blog.jsx
@@ -1,8 +1,45 @@
 import React from "react";
 import { connect } from "react-redux";
+import Contacts from "../elements/contacts";
 
-const BlogPage = (props) => {
-  return <div>Blog</div>;
+const BlogArticlePreview = (props) => {
+  return (
+    <div className={ `blog-posts__item--${props.pos}`}>
+      <h2 className={"blog-post__header"}>
+        <a href={"#article"} className={"link"}>
+          {props.post.name}
+        </a>
+      </h2>
+      <p>{props.post.description}</p>
+      <ul className={"blog-info__list"}>
+        <li className={"blog-info__item  blog-info__item--created"}>{props.post.created}</li>
+        <li className={"blog-info__item  blog-info__item--reading-time"}>{props.post.readingTime}</li>
+      </ul>
+    </div>
+  );
 };
 
-export default connect()(BlogPage);
+const BlogPage = (props) => {
+  return (
+    <div>
+      <ul className={"blog-posts"}>
+        {props.posts.map((post, index) => {
+          const pos = index % 2 === 0 ? "left" : "right";
+          return (
+            <li
+              className={`recent-block recent-block--${pos} blog-posts__item `}
+              key={post.description}
+            >
+              <BlogArticlePreview post={post} pos={pos}/>
+            </li>
+          );
+        })}
+      </ul>
+      <Contacts />
+    </div>
+  );
+};
+
+export default connect((state) => ({
+  posts: state.content.blogPageContent,
+}))(BlogPage);
diff --git a/src/css/basic.scss b/src/css/basic.scss
index 51fde16..e71066a 100644
--- a/src/css/basic.scss
+++ b/src/css/basic.scss
@@ -16,6 +16,7 @@ body {
 
 }
 a, .link{
+  transition: 0.3s;
   color: $link-color;
   text-decoration: none;
    &:hover, &:focus{
@@ -39,4 +40,5 @@ a, .link{
 @import "elements/page-links";
 @import "elements/recent-list";
 @import "elements/contacts";
-@import "elements/portfolio-project";
\ No newline at end of file
+@import "elements/portfolio-project";
+@import "elements/blog-post-preview";
\ No newline at end of file
diff --git a/src/css/elements/blog-post-preview.scss b/src/css/elements/blog-post-preview.scss
new file mode 100644
index 0000000..1455967
--- /dev/null
+++ b/src/css/elements/blog-post-preview.scss
@@ -0,0 +1,58 @@
+.blog-posts{
+  list-style: none;
+  padding: 0;
+  font-family: 'Cuprum', sans-serif;
+  transition: 0.5s;
+}
+.blog-posts__item{
+  font-family: 'Cuprum', sans-serif;
+  color: var(--foreground);
+  &::before, &::after{
+    content: '' !important;
+  }
+
+  &--right{
+    & p{
+      text-align: right;
+    }
+    & ul{
+      flex-direction: row-reverse;
+    }
+  }
+  &--left{
+    text-align: left;
+  }
+}
+
+.blog-post__header{
+  color: $header-color;
+  & a{
+    color: $header-color;
+  }
+}
+
+.blog-info__list{
+  list-style: none;
+  padding: 0;
+  display: flex;
+}
+
+.blog-info__item{
+  margin-right: 20px;
+  color: var(--orange);
+  display: flex;
+  align-items: center;
+
+  &--created{
+    &::before{
+      content: url("../../svg/watch.svg");
+      margin-right: 10px;
+    }
+  }
+  &--reading-time{
+    &::before{
+      content: url("../../svg/stopwatch.svg");
+      margin-right: 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/img/░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png b/src/img/░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png
deleted file mode 100644
index b2f9e95d2280e2cfcac87f0fadf813aae2f03f64..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 412
zcmV;N0b~A&P)<h;3K|Lk000e1NJLTq001EX000*V1^@s6g~uk}00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0WnELK~#7F?N(7v
z!!Qhej(PxYuyPYV*)jOz1Bok?BcSoWW9%1BLbyQ>fMT2`q3+hOFtI8^dmpW1zqnTF
z7nz{IyN8=()B5H0n7;&iuZGS;BZ*pBZKG|$eD|}z1bXkpZ|Qb(omK`Fpo$_IECoUj
zhv%?h-z#14bH7{>Og*hP-C*wSrB|Bw5HPm(-{IQuHZ9IxgyB`RSMsYOSdPnVXLpSJ
z5~!T|&Y%`5(7@4043IPlj^dkNg0h?y_k@-c;Yyy5SiFcsIi0nL|8Qd_8G9I8&Y#LY
zBhkE^M!xvjbkVjT*WnQJviCg)1paVspDfWm{;YH}Ii=@hBzQ~9%6fv?AJNlblk5GN
zo#fZh9F09b{dS})@lU>&83#50GFc@^Pkh?>&|mp;82MkZx0p$2@?%^80000<MNUMn
GLSTXm0<@|C

diff --git a/src/reducers/site-content-reducer.js b/src/reducers/site-content-reducer.js
index 8e6f219..e9f4990 100644
--- a/src/reducers/site-content-reducer.js
+++ b/src/reducers/site-content-reducer.js
@@ -49,6 +49,29 @@ const initialState = {
 
       ]
     }
+  ],
+  blogPageContent:[
+    {
+      name: 'The point of life by Linus Torvalds',
+      description: 'Some about OpenSource philosophy and “just for fun” by Linus Torvalds',
+      created: '02.04.2021',
+      readingTime: '8min read',
+      src: 'https://horhik.dev'
+    },
+    {
+      name: 'Haskell on Back-end, how it is?',
+      description: 'This site’s back-end written on haskell, let’s talks about privileges of haskell on backend',
+      created: '11.03.2020',
+      readingTime: '11min read',
+      src: 'https://horhik.dev'
+    },
+    {
+      name: 'ArchLinux and a lot of tiling window managers',
+      description: 'Did you try something another than floating windows, like in windows?',
+      created: '01.09.2020',
+      readingTime: '4min read',
+      src: 'https://horhik.dev'
+    }
   ]
 }
 
diff --git a/src/svg/stopwatch.svg b/src/svg/stopwatch.svg
new file mode 100644
index 0000000..7d002ad
--- /dev/null
+++ b/src/svg/stopwatch.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0)">
+        <path d="M7.43744 5.24994H6.56244L6.56288 8.0561L8.44019 9.93386L9.05885 9.31521L7.43788 7.6938L7.43744 5.24994Z" fill="#6272A4"/>
+        <path d="M13.125 4.01271L10.8623 1.75001L10.0445 2.56775C9.26589 2.11926 8.38107 1.83919 7.43652 1.77211L7.43715 0.875004H8.74997V0H5.24999V0.875004H6.56218L6.56155 1.77221C5.61776 1.83954 4.73356 2.11955 3.95545 2.56775L3.13771 1.75001L0.875 4.01271L1.69275 4.83046C1.1755 5.72849 0.875 6.76636 0.875 7.875C0.875 11.2524 3.62261 14 7 14C10.3774 14 13.125 11.2524 13.125 7.875C13.125 6.76636 12.8245 5.72846 12.3072 4.83046C12.3072 4.83046 13.125 4.01268 13.125 4.01271ZM7 13.125C4.10499 13.125 1.75 10.77 1.75 7.87504C1.75 4.98003 4.10499 2.62504 7 2.62504C9.895 2.62504 12.25 4.98003 12.25 7.87504C12.25 10.77 9.895 13.125 7 13.125Z" fill="#6272A4"/>
+    </g>
+    <defs>
+        <clipPath id="clip0">
+            <rect width="14" height="14" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/src/svg/watch.svg b/src/svg/watch.svg
new file mode 100644
index 0000000..6c04fd7
--- /dev/null
+++ b/src/svg/watch.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 0C3.14027 0 0 3.14027 0 7C0 10.8597 3.14027 14 7 14C10.8597 14 14 10.8597 14 7C14 3.14027 10.8597 0 7 0ZM7 13.125C3.62262 13.125 0.875004 10.3774 0.875004 7C0.875004 3.62262 3.62262 0.875004 7 0.875004C10.3774 0.875004 13.125 3.62262 13.125 7C13.125 10.3774 10.3774 13.125 7 13.125Z" fill="#6272A4"/>
+    <path d="M7.43744 2.625H6.56244V7.18114L9.3156 9.93431L9.93425 9.31566L7.43744 6.81883V2.625Z" fill="#6272A4"/>
+</svg>