app: Refactor and CSS rewrite

13 files changed, 493 insertions, 584 deletions

diff --git a/app/views/components/context.menu.php b/app/views/components/context.menu.php
index 1a3356a..75e1746 100644
--- a/app/views/components/context.menu.php
+++ b/app/views/components/context.menu.php
@@ -1,39 +1,29 @@
-<div class="dropdown <?php echo $type ?? null ?>">
-  <input
-    class="is-hidden dropdown-input"
-    type="checkbox"
-    id="dropdown-menu__<?php echo $id ?? null ?>"
-  />
+<context-menu-container>
+  <more-button>
+    <input hidden type="checkbox" id="context-menu-<?php echo $id ?? null ?>"/>
+    <label for="context-menu-<?php echo $id ?? 'none' ?>"><?php echo $label ?? null ?></label>
 
-  <label class="dropdown-label" for="dropdown-menu__<?php echo $id ?? 'none' ?>">
-    <?php echo $label ?? null ?>
-  </label>
+    <context-menu list right>
+      <context-menu-content>
+       <?php
+          echo $content ?? null;
 
-  <div class="dropdown-menu">
-    <div class="dropdown-content">
-     <?php
+          if ($links ?? null  === true) {
+            $route = '/';                             $label = 'Home';       include views('components', 'navigator.link.dropdown');
+            $route = '/posts/';                       $label = 'Posts';      include views('components', 'navigator.link.dropdown');
+            $route = '/projects/';                    $label = 'Projects';   include views('components', 'navigator.link.dropdown');
+            $route = '/about/';                       $label = 'Profile';    include views('components', 'navigator.link.dropdown');
+            $route = '/abstracts/';                   $label = 'Abstracts';  include views('components', 'navigator.link.dropdown');
+            $route = '/contact/';                     $label = 'Contact';    include views('components', 'navigator.link.dropdown');
+            $route = '/git/';                         $label = 'Repository'; include views('components', 'navigator.link.dropdown');
+            $route = 'https://ko-fi.com/thedroneely'; $label = 'Coffee';     include views('components', 'navigator.link.dropdown');
 
-        echo $content ?? null;
-
-        if ($links ?? null  === true) {
-
-          $route = '/';                             $label = 'Home';       include views('components', 'navigator.link.dropdown');
-          $route = '/posts/';                       $label = 'Posts';      include views('components', 'navigator.link.dropdown');
-          $route = '/projects/';                    $label = 'Projects';   include views('components', 'navigator.link.dropdown');
-          $route = '/about/';                       $label = 'Profile';    include views('components', 'navigator.link.dropdown');
-          $route = '/abstracts/';                   $label = 'Abstracts';  include views('components', 'navigator.link.dropdown');
-          $route = '/contact/';                     $label = 'Contact';    include views('components', 'navigator.link.dropdown');
-          $route = '/git/';                         $label = 'Repository'; include views('components', 'navigator.link.dropdown');
-          $route = 'https://ko-fi.com/thedroneely'; $label = 'Coffee';     include views('components', 'navigator.link.dropdown');
-
-          $formClass = 'theme-toggle';
-          $iconClass = 'is-hidden';
-          $buttonClass ='navbar-item button theme-toggle-button is-text has-text-left';
-          include views('components', 'theme.toggle');
-        }
+            include views('components', 'theme.toggle');
+          }
         ?>
-    </div>
-  </div>
-</div>
+      </context-menu-content>
+    </context-menu>
+  </more-button>
+</context-menu-container>
 
-<?php $type = $id = $label = $content = $links = null; ?>
+<?php $id = $label = $content = $links = null; ?>
diff --git a/app/views/components/navigator.link.dropdown.php b/app/views/components/navigator.link.dropdown.php
index 0657bc6..e0ec008 100644
--- a/app/views/components/navigator.link.dropdown.php
+++ b/app/views/components/navigator.link.dropdown.php
@@ -1,6 +1,6 @@
 <a href="<?php echo $route ?? null; ?>"
-   class="<?php if ($navigation->isActive($route ?? null)) { echo ' navbar__active'; } ?> navbar-item"
    title="<?php echo $label ?? null; ?>"
+   <?php if ($navigation->isActive($route ?? null)) { echo ' data-active'; } ?>
 >
   <?php echo $label ?? null; ?>
 </a>
diff --git a/app/views/components/navigator.link.php b/app/views/components/navigator.link.php
index 3b57d62..f255903 100644
--- a/app/views/components/navigator.link.php
+++ b/app/views/components/navigator.link.php
@@ -1,14 +1,15 @@
-<a href="<?php echo $route ?? null; ?>" class="navbar-item navbar__icon has-text-centered
+<a
+  href="<?php echo $route ?? null; ?>"
   <?php
     $hiddenLabels = [ 'Profile' ];
-    if (in_array($label, $hiddenLabels)) { echo ' navbar__icon__hidden'; }
-    if ($navigation->isActive($route ?? null)) { echo ' navbar__active'; }
+    if (in_array($label, $hiddenLabels)) { echo ' data-hidden'; }
+    if ($navigation->isActive($route ?? null)) { echo ' data-active'; }
   ?>
-">
-  <div class="has-text-centered">
-    <?php echo icon($icon ?? null); ?>
-    <p title="<?php echo $label ?? null; ?>" class="navbar__icon__label"><?php echo $label ?? null; ?></p>
-  </div>
+>
+  <?php echo icon($icon ?? null); ?>
+  <span title="<?php echo $label ?? null; ?>">
+    <?php echo $label ?? null; ?>
+  </span>
 </a>
 
 <?php $route = $label = $icon = null; ?>
diff --git a/app/views/components/theme.toggle.php b/app/views/components/theme.toggle.php
index 3b2d15b..71e8841 100644
--- a/app/views/components/theme.toggle.php
+++ b/app/views/components/theme.toggle.php
@@ -1,5 +1,4 @@
 <form
-  class="<?php echo $formClass ?? null; ?>"
   method="get"
   action="<?php echo $_SERVER['REQUEST_URI']; ?>"
 >
@@ -7,29 +6,25 @@
 
   <button
     title="Switch to Light Theme"
-    class="<?php echo $buttonClass ?? null; ?>"
     name="theme"
     type="submit"
     value="light"
   >
-    <?php echo icon('sun', $iconClass ?? null); ?>
-    <span>Light</span>
+    <?php echo icon('moon'); ?>
+    <span>Dark</span>
   </button>
 
   <?php } else { ?>
 
   <button
     title="Switch to Dark Theme"
-    class="<?php echo $buttonClass ?? null; ?>"
     name="theme"
     type="submit"
     value="dark"
   >
-    <?php echo icon('moon', $iconClass ?? null); ?>
-    <span>Dark</span>
+    <?php echo icon('sun'); ?>
+    <span>Light</span>
   </button>
 
   <?php } ?>
 </form>
-
-<?php $formClass = $buttonClass = $iconClass = null; ?>
diff --git a/app/views/contact.view.php b/app/views/contact.view.php
index 07ac68a..42c03a5 100644
--- a/app/views/contact.view.php
+++ b/app/views/contact.view.php
@@ -2,93 +2,74 @@
 
 <?php require __DIR__ . '/partials/header.php'; ?>
 
-    <body>
-
-    <?php require __DIR__ . '/partials/navigator.php'; ?>
-
-    <section class="section">
-
-        <div class="container">
-            <div class="columns is-centered">
-                <div class="column is-7">
-
-                    <article class="content">
-
-                        <h1 class="title is-3">Contact</h1>
-
-                        <?php if (isset($formSuccess)) : ?>
-                        <div class="message__success" role="alert">
-                        <p>Your message has been successful. I'll get in touch with you soon!</p>
-                        </div>
-                        <?php endif; ?>
-
-                        <p>
-                        Interested in collaborating?
-                        Complete and submit the form below to send me a direct message.
-                        </p>
-
-                        <form method="post" action="/contact/">
-
-                            <div class="field is-horizontal">
-                                <div class="field-body">
-                                    <div class="field is-expanded">
-                                    <label for="name" class="heading is-size-6">Name</label>
-                                        <div class="field has-addons">
-                                            <p class="control is-expanded">
-                                              <input id="name" class="input" type="text" name="26471" value="<?php echo $name ?? '' ?>">
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <div class="field is-expanded">
-                                        <label for="email" class="heading is-size-6">Email <span class="alert">*</span></label>
-                                        <div class="field has-addons">
-                                            <p class="control is-expanded">
-                                              <input id="email" class="input <?php echo $border = isset($emailError) ? 'is-danger' : '';?>"
-                                              type="email" name="26472" value="<?php echo $email ?? '' ?>" required>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <label for="message" class="heading is-size-6">Message <span class="alert">*</span></label>
-
-                            <div class="field is-horizontal">
-                              <div class="field-body">
-                                <div class="field">
-                                  <div class="control">
-                                    <textarea id="message" class="textarea" name="26478" placeholder="" required><?php echo $message ?? '' ?></textarea>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-
-                            <br>
-
-                            <div class="field is-horizontal">
-                              <div class="field-body">
-                                <div class="field">
-                                  <div class="control">
-                                    <button class="button item__box has-text-weight-normal">
-                                      <?php echo icon('send'); ?>
-                                      <span>Send Message</span>
-                                    </button>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-
-                           <input type="checkbox" name="agree" class="agree" tabindex="-1">
-
-                        </form>
-
-                    </article>
-
-                </div>
-            </div>
-        </div>
-
-    </section>
+<body>
+
+<?php require __DIR__ . '/partials/navigator.php'; ?>
+
+<main>
+  <contact-page>
+    <article>
+
+      <h1>Contact</h1>
+
+      <?php if (isset($formSuccess)) : ?>
+        <aside>
+          <p>Your message has been successful. I'll get in touch with you soon!</p>
+        </aside>
+      <?php endif; ?>
+
+      <p>
+        Interested in collaborating? Complete and submit the form below to send me a
+        direct message.
+      </p>
+
+      <form method="post" action="/contact/">
+
+        <field-set>
+
+          <section>
+            <label for="name">Name</label>
+            <input
+              id="name"
+              type="text"
+              name="26471"
+              value="<?php echo $name ?? '' ?>"
+            >
+          </section>
+
+          <section>
+            <label for="email">Email <span data-danger>*</span></label>
+            <input
+              required
+              id="email"
+              type="email"
+              name="26472"
+              value="<?php echo $email ?? '' ?>"
+              <?php echo $border = isset($emailError) ? 'data-contact-required' : '';?>
+            >
+          </section>
+
+        </field-set>
+
+        <label for="message">Message <span data-danger>*</span></label>
+        <textarea
+          id="message"
+          name="26478"
+          placeholder="" required
+        ><?php echo $message ?? '' ?> </textarea>
+
+        <button>
+          <?php echo icon('send'); ?>
+          <span>Send Message</span>
+        </button>
+
+        <input type="checkbox" name="agree" tabindex="-1">
+
+      </form>
+
+      </article>
+    </contact-page>
+  </main>
 
 <?php require __DIR__ . '/partials/footer.php'; ?>
 
diff --git a/app/views/index.view.php b/app/views/index.view.php
index 8261d35..bef54f5 100644
--- a/app/views/index.view.php
+++ b/app/views/index.view.php
@@ -1,109 +1,90 @@
 <?php require __DIR__ . '/partials/header.php';?>
 
-    <body>
+<body>
 
 <?php require __DIR__ . '/partials/navigator.php';?>
 
-    <section class="section">
-
-        <div class="container">
-            <div class="columns is-centered">
-                <div class="column is-7">
-
-                    <h1 class="title has-text-weight-normal">
-                        <span>
-                            Web
-                            <span class="has-text-danger">
-                                Developer
-                            </span>
-                        </span>
-                    </h1>
-
-                    <h2 class="subtitle has-text-grey-dark has-text-weight-normal">
-                        In it for the long haul
-                    </h2>
-
-                    <video-container>
-                      <video preload="none" poster="/images/pipes.png" width="732" autoplay loop muted playsinline>
-                        <source src="/videos/pipes.mp4" type="video/mp4" />
-                        <p>
-                          Sorry, your browser doesn't support embedded videos. Here is a
-                          <a href="/videos/pipes.mp4">link to the video</a> instead.
-                        </p>
-                      </video>
-                      <figcaption class="has-text-grey-dark">pipes.sh terminal screensaver</figcaption>
-                    </video-container>
-
-                    <div class="content">
-
-                    <p class="introduction has-text-left">
-                        <?php fetch('/cockpit/api/singletons/get/introduction', 'text'); ?>
-                    </p>
-
-                    <span class="quote marginnote leftnote">
-                    <span class="has-text-weight-bold has-margin-bottom-sm is-block">Random Quote</span>
-                    <?php echo shell_exec('fortune ' . dirname($_SERVER['DOCUMENT_ROOT']) . '/generators/fortune/quotes.fortune'); ?>
-                    </span>
-
-                    </div>
-
-                    <div class="recent__article">
-
-                    <label for="posts" class="title is-inline-block is-4 has-text-weight-normal marginnote-toggle marginnote-mark">
-                       Recent Posts
-                    </label>
-
-                    <input type="checkbox" id="posts" class="marginnote-toggle">
-
-                    <span class="marginnote rightnote">
-                        See an archive of all posts <a href="/posts/archive/">here.</a>
-                    </span>
-
-                    <?php
-                    $recentPosts = new DOMExtract();
-                    echo $recentPosts->innerHTML('recent-articles', $_SERVER['DOCUMENT_ROOT'] . '/posts/index.html');
-                    ?>
-
-                    <a href="/posts/page/2/"
-                    class="front__more is-block has-text-centered">
-                        See More Posts
-                        <?php icon('chevron-right'); ?>
-                    </a>
-
-                    <br>
-
-
-                    <label for="projects" class="title is-inline-block is-4 has-text-weight-normal marginnote-toggle marginnote-mark">
-                       Recent Projects
-                    </label>
-
-                    <input type="checkbox" id="projects" class="marginnote-toggle">
-
-                    <span class="marginnote rightnote">
-                        See an archive of all projects <a href="/projects/archive/">here.</a>
-                    </span>
-
-                    <?php
-                    $recentProjects = new DOMExtract();
-                    echo $recentPosts->innerHTML('recent-articles', $_SERVER['DOCUMENT_ROOT'] . '/projects/index.html');
-                    ?>
-                    </div>
-
-                    <a href="/projects/page/2/"
-                    class="front__more is-block has-text-centered">
-                        See More Projects
-                        <?php icon('chevron-right'); ?>
-                    </a>
-
-                    <br>
-
-                </div>
-            </div>
-        </div>
-
-    </section>
+<main>
+  <home-page>
+    <article>
+
+      <h1>Web <em>Developer </em></h1>
+
+      <h2>In it for the long haul</h2>
+
+      <video-container>
+        <video preload="none" poster="/images/pipes.png" width="732" autoplay loop muted playsinline>
+          <source src="/videos/pipes.mp4" type="video/mp4" />
+          <p>
+            Sorry, your browser doesn't support embedded videos. Here is a
+            <a href="/videos/pipes.mp4">link to the video</a> instead.
+          </p>
+        </video>
+        <footer><a href="https://github.com/pipeseroni/pipes.sh#readme">pipes.sh</a> terminal screensaver</footer>
+      </video-container>
+
+      <home-page-intro>
+        <?php fetch('/cockpit/api/singletons/get/introduction', 'text'); ?>
+      </home-page-intro>
+
+      <fortune-quote>
+        <margin-note left>
+          <b>Random Quote</b>
+          <?php echo shell_exec('fortune ' . dirname($_SERVER['DOCUMENT_ROOT']) . '/generators/fortune/quotes.fortune'); ?>
+        </margin-note>
+      </fortune-quote>
+
+      <home-page-posts>
+
+        <margin-note-aside>
+          <label for="posts">Recent Posts</label>
+          <input type="checkbox" id="posts" name="toggle">
+          <margin-note right>
+            See an archive of all posts <a href="/archives/posts/">here.</a>
+          </margin-note>
+        </margin-note-aside>
+
+        <?php
+          $recentPosts = new DOMExtract();
+          echo $recentPosts->innerHTML('recent-articles', $_SERVER['DOCUMENT_ROOT'] . '/posts/index.html');
+        ?>
+
+        <a href="/posts/page/2/">
+          See More Posts
+          <?php echo icon('corner-down-right'); ?>
+        </a>
+      </home-page-posts>
+
+      <br>
+
+      <home-page-projects>
+
+        <margin-note-aside>
+          <label for="projects">Recent Projects</label>
+          <input type="checkbox" id="projects" name="toggle">
+          <margin-note right>
+            See an archive of all projects <a href="/archives/projects/">here.</a>
+          </margin-note>
+        </margin-note-aside>
+
+        <?php
+          $recentProjects = new DOMExtract();
+          echo $recentPosts->innerHTML('recent-articles', $_SERVER['DOCUMENT_ROOT'] . '/projects/index.html');
+        ?>
+
+        <a href="/projects/page/2/">
+          See More Projects
+          <?php echo icon('corner-down-right'); ?>
+        </a>
+      </home-page-projects>
+
+      <br>
+
+    </article>
+  </home-page>
+</main>
 
 <?php require __DIR__ . '/partials/footer.php';?>
 
-  </body>
+</body>
 </html>
diff --git a/app/views/partials/footer.php b/app/views/partials/footer.php
index f82d4e1..0a7b37b 100644
--- a/app/views/partials/footer.php
+++ b/app/views/partials/footer.php
@@ -1,53 +1,39 @@
-<footer class="hero-foot">
-  <div class="footer">
-    <div class="container">
+<footer>
 
-      <div class="columns is-centered">
-        <div class="column is-6 has-text-centered footer__section">
+  <a href="/sitemap.xml">Site Map</a> |
 
-            <p class="has-text-grey-dark is-size-7">
+  <a href="/posts/rss.xml">RSS Feed</a> |
 
-            <a href="/sitemap.xml">Site Map</a> |
+  <a href="/index.json">JSON Feed</a> |
 
-            <a href="/posts/rss.xml">RSS Feed</a> |
+  <a href="/resume/">Resume</a>
 
-            <a href="/index.json">JSON Feed</a> |
+  <br>
 
-            <a href="/resume">Resume</a>
+  <a rel="me" href="https://gitlab.com/tdro">Gitlab</a> |
 
-            <br>
+  <a rel="me" href="https://github.com/tdro">Github</a> |
 
-            <a rel="me" href="https://gitlab.com/tdro">Gitlab</a> |
+  <a rel="me" href="https://codeberg.org/tdro">Codeberg</a> |
 
-            <a rel="me" href="https://github.com/tdro">Github</a> |
+  <a href="/analytics">Analytics</a> |
 
-            <a rel="me" href="https://codeberg.org/tdro">Codeberg</a> |
+  <a href="#">Back To Top</a>
 
-            <a href="/analytics">Analytics</a> |
+  <p>
+   The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.
+   The <a href="/git/thedroneely/thedroneely.com">source code</a>
+   for this site is <a href="https://opensource.org/licenses/GPL-3.0">GPL</a>.<br>
+   Copyright &copy; 2018 &mdash; <?php echo date("Y"); ?>
+  </p>
 
-            <a href="#">Back To Top</a>
+  <p hidden class="h-card">
+    <img class="u-photo" src="data:image/ico;base64,<?php echo base64('/public/favicon.ico'); ?>" alt="Terminal" />
+    <a class="p-name u-url" href="https://www.thedroneely.com">Thedro Neely</a>
+    <span class="p-note">Thedro Neely is a web developer based in The Bahamas.</span>
+    <span class="p-country-name">The Bahamas</span>
+  </p>
 
-            </p>
-
-            <p class="has-text-grey-dark is-size-7">
-             The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.
-             The <a href="/git/thedroneely/thedroneely.com">source code</a>
-             for this site is <a href="https://opensource.org/licenses/GPL-3.0">GPL</a>.<br>
-             Copyright &copy; 2018 &mdash; <?php echo date("Y"); ?>
-            </p>
-
-            <p class="is-hidden h-card">
-              <img class="u-photo" src="data:image/ico;base64,<?php echo base64('/public/favicon.ico'); ?>" alt="Terminal" />
-              <a class="p-name u-url" href="https://www.thedroneely.com">Thedro Neely</a>
-              <span class="p-note">Thedro Neely is a web developer based in The Bahamas.</span>
-              <span class="p-country-name">The Bahamas</span>
-            </p>
-
-        </div>
-      </div>
-
-    </div>
-  </div>
 </footer>
 
 <script src="/js/app.js"></script>
diff --git a/app/views/partials/header.php b/app/views/partials/header.php
index b236575..e5439be 100644
--- a/app/views/partials/header.php
+++ b/app/views/partials/header.php
@@ -1,22 +1,21 @@
 <!DOCTYPE html>
-<html class="has-navbar-fixed-top" lang="en-us" itemscope itemtype="http://schema.org/WebPage">
+<html lang="en-us" itemscope itemtype="http://schema.org/WebPage">
 
 <head>
 
-    <title><?php echo $title = $title ?? 'Portfolio - '; ?>Thedro Neely</title>
+<title><?php echo $title = $title ?? 'Portfolio - '; ?>Thedro Neely</title>
 
-    <meta name="description" content="Thedro's Portfolio Website">
-    <meta name="keywords" content="Thedro,Neely,Portfolio,Website">
-    <meta name="author" content="Thedro Neely">
+<meta charset="utf-8">
+<meta name="robots" content="index,follow">
+<meta name="author" content="Thedro Neely">
+<meta name="description" content="Thedro's Portfolio Website">
+<meta name="keywords" content="Thedro,Neely,Portfolio,Website">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="robots" content="index,follow">
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/rss.php'; ?>
 
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/rss.php'; ?>
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/favicons.php'; ?>
 
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/favicons.php'; ?>
-
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/stylesheets.php'; ?>
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/stylesheets.php'; ?>
 
 </head>
diff --git a/app/views/partials/navigator.php b/app/views/partials/navigator.php
index ab2ea58..a9e8c7c 100644
--- a/app/views/partials/navigator.php
+++ b/app/views/partials/navigator.php
@@ -1,57 +1,48 @@
-<nav id="navbar" class="navbar is-fixed-top" aria-label="main navigation">
-    <div class="container">
-        <div class="navbar-menu">
-            <div class="columns is-centered">
+<nav id="navbar">
+  <section>
 
-                <div class="navbar__left column">
-                    <a title="Go to Website Repository"
-                    href="/git/"
-                    class="navbar-item item__box button is-inline-flex">
-                    <?php echo icon('git-commit'); ?>
-                    <span>Repo</span>
-                    </a>
+    <column-left>
+      <button-repo>
+        <button-anchor>
+          <a title="Go to Website Repository" href="/git/">
+            <?php echo icon('git-commit'); ?>
+            <span>Repo</span>
+          </a>
+        </button-anchor>
+      </button-repo>
 
-                    <?php
-                      $formClass = 'is-inline';
-                      $buttonClass ='navbar-item button item__box';
-                      require views('components', 'theme.toggle');
-                    ?>
-                </div>
+      <?php require views('components', 'theme.toggle'); ?>
+    </column-left>
 
-                <div class="navbar__middle column is-7">
-                  <?php
-                    $route = '/';          $label = 'Home';     $icon = 'home';      require views('components', 'navigator.link');
-                    $route = '/posts/';    $label = 'Posts';    $icon = 'feather';   require views('components', 'navigator.link');
-                    $route = '/projects/'; $label = 'Projects'; $icon = 'package';   require views('components', 'navigator.link');
-                    $route = '/about/';    $label = 'Profile';  $icon = 'file-text'; require views('components', 'navigator.link');
-                    $route = '/contact/';  $label = 'Contact';  $icon = 'mail';      require views('components', 'navigator.link');
-                  ?>
+    <column-middle>
+      <?php
+        $route = '/';          $label = 'Home';     $icon = 'home';      require views('components', 'navigator.link');
+        $route = '/posts/';    $label = 'Posts';    $icon = 'feather';   require views('components', 'navigator.link');
+        $route = '/projects/'; $label = 'Projects'; $icon = 'package';   require views('components', 'navigator.link');
+        $route = '/about/';    $label = 'Profile';  $icon = 'file-text'; require views('components', 'navigator.link');
+        $route = '/contact/';  $label = 'Contact';  $icon = 'mail';      require views('components', 'navigator.link');
+      ?>
 
-                  <?php
-                    $links = true;
-                    $id = 'mobile-compact';
-                    $type = 'navbar-item is-menu is-right navbar__icon has-text-dark has-tap-transparent';
-                    $icon = icon('arrow-down-circle');
-                    $label = <<<insert
-                      <span class="is-block has-text-centered">
-                        $icon
-                        <span class="is-block navbar__icon__label">More</span>
-                      </span>
-                    insert;
-                    require views('components', 'context.menu');
-                  ?>
-                </div>
+      <?php
+        $links = true;
+        $id = 'navigation';
+        $icon = icon('arrow-down-circle');
+        $label = <<<insert
+            $icon
+            <span>More</span>
+          insert;
+        require views('components', 'context.menu');
+      ?>
+    </column-middle>
 
-                 <div class="navbar__right column">
-                    <a title="Coffee"
-                    href ="https://ko-fi.com/thedroneely"
-                    class="navbar-item item__box button is-inline-flex has-margin-left-none">
-                    <?php echo icon('coffee'); ?>
-                    <span>Coffee</span>
-                    </a>
-                </div>
+    <column-right>
+      <button-anchor>
+        <a title="Coffee" href ="https://ko-fi.com/thedroneely">
+          <?php echo icon('coffee'); ?>
+          <span>Coffee</span>
+        </a>
+      </button-anchor>
+    </column-right>
 
-            </div>
-        </div>
-    </div>
+  </section>
 </nav>
diff --git a/app/views/resume.view.php b/app/views/resume.view.php
index e61bdab..dd3d3e8 100644
--- a/app/views/resume.view.php
+++ b/app/views/resume.view.php
@@ -3,265 +3,248 @@
 
 <head>
 
-    <title>Resume - Thedro Neely</title>
+  <title>Resume - Thedro Neely</title>
 
-    <meta name="description" content="Thedro's Web Development Resume">
-    <meta name="keywords" content="Thedro,Neely,Portfolio,Website,Resume">
-    <meta name="author" content="Thedro Neely">
+  <meta charset="utf-8">
+  <meta name="description" content="Thedro's Web Development Resume">
+  <meta name="keywords" content="Thedro,Neely,Portfolio,Website,Resume">
+  <meta name="author" content="Thedro Neely">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="robots" content="index,follow">
 
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="robots" content="index,follow">
+  <style>html::-webkit-scrollbar { height: 0; width: 0; }</style>
 
-    <style>html::-webkit-scrollbar { height: 0; width: 0; }</style>
+  <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/rss.php'; ?>
 
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/rss.php'; ?>
+  <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/favicons.php'; ?>
 
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/favicons.php'; ?>
-
-    <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/stylesheets.php'; ?>
-
-    <link rel="stylesheet" href="/css/bulma-timeline.css">
+  <?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/snippets/stylesheets.php'; ?>
 
 </head>
 
-    <body>
-
-        <div class="columns max__height is-gapless">
+    <body data-resume>
 
-            <div class="column column__background is-4">
+        <resume-page>
 
-            <section class="section has-text-centered">
-
-                <a href="/resume" class="title has-text-weight-normal is-size-4 has-text-white inline__padding">Resume</a>
+            <column-left>
+              <section>
+                <h1>
+                  <a href="/resume/">Resume</a>
+                </h1>
 
                 <br>
 
-                <a href="/contact/" class="resume__label title has-text-weight-normal is-size-7 text__frame">Contact for Full Resume</a>
+                <p>
+                  <a href="/contact/">Contact for Full Resume</a>
+                </p>
 
                 <br>
 
-                <h1 class="title has-text-weight-normal is-size-3 has-text-white inline__padding">Web <br> Developer</h1>
+                <h1><a href="/">Web <br> Developer</a></h1>
 
                 <br>
 
-                <p>
-                    <a href="/" class="title has-text-weight-normal is-size-7 resume__label">https://www.thedroneely.com</a>
-                </p>
+                <p><a href="/">https://www.thedroneely.com</a></p>
 
                 <br>
 
                 <p>
-                    <a href="#tools" class="title has-text-weight-normal is-size-7 resume__label">#Tools</a>
-
-                    <a href="#projects" class="title has-text-weight-normal is-size-7 resume__label">#Projects</a>
-
-                    <a href="#questions" class="title has-text-weight-normal is-size-7 resume__label">#Questions</a>
+                  <a href="#stack">#Stack</a>
+                  <a href="#questions">#Questions</a>
+                  <a href="#projects">#Projects</a>
                 </p>
+              </section>
+            </column-left>
 
-            </section>
+            <column-right>
 
-            </div>
+                <main>
 
-            <div class="column column__right is-size-6">
-
-                <div id="tools" class="resume__container">
-
-                <div class="resume__break"></div>
-                <div class="resume__break"></div>
-
-                <div class="column resume__column">
+                <article>
 
                     <section>
-
-                        <h1 class="title has-text-weight-normal has-text-primary is-4">
-                            Thedro Neely
-                        </h1>
-
-                        <p class="is-size-7">
-                            Hi, My name is Thedro, and I'm a web developer based in The Bahamas.
-                        </p>
-
+                      <h1>Thedro Neely</h1>
+                      <p>Hi, My name is Thedro, and I'm a web developer based in The Bahamas.</p>
                     </section>
 
                     <br>
 
-                    <div class="columns">
-
-                        <div class="column">
-
-                            <section>
-                                <h1 class="heading title has-text-weight-semibold">Stack</h1>
-                            </section>
-
-                            <br>
-
-                            <section>
-
-                                <div class="timeline">
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Front End</p>
-                                  <p class="is-size-7">HTML &nbsp; CSS &nbsp; JavaScript &nbsp; Bulma</p>
-                                  <p class="is-size-7">Bootstrap &nbsp; Sass &nbsp; Tailwind</p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Back End</p>
-                                  <p class="is-size-7">PHP &nbsp; Python &nbsp; MariaDB &nbsp; MySQL</p>
-                                  <p class="is-size-7">PostgreSQL &nbsp; Nginx &nbsp; Apache </p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Tooling and Frameworks</p>
-                                  <p class="is-size-7">LaTeX &nbsp; Laravel &nbsp; Sublime Text</p>
-                                  <p class="is-size-7">Npm &nbsp; Webpack &nbsp; Gimp &nbsp; Hugo</p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Version Systems & GUIs</p>
-                                  <p class="is-size-7">Git &nbsp; Gitlab &nbsp; Github &nbsp; Gitea</p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Sys Admin</p>
-                                  <p class="is-size-7">CentOS &nbsp; Debian &nbsp; Windows</p>
-                                  <p class="is-size-7">Android &nbsp; Alpine &nbsp; pfSense/Opnsense</p>
-                                  <p class="is-size-7">Systemd &nbsp; DNS &nbsp; SMTP &nbsp; DHCP</p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                  <p class="heading">Dev Ops</p>
-                                  <p class="is-size-7">Docker &nbsp; Jenkins &nbsp; Drone CI</p>
-                                  <p class="is-size-7">LXC</p>
-                                </div>
-                                </div>
-
-                                </div>
-
-                            </section>
-
-                        </div>
-
-                        <div class="column">
-
-                            <section id="questions">
-                                <h1 class="heading title has-text-weight-semibold">Questions</h1>
-                            </section>
-
-                            <br>
-
-                            <section>
-
-                                <div class="timeline">
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                    <p class="heading">Are you currently available for work?</p>
-                                    <p class="is-size-7">
-                                        Yes, I'm currently available for
-                                        contract work and full-time job
-                                        opportunities.
-                                    </p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                    <p class="heading">How long have you been programming?</p>
-                                    <p class="is-size-7">
-                                        I've been programming for a long time, too long to accurately say.
-                                    </p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                    <p class="heading">What is your preferred stack?</p>
-                                    <p class="is-size-7">
-                                        PHP 7 + PostgreSQL. Pretty decent stuff. I'm still learning
-                                        Vue and React. I'd like to learn Go next.
-                                    </p>
-                                </div>
-                                </div>
-
-                                <div class="timeline-item">
-                                <div class="timeline-marker"></div>
-                                <div class="timeline-content">
-                                    <p class="heading">What's your OS setup?</p>
-                                    <p class="is-size-7">
-                                        Linux distribution on bare metal, and everything else floating on top.
-                                        Arch bare metaling and hosting CentOS, Debian, Void, Windows and macOS.
-                                    </p>
-                                </div>
-                                </div>
-
-                                </div>
-
-                            </section>
-
-                        </div>
-
-                    </div>
-                </div>
+                    <column-section>
+
+                        <column-stack>
+                          <section>
+                            <h1>Stack</h1>
+                          </section>
+
+                          <br>
+
+                          <section>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Front End</h1>
+                                <p>HTML &nbsp; CSS &nbsp; JavaScript &nbsp; Bulma</p>
+                                <p>Bootstrap &nbsp; Sass &nbsp; Tailwind</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Back End</h1>
+                                <p>PHP &nbsp; Python &nbsp; MariaDB &nbsp; MySQL</p>
+                                <p>PostgreSQL &nbsp; Nginx &nbsp; Apache </p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Tooling and Frameworks</h1>
+                                <p>LaTeX &nbsp; Laravel &nbsp; Sublime Text</p>
+                                <p>Npm &nbsp; Webpack &nbsp; Gimp &nbsp; Hugo</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Version Systems &amp; GUIs</h1>
+                                <p>Git &nbsp; Gitlab &nbsp; Github &nbsp; Gitea</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Sys Admin</h1>
+                                <p>CentOS &nbsp; Debian &nbsp; Windows</p>
+                                <p>Android &nbsp; Alpine &nbsp; pfSense/Opnsense</p>
+                                <p>Systemd &nbsp; DNS &nbsp; SMTP &nbsp; DHCP</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Dev Ops</h1>
+                                <p>Docker &nbsp; Jenkins &nbsp; Drone CI</p>
+                                <p>LXC</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                          </section>
+                        </column-stack>
+
+                        <column-questions>
+                          <section id="questions">
+                              <h1>Questions</h1>
+                          </section>
+
+                          <br>
+
+                          <section>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>Are you currently available for work?</h1>
+                                <p>
+                                  Yes, I'm currently available for contract work and full-time job
+                                  opportunities.
+                                </p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>How long have you been programming?</h1>
+                                <p>I've been programming for a long time, too long to accurately say.</p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>What is your preferred stack?</h1>
+                                <p>
+                                  PHP 7 + PostgreSQL. Pretty decent stuff. I'm still learning Vue and React. I'd
+                                  like to learn Go next.
+                                </p>
+                              </timeline-content>
+                            </timeline-item>
+
+                            <timeline-item>
+                              <aside></aside>
+                              <timeline-content>
+                                <h1>What's your OS setup?</h1>
+                                  <p>
+                                    Linux distribution with everything else floating on top. NixOS hosting Arch,
+                                    CentOS, Debian, Void, Windows, macOS and more.
+                                  </p>
+                              </timeline-content>
+                            </timeline-item>
+
+                          </section>
+                        </column-questions>
+
+                    </column-section>
+                </article>
 
                 <br>
 
                 <section id="projects">
-                    <h1 class="heading title has-text-weight-semibold">Projects</h1>
+                  <h1>Projects</h1>
                 </section>
 
-                <div class="resume__break"></div>
+                <br>
 
                 <section>
-                    <div class="tile is-ancestor">
-
-                        <div class="tile is-parent">
-                            <a href="/projects/personal-portfolio">
-                              <img width="203" height="360" src="/images/personal-portfolio.png" alt="thedro">
-                            </a>
-                        </div>
-
-                        <div class="tile is-parent">
-                            <a href="/projects/bulma-resume">
-                              <img width="203" height="360" src="/images/bulma-resume.png" alt="resume">
-                            </a>
-                        </div>
-
-                        <div class="tile is-parent">
-                            <a href="/projects/voiceover-website/">
-                              <img width="203" height="360" src="/images/voiceover-website.png" alt="edwin">
-                            </a>
-                        </div>
-
-                    </div>
+
+                  <tile-set>
+                      <tile-item>
+                        <a href="/projects/personal-portfolio/">
+                          <img
+                            width="203"
+                            height="360"
+                            src="/images/personal-portfolio.png"
+                            alt="thedro"
+                          >
+                        </a>
+                      </tile-item>
+
+                      <tile-item>
+                        <a href="/projects/bulma-resume/">
+                          <img
+                            width="203"
+                            height="360"
+                            src="/images/bulma-resume.png"
+                            alt="resume"
+                          >
+                        </a>
+                      </tile-item>
+
+                      <tile-item>
+                        <a href="/projects/voiceover-website/">
+                          <img
+                            width="203"
+                            height="360"
+                            src="/images/voiceover-website.png"
+                            alt="edwin"
+                          >
+                        </a>
+                      </tile-item>
+                  </tile-set>
+
                 </section>
 
-            </div>
+            </main>
 
-          </div>
+          </column-right>
 
-        </div>
+        </resume-page>
 
     </body>
 </html>
diff --git a/app/views/snippets/favicons.php b/app/views/snippets/favicons.php
index 424d2a3..f052ee5 100644
--- a/app/views/snippets/favicons.php
+++ b/app/views/snippets/favicons.php
@@ -1,7 +1,7 @@
-    <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,<?php echo base64('/public/favicon-32x32.png'); ?>">
-    <link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,<?php echo base64('/public/favicon-16x16.png'); ?>">
-    <link rel="manifest" href="data:application/manifest+json;base64,<?php echo base64('/public/site.webmanifest'); ?>">
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-    <meta name="msapplication-TileColor" content="#b91d47">
-    <meta name="theme-color" content="#ffffff">
+<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,<?php echo base64('/public/favicon-32x32.png'); ?>">
+<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,<?php echo base64('/public/favicon-16x16.png'); ?>">
+<link rel="manifest" href="data:application/manifest+json;base64,<?php echo base64('/public/site.webmanifest'); ?>">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#b91d47">
+<meta name="theme-color" content="#ffffff">
diff --git a/app/views/snippets/stylesheets.php b/app/views/snippets/stylesheets.php
index 6132261..7eb1c06 100644
--- a/app/views/snippets/stylesheets.php
+++ b/app/views/snippets/stylesheets.php
@@ -5,10 +5,11 @@
 <?php } ?>
 
 <noscript>
-    <style>
-        .has-navbar-fixed-top { padding-top: 0 !important; }
-        .is-fixed-top { position: unset !important; }
-        .posts__more__content { margin-bottom: 0 !important; }
-        .isso-comments-counter, .comments__section { display: none; }
-    </style>
+  <style>
+    article-comments,
+    [href="#isso-thread"],
+    article-meta-top aside:nth-child(2) svg:first-child {
+      display: none;
+    }
+  </style>
 </noscript>
diff --git a/app/views/upload.view.php b/app/views/upload.view.php
index 93ab171..f504d5b 100644
--- a/app/views/upload.view.php
+++ b/app/views/upload.view.php
@@ -2,31 +2,32 @@
 
 <?php require __DIR__ . '/partials/header.php';?>
 
-    <body>
+<body>
 
 <?php require __DIR__ . '/partials/navigator.php';?>
 
-    <section class="section">
-        <div class="container">
+  <main>
+    <article>
+      <upload-page>
+        <h1>Upload Files</h1>
+        <div id="file-upload-area"></div>
+      </upload-page>
+    </article>
+  </main>
 
-            <h1 class="title has-text-centered">Upload Files</h1>
-            <div id="file-upload-area"></div>
+  <link href="/css/uppy.min.css" rel="stylesheet">
 
-        </div>
-    </section>
+  <script src="/js/uppy.min.js"></script>
 
-    <link href="/css/uppy.min.css" rel="stylesheet">
-    <script src="/js/uppy.min.js"></script>
+  <script>
+   var uppy = Uppy.Core()
+    .use(Uppy.Url, { companionUrl: 'https://www.thedroneely.com/' })
+    .use(Uppy.Webcam, {})
+    .use(Uppy.Dashboard, { inline: true, target: '#file-upload-area',  plugins: ['Url', 'Webcam'] })
+    .use(Uppy.XHRUpload, {endpoint: '/upload/', formdata: true, fieldName: 'upload' })
+  </script>
 
-    <script>
-     var uppy = Uppy.Core()
-        .use(Uppy.Url, { companionUrl: 'https://www.thedroneely.com/' })
-        .use(Uppy.Webcam, {})
-        .use(Uppy.Dashboard, { inline: true, target: '#file-upload-area',  plugins: ['Url', 'Webcam'] })
-        .use(Uppy.XHRUpload, {endpoint: '/upload/', formdata: true, fieldName: 'upload' })
-    </script>
+<?php require __DIR__ . '/partials/footer.php';?>
 
-  <?php require __DIR__ . '/partials/footer.php';?>
-
-    </body>
+</body>
 </html>