diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 866651d..113c79f 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -11,11 +11,33 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="4b1db503-490b-4f06-812d-6b9b94d2764a" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/src/components/elements/contacts.jsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/css/elements/contacts.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/reducers/site-content-reducer.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/public/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/actions/route-actions.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/actions/route-actions.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ascii/Pagga.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/ascii/Pagga.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/elements/contacts.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/elements/contacts.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/elements/homepage/recent-block.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/elements/homepage/recent-block.jsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/elements/homepage/recent-list.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/elements/homepage/recent-list.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/components/elements/logo.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/elements/logo.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/navigation/nav-header.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/navigation/nav-header.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/navigation/page-link.jsx" beforeDir="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/blog.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/blog.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/pages/homepage.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/homepage.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/page-links.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/elements/page-links.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/css/logo.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/logo.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/css/variables.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/variables.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/functions/ascii-word.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/functions/ascii-word.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/reducers/all-reducers.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/reducers/all-reducers.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/reducers/client-reducer.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/reducers/client-reducer.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/reducers/main-page-reducer.js" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -40,7 +62,7 @@
     <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
     <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/ascii" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/reducers" />
     <property name="node.js.detected.package.eslint" value="true" />
     <property name="node.js.path.for.package.eslint" value="project" />
     <property name="node.js.selected.package.eslint" value="(autodetect)" />
@@ -50,9 +72,12 @@
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/reducers" />
+      <recent name="$PROJECT_DIR$/src/components/elements/homepage" />
       <recent name="$PROJECT_DIR$/src/ascii" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/components/navigation" />
       <recent name="$PROJECT_DIR$/src/components/elements/homepage" />
       <recent name="$PROJECT_DIR$/src" />
       <recent name="$PROJECT_DIR$/src/css" />
@@ -73,7 +98,9 @@
       <workItem from="1589253283370" duration="5339000" />
       <workItem from="1589450996359" duration="6767000" />
       <workItem from="1589583447607" duration="5148000" />
-      <workItem from="1590125952856" duration="12421000" />
+      <workItem from="1590125952856" duration="14140000" />
+      <workItem from="1590359928462" duration="4688000" />
+      <workItem from="1590372993882" duration="4840000" />
     </task>
     <servers />
   </component>
@@ -96,10 +123,10 @@
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
   </component>
   <component name="WindowStateProjectService">
-    <state x="683" y="324" width="544" height="385" key="#com.intellij.fileTypes.FileTypeChooser" timestamp="1589466353174">
+    <state x="681" y="304" width="565" height="385" key="#com.intellij.fileTypes.FileTypeChooser" timestamp="1590363110452">
       <screen x="0" y="0" width="1920" height="1080" />
     </state>
-    <state x="683" y="324" width="544" height="385" key="#com.intellij.fileTypes.FileTypeChooser/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1589466353174" />
+    <state x="681" y="304" width="565" height="385" key="#com.intellij.fileTypes.FileTypeChooser/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590363110452" />
     <state x="691" y="270" width="528" height="493" key="#com.intellij.refactoring.safeDelete.UnsafeUsagesDialog" timestamp="1589182540220">
       <screen x="0" y="0" width="1920" height="1080" />
     </state>
@@ -132,10 +159,18 @@
       <screen x="0" y="0" width="1920" height="1080" />
     </state>
     <state x="393" y="202" key="SettingsEditor/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1589189511639" />
-    <state x="514" y="-390" width="766" height="653" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1590135905566">
+    <state x="504" y="-490" width="766" height="653" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1590380750088">
       <screen x="0" y="0" width="1920" height="1080" />
     </state>
-    <state x="514" y="-390" width="766" height="653" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590135905566" />
+    <state x="504" y="-490" width="766" height="653" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590380750088" />
+    <state x="653" y="275" width="614" height="512" key="find.popup" timestamp="1590378687277">
+      <screen x="0" y="0" width="1920" height="1080" />
+    </state>
+    <state x="653" y="275" width="614" height="512" key="find.popup/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590378687277" />
+    <state x="622" y="249" key="run.anything.popup" timestamp="1590363963127">
+      <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">
       <screen x="0" y="0" width="1920" height="1080" />
     </state>
diff --git a/package.json b/package.json
index 52763e6..d298906 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "redux": "^4.0.5"
   },
diff --git a/public/index.html b/public/index.html
index aa069f2..2975a1e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Horhik.dev</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.js b/src/App.js
index 64be873..a5f4102 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,28 @@
 import React from "react";
 import "./css/basic.scss";
 import HomePage from "./components/pages/homepage";
-function App() {
+import {connect} from 'react-redux'
+import NavHeader from "./components/navigation/nav-header";
+import {Route} from 'react-router-dom'
+import PageLinks from "./components/navigation/page-links";
+import Logo from "./components/elements/logo";
+import PortfolioPage from "./components/pages/portfolio";
+import BlogPage from "./components/pages/blog";
+function App(props) {
   return (
     <div className="App">
-      <HomePage />
+        <Logo child={props.pageQuote} header={props.currentPageName}/>
+        <PageLinks/>
+        <Route path={props.currentPath} component={props.currentPage}/>
     </div>
   );
 }
 
-export default App;
+export default connect(
+    state => ({
+        currentPath: state.client.currentPath,
+        currentPage: state.client.currentPage,
+        currentPageName: state.client.currentPageName,
+        pageQuote: state.client.pageQuote
+    })
+)(App);
diff --git a/src/actions/route-actions.js b/src/actions/route-actions.js
index e69de29..148174b 100644
--- a/src/actions/route-actions.js
+++ b/src/actions/route-actions.js
@@ -0,0 +1,6 @@
+import { SET_CURRENT_PAGE } from "../constants/routes";
+
+export const setCurrentPage = (page) => ({
+  type: SET_CURRENT_PAGE,
+  page,
+});
diff --git a/src/ascii/Pagga.js b/src/ascii/Pagga.js
index b2cd92d..b9fb270 100644
--- a/src/ascii/Pagga.js
+++ b/src/ascii/Pagga.js
@@ -532,4 +532,4 @@ on the TOIlet website at http://caca.zoy.org/wiki/toilet
 ░█▀█▀▀@
 ░█░█▀▀@
 ░▀▀▀▀▀@@
-`
\ No newline at end of file
+`;
diff --git a/src/components/elements/contacts.jsx b/src/components/elements/contacts.jsx
index 990530c..787cb9d 100644
--- a/src/components/elements/contacts.jsx
+++ b/src/components/elements/contacts.jsx
@@ -1,40 +1,39 @@
-import React from 'react'
+import React from "react";
 import asciiWord from "../../functions/ascii-word";
 
-const links = [{
-    site: 'github',
-    url: 'https://github.com'
-},
-    {
-        site: 'twitter',
-        url:'https://twitter.com'
-    },
-    {
-        site: 'telegram',
-        url: 'https://telegram.org'
-    }]
+const links = [
+  {
+    site: "github",
+    url: "https://github.com",
+  },
+  {
+    site: "twitter",
+    url: "https://twitter.com",
+  },
+  {
+    site: "telegram",
+    url: "https://telegram.org",
+  },
+];
 
-const SocialLink = props => {
-    return (
-        <a href={props.url} className={' contact-link'}>
-                <pre>
-                {asciiWord(props.site, 'Nacyj')}
-                </pre>
-        </a>
-    )
-}
+const SocialLink = (props) => {
+  return (
+    <a href={props.url} className={" contact-link"}>
+      <pre>{asciiWord(props.site, "Nacyj")}</pre>
+    </a>
+  );
+};
 
-const Contacts = props => {
-return (
-    <ul className={'contacts'}>
-        {links.map(link => (
-            <li key={link.url}>
-                <SocialLink url={link.url} site={link.site}/>
-            </li>
-        ))}
+const Contacts = (props) => {
+  return (
+    <ul className={"contacts"}>
+      {links.map((link) => (
+        <li key={link.url}>
+          <SocialLink url={link.url} site={link.site} />
+        </li>
+      ))}
     </ul>
-)
+  );
+};
 
-}
-
-export default Contacts
\ No newline at end of file
+export default Contacts;
diff --git a/src/components/elements/homepage/recent-block.jsx b/src/components/elements/homepage/recent-block.jsx
index b87e26f..5f89bf4 100644
--- a/src/components/elements/homepage/recent-block.jsx
+++ b/src/components/elements/homepage/recent-block.jsx
@@ -1,21 +1,24 @@
-import React from 'react'
-import {connect} from 'react-redux'
+import React from "react";
+import { connect } from "react-redux";
 
 /*
-* props: {
-*   header,
-*   pos,
-*   link
-*
-* }
-* */
+ * props: {
+ *   header,
+ *   pos,
+ *   link
+ *
+ * }
+ * */
 
-const RecentBlock = props => {
-    return(
-        <a href="#test" className={`recent-block recent-block--${props.pos || 'right'}`}>
-            {props.header || 'no content loaded...'}
-        </a>
-    )
-}
+const RecentBlock = (props) => {
+  return (
+    <a
+      href="#test"
+      className={`recent-block recent-block--${props.pos || "right"}`}
+    >
+      {props.header || "no content loaded..."}
+    </a>
+  );
+};
 
-export default connect()(RecentBlock)
\ No newline at end of file
+export default connect()(RecentBlock);
diff --git a/src/components/elements/homepage/recent-list.jsx b/src/components/elements/homepage/recent-list.jsx
index 8d6f1e5..a8f2d11 100644
--- a/src/components/elements/homepage/recent-list.jsx
+++ b/src/components/elements/homepage/recent-list.jsx
@@ -1,38 +1,46 @@
-import React from 'react'
-import {connect} from 'react-redux'
+import React from "react";
+import { connect } from "react-redux";
 import RecentBlock from "./recent-block";
 import Contacts from "../contacts";
 
-const Recent = props => {
-    return (
-        <section className={'recent'}>
-            <h1 className={'h1 recent-header'}>
-                Recent
-            </h1>
-            <ul className="recent-list">
-                <li>
-                    <RecentBlock header={" My school report said I showed no interest"} pos="left"/>
-                </li>
+const Recent = (props) => {
+  return (
+    <section className={"recent"}>
+      <h1 className={"h1 recent-header"}>Recent</h1>
+      <ul className="recent-list">
+        <li>
+          <RecentBlock
+            header={" My school report said I showed no interest"}
+            pos="left"
+          />
+        </li>
 
-                <li>
-                    <RecentBlock header={"\"A disruptive influence\" I felt sorry for them in a way"}/>
-                </li>
-                <li>
-                    <RecentBlock header={"When they finally expelled me"} pos={'left'}/>
-                </li>
-                <li>
-                    <RecentBlock header={"It didn't mean a thing"} pos={'left'}/>
-                </li>
-                <li>
-                    <RecentBlock header={" Life is unfair, kill yourself or get over it"} pos={'right'}/>
-                </li>
-                <li>
-                    <RecentBlock header={" Life is unfair, kill yourself or get over it"} pos={'left'}/>
-                </li>
-            </ul>
-            <Contacts/>
-        </section>
-    )
-}
+        <li>
+          <RecentBlock
+            header={'"A disruptive influence" I felt sorry for them in a way'}
+          />
+        </li>
+        <li>
+          <RecentBlock header={"When they finally expelled me"} pos={"left"} />
+        </li>
+        <li>
+          <RecentBlock header={"It didn't mean a thing"} pos={"left"} />
+        </li>
+        <li>
+          <RecentBlock
+            header={" Life is unfair, kill yourself or get over it"}
+            pos={"right"}
+          />
+        </li>
+        <li>
+          <RecentBlock
+            header={" Life is unfair, kill yourself or get over it"}
+            pos={"left"}
+          />
+        </li>
+      </ul>
+    </section>
+  );
+};
 
-export default connect()(Recent)
\ No newline at end of file
+export default connect()(Recent);
diff --git a/src/components/elements/logo.jsx b/src/components/elements/logo.jsx
index ce5e859..2efb483 100644
--- a/src/components/elements/logo.jsx
+++ b/src/components/elements/logo.jsx
@@ -1,7 +1,6 @@
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from "react";
 import asciiWord from "../../functions/ascii-word";
 
-
 /*
 ░█░█░█▀█░█▀▄░█░█░▀█▀░█░█░░░░█▀▄░█▀▀░█░█
 ░█▀█░█░█░█▀▄░█▀█░░█░░█▀▄░░░░█░█░█▀▀░▀▄▀
@@ -9,21 +8,15 @@ import asciiWord from "../../functions/ascii-word";
 */
 
 const Logo = (props) => {
-    const text = useState(asciiWord("horhik.dev"))
-    useEffect(() => {
+  useEffect(() => {}, []);
+  return (
+    <div className={"logo--wrapper"}>
+      <div className={"logo"}>
+        <pre className={"toilet-logo"}>{asciiWord(props.header)}</pre>
+      </div>
+      <span className={"logo-quote"}>{props.child}</span>
+    </div>
+  );
+};
 
-    }, [])
-    return (
-        <div className={'logo--wrapper'}>
-
-        <div className={'logo'}>
-            <pre className={'toilet-logo'}>
-                {text}
-            </pre>
-        </div>
-            <span className={'logo-quote'}>{props.child}</span>
-        </div>
-    )
-}
-
-export default Logo
\ No newline at end of file
+export default Logo;
diff --git a/src/components/navigation/nav-header.jsx b/src/components/navigation/nav-header.jsx
index e0d09a3..ad159e9 100644
--- a/src/components/navigation/nav-header.jsx
+++ b/src/components/navigation/nav-header.jsx
@@ -1,12 +1,8 @@
-import React from 'react'
-import {connect} from 'react-redux'
+import React from "react";
+import { connect } from "react-redux";
 
-const NavHeader = props => {
-    return (
-        <nav>
+const NavHeader = (props) => {
+  return <nav></nav>;
+};
 
-        </nav>
-    )
-}
-
-export default connect()(NavHeader)
\ No newline at end of file
+export default connect()(NavHeader);
diff --git a/src/components/navigation/page-link.jsx b/src/components/navigation/page-link.jsx
deleted file mode 100644
index b56e4ff..0000000
--- a/src/components/navigation/page-link.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import {Link} from 'react-router-dom'
-import connect from 'react-redux'
-import asciiWord from "../../functions/ascii-word";
-
-const PageLink = props => {
-    return (
-        <Link to={props.src}>{asciiWord(props.name)}</Link>
-    )
-}
-
-export default PageLink
\ No newline at end of file
diff --git a/src/components/navigation/page-links.jsx b/src/components/navigation/page-links.jsx
index 081f3ea..738484b 100644
--- a/src/components/navigation/page-links.jsx
+++ b/src/components/navigation/page-links.jsx
@@ -1,36 +1,36 @@
-import React from 'react'
+import React from "react";
 import asciiWord from "../../functions/ascii-word";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 import pages from "../../constants/routes";
-import {connect} from 'react-redux'
-import {setCurrentPage} from "../../actions/route-actions";
+import { connect } from "react-redux";
+import { setCurrentPage } from "../../actions/route-actions";
 
-const PageLinks = props => {
-    const goToPage = page => {
-        props.setCurrentPage(page)
-    }
-    return(
-        <ul className={'page-list'}>
-            {
-                pages.map(page => {
-                    if(page.src !== props.currentPageSrc){
-                        return(
+const PageLinks = (props) => {
+  const goToPage = (page) => {
+    props.setCurrentPage(page);
+  };
+  return (
+    <ul className={"page-list"}>
+      {pages.map((page) => {
+        if (page.src !== props.currentPageSrc) {
+          return (
+            <li key={page.src} className={"page-link"}>
+              <Link to={page.src} onClick={() => goToPage(page)}>
+                {asciiWord(page.name)}
+              </Link>
+            </li>
+          );
+        }
+      })}
+    </ul>
+  );
+};
 
-                            <li key={page.src} className={'page-link'}>
-                                <Link to={page.src} onClick={() => goToPage(page)}>
-                                    {asciiWord(page.name)}
-                                </Link>
-                            </li>
-                        )
-                    }
-                })
-            }
-        </ul>
-    )
-}
-
-export default connect(state => ({
-    currentPageSrc: state.client.currentPath
-}), {
-    setCurrentPage
-})(PageLinks)
\ No newline at end of file
+export default connect(
+  (state) => ({
+    currentPageSrc: state.client.currentPath,
+  }),
+  {
+    setCurrentPage,
+  }
+)(PageLinks);
diff --git a/src/components/pages/blog.jsx b/src/components/pages/blog.jsx
index e69de29..a477627 100644
--- a/src/components/pages/blog.jsx
+++ b/src/components/pages/blog.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { connect } from "react-redux";
+
+const BlogPage = (props) => {
+  return <div>Blog</div>;
+};
+
+export default connect()(BlogPage);
diff --git a/src/components/pages/homepage.jsx b/src/components/pages/homepage.jsx
index 19a88ec..e77a0c6 100644
--- a/src/components/pages/homepage.jsx
+++ b/src/components/pages/homepage.jsx
@@ -1,15 +1,14 @@
-import React from 'react'
-import Logo from "../elements/logo";
-import PageLinks from "../elements/page-links";
+import React from "react";
 import Recent from "../elements/homepage/recent-list";
+import { connect } from "react-redux";
+import Contacts from "../elements/contacts";
 
 const HomePage = () => {
-    return (
-        <div>
-           <Logo child={"O. George's site"}></Logo>
-            <PageLinks/>
-            <Recent/>
-        </div>
-    )
-}
-export default HomePage
\ No newline at end of file
+  return (
+    <div>
+      <Recent />
+      <Contacts />
+    </div>
+  );
+};
+export default connect((state) => ({}), {})(HomePage);
diff --git a/src/components/pages/portfolio.jsx b/src/components/pages/portfolio.jsx
index e69de29..92b1ce2 100644
--- a/src/components/pages/portfolio.jsx
+++ b/src/components/pages/portfolio.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { connect } from "react-redux";
+import Contacts from "../elements/contacts";
+
+const PortfolioItem = (props) => {
+  const name = props.project.name;
+  const description = props.project.description;
+  const gallery = props.project.gallery;
+  const links = props.project.links;
+  return (
+    <section className={"project"}>
+      <h2 className="project-name">{name}</h2>
+      <p className="project-description">{description}</p>
+      {gallery ? <ul className="project-gallery"></ul> : ""}
+      <ul className="project-links">
+        <li className="project-link">GitHub</li>
+      </ul>
+    </section>
+  );
+};
+
+const PortfolioPage = (props) => {
+  return (
+    <div>
+      <ul className="portfolio">
+        {props.portfolio.map((project) => (
+          <li className={"portfolio-project"} key={project.name}>
+            <PortfolioItem project={project} />
+          </li>
+        ))}
+      </ul>
+      <Contacts />
+    </div>
+  );
+};
+
+export default connect((state) => ({
+  portfolio: state.content.portfolioItems,
+}))(PortfolioPage);
diff --git a/src/constants/routes.js b/src/constants/routes.js
index e69de29..cfb9d29 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -0,0 +1,28 @@
+//export const ct = "ct"
+import BlogPage from "../components/pages/blog";
+import PortfolioPage from "../components/pages/portfolio";
+import HomePage from "../components/pages/homepage";
+
+const pages = [
+  {
+    name: "horhik.dev",
+    src: "/",
+    quote: "O. George’s site",
+    page: HomePage,
+  },
+  {
+    name: "portfolio",
+    src: "/portfolio",
+    page: PortfolioPage,
+  },
+  {
+    name: "blog",
+    src: "/blog",
+    page: BlogPage,
+    quote: "Articles, ideas and thoughts from
\nO. George",
+  },
+];
+
+export const SET_CURRENT_PAGE = "SET_CURRENT_PAGE";
+
+export default pages;
diff --git a/src/css/elements/page-links.scss b/src/css/elements/page-links.scss
index 52760c6..83c7e41 100644
--- a/src/css/elements/page-links.scss
+++ b/src/css/elements/page-links.scss
@@ -5,6 +5,7 @@
   width: 300px;
   margin: 0 auto;
   font-family: Mononoki;
+  padding: 0;
 }
 
 .page-link{
@@ -13,7 +14,7 @@
   width: 100px;
   transition: 0.3s;
   & a{
-    color: var(--cyan);
+    color: $header-color;
     text-decoration: none;
     display: block;
     &:hover, &:focus{
diff --git a/src/css/logo.scss b/src/css/logo.scss
index a42385b..a20b270 100644
--- a/src/css/logo.scss
+++ b/src/css/logo.scss
@@ -7,10 +7,11 @@
   text-align: center;
   color: var(--foreground);
   margin: 10px auto 28px;
+  max-width: 300px;
 
 }
 .logo{
-  margin: 0 auto ;
+  margin: 0 auto;
   margin-top: 30px;
   display: flex;
   flex-direction: column;
diff --git a/src/css/variables.scss b/src/css/variables.scss
index e51ac93..a7d9712 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -1,4 +1,3 @@
-$ascii-line-height: 1.115em;
 :root {
   --background: #282A36 ;
   --comment: #6272A4 ;
@@ -13,3 +12,5 @@ $ascii-line-height: 1.115em;
   --yellow: #F1FA8C;
 }
 
+$ascii-line-height: 1.115em;
+$header-color: var(--green);
diff --git a/src/functions/ascii-word.js b/src/functions/ascii-word.js
index edd9d5a..c8ef0d4 100644
--- a/src/functions/ascii-word.js
+++ b/src/functions/ascii-word.js
@@ -1,18 +1,21 @@
-import figlet from 'figlet'
-import Pagga from '../ascii/Pagga'
+import figlet from "figlet";
+import Pagga from "../ascii/Pagga";
 import Nancyj from "figlet/importable-fonts/Nancyj";
 
+const asciiWord = (word, font = "Pagga") => {
+  let text = "";
+  figlet.parseFont(font, font === "Pagga" ? Pagga : Nancyj);
+  figlet.text(
+    word,
+    {
+      font,
+    },
+    function (err, data) {
+      console.log(data);
+      text = data;
+    }
+  );
+  return text;
+};
 
-const asciiWord = (word, font = 'Pagga') => {
-    let text = ''
-    figlet.parseFont(font, font === "Pagga" ? Pagga : Nancyj);
-    figlet.text(word, {
-        font,
-    }, function(err, data) {
-        console.log(data)
-        text = data;
-    });
-    return text
-}
-
-export default asciiWord
+export default asciiWord;
diff --git a/src/index.js b/src/index.js
index 9a9f618..83f220a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,12 +3,15 @@ import ReactDOM from "react-dom";
 import App from "./App";
 import {Provider} from "react-redux";
 import store from "./store";
+import {BrowserRouter} from "react-router-dom";
 
 ReactDOM.render(
   <React.StrictMode>
+      <BrowserRouter>
       <Provider store={store}>
           <App />
       </Provider>
+      </BrowserRouter>
   </React.StrictMode>,
   document.getElementById("root")
 );
diff --git a/src/reducers/all-reducers.js b/src/reducers/all-reducers.js
index 610d641..6b16ebc 100644
--- a/src/reducers/all-reducers.js
+++ b/src/reducers/all-reducers.js
@@ -1,7 +1,10 @@
-import {combineReducers} from "redux";
-import mainPageReducer from "./main-page-reducer";
+import { combineReducers } from "redux";
+import siteContentReducer from "./site-content-reducer";
 import clientReducer from "./client-reducer";
 
-const rootReducer = combineReducers({mainPage: mainPageReducer, client: clientReducer})
+const rootReducer = combineReducers({
+  content: siteContentReducer,
+  client: clientReducer,
+});
 
-export default rootReducer
+export default rootReducer;
diff --git a/src/reducers/client-reducer.js b/src/reducers/client-reducer.js
index 3b27654..36dbb9a 100644
--- a/src/reducers/client-reducer.js
+++ b/src/reducers/client-reducer.js
@@ -1,14 +1,28 @@
+import { SET_CURRENT_PAGE } from "../constants/routes";
+import HomePage from "../components/pages/homepage";
+
 const initialState = {
-    lang: 'en',
-    theme: 'dark',
-}
+  lang: "en",
+  theme: "dark",
+  currentPath: "/",
+  currentPage: HomePage,
+  currentPageName: "horhik.dev",
+  pageQuote: "O. George’s site",
+};
 
-const clientReducer = (state = initialState, action) =>  {
-    switch (action.type) {
-        default:
-            return state
+const clientReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case SET_CURRENT_PAGE:
+      return {
+        ...state,
+        currentPath: action.page.src,
+        currentPage: action.page.page,
+        currentPageName: action.page.name,
+        pageQuote: action.page.quote,
+      };
+    default:
+      return state;
+  }
+};
 
-    }
-}
-
-export default clientReducer
\ No newline at end of file
+export default clientReducer;
diff --git a/src/reducers/main-page-reducer.js b/src/reducers/main-page-reducer.js
deleted file mode 100644
index 87a8598..0000000
--- a/src/reducers/main-page-reducer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const initialState = {
-    recentNews: ['nope'],
-
-}
-
-const mainPageReducer = (state = initialState, action) => {
-    switch (action.type) {
-        default:
-            return state
-    }
-}
-
-export default mainPageReducer
\ No newline at end of file
diff --git a/src/reducers/site-content-reducer.js b/src/reducers/site-content-reducer.js
new file mode 100644
index 0000000..d628e27
--- /dev/null
+++ b/src/reducers/site-content-reducer.js
@@ -0,0 +1,39 @@
+const initialState = {
+  recentNews: ["nope"],
+  portfolioItems: [
+    {
+      name: 'AnkiLan',
+      description: 'The app created for pushing cards with english words and their definitions to AnkiLan',
+      gallery: [],
+      links: [
+        {
+          name: 'github',
+          type: 'github',
+          src: 'https://github.com'
+        },
+      ]
+    },
+    {
+      name: 'Time garden',
+      description: 'The Forest like app for desktop and mobile',
+      gallery: [],
+      links: [
+        {
+          name: 'github',
+          type: 'github',
+          src: 'https://github.com'
+        }
+
+      ]
+    }
+  ]
+}
+
+const siteContentReducer = (state = initialState, action) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};
+
+export default siteContentReducer;
diff --git a/yarn.lock b/yarn.lock
index 3e20b06..984651a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -956,7 +956,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
   integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
@@ -5446,6 +5446,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5455,7 +5467,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7074,7 +7086,7 @@ loglevel@^1.6.6:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56"
   integrity sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7327,6 +7339,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
   integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
 
+mini-create-react-context@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz#df60501c83151db69e28eac0ef08b4002efab040"
+  integrity sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
@@ -8268,6 +8288,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -9387,7 +9414,7 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
+react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9403,6 +9430,35 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"
@@ -9811,6 +9867,11 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.1.tgz#28931895fa1eab9be0647d3b2958c100ae3c0bf0"
@@ -10963,6 +11024,16 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -11320,6 +11391,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"