diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..19a0148
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,32 @@
+module.exports = {
+ "env": {
+ "browser": true,
+ "es6": true
+ },
+ "extends": "eslint:recommended",
+ "globals": {
+ "Atomics": "readonly",
+ "SharedArrayBuffer": "readonly"
+ },
+ "parserOptions": {
+ "ecmaVersion": 2018
+ },
+ "rules": {
+ "indent": [
+ "error",
+ 2
+ ],
+ "linebreak-style": [
+ "error",
+ "unix"
+ ],
+ "quotes": [
+ "error",
+ "double"
+ ],
+ "semi": [
+ "error",
+ "always"
+ ]
+ }
+};
diff --git a/assets/js/journey.js b/assets/js/journey.js
new file mode 100644
index 0000000..03cdf73
--- /dev/null
+++ b/assets/js/journey.js
@@ -0,0 +1,122 @@
+const urlToText = (url) =>
+ url === "/"
+ ? "Home"
+ : url
+ .split("/")
+ .join(" ")
+ .replace(/(^|\s)\S/g, (t) => t.toUpperCase());
+
+class Journey {
+ constructor(parent = document.body, location = window.location) {
+ this.location = location;
+ this.parent = parent;
+ this.places = [];
+ this.start();
+ }
+
+ start() {
+ this.savePlaces();
+ }
+
+ html() {
+ const Box = Object.assign(document.createElement("div"), {
+ id: "journey",
+ className: "card bg-dark",
+ });
+
+ const ToggleBtn = Object.assign(document.createElement("button"), {
+ className: "btn btn-dark text-light",
+ innerHTML: "",
+ onclick() {
+ const isOpen = Box.classList.contains("open");
+ if (isOpen) {
+ Box.classList.remove("open");
+ Box.classList.add("closed");
+ } else {
+ Box.classList.remove("closed");
+ Box.classList.add("open");
+ }
+ },
+ });
+
+ const Heading = document.createElement("h5");
+ const headingText = document.createTextNode("Your recent views");
+ Heading.className = "h5 text-light";
+ Heading.appendChild(headingText);
+
+ const List = Object.assign(document.createElement("div"), {
+ className: "list-group",
+ });
+
+ this.places.forEach((place) => {
+ const Place = Object.assign(document.createElement("a"), {
+ className: "list-group-item bg-light text-dark",
+ href: place.href,
+ textContent: urlToText(place.pathname),
+ });
+
+ List.appendChild(Place);
+ });
+
+ Box.appendChild(ToggleBtn);
+ Box.appendChild(Heading);
+ Box.appendChild(List);
+
+ return Box;
+ }
+
+ initPlaces() {
+ sessionStorage.setItem("places", "");
+ }
+
+ savePlaces() {
+ this.places = this.getPlaces();
+
+ const existingPlace = this.places.find(
+ (place) => place.pathname === this.location.pathname
+ );
+
+ this.location.updated = new Date().getTime();
+
+ if (!existingPlace) {
+ this.places.push(this.location);
+ } else {
+ const placeIndex = this.places.findIndex(
+ (place) => existingPlace.pathname === place.pathname
+ );
+ existingPlace.updated = new Date().getTime();
+ this.places[placeIndex] = existingPlace;
+ }
+
+ sessionStorage.setItem("places", JSON.stringify(this.places));
+ this.render();
+ }
+
+ getPlaces() {
+ if (
+ sessionStorage.getItem("places") &&
+ sessionStorage.getItem("places") !== ""
+ ) {
+ return JSON.parse(sessionStorage.getItem("places")).sort((a, b) =>
+ a.updated < b.updated ? 1 : -1
+ );
+ } else {
+ return [];
+ }
+ }
+
+ render() {
+ if (this.parent.querySelector("#journey")) {
+ this.parent.replaceChild(
+ this.parent.querySelector("#journey"),
+ this.html()
+ );
+ } else {
+ this.parent.prepend(this.html());
+ }
+ }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+ window.Journey = Journey;
+});
diff --git a/assets/js/navigation.js b/assets/js/navigation.js
new file mode 100644
index 0000000..71c9fa7
--- /dev/null
+++ b/assets/js/navigation.js
@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const navigation = document.querySelector(".js-navigation");
+
+ navigation.selectedIndex = null;
+
+ navigation.addEventListener("change", (e) => {
+ if (e.target.value === "back") {
+ history.go(-1);
+ } else {
+ location.href = e.target.value;
+ }
+ });
+});
diff --git a/assets/sass/journey.scss b/assets/sass/journey.scss
new file mode 100644
index 0000000..c600e20
--- /dev/null
+++ b/assets/sass/journey.scss
@@ -0,0 +1,75 @@
+#journey {
+ border-bottom-right-radius: 6px;
+ border-top-right-radius: 6px;
+ bottom: 0;
+ box-shadow: -3px 5px 10px #000;
+ color: #fff;
+ display: flex;
+ flex-flow: column wrap;
+ right: -290px;
+ padding: 25px 5px 25px 20px;
+ position: fixed;
+ width: 300px;
+ z-index: 2;
+
+ &.open {
+ animation: slide-open 150ms linear;
+ right: 0;
+ }
+
+ &.closed {
+ animation: slide-close 150ms linear;
+ }
+
+ button {
+ border-right: none;
+ box-shadow: -3px 5px 10px #000;
+ height: 50px;
+ width: 50px;
+ position: absolute;
+ left: -45px;
+ top: 20%;
+ }
+}
+
+@keyframes slide-open {
+ 0% {
+ right: -290px;
+ }
+ 20% {
+ right: -250px;
+ }
+ 45% {
+ right: -200px;
+ }
+ 65% {
+ right: -100px;
+ }
+ 80% {
+ right: -50px;
+ }
+ 100% {
+ right: 0;
+ }
+}
+
+@keyframes slide-close {
+ 0% {
+ right: 0;
+ }
+ 20% {
+ right: -50px;
+ }
+ 45% {
+ right: -100px;
+ }
+ 65% {
+ right: -200px;
+ }
+ 80% {
+ right: -250px;
+ }
+ 100% {
+ right: -290px;
+ }
+}
diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss
new file mode 100644
index 0000000..dd8496f
--- /dev/null
+++ b/assets/sass/navigation.scss
@@ -0,0 +1,11 @@
+.navigation {
+ border-radius: 0;
+ cursor: pointer;
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 20px;
+
+ .sidebar & {
+ border-radius: 6px;
+ }
+}
diff --git a/content/posts/_index.md b/content/posts/_index.md
new file mode 100644
index 0000000..083a465
--- /dev/null
+++ b/content/posts/_index.md
@@ -0,0 +1,4 @@
+---
+title: Blog
+draft: false
+---
diff --git a/content/sandboxes/_index.md b/content/sandboxes/_index.md
new file mode 100644
index 0000000..d3fa63a
--- /dev/null
+++ b/content/sandboxes/_index.md
@@ -0,0 +1,4 @@
+---
+title: Sandboxes
+draft: false
+---
diff --git a/content/sandboxes/templating.md b/content/sandboxes/templating.md
new file mode 100644
index 0000000..29a5ec8
--- /dev/null
+++ b/content/sandboxes/templating.md
@@ -0,0 +1,8 @@
+---
+title: Templating in Javascript
+draft: false
+---
+
+{{< rawhtml >}}
+ I am a paragraph tag in html
+{{< /rawhtml >}}
diff --git a/layouts/partials/footer-scripts.html b/layouts/partials/footer-scripts.html
new file mode 100644
index 0000000..d4a53d4
--- /dev/null
+++ b/layouts/partials/footer-scripts.html
@@ -0,0 +1,20 @@
+
+
+