diff --git a/lib/sukaato_web/controllers/page_html/contact.html.heex b/lib/sukaato_web/controllers/page_html/contact.html.heex
new file mode 100644
index 0000000..ffbe3ed
--- /dev/null
+++ b/lib/sukaato_web/controllers/page_html/contact.html.heex
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<% rel_proj_root = "../../../.." %>
+<html lang={@config["site"]["lang"]}>
+    <.html_head site_name={@config["site"]["name"]} site_author={@config["site"]["author"]} site_desc={@config["site"]["desc"]} />
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <audio id="loaded" class="notifier" src={~p"/audio/page_load.mp3"}></audio>
+    <body id="default_body">
+        <noscript>
+            <div id="noscript_panel" class="panel">
+                <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+                <a id="monologin_noscript" class="loginbutt" href={~p"/login"}>Log in</a>
+                <a id="monoregistration_noscript" class="registbutt">Register</a>
+            </div>
+        </noscript>
+        <template id="panel" class="panel">
+            <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+            <a id="monologin" class="loginbutt" href={~p"/login"}>Log in</a>
+            <a id="monoregistration" class="registbutt">Register</a>
+        </template>
+        <div id="banner">
+            <% # @TODO verify the below works %>
+            <%= raw File.read!(Path.expand("#{rel_proj_root}/priv/static/images/main.svg", __DIR__)) %>
+            <span class="frontmatter"><a id="home" href={~p"/"}><h1 id="site_title" class="title"><%= @config["site"]["name"] %></h1></a></span>
+            <nav id="site_nav">
+                <.navify page_links={@pages} />
+            </nav>
+        </div>
+        <div id="doc">
+            <main id="content" class="page_content">
+                <div id="affil_wrap">
+                    <div>
+                        <%= for i <- @affil do %>
+                            <%= for item <- i do %>
+                                <a href={item["protocol"] <> item["scheme_postfix"] <> item["address"]}>
+                                    <%= if Map.has_key?(item, "icon_uri") and item["icon_uri"] != "" do %>
+                                        <img src={item["icon_uri"]} />
+                                    <% else %>
+                                        <%= if Map.has_key?(item, "icon_name") and item["icon_name"] != "" do %>
+                                            <!-- @TODO either troubleshoot heroicons or draw from map of (social media logo?) images (SVG?) -->
+                                            <.affiliate icon={item["icon_name"]} />
+                                        <% else %>
+                                            <%= item["name"] %>
+                                        <% end %>
+                                    <% end %>
+                                </a>
+                            <% end %>
+                        <% end %>
+                    </div>
+                    <div id="card_table">
+                        <div id="affil_info">
+                        <!-- <img src="https://static.vecteezy.com/system/resources/previews/022/185/914/original/metal-hand-sign-png.png" /> -->
+                            <div>
+                                <%= for i <- @affil do %>
+                                    <%= for item <- i do %>
+                                        <a href={item["protocol"] <> item["scheme_postfix"] <> item["address"]}>
+                                            <article>
+                                                <span><h1 id={item["name"] <> "_label"} class="contact_label"><%= item["name"] %></h1>
+                                                <p id={item["name"]} class="contact_datum">
+                                                        <%= item["protocol"] <> " -> " <> item["address"] %>
+                                                </p></span>
+                                            </article>
+                                        </a>
+                                    <% end %>
+                                <% end %>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- <form id="contact_form" method="POST">
+                    <label for="protocol" class="form_label">séance technique</label>
+                    <select name="protocol" id="protocol">
+                        <option value="email">email</option>
+                    </select><br>
+                    <div id="selected_protocol" class="form_group">
+                        <label for="address_from" class="form_label">magician</label>
+                        <input type="text" id="address_from" name="address_from" value="" /><br>
+                        <label for="message" class="form_label">spell</label>
+                        <textarea id="message" name="message" rows="20" cols="75" /><br>
+                        <input type="submit" value="Submit" />
+                    </div>
+                </form> -->
+            </main>
+        </div>
+        <div id="extra">
+        </div>
+        <.html_foot />
+    </body>
+    <script type="module">
+        // import { NotificationSounds } from "<%= ~p"/js/notifiers.js" %>";
+        import { Point, Line } from "<%= ~p"/js/space.js" %>";
+        import { Hitbox, Tracker, spatialTriggerY } from "<%= ~p"/js/triggers.js" %>";
+        import { reportPriority } from "<%= ~p"/js/err.js" %>";
+        reportPriority();
+
+        let sandbox = new Hitbox(document.body)
+        let sandbox_rect = sandbox.matter.getBoundingClientRect()
+        sandbox.y = sandbox_rect.y
+        let ceiling = new Point(0, Math.round(sandbox.y), 0)
+        let floor = new Point(0, Math.round(ceiling.y * (60 / sandbox.y)), 0)
+        let constraint = new Line(ceiling, floor)
+        window.addEventListener("resize", (e) => {
+            let sandbox_prev_y = sandbox.y
+            let sandbox_rect = sandbox.matter.getBoundingClientRect()
+            sandbox.y = sandbox_rect.y
+            ceiling.y = Math.round(sandbox.y)
+            floor.y = Math.round((ceiling.y * (60 / sandbox_prev_y)) + ((ceiling.y * (60 / sandbox_prev_y)) * (sandbox.y / sandbox_prev_y)))
+            constraint.point1 = ceiling
+            constraint.point2 = floor
+            constraint.reset()
+            console.log("Floor has changed to value %d", floor.y)
+            console.log(Math.round(ceiling.y * (sandbox.y / sandbox_prev_y)))
+            console.info("Logging \"top\" of %o on window resize as: %d", sandbox.matter, sandbox.y)
+        })
+        sandbox.matter.addEventListener("mousemove", (e) => {
+            let panel = document.getElementById("panel")
+            let tracker = new Tracker(e, panel)
+            tracker.y = tracker.event.clientY
+            // let yFloor = Math.round(panel.getBoundingClientRect().height)
+            spatialTriggerY(tracker, constraint, sandbox)
+        })
+    </script>
+</html>
\ No newline at end of file
diff --git a/lib/sukaato_web/controllers/page_html/index.html.heex b/lib/sukaato_web/controllers/page_html/index.html.heex
new file mode 100644
index 0000000..74af4d9
--- /dev/null
+++ b/lib/sukaato_web/controllers/page_html/index.html.heex
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<% rel_proj_root = "../../../.." %>
+<html lang={@config["site"]["lang"]}>
+    <.html_head site_name={@config["site"]["name"]} site_author={@config["site"]["author"]} site_desc={@config["site"]["desc"]} />
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <audio id="loaded" class="notifier" src={~p"/audio/page_load.mp3"}></audio>
+    <body id="default_body">
+        <% # database queries may go here %>
+        <noscript>
+            <div id="noscript_panel" class="panel">
+                <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+                <a id="monologin_noscript" class="loginbutt" href={~p"/login"}>Log in</a>
+                <a id="monoregistration_noscript" class="registbutt">Register</a>
+            </div>
+        </noscript>
+        <template id="panel">
+            <a id="monologin" class="loginbutt" href={~p"/login"}>Log in</a>
+            <a id="monoregistration" class="registbutt">Register</a>
+        </template>
+        <div id="banner">
+            <% # @TODO verify the below works %>
+            <%= raw File.read!(Path.expand("#{rel_proj_root}/priv/static/images/main.svg", __DIR__)) %>
+            <span class="frontmatter"><a id="home" href={~p"/"}><h1 id="site_title" class="title"><%= @config["site"]["name"] %></h1></a></span>
+            <nav id="site_nav">
+                <.navify page_links={@pages} />
+                <!--
+                <% # @TODO create the following routes or redirects %>
+                <a href="moodboard">Moodboard</a>
+                <a href="portfolio">Portfolio</a>
+                <a href="watch"><%= @config["site"]["name"] %>TV</a>
+                <a href="listen"><%= @config["site"]["name"] %>Wave</a>
+                <a href="read"><%= @config["site"]["name"] %>Scrolls</a>
+                <a href="hack">./<%= @config["site"]["name"] %>.src</a>
+                -->
+            </nav>
+        </div>
+        <div id="doc">
+            <main id="content" class="page_content">
+                <!-- @TODO write a small explanation of site--take inspiration from neocities -->
+                <article id="intro" class="exposition">
+                    <span><% # <.greet /> %>
+                    <.markdown_content page_query={@page_name} /></span>
+                </article>
+            </main>
+        </div>
+        <div id="extra">
+        </div>
+        <.html_foot />
+    </body>
+    <script type="module">
+        import { NotificationSounds } from "<%= ~p"/js/notifiers.js" %>";
+        import { Point, Line } from "<%= ~p"/js/space.js" %>";
+        import { Hitbox, Tracker, spatialTriggerY } from "<%= ~p"/js/triggers.js" %>";
+        import { reportPriority } from "<%= ~p"/js/err.js" %>";
+        reportPriority();
+
+        var notifs = new NotificationSounds();
+        notifs.playSFX("loaded", 0.05, 5, [0.0, 0.01]);
+
+        let sandbox = new Hitbox(document.body)
+        let sandbox_rect = sandbox.matter.getBoundingClientRect()
+        sandbox.y = sandbox_rect.y
+        let ceiling = new Point(0, Math.round(sandbox.y), 0)
+        let floor = new Point(0, Math.round(ceiling.y * (60 / sandbox.y)), 0)
+        let constraint = new Line(ceiling, floor)
+        window.addEventListener("resize", (e) => {
+            let sandbox_prev_y = sandbox.y
+            let sandbox_rect = sandbox.matter.getBoundingClientRect()
+            sandbox.y = sandbox_rect.y
+            ceiling.y = Math.round(sandbox.y)
+            floor.y = Math.round((ceiling.y * (60 / sandbox_prev_y)) + ((ceiling.y * (60 / sandbox_prev_y)) * (sandbox.y / sandbox_prev_y)))
+            constraint.point1 = ceiling
+            constraint.point2 = floor
+            constraint.reset()
+            console.log("Floor has changed to value %d", floor.y)
+            console.log(Math.round(ceiling.y * (sandbox.y / sandbox_prev_y)))
+            console.info("Logging \"top\" of %o on window resize as: %d", sandbox.matter, sandbox.y)
+        })
+        sandbox.matter.addEventListener("mousemove", (e) => {
+            let panel = document.getElementById("panel")
+            let tracker = new Tracker(e, panel)
+            tracker.y = tracker.event.clientY
+            // let yFloor = Math.round(panel.getBoundingClientRect().height)
+            spatialTriggerY(tracker, constraint, sandbox)
+        })
+    </script>
+</html>
\ No newline at end of file
diff --git a/lib/sukaato_web/controllers/page_html/login.html.heex b/lib/sukaato_web/controllers/page_html/login.html.heex
new file mode 100644
index 0000000..1c0b241
--- /dev/null
+++ b/lib/sukaato_web/controllers/page_html/login.html.heex
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<% rel_proj_root = "../../../.." %>
+<html lang={@config["site"]["lang"]}>
+    <.html_head site_name={@config["site"]["name"]} site_author={@config["site"]["author"]} site_desc={@config["site"]["desc"]} />
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <!-- <audio id="loaded" class="notifier" src={~p"/audio/page_load.mp3"}></audio> -->
+    <body id="default_body">
+        <noscript>
+            <div id="noscript_panel" class="panel">
+                <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+                <a id="monologin_noscript" class="loginbutt" href={~p"/login"}>Log in</a>
+                <a id="monoregistration_noscript" class="registbutt">Register</a>
+            </div>
+        </noscript>
+        <template id="panel" class="panel">
+            <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+            <a id="monologin" class="loginbutt" href={~p"/login"}>Log in</a>
+            <a id="monoregistration" class="registbutt">Register</a>
+        </template>
+        <div id="banner">
+            <% # @TODO verify the below works %>
+            <%= raw File.read!(Path.expand("#{rel_proj_root}/priv/static/images/main.svg", __DIR__)) %>
+            <span class="frontmatter"><a id="home" href={~p"/"}><h1 id="site_title" class="title"><%= @config["site"]["name"] %></h1></a></span>
+            <nav id="site_nav">
+                <.navify page_links={@pages} />
+            </nav>
+        </div>
+        <div id="doc">
+            <main id="content" class="page_content">
+                <!-- @TODO write a small explanation of site--take inspiration from neocities -->
+                <%= if @attempted do %>
+                    <span><p>Either you forgot your clerical title, or the incantation was wrong.</p></span>
+                <% end %>
+                <form method="post" autocomplete="on">
+                    <label id="username_label" for="username"><%= @form_fields.username %></label><br>
+                    <input type="text" id="username" name="username"><br>
+                    <label id="password_label" for="password"><%= @form_fields.password %></label><br>
+                    <input type="password" id="password" name="password"><br>
+                    <input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
+                    <.submission btn_name={@button_choice} />
+                </form>
+            </main>
+        </div>
+        <div id="extra">
+        </div>
+        <.html_foot />
+    </body>
+    <script type="module">
+        // import { NotificationSounds } from "<%= ~p"/js/notifiers.js" %>";
+        import { Point, Line } from "<%= ~p"/js/space.js" %>";
+        import { Hitbox, Tracker, spatialTriggerY } from "<%= ~p"/js/triggers.js" %>";
+        import { reportPriority } from "<%= ~p"/js/err.js" %>";
+        reportPriority();
+
+        let sandbox = new Hitbox(document.body)
+        let sandbox_rect = sandbox.matter.getBoundingClientRect()
+        sandbox.y = sandbox_rect.y
+        let ceiling = new Point(0, Math.round(sandbox.y), 0)
+        let floor = new Point(0, Math.round(ceiling.y * (60 / sandbox.y)), 0)
+        let constraint = new Line(ceiling, floor)
+        window.addEventListener("resize", (e) => {
+            let sandbox_prev_y = sandbox.y
+            let sandbox_rect = sandbox.matter.getBoundingClientRect()
+            sandbox.y = sandbox_rect.y
+            ceiling.y = Math.round(sandbox.y)
+            floor.y = Math.round((ceiling.y * (60 / sandbox_prev_y)) + ((ceiling.y * (60 / sandbox_prev_y)) * (sandbox.y / sandbox_prev_y)))
+            constraint.point1 = ceiling
+            constraint.point2 = floor
+            constraint.reset()
+            console.log("Floor has changed to value %d", floor.y)
+            console.log(Math.round(ceiling.y * (sandbox.y / sandbox_prev_y)))
+            console.info("Logging \"top\" of %o on window resize as: %d", sandbox.matter, sandbox.y)
+        })
+        sandbox.matter.addEventListener("mousemove", (e) => {
+            let panel = document.getElementById("panel")
+            let tracker = new Tracker(e, panel)
+            tracker.y = tracker.event.clientY
+            // let yFloor = Math.round(panel.getBoundingClientRect().height)
+            spatialTriggerY(tracker, constraint, sandbox)
+        })
+    </script>
+</html>
\ No newline at end of file
diff --git a/lib/sukaato_web/controllers/page_html/logout.html.heex b/lib/sukaato_web/controllers/page_html/logout.html.heex
new file mode 100644
index 0000000..9392925
--- /dev/null
+++ b/lib/sukaato_web/controllers/page_html/logout.html.heex
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<% rel_proj_root = "../../../.." %>
+<html lang={@config["site"]["lang"]}>
+    <.html_head site_name={@config["site"]["name"]} site_author={@config["site"]["author"]} site_desc={@config["site"]["desc"]} />
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <!-- <audio id="loaded" class="notifier" src={~p"/audio/page_load.mp3"}></audio> -->
+    <body id="default_body">
+        <noscript>
+            <div id="noscript_panel" class="panel">
+                <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+                <a id="monologin_noscript" class="loginbutt" href={~p"/login"}>Log in</a>
+                <a id="monoregistration_noscript" class="registbutt">Register</a>
+            </div>
+        </noscript>
+        <template id="panel">
+            <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+            <a id="monologin" class="loginbutt" href={~p"/login"}>Log in</a>
+            <a id="monoregistration" class="registbutt">Register</a>
+            <!-- <button id="monoregistration" type="button" class="registbutt">Register</button>
+            <button id="monologin" type="button" class="loginbutt">Log in</button> -->
+        </template>
+        <div id="banner">
+            <% # @TODO verify the below works %>
+            <%= raw File.read!(Path.expand("#{rel_proj_root}/priv/static/images/main.svg", __DIR__)) %>
+            <span class="frontmatter"><a id="home" href={~p"/"}><h1 id="site_title" class="title"><%= @config["site"]["name"] %></h1></a></span>
+            <nav id="site_nav">
+                <.navify page_links={@pages} />
+                <noscript>
+                    <a href={~p"/login"}>Passage</a>
+                </noscript>
+            </nav>
+        </div>
+        <div id="doc">
+            <main id="content" class="page_content">
+                <span><p>You are already acting in your capacity as clergy. <br>Do you wish to return to laity?</p></span>
+                <form method="post" autocomplete="on">
+                    <input type="hidden" name="logout" value="true">
+                    <input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
+                    <.submission btn_name={@button_choice} />
+                </form>
+            </main>
+        </div>
+        <div id="extra">
+        </div>
+        <.html_foot />
+    </body>
+    <script type="module">
+        // import { NotificationSounds } from "<%= ~p"/js/notifiers.js" %>";
+        import { Point, Line } from "<%= ~p"/js/space.js" %>";
+        import { Hitbox, Tracker, spatialTriggerY } from "<%= ~p"/js/triggers.js" %>";
+        import { reportPriority } from "<%= ~p"/js/err.js" %>";
+        reportPriority();
+
+        let sandbox = new Hitbox(document.body)
+        let sandbox_rect = sandbox.matter.getBoundingClientRect()
+        sandbox.y = sandbox_rect.y
+        let ceiling = new Point(0, Math.round(sandbox.y), 0)
+        let floor = new Point(0, Math.round(ceiling.y * (60 / sandbox.y)), 0)
+        let constraint = new Line(ceiling, floor)
+        window.addEventListener("resize", (e) => {
+            let sandbox_prev_y = sandbox.y
+            let sandbox_rect = sandbox.matter.getBoundingClientRect()
+            sandbox.y = sandbox_rect.y
+            ceiling.y = Math.round(sandbox.y)
+            floor.y = Math.round((ceiling.y * (60 / sandbox_prev_y)) + ((ceiling.y * (60 / sandbox_prev_y)) * (sandbox.y / sandbox_prev_y)))
+            constraint.point1 = ceiling
+            constraint.point2 = floor
+            constraint.reset()
+            console.log("Floor has changed to value %d", floor.y)
+            console.log(Math.round(ceiling.y * (sandbox.y / sandbox_prev_y)))
+            console.info("Logging \"top\" of %o on window resize as: %d", sandbox.matter, sandbox.y)
+        })
+        sandbox.matter.addEventListener("mousemove", (e) => {
+            let panel = document.getElementById("panel")
+            let tracker = new Tracker(e, panel)
+            tracker.y = tracker.event.clientY
+            // let yFloor = Math.round(panel.getBoundingClientRect().height)
+            spatialTriggerY(tracker, constraint, sandbox)
+        })
+    </script>
+</html>
\ No newline at end of file
diff --git a/lib/sukaato_web/controllers/page_html/pubkey.html.heex b/lib/sukaato_web/controllers/page_html/pubkey.html.heex
new file mode 100644
index 0000000..fc4d8c7
--- /dev/null
+++ b/lib/sukaato_web/controllers/page_html/pubkey.html.heex
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<% rel_proj_root = "../../../.." %>
+<html lang={@config["site"]["lang"]}>
+    <.html_head site_name={@config["site"]["name"]} site_author={@config["site"]["author"]} site_desc={@config["site"]["desc"]} />
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <audio id="loaded" class="notifier" src={~p"/audio/page_load.mp3"}></audio>
+    <body id="default_body">
+        <% # database queries may go here %>
+        <noscript>
+            <div id="noscript_panel" class="panel">
+                <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+                <a id="monologin_noscript" class="loginbutt" href={~p"/login"}>Log in</a>
+                <a id="monoregistration_noscript" class="registbutt">Register</a>
+            </div>
+        </noscript>
+        <template id="panel">
+            <a id="monologin" class="loginbutt" href={~p"/login"}>Log in</a>
+            <a id="monoregistration" class="registbutt">Register</a>
+        </template>
+        <div id="banner">
+            <% # @TODO verify the below works %>
+            <%= raw File.read!(Path.expand("#{rel_proj_root}/priv/static/images/main.svg", __DIR__)) %>
+            <span class="frontmatter"><a id="home" href={~p"/"}><h1 id="site_title" class="title"><%= @config["site"]["name"] %></h1></a></span>
+            <nav id="site_nav">
+                <.navify page_links={@pages} />
+            </nav>
+        </div>
+        <div id="doc">
+            <main id="content" class="page_content">
+                <!-- @TODO write a small explanation of site--take inspiration from neocities -->
+                <div id="gpg_link">
+                <%= for q <- @qr do %>
+                    <%= if elem(q, 0) != "" do %>
+                        <a id="pubkey_link" class="cryptic" href={~p"/files/users/" <> @user <> "/gpg/" <> elem(q, 0) <> ".asc"}><h1><%= elem(q, 0) %></h1></a>
+                    <% else %>
+                        <h1>?</h1>
+                    <% end %>
+                    <%= if is_tuple(elem(q, 1)) do %>
+                        <%= if elem(elem(q, 1), 0) == :ok do %>
+                            <%= raw elem(elem(q, 1), 1) %>
+                        <% end %>
+                    <% end %>
+                    <span><p id="pubkey_content" class="cryptic">
+                        <% gpg_key = elem(q, 2) %>
+                        -----BEGIN PGP PUBLIC KEY BLOCK-----<br>
+                        <%= String.replace(gpg_key, "-----BEGIN PGP PUBLIC KEY BLOCK-----", "") |> String.replace("-----END PGP PUBLIC KEY BLOCK-----", "") %><br>
+                        -----END PGP PUBLIC KEY BLOCK-----
+                    </p></span>
+                <% end %>
+                </div>
+            </main>
+        </div>
+        <div id="extra">
+        </div>
+        <.html_foot />
+    </body>
+    <script type="module">
+        // import { NotificationSounds } from "<%= ~p"/js/notifiers.js" %>";
+        import { Hitbox, Tracker, spatialTriggerY } from "<%= ~p"/js/triggers.js" %>";
+        import { Point, Line } from "<%= ~p"/js/space.js" %>";
+        import { reportPriority } from "<%= ~p"/js/err.js" %>";
+        reportPriority();
+
+        let sandbox = new Hitbox(document.body)
+        let sandbox_rect = sandbox.matter.getBoundingClientRect()
+        sandbox.y = sandbox_rect.y
+        let ceiling = new Point(0, Math.round(sandbox.y), 0)
+        let floor = new Point(0, Math.round(ceiling.y * (60 / sandbox.y)), 0)
+        let constraint = new Line(ceiling, floor)
+        window.addEventListener("resize", (e) => {
+            let sandbox_prev_y = sandbox.y
+            let sandbox_rect = sandbox.matter.getBoundingClientRect()
+            sandbox.y = sandbox_rect.y
+            ceiling.y = Math.round(sandbox.y)
+            floor.y = Math.round((ceiling.y * (60 / sandbox_prev_y)) + ((ceiling.y * (60 / sandbox_prev_y)) * (sandbox.y / sandbox_prev_y)))
+            constraint.point1 = ceiling
+            constraint.point2 = floor
+            constraint.reset()
+            console.log("Floor has changed to value %d", floor.y)
+            console.log(Math.round(ceiling.y * (sandbox.y / sandbox_prev_y)))
+            console.info("Logging \"top\" of %o on window resize as: %d", sandbox.matter, sandbox.y)
+        })
+        sandbox.matter.addEventListener("mousemove", (e) => {
+            let panel = document.getElementById("panel")
+            let tracker = new Tracker(e, panel)
+            tracker.y = tracker.event.clientY
+            // let yFloor = Math.round(panel.getBoundingClientRect().height)
+            spatialTriggerY(tracker, constraint, sandbox)
+        })
+    </script>
+</html>
\ No newline at end of file
diff --git a/lib/sukaato_web/controllers/page_html/thinkers.html.heex b/lib/sukaato_web/controllers/page_html/thinkers.html.heex
new file mode 100644
index 0000000..47a7ba4
--- /dev/null
+++ b/lib/sukaato_web/controllers/page_html/thinkers.html.heex
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<% rel_proj_root = "../../../.." %>
+<html lang={@config["site"]["lang"]}>
+    <.html_head site_name={@config["site"]["name"]} site_author={@config["site"]["author"]} site_desc={@config["site"]["desc"]} />
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <audio id="loaded" class="notifier" src={~p"/audio/page_load.mp3"}></audio>
+    <body id="default_body">
+        <% # database queries may go here %>
+        <noscript>
+            <div id="noscript_panel" class="panel">
+                <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+                <a id="monologin_noscript" class="loginbutt" href={~p"/login"}>Log in</a>
+                <a id="monoregistration_noscript" class="registbutt">Register</a>
+            </div>
+        </noscript>
+        <template id="panel">
+            <a id="monologin" class="loginbutt" href={~p"/login"}>Log in</a>
+            <a id="monoregistration" class="registbutt">Register</a>
+        </template>
+        <div id="banner">
+            <% # @TODO verify the below works %>
+            <%= raw File.read!(Path.expand("#{rel_proj_root}/priv/static/images/main.svg", __DIR__)) %>
+            <span class="frontmatter"><a id="home" href={~p"/"}><h1 id="site_title" class="title"><%= @config["site"]["name"] %></h1></a></span>
+            <nav id="site_nav">
+                <.navify page_links={@pages} />
+                <!--
+                <% # @TODO create the following routes or redirects %>
+                <a href="moodboard">Moodboard</a>
+                <a href="portfolio">Portfolio</a>
+                <a href="watch"><%= @config["site"]["name"] %>TV</a>
+                <a href="listen"><%= @config["site"]["name"] %>Wave</a>
+                <a href="read"><%= @config["site"]["name"] %>Scrolls</a>
+                <a href="hack">./<%= @config["site"]["name"] %>.src</a>
+                -->
+            </nav>
+        </div>
+        <div id="doc">
+            <main id="content" class="page_content">
+                <!-- @TODO write a small explanation of site--take inspiration from neocities -->
+                <article id="influences" class="exposition">
+                    <span><.markdown_content page_query={@page_name} /></span>
+                </article>
+                <div id="thinker_gallery" class="tlist">
+                    <.thinkify thinkers={@thinkers}/>
+                </div>
+            </main>
+        </div>
+        <div id="extra">
+        </div>
+        <.html_foot />
+    </body>
+    <script type="module">
+        /* import { NotificationSounds } from "<%= ~p"/js/notifiers.js" %>"; */
+        import { Hitbox, Tracker, spatialTriggerY } from "<%= ~p"/js/triggers.js" %>";
+        import { Point, Line } from "<%= ~p"/js/space.js" %>";
+        import { reportPriority } from "<%= ~p"/js/err.js" %>";
+        reportPriority();
+
+        let sandbox = new Hitbox(document.body)
+        let sandbox_rect = sandbox.matter.getBoundingClientRect()
+        sandbox.y = sandbox_rect.y
+        let ceiling = new Point(0, Math.round(sandbox.y), 0)
+        let floor = new Point(0, Math.round(ceiling.y * (60 / sandbox.y)), 0)
+        let constraint = new Line(ceiling, floor)
+        window.addEventListener("resize", (e) => {
+            let sandbox_prev_y = sandbox.y
+            let sandbox_rect = sandbox.matter.getBoundingClientRect()
+            sandbox.y = sandbox_rect.y
+            ceiling.y = Math.round(sandbox.y)
+            floor.y = Math.round((ceiling.y * (60 / sandbox_prev_y)) + ((ceiling.y * (60 / sandbox_prev_y)) * (sandbox.y / sandbox_prev_y)))
+            constraint.point1 = ceiling
+            constraint.point2 = floor
+            constraint.reset()
+            console.log("Floor has changed to value %d", floor.y)
+            console.log(Math.round(ceiling.y * (sandbox.y / sandbox_prev_y)))
+            console.info("Logging \"top\" of %o on window resize as: %d", sandbox.matter, sandbox.y)
+        })
+        sandbox.matter.addEventListener("mousemove", (e) => {
+            let panel = document.getElementById("panel")
+            let tracker = new Tracker(e, panel)
+            tracker.y = tracker.event.clientY
+            // let yFloor = Math.round(panel.getBoundingClientRect().height)
+            spatialTriggerY(tracker, constraint, sandbox)
+        })
+    </script>
+</html>
\ No newline at end of file
diff --git a/lib/sukaato_web/controllers/page_html/twofact.html.heex b/lib/sukaato_web/controllers/page_html/twofact.html.heex
new file mode 100644
index 0000000..32bac94
--- /dev/null
+++ b/lib/sukaato_web/controllers/page_html/twofact.html.heex
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<% rel_proj_root = "../../../.." %>
+<html lang={@config["site"]["lang"]}>
+    <.html_head site_name={@config["site"]["name"]} site_author={@config["site"]["author"]} site_desc={@config["site"]["desc"]} />
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <!-- <audio id="loaded" class="notifier" src={~p"/audio/page_load.mp3"}></audio> -->
+    <body id="default_body">
+        <noscript>
+            <div id="noscript_panel" class="panel">
+                <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+                <a id="monologin_noscript" class="loginbutt">Log in</a>
+                <a id="monoregistration_noscript" class="registbutt">Register</a>
+            </div>
+        </noscript>
+        <template id="panel">
+            <!-- @TODO change below button button to anchor elements for ALL HEEx pages -->
+            <a id="monologin" class="loginbutt">Log in</a>
+            <a id="monoregistration" class="registbutt">Register</a>
+        </template>
+        <div id="banner">
+            <% # @TODO verify the below works %>
+            <%= raw File.read!(Path.expand("#{rel_proj_root}/priv/static/images/main.svg", __DIR__)) %>
+            <span class="frontmatter"><a id="home" href={~p"/"}><h1 id="site_title" class="title"><%= @config["site"]["name"] %></h1></a></span>
+            <nav id="site_nav">
+                <.navify page_links={@pages} />
+            </nav>
+        </div>
+        <div id="doc">
+            <main id="content" class="page_content">
+                <!-- @TODO write a small explanation of site--take inspiration from neocities -->
+                <%= if @attempted do %>
+                    <span><p>No traces of daimonic possession detected via clairvoyance. Try again?</p></span>
+                <% else %>
+                    <span><p>By clairvoyance the cult shall detect if you've been properly daimonically possessed!</p></span>
+                <% end %>
+                <img />
+                <form method="post" autocomplete="on">
+                    <input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
+                    <%= if @totp do %>
+                        <label for="totp">Enter TOTP Code</label><br>
+                        <input type="text" id="totp" name="code" maxlength="6"><br>
+                    <% end %>
+                    <%= if @fido do %>
+                        <label for="fido"></label><br>
+                        <input type="text" id="fido" name="chall_resp"><br>
+                        <!-- <input type="hidden" name="chall" value=""> -->
+                    <% end %>
+                    <input type="submit" class="acct_manager" value="Verify">
+                </form>
+            </main>
+        </div>
+        <div id="extra">
+        </div>
+        <.html_foot />
+    </body>
+    <script type="module">
+        // import { NotificationSounds } from "<%= ~p"/js/notifiers.js" %>";
+        import { Point, Line } from "<%= ~p"/js/space.js" %>";
+        import { Hitbox, Tracker, spatialTriggerY } from "<%= ~p"/js/triggers.js" %>";
+        import { reportPriority } from "<%= ~p"/js/err.js" %>";
+        reportPriority();
+
+        let sandbox = new Hitbox(document.body)
+        let sandbox_rect = sandbox.matter.getBoundingClientRect()
+        sandbox.y = sandbox_rect.y
+        let ceiling = new Point(0, Math.round(sandbox.y), 0)
+        let floor = new Point(0, Math.round(ceiling.y * (60 / sandbox.y)), 0)
+        let constraint = new Line(ceiling, floor)
+        window.addEventListener("resize", (e) => {
+            let sandbox_prev_y = sandbox.y
+            let sandbox_rect = sandbox.matter.getBoundingClientRect()
+            sandbox.y = sandbox_rect.y
+            ceiling.y = Math.round(sandbox.y)
+            floor.y = Math.round((ceiling.y * (60 / sandbox_prev_y)) + ((ceiling.y * (60 / sandbox_prev_y)) * (sandbox.y / sandbox_prev_y)))
+            constraint.point1 = ceiling
+            constraint.point2 = floor
+            constraint.reset()
+            console.log("Floor has changed to value %d", floor.y)
+            console.log(Math.round(ceiling.y * (sandbox.y / sandbox_prev_y)))
+            console.info("Logging \"top\" of %o on window resize as: %d", sandbox.matter, sandbox.y)
+        })
+        sandbox.matter.addEventListener("mousemove", (e) => {
+            let panel = document.getElementById("panel")
+            let tracker = new Tracker(e, panel)
+            tracker.y = tracker.event.clientY
+            // let yFloor = Math.round(panel.getBoundingClientRect().height)
+            spatialTriggerY(tracker, constraint, sandbox)
+        })
+    </script>
+</html>
\ No newline at end of file
