diff --git a/config.toml b/config.toml
index 9f0ca72..cc4608e 100644
--- a/config.toml
+++ b/config.toml
@@ -2,3 +2,8 @@ baseURL = "https://millironx.com"
 languageCode = "en-us"
 title = "MillironX"
 paginate = 5
+theme = "ananke"
+
+[Params]
+    cardImage = "saddles"
+    motto     = ""
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index f08030a..2cb01a2 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,336 +1,221 @@
-<!DOCTYPE html>
-<html lang="en-us">
+<!doctype html>
+<html class="no-js" lang="en">
 
 <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ .Title }} - {{ .Site.Title }}</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <style>
+        .blurred-container {
+            position: relative;
+            width: 100%;
+            min-height: 35vh;
+            height: 350px;
+            top: 0;
+            left: 0;
+        }
 
-    <!-- A LOT of this code comes from
-        https://www.jonathanbriehl.com/2014/01/17/vertical-menu-for-bootstrap-3/ -->
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="{{ page.description }}">
-    <meta name="author" content="">
-
-    <!-- Search engine ownership verification -->
-    <meta name="google-site-verification" content="3fvDu8JjIAk9qOUVYKcS3jLoev77-QQa3mmm6VlMfDo" />
-    <meta name="msvalidate.01" content="91286D33BFA1A447001733E8680C4A63" />
-
+        .blurred-container .motto {
+            color: #fff;
+            font-size: 76px;
+            font-weight: 600;
+            text-align: center;
+            text-shadow: 0 0 10px rgba(0, 0, 0, .33);
+            text-transform: uppercase;
+            top: 7.5vh;
+            z-index: 3;
+            display: block;
+            margin: 0 auto;
+            position: relative;
+            width: 60%;
+            height: 0
+        }
 
-    <title>MILLIRON X - {{ page.title }}</title>
+        .motto h1 {
+            background: #0000007d;
+        }
 
-    <!-- Styles -->
-    <!-- Development styles: full toolkits for use in writing web pages -->
-    <!-- dev: bootstrap -->
-    <!-- <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-eumbg33EfHRpbzLIm0lGs0JresLNj7c+5beuRW4d11/vF3Wv3YYmuudfOwMsCmp5" crossorigin="anonymous"
-        type="text/css"> -->
-    <!-- dev: GSDK -->
-    <!-- <link href="/css/gsdk-main.css" rel="stylesheet" type="text/css"> -->
-    <!-- <link href="/css/gsdk-demo.css" rel="stylesheet" type="text/css"> -->
-    <!-- dev: Customcss -->
-    <!-- <link href="/css/millironx_customstyles.css" rel="stylesheet" type="text/css"> -->
-    <!-- Release styles: bundled using purifycss from the dev sources -->
-    <link href="/css/bundle.css" rel="stylesheet" type="text/css">
-    {% if page.title == 'Contact Me' %}
-    <!-- Immutible styles: library styles that can't be bundled -->
-    <!-- Pageclip -->
-    <link rel="stylesheet" href="https://s.pageclip.co/v1/pageclip.css" media="screen">
-    {% endif %}
-</head>
+        .blurred-container .img-src {
+            position: fixed;
+            width: 100%;
+            min-height: 35vh;
+            height: 350px;
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center center;
+        }
 
-<body>
-    <div class="modal fade" id="legal-modal" tabindex="-1" role="dialog" aria-labelledby="legal-label">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                    <h4 class="modal-title" id="legal-label">Additional Info</h4>
-                </div>
-                <div class="modal-body">
-                    <ul class="nav nav-tabs">
-                        <li class="active"><a href="#desc" data-toggle="tab" aria-expanded="true">Description</a></li>
-                        <li><a href="#copyright" data-toggle="tab" aria-expanded="false">Copyright</a></li>
-                        <li><a href="#oss" data-toggle="tab" aria-expanded="false">Open Source</a></li>
-                        <li><a href="#privacy" data-toggle="tab" aria-expanded="false">Privacy</a></li>
-                    </ul>
-                    <div class="tab-content">
-                        <div class="tab-pane fade active in" id="desc">
-                            <h4>{{ page.title }}</h4>
-                            <p>{{ page.description }}</p>
-                            <h6>Header image: <em>{{ page.imageTitle }}</em></h6>
-                            <p>{{ page.imageDescription }}</p>
-                        </div>
-                        <div class="tab-pane fad in" id="copyright">
-                            <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
-                                <img class="img img-responsive" alt="Creative Commons License" style="border-width:0; display: block; margin: 0 auto"
-                                    src="https://i.creativecommons.org/l/by/4.0/88x31.png" />
-                            </a>
-                            <br />
-                            <span class="text-center" style="display: block;">&#169; 2021 Thomas A. Christensen II</span>
-                            <br />
-                            <p>
-                                All my pages are licensed under
-                            <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons
-                                Attribution 4.0</a>
-                                </p>
-                                <p>
-                            Most of my multimedia (photos, music, videos) are licensed under
-                            <a href="http://creativecommons.org/licenses/by-nd/4.0/">Creative Commons
-                                Attribution-No Derivatives 4.0</a>, instead.
-                                </p>
-                                <p>
-                                    The source for this site is licensed under the
-                                    <a href="https://opensource.org/licenses/MIT">MIT License</a>.
-                                </p>
-                            <div class="sr-only">
-                                <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text"
-                                    property="dct:title" rel="dct:type">{{ page.title }}</span> by <a
-                                    xmlns:cc="http://creativecommons.org/ns#" href="https://millironx.com"
-                                    property="cc:attributionName" rel="cc:attributionURL">Thomas A. Christensen
-                                    II</a> is licensed under a <a rel="license"
-                                    href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution
-                                    4.0</a>
-                            </div>
+        .blur {
+            opacity: 0;
+        }
 
-                        </div>
-                        <div class="tab-pane fade in" id="oss">
-                            <p>
-                                This site is open source!
-                                <br />
-                                <a class="btn btn-fill" href="https://github.com/millironx/millironx.github.io">
-                                    <i class="fab fa-github"></i>&emsp;Get the code! &raquo;
-                                </a>
-                            </p>
-                            <p>
-                                In addition, I used a number of excellent open-source libraries and toolkits in building
-                                it.
-                                I dedicate this space to acknowledging them all.
-                            </p>
-                            <table class="table table-condensed table-responsive table-striped">
-                                <tr>
-                                    <td>Jekyll 4</td>
-                                    <td><a href="https://jekyllrb.com/">jekyllrb.com</a></td>
-                                    <td><a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>Bootstrap 3</td>
-                                    <td><a href="https://getbootstrap.com/">getbootstrap.com</a></td>
-                                    <td><a href="https://github.com/twbs/bootstrap/blob/main/LICENSE">MIT License</a>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>JQuery 3</td>
-                                    <td><a href="https://jquery.com/">jquery.com</a></td>
-                                    <td><a href="https://jquery.org/license">MIT License</a></td>
-                                </tr>
-                                <tr>
-                                    <td>Font Awesome 5</td>
-                                    <td><a href="https://fontawesome.com/">fontawesome.com</a></td>
-                                    <td><a href="https://fontawesome.com/license/free">MIT/CC-BY License</a></td>
-                                </tr>
-                                <tr>
-                                    <td>Get S*** Done Toolkit</td>
-                                    <td><a
-                                            href="https://www.creative-tim.com/product/get-shit-done-kit">creative-tim.com</a>
-                                    </td>
-                                    <td><a href="https://github.com/timcreative/freebies/blob/master/LICENSE.md">MIT
-                                            License</a></td>
-                                </tr>
-                                <tr>
-                                    <td>Vertical Menu for Bootstrap 3</td>
-                                    <td><a
-                                            href="https://jonathanbriehl.com/posts/vertical-menu-for-bootstrap-3">jonathanbriehl.com</a>
-                                    </td>
-                                    <td><a href="#">No license</a></td>
-                                </tr>
-                                <tr>
-                                    <td>FitText</td>
-                                    <td><a href="http://fittextjs.com/">fittextjs.com</a></td>
-                                    <td><a href="http://www.wtfpl.net/">WTFPL License</a></td>
-                                </tr>
-                                <tr>
-                                    <td>PurifyCSS</td>
-                                    <td><a href="https://github.com/purifycss/purifycss">github.com/purifycss</a></td>
-                                    <td><a href="https://github.com/purifycss/purifycss/blob/master/LICENSE">MIT
-                                            License</a></td>
-                                </tr>
-                                <tr>
-                                    <td>jQuery Mask Plugin</td>
-                                    <td><a href="https://igorescobar.github.io/jQuery-Mask-Plugin/">igorescobar.github.io</a></td>
-                                    <td><a href="https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/LICENSE">MIT License</a></td>
-                                </tr>
-                            </table>
-                        </div>
-                        <div class="tab-pane fade in" id="privacy">
-                            <p>
-                                I take privacy very seriously. That said, I do need <i>some</i> info on how many people
-                                visit.
-                                As a compromise, this site uses <a href="https://simpleanalytics.com">Simple
-                                    Analytics</a>, a
-                                privacy-friendly (as much as possible) web analytics library.
-                            </p>
-                            <p>
-                                You may view all analytics gathered at <a
-                                    href="https://simpleanalytics.com/millironx.com">simpleanalytics.com/millironx.com</a>.
-                            </p>
-                            <p>
-                                If you do not wish to participate in my site's analytics, there are two ways to opt-out.
-                            </p>
-                            <h6>Do Not Track Request</h6>
-                            <p>
-                                This site is programmed to disable all analytics if a Do Not Track request is sent from
-                                the browser.
-                                For more information on how to setup Do Not Track requests, please visit
-                                <a href="https://allaboutdnt.com/">allaboutdnt.com</a>.
-                            </p>
-                            <h6>Use an Ad-Blocking Extension</h6>
-                            <p>
-                                You may also install a content-blocking extension into your browser and block the domain
-                                <code>simpleanalyticscdn.com</code>. I recommend either
-                                <a href="https://github.com/gorhill/uBlock">uBlock Origin</a> (instructions <a
-                                    href="https://github.com/gorhill/uBlock/wiki/Dashboard:-My-filters">here</a>)
-                                or <a href="https://noscript.net">NoScript</a> for this purpose.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+        main {
+            position: relative;
+            background-color: #fff;
+        }
 
-    <div class="container" id="top-container">
-        <header class="hidden-xs text-center">
-            <h1 class="font-serif font-small-caps"><object data="/img/MillironX-title.svg"><img
-                        src="/img/MillironX-title.svg" alt="Milliron X" /></object>&emsp;Milliron X</h1>
-        </header>
-        <div class="row">
-            <div class="col-sm-3">
-                <div class="sidebar-nav">
-                    <nav class="navbar navbar-inverse" role="navigation" id="nav-link-container">
-                        <div class="container">
-                            <div class="navbar-header">
-                                <button type="button" class="navbar-toggle" data-toggle="collapse"
-                                    data-target=".sidebar-navbar-collapse">
-                                    <span class="sr-only">Toggle Navigation</span>
-                                    <span class="icon-bar"></span>
-                                    <span class="icon-bar"></span>
-                                    <span class="icon-bar"></span>
-                                </button>
-                                <div class="visible-xs navbar-brand">
-                                    <object style="filter: invert(100%)" data="/img/MillironX-title.svg"><img
-                                            src="/img/MillironX-title.svg" alt="Milliron X" /></object>
-                                </div>
-                            </div>
+        /* Gives me greater control over fonts */
+        .font-serif {
+            font-family: Georgia, "Times New Roman", Times, serif;
+        }
 
-                            <div class="navbar-collapse collapse sidebar-navbar-collapse">
-                                <ul class="nav navbar-nav" id="nav-link-list">
-                                    <li class="nav-item"><a href="index" class="nav-link">Home</a></li>
-                                    <li class="nav-item"><a href="Contact" class="nav-link">Contact</a></li>
-                                    <li class="nav-item"><a href="Academia" class="nav-link">Academia</a></li>
-                                    <li class="nav-item"><a href="AI">Artificial Insemination</a></li>
-                                    <li class="nav-item"><a href="Videos">Videos</a></li>
-                                    <li class="nav-item"><a href="Websites" class="nav-link">Websites</a></li>
-                                </ul>
-                            </div>
-                        </div>
-                    </nav>
-                </div>
-            </div>
+        .font-sans {
+            font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
 
-            <div class="col-sm-9">
-                <div class="tim-container">
-                    <div class="blurred-container">
-                        <div class="motto">
-                            <h1 id="motto">
-                                {{ page.motto }}
-                            </h1>
-                        </div>
-                        <div class="img-src" style="background-image: url({{ page.imageUrl }})"></div>
-                        <div class="img-src blur" style="background-image: url({{ page.blurImageUrl }})"></div>
-                    </div>
-                    <br />
-                    <div class="main" id="main-content">
-                        {{ content }}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+        .font-mono {
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+        }
 
-    <footer style="background-color: whitesmoke;">
-        <div class="container" style="position: relative;">
-            <img src="/img/brandedbull.png" alt="Branded bull" style="max-height: 72pt;" />
-            <button type="button" class="btn btn-success vertical-center" data-toggle="modal" data-target="#legal-modal"
-                style="position: absolute; right: 0">
-                <i class="fas fa-hat-cowboy-side"></i>&emsp;Page info &amp;<br />other legal stuff&hellip;
-            </button>
-        </div>
-        </div>
-    </footer>
+        .font-small-caps {
+            font-variant-caps: small-caps;
+        }
 
-    <!-- Script Bundle: JQuery -->
-    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
+        .strikethrough {
+            text-decoration: line-through;
+        }
 
-    <!-- Script Bundle: FitText -->
-    <script src="/js/jquery.fittext.js" type="text/javascript"></script>
+        .sfTable {
+            margin: 0 auto;
+        }
 
-    <!-- Script Bundle: Bootstrap -->
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"
-        integrity="sha384-DKoN2gpE9Yt/u0fuNvcJBn4n7wjnKFKjg4+Iz4ORs52lUc0Qp++smhHtWwHeapVW" crossorigin="anonymous"
-        type="text/javascript"></script>
+        .text-align-left {
+            text-align: left
+        }
 
-    <!-- Script Bundle: Font Awesome -->
-    <script src="https://kit.fontawesome.com/0bbd6c0ef3.js" crossorigin="anonymous"></script>
+        .text-align-right {
+            text-align: right;
+        }
 
-    <!-- Script Bundle: Custom -->
-    <script src="/js/MillironX_CustomScripts.js" type="text/javascript"></script>
+        .float-left {
+            float: left;
+        }
 
-    <!-- Simple Analytics -->
-    <script type='text/javascript'>
-        // Enables app insights IF AND ONLY IF user does not send a DNT request
-        // Shamelessly stolen from https://dev.to/spekulatius1984/how-to-check-do-not-track-dnt-in-javascript-57g1
-        let dntActive = () => {
-            // get the value from the various browser implementations.
-            let dnt_active = parseInt(
-                // Internet Explorer 9 and 10 vendor prefix
-                navigator.msDoNotTrack ||
+        .float-right {
+            float: right;
+        }
 
-                // IE 11 uses window.doNotTrack
-                window.doNotTrack ||
+        .media-object {
+            max-height: 100%;
+            max-width: 100%;
+        }
 
-                // W3C
-                navigator.doNotTrack,
-                10
-            );
+        @media (min-width: 768px) {
+            .pull-left {
+                max-width: 25%;
+            }
+        }
 
-            // If this comes to exactly 1 DNT is set.
-            return (dnt_active === 1);
+        h1 small {
+            font-size: 60%;
+            color: #9a9a9a;
+            font-weight: 300;
+            line-height: 1.5;
         }
 
-        // Check if DNT is active.
-        if (dntActive()) {
-            // active
-            console.log("Simple Analytics has been disabled due to user's Do Not Track request")
-        } else {
-            // inactive
-            console.log("Simple Analytics is active")
-            document.write("<script async defer src=\"https://scripts.simpleanalyticscdn.com/latest.js\"><\/script>")
+        h1 {
+            font-weight: 400;
+            margin: 30px 0 15px;
         }
-    </script>
+    </style>
+</head>
 
-    {% if page.title == 'Contact Me' %}
-    <!-- Script Bundle: JQuery Masks -->
-    <script src="https://cdn.jsdelivr.net/npm/jquery-mask-plugin@1.14.16/dist/jquery.mask.min.js" integrity="sha256-Kg2zTcFO9LXOc7IwcBx1YeUBJmekycsnTsq2RuFHSZU=" crossorigin="anonymous"></script>
+<body>
+    <div class="container-fluid">
+        <div class="row wrapper min-vh-100 flex-column flex-sm-row">
+            <aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">
+                <nav class="navbar navbar-expand-md navbar-dark bg-dark align-items-start flex-md-column flex-row">
+                    <div class="container-fluid">
+                        <a class="navbar-brand d-block d-md-none" href="#"><i class="fa fa-bullseye fa-fw"></i>
+                            Brand</a>
+                        <a href class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".sidebar">
+                            <span class="navbar-toggler-icon"></span>
+                        </a>
+                        <div class="collapse navbar-collapse sidebar">
+                            <ul class="flex-column navbar-nav w-100 justify-content-between">
+                                <li class="nav-item">
+                                    <a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span
+                                            class="">Link</span></a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1"
+                                        data-bs-parent="#navbar1" data-bs-toggle="collapse" data-bs-target="#m1"
+                                        aria-expanded="false">
+                                        <i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
+                                    </a>
+                                    <div class="collapse" id="m1">
+                                        <ul class="flex-column nav">
+                                            <a class="nav-link px-0 text-truncate" href="#">Sub</a>
+                                            <a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
+                                        </ul>
+                                    </div>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span
+                                            class="">Link</span></a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span
+                                            class="">Link</span></a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </nav>
+            </aside>
+            <div class="col bg-faded py-3 gx-0">
+                <div class="container">
+                    <header class="d-none d-sm-none d-md-block text-center">
+                        <h1 class="font-serif font-small-caps"><object
+                                data="https://millironx.com/img/MillironX-title.svg">
+                                <img src="https://millironx.com/img/MillironX-title.svg" alt="Milliron X" /></object>
+                            &emsp;
+                            Milliron X
+                        </h1>
+                    </header>
+                </div>
+                <div class="blurred-container">
+                    <div class="motto">
+                        <h1 id="motto">
+                            {{ safeHTML (.Param "motto") }}
+                        </h1>
+                    </div>
+                    {{ $imgsrc := print "images/" (.Param "cardImage") ".jpg" }}
+                    {{ $mainimg := resources.Get $imgsrc }}
+                    {{ $blurimg := $mainimg.Filter (images.GaussianBlur 100) }}
+                    <div class="img-src" style="background-image: url('{{ $mainimg.RelPermalink }}');"></div>
+                    <div class="img-src blur" style="background-image: url('{{ $blurimg.RelPermalink }}');"></div>
+                </div>
+                <br />
+                <main class="container-fluid">
+                    <div class="container px-5">
+                        {{ block "main" . }}{{ end }}
+                    </div>
+                </main>
+            </div>
+        </div>
+    </div>
 
-    <!-- Script Bundle: Pageclip -->
-    <script type="text/javascript">
-        $('#phone').mask('(000) 000-0000')
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+        crossorigin="anonymous"></script>
+    <script src="https://kit.fontawesome.com/0bbd6c0ef3.js" crossorigin="anonymous"></script>
+    <script src="https://wyoming4h.org/albany4h/record-book/script/parallax.min.js"></script>
+    <script src="https://millironx.com/js/jquery.fittext.js"></script>
+    <script>
+        $(window).scroll(function (e) {
+            oVal = ($(window).scrollTop() / 170);
+            $(".blur").css("opacity", oVal);
+
+        });
+        $("#motto").fitText();
     </script>
-    {% endif %}
-
 </body>
 
 </html>
