app: Cleanup dead files and organize hierarchy

19 files changed, 563 insertions, 0 deletions

diff --git a/app/Routes.php b/app/Routes.php
new file mode 100644
index 0000000..59c0f40
--- /dev/null
+++ b/app/Routes.php
@@ -0,0 +1,31 @@
+<?php
+
+/* public routes */
+
+$router->get('',         '../app/controllers/index.controller.php');
+$router->get('contact',  '../app/controllers/contact.controller.php');
+$router->get('wall',     '../app/controllers/wall.controller.php');
+$router->get('comments', '../app/controllers/comments.controller.php');
+$router->get('about',    '../app/controllers/about.controller.php');
+$router->get('hashget',  '../app/controllers/comments.controller.php');
+$router->get('hashover', '../app/controllers/comments.controller.php');
+
+$router->head('',         '../app/controllers/index.controller.php');
+$router->head('contact',  '../app/controllers/contact.controller.php');
+$router->head('wall',     '../app/controllers/wall.controller.php');
+$router->head('comments', '../app/controllers/comments.controller.php');
+$router->head('hashget',  '../app/controllers/comments.controller.php');
+$router->head('hashover', '../app/controllers/comments.controller.php');
+
+$router->post('contact',  '../app/controllers/contact.controller.php');
+$router->post('hashpost', '../app/controllers/comments.controller.php');
+
+/* backend routes */
+
+$router->get('latestajax',    '../bootstrap/comments/backend/latest-ajax.php');
+$router->get('countlinkajax', '../bootstrap/comments/backend/count-link-ajax.php');
+
+$router->post('commentsajax', '../bootstrap/comments/backend/comments-ajax.php');
+$router->post('formactions',  '../bootstrap/comments/backend/form-actions.php');
+$router->post('loadcomments', '../bootstrap/comments/backend/load-comments.php');
+$router->post('likecomment',  '../bootstrap/comments/backend/like.php');
diff --git a/app/controllers/about.controller.php b/app/controllers/about.controller.php
new file mode 100644
index 0000000..cb58a14
--- /dev/null
+++ b/app/controllers/about.controller.php
@@ -0,0 +1,3 @@
+<?php
+
+require '../app/views/about.view.php';
diff --git a/app/controllers/comments.controller.php b/app/controllers/comments.controller.php
new file mode 100644
index 0000000..6f4abfa
--- /dev/null
+++ b/app/controllers/comments.controller.php
@@ -0,0 +1,3 @@
+<?php
+
+require '../bootstrap/comments/comments.php';
diff --git a/app/controllers/contact.controller.php b/app/controllers/contact.controller.php
new file mode 100644
index 0000000..78d5c18
--- /dev/null
+++ b/app/controllers/contact.controller.php
@@ -0,0 +1,56 @@
+<?php
+
+use PHPMailer\PHPMailer\PHPMailer;
+use PHPMailer\PHPMailer\Exception;
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+
+    $submit = new Form();
+
+    $submit->name = $name = $_POST['26471'] ?? null;
+    $submit->email = $email = $_POST['26472'] ?? null;
+    $submit->message = $message = $_POST['26473'] ?? null;
+    $submit->spam = $spam = $_POST['agree'] ?? false;
+
+    $validEmail = PHPMailer::validateAddress($submit->email, 'auto');
+
+    if ((bool) empty($submit->email) == true
+        || (bool) empty($submit->message) == true
+    ) {
+        include '../app/views/contact.view.php';
+        return;
+    }
+
+    if ((bool) $spam == true) {
+        error_log('Contact Form Spam: Error 403');
+        return http_response_code(403);
+    }
+
+    if ($validEmail === false ) {
+        $emailError = 'Invalid email: ' . "\r" . '<b>'. $submit->email . '</b>';
+        include '../app/views/contact.view.php';
+        return;
+    }
+
+    $formSuccess = true;
+
+    $name = null;
+    $email = null;
+    $message = null;
+    $spam = false;
+
+    include '../app/views/contact.view.php';
+    fastcgi_finish_request();
+
+    $contact['database']->insert(
+        'contactform', [
+        'name' => $submit->name,
+        'email' => $submit->email,
+        'message' => $submit->message,
+        ]
+    );
+
+    return sendMail($submit->name, $submit->email, $submit->message);
+}
+
+require '../app/views/contact.view.php';
diff --git a/app/controllers/index.controller.php b/app/controllers/index.controller.php
new file mode 100644
index 0000000..7ec4a52
--- /dev/null
+++ b/app/controllers/index.controller.php
@@ -0,0 +1,3 @@
+<?php
+
+require '../app/views/index.view.php';
diff --git a/app/controllers/wall.controller.php b/app/controllers/wall.controller.php
new file mode 100644
index 0000000..896b2c3
--- /dev/null
+++ b/app/controllers/wall.controller.php
@@ -0,0 +1,3 @@
+<?php
+
+require '../app/views/wall.view.php';
diff --git a/app/model/Form.php b/app/model/Form.php
new file mode 100644
index 0000000..d7cd5d9
--- /dev/null
+++ b/app/model/Form.php
@@ -0,0 +1,9 @@
+<?php
+
+class Form
+{
+    public $name;
+    public $email;
+    public $message;
+    public $spam;
+}
diff --git a/app/model/Navigation.php b/app/model/Navigation.php
new file mode 100644
index 0000000..72ee891
--- /dev/null
+++ b/app/model/Navigation.php
@@ -0,0 +1,30 @@
+<?php
+
+class Navigation
+{
+    public function requestContains($route)
+    {
+        if (strpos($_SERVER['REQUEST_URI'], $route) !== false) {
+            return true;
+        }
+        return false;
+    }
+
+    public function isActiveHome()
+    {
+        if ($_SERVER['REQUEST_URI'] === '/') {
+            return 'link-active text-black ';
+        }
+        return;
+    }
+
+    public function isActive($route)
+    {
+        if ($_SERVER['REQUEST_URI'] === $route
+            || $this->requestContains($route)
+        ) {
+            return 'link-active text-black ';
+        }
+        return;
+    }
+}
diff --git a/app/views/about.view.php b/app/views/about.view.php
new file mode 100644
index 0000000..ae28201
--- /dev/null
+++ b/app/views/about.view.php
@@ -0,0 +1,7 @@
+<?php require __DIR__ . '/partials/header.php'; ?>
+
+    <h2 class="text-xl text-gray-700 mb-6 leading-normal">
+        Edwin is a voiceover artist specializing in low to mid-range voiceovers.
+    </h2>
+
+<?php require __DIR__ . '/partials/footer.php'; ?>
diff --git a/app/views/components/AudioPlayer.php b/app/views/components/AudioPlayer.php
new file mode 100644
index 0000000..d3ba487
--- /dev/null
+++ b/app/views/components/AudioPlayer.php
@@ -0,0 +1,51 @@
+    <div class="sm2-bar-ui bg-white compact shadow-md mb-4 border">
+
+        <div class="bd sm2-main-controls">
+
+            <div class="sm2-inline-element sm2-button-element">
+                <div class="sm2-button-bd">
+                    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
+                </div>
+            </div>
+
+            <div class="sm2-inline-element sm2-inline-status">
+
+                <div class="sm2-progress">
+                    <div class="sm2-row">
+                        <div class="sm2-inline-time">0:00</div>
+                        <div class="sm2-progress-bd">
+                            <div class="sm2-progress-track">
+                                <div class="sm2-progress-bar"></div>
+                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
+                            </div>
+                        </div>
+                        <div class="sm2-inline-duration">0:00</div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="sm2-inline-element sm2-button-element sm2-volume">
+                <div class="sm2-button-bd">
+                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
+                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
+                </div>
+            </div>
+
+            <a href="audio/prologue.mp3" class="sm2-inline-element sm2-button-element" download>
+                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/icons/feathericons/download.svg') ?>
+            </a>
+
+        </div>
+
+        <div class="bd sm2-playlist-drawer sm2-element">
+
+            <div class="sm2-playlist-wrapper">
+                <ul class="sm2-playlist-bd">
+                <li class="selected"><a href="/audio/<?php echo $audio; ?>.mp3">Prologue</a></li>
+                </ul>
+            </div>
+
+        </div>
+
+    </div>
diff --git a/app/views/contact.view.php b/app/views/contact.view.php
new file mode 100644
index 0000000..4b4da41
--- /dev/null
+++ b/app/views/contact.view.php
@@ -0,0 +1,88 @@
+<?php require __DIR__ . '/partials/header.php'; ?>
+
+    <?php if (isset($formSuccess)) : ?>
+    <div class="bg-teal-100 border-t-4 border-blue-500 rounded-b text-teal-900
+    px-4 py-3 shadow-md" role="alert">
+        <div class="flex">
+            <div>
+                <p class="font-bold">Your message has been successful.</p>
+                <p class="text-sm">I'll get in touch with you soon.</p>
+            </div>
+        </div>
+    </div>
+    <br>
+    <?php endif; ?>
+
+    <div>
+        <h1 class="text-3xl text-red-700 font-bold mb-3">Contact</h1>
+        <h2 class="text-xl text-gray-800 leading-normal mb-6">
+            Interested in collaborating together?
+            Send a message by using the form below.
+        </h2>
+    </div>
+
+    <form class="w-full max-w-md rounded" method="post" action="/contact/">
+        <div class="flex flex-wrap -mx-3 mb-6">
+
+            <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+
+                <label class="block uppercase tracking-wide text-gray-700 text-xs
+                font-bold mb-2" for="name">
+                    Name
+                </label>
+
+                <input class="shadow-md appearance-none block w-full bg-gray-100
+                text-gray-700 border border-gray-100 rounded py-3 px-4 mb-3
+                leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                name="26471" id="name" type="text"
+                value="<?php echo $name ?? '' ?>">
+
+            </div>
+
+            <div class="w-full md:w-1/2 px-3">
+
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+                for="email">
+                    Email (&lowast;)
+                </label>
+
+                <input class="shadow-md appearance-none block w-full bg-gray-100 text-gray-700
+                border <?php echo $border = isset($emailError) ? 'border-red-600' : 'border-gray-100';?>
+                rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
+                focus:border-gray-500" name="26472" id="email" type="email" required="required"
+                value="<?php echo $email ?? '' ?>">
+
+                <?php if (isset($emailError)) : ?>
+                    <p class="text-red-600 text-xs"><?php echo $emailError ?></p>
+                <?php endif; ?>
+
+            </div>
+
+        </div>
+        <div class="flex flex-wrap -mx-3 mb-6">
+            <div class="w-full px-3">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs
+                font-bold mb-2" for="message">
+                    Message (&lowast;)
+                </label>
+                <textarea class="shadow-md appearance-none block w-full
+                bg-gray-100 text-gray-700 border border-gray-100
+                rounded py-3 px-4 mb-3 leading-tight focus:outline-none
+                focus:bg-white focus:border-gray-500" name="26473" id="message"
+                rows="4" required="required"><?php echo $message ?? '' ?></textarea>
+            </div>
+        </div>
+
+        <div class="text-center sm:text-left">
+            <button class="shadow bg-blue-400 hover:bg-blue-500
+            focus:shadow-outline focus:outline-none text-white
+            font-bold py-2 px-4 rounded" type="submit">
+                Send Message
+            </button>
+        </div>
+
+        <input type="checkbox" name="agree" tabindex="-1" class="checkbox-agree">
+
+    </form>
+
+<?php require __DIR__ . '/partials/footer.php'; ?>
diff --git a/app/views/index.view.php b/app/views/index.view.php
new file mode 100644
index 0000000..29f17b4
--- /dev/null
+++ b/app/views/index.view.php
@@ -0,0 +1,89 @@
+<?php require __DIR__ . '/partials/header.php'; ?>
+
+    <h1 class="text-3xl mb-1 text-red-700 font-bold">Let's bring a story to life</h1>
+
+    <h2 class="text-xl font-normal text-gray-800 mb-6 leading-normal">
+        Strong voice for narration, trailers, storytelling,  and more.
+    </h2>
+
+    <h1 class="text-xl text-gray-800 mb-2 font-bold">Prologue</h1>
+
+    <p class="text-gray-darkest mb-3 leading-normal">
+        Focused introductory elements for literary, dramatic, and musical arts.
+    </p>
+
+    <noscript>
+        <audio controls>
+            <source src="audio/prologue.mp3" type="audio/mp3">
+            Your browser does not support the audio element.
+        </audio>
+    </noscript>
+
+
+<?php
+$audio = 'prologue';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
+
+
+    <h1 class="text-xl text-gray-800 mb-2 font-bold">Narrative</h1>
+
+    <p class="text-gray-darkest mb-3 leading-normal">
+        Spoken or written accounts of connected events.
+    </p>
+
+    <noscript>
+        <audio controls>
+            <source src="audio/narrative.mp3" type="audio/mp3">
+            Your browser does not support the audio element.
+        </audio>
+    </noscript>
+
+
+<?php
+$audio = 'narrative';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
+
+
+    <h1 class="text-xl text-gray-800 mb-2 font-bold">Dramatic</h1>
+
+    <p class="text-gray-darkest mb-3 leading-normal">
+        Sudden and striking narrative elements.
+    </p>
+
+    <noscript>
+        <audio controls>
+            <source src="audio/dramatic.mp3" type="audio/mp3">
+            Your browser does not support the audio element.
+        </audio>
+    </noscript>
+
+
+<?php
+$audio = 'dramatic';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
+
+
+    <h1 class="text-xl text-gray-800 mb-2 font-bold">Commercial</h1>
+
+    <p class="text-gray-darkest mb-3 leading-normal">
+        Old school narrative commercial style.
+    </p>
+
+    <noscript>
+        <audio controls>
+            <source src="audio/commercial.mp3" type="audio/mp3">
+            Your browser does not support the audio element.
+        </audio>
+    </noscript>
+
+
+<?php
+$audio = 'commercial';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
+
+
+<?php require __DIR__ . '/partials/footer.php'; ?>
diff --git a/app/views/partials/footer.php b/app/views/partials/footer.php
new file mode 100644
index 0000000..e2f2a6b
--- /dev/null
+++ b/app/views/partials/footer.php
@@ -0,0 +1,26 @@
+</div>
+</section>
+
+<footer class ="bg-gray-100 border-t text-center">
+  <div class="mx-auto p-6 max-w-md text-gray-800">
+    <p class="mb-2 text-sm">
+      <a href="mailto:<?php echo mb_encode_numericentity('edwinmattiacci@yahoo.com', array(0x000000, 0x10ffff, 0, 0xffffff), 'UTF-8'); ?>" class="underline">
+        Email
+      </a>
+    </p>
+    <p>&copy; Copyright <?php echo date('Y');?>. Edwin Mattiacci Voiceover</p>
+  </div>
+</footer>
+
+</div>
+</div>
+
+<a href="/" class="hover:bg-gray-300 w-24 min-h-full hidden md:block logo-container no-underline border-l"></a>
+
+</div>
+
+<script src="/dist/soundmanager2-nodebug-jsmin.js"></script>
+<script src="/dist/bar-ui.js"></script>
+
+</body>
+</html>
diff --git a/app/views/partials/header.common.php b/app/views/partials/header.common.php
new file mode 100644
index 0000000..3a21e8e
--- /dev/null
+++ b/app/views/partials/header.common.php
@@ -0,0 +1,25 @@
+<!-- Common Meta -->
+<meta charset="utf-8">
+<meta name="author" content="Edwin Mattiacci">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<!-- Stylesheets -->
+<link href="/dist/tailwind.min.css" rel="stylesheet">
+<link href="/dist/app.css" rel="stylesheet">
+<link href="/dist/bar-ui.css" rel="stylesheet">
+
+<!-- Favicons -->
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAXRQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEBAgICAwMDBQUFBgYGBwcHCAgIDAwMDQ0NDg4OEBAQEhISFBQUFRUVFhYWFxcXGBgYGRkZGhoaGxsbHR0dHh4eHx8fIiIiIyMjJCQkJSUlJiYmKCgoKSkpKioqLS0tLi4uMTExPj4+QkJCQ0NDSEhITU1NT09PUVFRVFRUVVVVY2NjZGRkZWVlZmZmbGxsbW1tbm5udHR0dnZ2d3d3eXl5fHx8gICAg4ODhISEhoaGioqKjY2Njo6Oj4+PkpKSm5ubnZ2doaGhpaWlp6enrq6usrKytLS0tbW1tra2urq6u7u7vr6+xcXFxsbGycnJzs7O0NDQ1dXV1tbW2dnZ29vb4ODg4+Pj5OTk6Ojo6enp6urq7e3t7u7u7+/v9fX19vb29/f3+Pj4+fn5+vr6/Pz8/f39/v7+////rLgqfAAAABJ0Uk5TAAgPHR5fbo+8zc/p6vb3+vv8m7r3iAAAAXpJREFUOI29k2dbwjAUhcMuQym3IhQninsrihP3BNziQlFRceMAFfLnbSkkKfLgN++nnpO3meciJJfOyNkcwJTDxhl1qFgag4WHX8VbDBplXGuqJq7gdlGk2qTN/2+ik/eEz2IrrXQhkzyHoYoYg1cY49yJjxhVBoT0ZiKdezhf63QVsx4Z7US13CjAuUgsuxFxFO+6V4BLD/U4ZC0D1FHPivjKAI+gMgD/CAiCGpA1C/Tv73qhswBceGTdrAJGUm9+aEwowLELJr6TPhXQdI2DAKH8+NccQBifutV72MbxRvBGPzF+3/JA9y1eKtmk/yEXEaF+ejMyLkLDAU50lB5zMZ3ZaVM++6LZ16lf9yBufOQSq6MDQ4FQEqfmawhAHssdvJM28PScwdnEpLPo8sxzC71r8Rece4wttNOLtLKBkWZZxpmZWtbh2MhJFcTpMVZLkWNCWwaQQsvGHmBWDcixVzUOBI4Oh6lSGkfdek6nQESh9f5u3srt/wPQtYzk6RXGwAAAAABJRU5ErkJggg==">
+<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAANVQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEBAgICAwMDBQUFBgYGBwcHCgoKDg4ODw8PEBAQEhISFBQUFRUVHBwcHR0dHx8fLS0tLi4uLy8vMTExNTU1Nzc3OTk5PT09QEBARUVFUlJSVlZWV1dXYGBgYmJiampqbm5ucXFxfHx8goKCioqKmJiYnJycnp6eo6Ojp6enqKiorKysra2ttbW1t7e3ubm5vb29wsLCzs7O0NDQ0dHR1NTU3Nzc3t7e4ODg/Pz8/f39////AnB0LQAAAAp0Uk5TAAllhM3O9PX4+WINhBsAAACoSURBVBiVbY/XEoIwEEU3oQexoFhBxN57LyiW/P8nmcS86JiXPXsmM3svAMKaRcSzNIwAkGIw9rodlw1DQYB1Bpn56zlzGOgYVP65nFAae5xUMPmoPii9lTiZQL4F+StCv8JFMQykmC4LZ0r37nYsRTOOGptV0I7rUjiTy6DmD68jmwt+Nts/3ZNjLy3OimAkf1jnyCeYiE5Su4XYWfRPObsVEVnut/4bkaoVKcOXcTgAAAAASUVORK5CYII=">
+<link rel="manifest" href="/site.webmanifest">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#2b5797">
+<meta name="theme-color" content="#ffffff">
+
+<!-- RSS -->
+<link href="/posts/index.xml" rel="alternate" type="application/rss+xml" title="Edwin Mattiacci" />
+
+<noscript>
+    <style>.sm2-bar-ui { display: none; }</style>
+</noscript>
diff --git a/app/views/partials/header.error.php b/app/views/partials/header.error.php
new file mode 100644
index 0000000..9f00aa9
--- /dev/null
+++ b/app/views/partials/header.error.php
@@ -0,0 +1,3 @@
+
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/bootstrap/Bootstrap.php'; ?>
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/header.php'; ?>
diff --git a/app/views/partials/header.php b/app/views/partials/header.php
new file mode 100644
index 0000000..1809de0
--- /dev/null
+++ b/app/views/partials/header.php
@@ -0,0 +1,46 @@
+<?php if (strpos($_SERVER['REQUEST_URI'], 'posts') !== false) {  ?>
+
+    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/bootstrap/Bootstrap.php'; ?>
+    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/header.common.php'; ?>
+
+    </head>
+
+<?php } else { ?>
+
+    <!DOCTYPE html>
+    <html lang="en-us">
+
+    <head>
+
+    <title>Edwin Mattiacci - <?php title();?></title>
+
+    <meta name="keywords" content="Edwin, Mattiacci, Voice, Voiceover, Narration, Trailers, Commercials">
+    <meta name="description" content="Edwin Mattiacci Voiceover. Narration, Trailers, Commercials, and More.">
+
+    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/header.common.php'; ?>
+
+    </head>
+
+<?php } ?>
+
+<body class="overflow-y-scroll bg-gray-100">
+
+    <div class="flex min-h-screen max-w-xl mx-auto">
+
+    <a href="/" class="hover:bg-gray-300 w-24 min-h-full hidden md:block logo-container border-r"></a>
+
+    <div class="flex flex-col lg:flex-row min-h-screen w-screen shadow-2xl">
+
+    <div class="w-full max-h-full lg:h-full lg:w-2/5 z-10 lg:shadow-2xl splash-container"></div>
+
+    <div class="w-full lg:w-3/5 h-full border-b border-gray-100">
+
+    <div class="sticky top-0 z-10 bg-gray-100 border-b">
+        <div class="mx-auto px-4 max-w-md">
+        <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/navigator.php'; ?>
+        </div>
+    </div>
+
+    <section class="bg--white--light">
+
+    <div class="container p-6 mx-auto max-w-md">
diff --git a/app/views/partials/navigator.links.php b/app/views/partials/navigator.links.php
new file mode 100644
index 0000000..f023e32
--- /dev/null
+++ b/app/views/partials/navigator.links.php
@@ -0,0 +1,5 @@
+
+<a class="<?php echo $navigator->isActiveHome() ?? '' ?>" href="/" onclick="closeNav()">Home</a>
+<a class="<?php echo $navigator->isActive('/posts/') ?? '' ?>" href="/posts/" onclick="closeNav()">Posts</a>
+<a class="<?php echo $navigator->isActive('/feedback/') ?? '' ?>" href="/feedback/" onclick="closeNav()">Feedback</a>
+<a class="<?php echo $navigator->isActive('/contact/') ?? '' ?>" href="/contact/" onclick="closeNav()">Contact</a>
diff --git a/app/views/partials/navigator.php b/app/views/partials/navigator.php
new file mode 100644
index 0000000..78bb138
--- /dev/null
+++ b/app/views/partials/navigator.php
@@ -0,0 +1,79 @@
+<nav class="flex -mx-2">
+
+<a class="w-1/5 px-2 py-4 text-center" href="/" title="Home">
+
+            <div class="inline-block text-gray-700 hover:text-gray-900 no-underline
+            font-bold tracking-wider uppercase text-xs pb-1 text-center">
+                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT']
+                    . '/..'
+                    . '/public/icons/feathericons/user.svg') ?>
+                    <p class="py-1
+                    <?php echo $navigation->isActiveHome() ?? 'text-gray-700' ?> hover:text-gray-900">
+                    Home
+                    </p>
+            </div>
+
+</a>
+
+<a class="w-1/5 px-2 py-4 text-center" href="/posts/" title="Journal">
+
+            <div class="inline-block text-gray-700 hover:text-gray-900 no-underline
+            font-bold tracking-wider uppercase text-xs pb-1 text-center">
+            <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT']
+                . '/..'
+                . '/public/icons/feathericons/book-open.svg') ?>
+                <p class="py-1
+                <?php echo $navigation->isActive('/posts/') ?? 'text-gray-700' ?> hover:text-gray-900">
+                Journal
+                </p>
+            </div>
+
+</a>
+
+<a class="w-1/5 px-2 py-4 text-center" href="/wall/" title="Wall">
+
+        <div class="inline-block text-gray-700 hover:text-gray-900 no-underline
+        font-bold tracking-wider uppercase text-xs pb-1 text-center">
+            <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT']
+                . '/..'
+                . '/public/icons/feathericons/message-square.svg') ?>
+                <p class="py-1
+                <?php echo $navigation->isActive('/wall/') ?? 'text-gray-700' ?> hover:text-gray-900">
+                Wall
+                </p>
+        </div>
+
+</a>
+
+<a class="w-1/5 px-2 py-4 text-center" href="/about/" title="About">
+
+        <div class="inline-block text-gray-700 hover:text-gray-900 no-underline
+        font-bold tracking-wider uppercase text-xs pb-1 text-center">
+            <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT']
+                . '/..'
+                . '/public/icons/feathericons/help-circle.svg') ?>
+                <p class="py-1
+                <?php echo $navigation->isActive('/about/') ?? 'text-gray-700' ?> hover:text-gray-900">
+                About
+                </p>
+        </div>
+
+</a>
+
+<a class="w-1/5 px-2 py-4 text-center" href="/contact/" title="Contact">
+
+        <div class="inline-block text-gray-700 hover:text-gray-900 no-underline
+        font-bold tracking-wider uppercase text-xs pb-1 text-center">
+            <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT']
+                . '/..'
+                . '/public/icons/feathericons/mail.svg') ?>
+                <p class="py-1
+                <?php echo $navigation->isActive('/contact/') ?? 'text-gray-700' ?> hover:text-gray-900">
+                Contact
+                </p>
+       </div>
+
+</a>
+
+</nav>
+
diff --git a/app/views/wall.view.php b/app/views/wall.view.php
new file mode 100644
index 0000000..0635325
--- /dev/null
+++ b/app/views/wall.view.php
@@ -0,0 +1,6 @@
+<?php require __DIR__ . '/partials/header.php'; ?>
+
+<script type="text/javascript" src="/comments"></script>
+<noscript>You must have JavaScript enabled to use the comments.</noscript>
+
+<?php require __DIR__ . '/partials/footer.php'; ?>