Fix display issues for Disclosure page.

.gitignore

@@ -1,2 +1 @@
 **/target
-src/resume.html

src/about.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_main">
-                <div class="main_body"><p>This page has not yet been filled out. Sorry!</p></div>
+                <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
                 <include src="includes/tailer.html" />
             </div>
             <div class="pane_spacer">

src/acknowledgements.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_main">
-                <div class="main_body">
+                <div class="body">
                     <p>There are currently no acknowledgements</p>
                     <p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
                     <p>

src/blog/index.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_main">
-                <div class="main_body">
+                <div class="body">
                     <div class="header">
                         <h1 class="title">Blog</h1>
                         <p class="date">Last Edited: 03 August, 2025</p>

src/blog/posts/0_divergent_pathways.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_blog">
-                <div class="blog_body">
+                <div class="body">
                     <div class="header">
                         <h1 class="title">Divergent Pathways</h1>
                         <p class="date">Posted: 29 July, 2025</p>

src/disclosure.html

@@ -17,14 +17,14 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_main">
-                <div class="main_body">
+                <div class="body">
                     <div class="header">
                         <h1 class="title">Disclosure</h1>
                         <p class="date">Last Edited: 01 August, 2025</p>
                     </div>
                     <div class="body">
                         <div class="layout_row">
-                            <div class="item website_security">
+                            <div class="item">
                                 <h2 class="title">Website Security</h2>
                                 <p>
                                     This website uses a number of security features, most of which
@@ -218,7 +218,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="item cookies">
+                            <div class="item">
                                 <h2 class="title">Cookies</h2>
                                 <p>
                                     This website only leaves cookies that are required for the

src/errors/400.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>400</h1>
                     <h2>Bad Request!</h2>
                     <hr />

src/errors/401.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>401</h1>
                     <h2>Unauthorized!</h2>
                 </div>

src/errors/403.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>403</h1>
                     <h2>Forbidden!</h2>
                     <hr />

src/errors/404.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>404</h1>
                     <h2>Page not found!</h2>
                 </div>

src/errors/500.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>500</h1>
                     <h2>Internal Server Error!</h2>
                     <hr />

src/errors/501.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>501</h1>
                     <h2>Not Implemented!</h2>
                     <hr />

src/errors/502.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>502</h1>
                     <h2>Bad Gateway!</h2>
                     <hr />

src/errors/503.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>503</h1>
                     <h2>Service Unavailable!</h2>
                     <hr />

src/errors/504.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>504</h1>
                     <h2>Gateway Timeout!</h2>
                     <hr />

src/includes/_unused_menu_entries.html

@@ -0,0 +1,11 @@
+<!-- Minecraft -->
+<li class="nav_dropdown">
+    <div class="dropdown_header nav_item">
+        <a class="nav_title" href="/minecraft/">Minecraft</a>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+    </div>
+    <div class="dropdown_body">
+        <a class="nav_title" href="/minecraft/bearock/">Bearock SMP</a>
+        <a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a>
+    </div>
+</li>

src/includes/nav_menu.html

@@ -1,33 +1,21 @@
 <ul class="nav_menu">
     <!-- Home -->
-    <li class="nav_body">
+    <li class="nav_item">
         <a class="nav_title" href="/">Home</a>
     </li>
 
-    <li class="nav_body">
+    <li class="nav_item">
         <a class="nav_title" href="/blog/">Blog</a>
     </li>
 
-    <!-- Minecraft -->
-    <li class="nav_dropdown">
-        <div class="dropdown_header nav_body">
-            <a class="nav_title" href="/minecraft/">Minecraft</a>
-            <ion-icon name="chevron-forward-outline"></ion-icon>
-        </div>
-        <div class="dropdown_body">
-            <a class="nav_title" href="/minecraft/bearock/">Bearock SMP</a>
-            <a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a>
-        </div>
-    </li>
-
     <hr />
 
     <!-- About -->
-    <li class="nav_body"><a class="nav_title" href="/about.html">About</a></li>
+    <li class="nav_item"><a class="nav_title" href="/about.html">About</a></li>
 
     <!-- Pronoun Pages -->
     <li class="nav_dropdown">
-        <a class="dropdown_header nav_body" href="https://pronouns.page/@Cutieguwu">
+        <a class="dropdown_header nav_item" href="https://pronouns.page/@Cutieguwu">
             <p class="nav_title">Pronoun Pages</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
         </a>
@@ -39,7 +27,7 @@
 
     <!-- External Links -->
     <li class="nav_dropdown">
-        <div class="dropdown_header nav_body">
+        <div class="dropdown_header nav_item">
             <p class="nav_title">External Links</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
@@ -54,7 +42,7 @@
 
     <!-- Public Services -->
     <li class="nav_dropdown">
-        <div class="dropdown_header nav_body">
+        <div class="dropdown_header nav_item">
             <p class="nav_title">Public Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
@@ -65,7 +53,7 @@
 
     <!-- Services -->
     <li class="nav_dropdown">
-        <div class="dropdown_header nav_body">
+        <div class="dropdown_header nav_item">
             <p class="nav_title">Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
@@ -77,10 +65,10 @@
     <hr />
 
     <!-- Website Disclosure -->
-    <li class="nav_body">
+    <li class="nav_item">
         <a class="nav_title" href="/disclosure.html">Disclosure</a>
     </li>
-    <li class="nav_body">
+    <li class="nav_item">
         <a class="nav_title" href="/acknowledgements.html">Acknowledgements</a>
     </li>
 </ul>

src/index.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_main">
-                <div class="main_body">
+                <div class="body">
                     <div class="header">
                         <h1 class="title">Home</h1>
                         <p class="date">Last Edited: 03 August, 2025</p>

src/partials/_a_chunk_list.scss

@@ -1,16 +1,22 @@
-.chunk_list,
+/*
-.pane_main .main_body .chunk_list {
+All specificities to do with Chunk Lists are a disaster.
-    display: flex;
+
-    flex-direction: column;
+Hopefully, I will attempt to clean up this steaming pile of shit so that I don't have to deal with conflicts (.main_body .body vs. .chunk .body in particular), but we'll see.
-    padding: 0;
+*/
-    text-align: left;
+
+.chunk_list {
+    display: grid;
+
+    width: 100%;
 
     .chunk + .chunk {
         margin-top: var(--spacing-horizontal);
     }
 
     .chunk {
-        .header {
+        width: inherit;
+
+        > .header {
             display: grid;
             grid-auto-flow: row;
             grid-template-columns: 1fr min-content;
@@ -24,10 +30,7 @@
 
             text-align: start;
 
-            /*width: calc(100% - calc(var(--spacing-horizontal) * 2));*/
+            width: inherit;
-            width: 100%;
-
-            margin: 0;
 
             .name,
             .subtitle,
@@ -35,10 +38,6 @@
                 margin: inherit;
             }
 
-            .name {
-                white-space: nowrap;
-            }
-
             .subtitle {
                 display: inline-block;
 
@@ -58,7 +57,7 @@
             }
         }
 
-        .body {
+        > .body {
             padding: 0 calc(var(--spacing-horizontal) * 2);
 
             ul {
@@ -71,3 +70,16 @@
         }
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .chunk_list .chunk {
+        > .header {
+            column-gap: var(--spacing-horizontal);
+        }
+
+        > .body {
+            /* Collapse the L/R padding to maximize usable space */
+            padding: 0;
+        }
+    }
+}

src/partials/_a_common.scss

@@ -60,6 +60,7 @@
 
     --spacing-horizontal: 0.75rem;
     --spacing-menu-gap: 1rem;
+    --spacing-thicc: calc(var(--margin-pane) * 4);
 
     --transition-fade: 0.4s ease-out;
     --transition-cut: none;
@@ -109,9 +110,37 @@ ion-icon {
     /* Adds a margin otherwise for some reason. */
     margin: inherit;
 
-    display: flex;
+    display: grid;
-    flex-flow: row wrap;
+    grid-auto-flow: column dense;
-    align-items: flex-start;
+    grid-template-columns: min-content 1fr min-content;
+}
+
+@media only screen and (max-width: 500px) {
+    .viewport {
+        grid-auto-flow: row;
+        grid-template-columns: none;
+
+        /* Compress spacings to maximize useable area. */
+        padding: var(--spacing-horizontal);
+        justify-items: center;
+    }
+
+    .pane_nav,
+    .pane_spacer,
+    .footer {
+        position: static;
+        top: auto;
+        left: auto;
+        right: auto;
+    }
+
+    .pane_nav,
+    .pane_main,
+    .pane_blog,
+    .pane_error,
+    .pane_spacer {
+        margin: 0;
+    }
 }
 
 .italic {

src/partials/_a_layouts.scss

@@ -1,10 +1,9 @@
 .layout_row {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-auto-flow: column;
-    justify-content: space-between;
+    gap: var(--spacing-horizontal);
 
     .item {
-        margin: var(--spacing-horizontal);
         padding: calc(var(--spacing-horizontal) * 2);
 
         background-color: var(--background-1);
@@ -15,3 +14,13 @@
         }
     }
 }
+
+.layout_row + .layout_row {
+    margin-top: var(--spacing-horizontal);
+}
+
+@media only screen and (max-width: 500px) {
+    .layout_row {
+        grid-auto-flow: row;
+    }
+}

src/partials/_a_pages.scss

@@ -1,4 +1,3 @@
 @use "blog_recent_posts";
 
-@use "page_disclosure";
 @use "page_resume";

src/partials/_blog_recent_posts.scss

@@ -3,5 +3,6 @@
 
     .recent_posts .chunk .header {
         background-color: var(--background-1);
+        white-space: nowrap;
     }
 }

src/partials/_nav_location.scss

@@ -12,6 +12,5 @@
 
     .location_page {
         margin: 0;
-        padding: 0;
     }
 }

src/partials/_nav_menu.scss

@@ -20,8 +20,10 @@
     }
 }
 
-.nav_body {
+.nav_item {
-    /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
+    /*
+    Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element.
+    */
     color: inherit;
     text-decoration: none;
 
@@ -30,8 +32,8 @@
     transition: var(--transition-fade);
 }
 
-.nav_body:hover,
+.nav_item:hover,
-.nav_dropdown:hover .nav_body {
+.nav_dropdown:hover .nav_item {
     transform: var(--transform-scale-x);
     transition: var(--transition-cut);
 

src/partials/_nav_quick_links.scss

@@ -11,7 +11,6 @@
         background-color: var(--background-2);
 
         transition: var(--transition-fade);
-        margin: 0;
 
         ion-icon {
             width: var(--item-size);

src/partials/_nav_title.scss

@@ -9,7 +9,6 @@
     margin: inherit;
     padding: 0 var(--spacing-horizontal);
     transition: var(--transition-fade);
-    /*text-transform: uppercase;*/
     display: block;
 }
 

src/partials/_page_disclosure.scss

@@ -1,4 +0,0 @@
-.website_security,
-.cookies {
-    max-width: 44%;
-}

src/partials/_page_resume.scss

@@ -1,37 +1,49 @@
-.early_history {
+.pane_details {
-    align-self: center;
+    display: flex !important;
-}
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
 
-.work_history,
+    .spacer_container {
-.education {
+        height: min-content !important;
-    .chunk_list {
+        width: 100%;
-        flex-direction: column-reverse !important;
+        padding-top: 0 !important;
     }
 }
 
-.awards,
+.spacer_contact {
-.certifications,
+    justify-content: start !important;
-.education,
+
-.work_history {
+    .contact_info .chunk .header {
-    max-width: 44%;
+        background-color: var(--background-1);
+
+        white-space: nowrap;
+        text-align: justify;
+    }
 }
 
-.software,
+.about_me {
-.prog_languages {
+    padding: 0 var(--spacing-thicc) var(--spacing-horizontal);
+}
+
+.early_history {
+    justify-self: center;
+}
+
+.prog_languages,
+.software {
     * {
         margin: 0.5rem;
     }
 }
 
+.software_row {
+    grid-template-columns: 60% auto;
+}
+
 .software {
-    max-width: 55%;
+    .android {
-
+        color: var(--accent-green);
-    .premiere_pro {
-        color: var(--accent-purple);
-    }
-
-    .photoshop {
-        color: var(--accent-blue);
     }
 
     .anubis {
@@ -54,14 +66,22 @@
         color: var(--accent-orange);
     }
 
-    .libreoffice {
+    .ios {
         color: var(--white-0);
     }
 
+    .libreoffice {
+        color: var(--accent-green);
+    }
+
     .linux {
         color: var(--white-0);
     }
 
+    .macos {
+        color: var(--white-0);
+    }
+
     .ms_office {
         color: var(--accent-orange);
     }
@@ -86,6 +106,14 @@
         color: var(--white-0);
     }
 
+    .photoshop {
+        color: var(--accent-blue);
+    }
+
+    .premiere_pro {
+        color: var(--accent-purple);
+    }
+
     .prusaslicer {
         color: var(--accent-orange);
     }
@@ -105,8 +133,6 @@
 }
 
 .prog_languages {
-    max-width: 30%;
-
     .asciidoc {
         color: var(--accent-cyan);
     }
@@ -168,3 +194,14 @@
 
     color: #1d63edff;
 }
+
+@media only screen and (max-width: 500px) {
+    .awards,
+    .certifications,
+    .education,
+    .prog_languages,
+    .software,
+    .work_history {
+        width: 100%;
+    }
+}

src/partials/_pane_blog.scss

@@ -8,12 +8,12 @@
 
     justify-content: center;
 
-    .blog_body {
+    > .body {
         background-color: var(--background-2);
         border-radius: var(--border-radius-leaf);
         padding-top: var(--spacing-horizontal);
 
-        .header {
+        > .header {
             text-align: center;
             padding: var(--spacing-horizontal);
             width: min-content;
@@ -38,11 +38,10 @@
             }
         }
 
-        .body {
+        > .body {
             text-align: start;
 
-            padding: 0 calc(var(--margin-pane) * 4)
+            padding: 0 var(--spacing-thicc) var(--spacing-thicc);
-                calc(var(--margin-pane) * 4);
 
             p {
                 color: var(--white-1);
@@ -50,3 +49,13 @@
         }
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_blog {
+        width: 100%;
+
+        .body > .body {
+            padding: var(--spacing-horizontal);
+        }
+    }
+}

src/partials/_pane_error.scss

@@ -5,7 +5,7 @@
 
     margin: auto; /* center object */
 
-    .error_body,
+    > .body,
     .tailer {
         background-color: var(--background-2);
         border-radius: var(--border-radius-leaf);
@@ -14,3 +14,12 @@
         text-align: center;
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_error {
+        width: 100%;
+
+        margin-top: var(--margin-pane);
+        margin-bottom: var(--margin-pane);
+    }
+}

src/partials/_pane_main.scss

@@ -1,24 +1,17 @@
 @use "a_tailer";
 
 .pane_main {
-    flex: 1;
-    flex-direction: column;
-
     margin: var(--margin-pane);
 
-    justify-content: center;
+    > .body {
-
-    .main_body {
         background-color: var(--background-2);
         border-radius: var(--border-radius-leaf);
         padding: var(--spacing-horizontal);
 
-        .header {
+        > .header {
             text-align: center;
             padding: var(--spacing-horizontal);
-            width: min-content;
+            width: max-content;
-
-            white-space: nowrap;
 
             margin: 0 auto;
 
@@ -38,7 +31,7 @@
             }
         }
 
-        .body {
+        > .body {
             text-align: start;
 
             p {
@@ -47,3 +40,9 @@
         }
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_main {
+        width: 100%;
+    }
+}

src/partials/_pane_nav.scss

@@ -5,20 +5,25 @@
 
 .pane_nav {
     margin: var(--margin-pane);
-    padding: 0;
 
     width: min-content;
+    height: min-content;
 
     display: grid;
     grid-auto-flow: row;
-    grid-template-rows: auto auto auto 1fr max-content;
+    grid-template-rows: repeat(4, min-content);
     gap: var(--spacing-menu-gap);
     align-content: start;
 
     position: sticky;
     top: var(--margin-pane);
-    bottom: var(--margin-pane);
+    left: var(--margin-pane);
-    left: 0;
 
     color: var(--accent-pink);
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_nav {
+        width: 75%;
+    }
+}

src/partials/_pane_spacer.scss

@@ -1,20 +1,18 @@
 .pane_spacer {
-    margin: 0;
+    margin: var(--margin-pane);
-    padding: var(--margin-pane);
 
     width: min-content;
-    height: 100vh;
+    height: calc(100vh - calc(var(--margin-pane) * 2));
 
     display: grid;
-    grid-auto-flow: row;
+    grid-auto-flow: row dense;
     gap: var(--spacing-menu-gap);
 
     position: sticky;
-    top: 0;
+    top: var(--margin-pane);
-    right: 0;
+    right: var(--margin-pane);
 
     .spacer_container {
-        margin: 0;
         padding: var(--spacing-horizontal);
         background-color: var(--background-2);
         height: 100%;
@@ -31,3 +29,9 @@
         }
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_spacer {
+        width: 100%;
+    }
+}

src/resume.html

@@ -0,0 +1,557 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Resume | Cutieguwu</title>
+        <meta name="robots" content="noindex" />
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <div class="viewport">
+            <nav class="pane_nav">
+                <include src="includes/nav_logo.html" />
+                <include src="includes/nav_menu.html" />
+                <div class="location">
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">Resume</h5>
+                </div>
+                <include src="includes/nav_quick_links.html" />
+            </nav>
+            <div class="pane_main">
+                <div class="body">
+                    <div class="header">
+                        <h1 class="title">Olivia Brooks</h1>
+                        <p class="date">Last Edited: 08 August, 2025</p>
+                    </div>
+                    <div class="body">
+                        <div class="about_me">
+                            <p>
+                                Hello, I'm Olivia Brooks. I am a passionate, hard-working, and
+                                dependable individual with an inate interest in sharing and
+                                expanding my knowledge and expertise.
+                            </p>
+                            <p>
+                                I have extensive experience in both leadership and non-leadership
+                                positions across a variety of contexts. This has allowed me to
+                                develop a wide range of skills which I draw upon daily to rapidly
+                                develop new understandings. This additionally gives me the capacity
+                                to interact and excel in unfamiliar situations and novel endeavours.
+                            </p>
+                            <p>
+                                I am always willing to lend a hand where I can, no matter the
+                                learning curve ahead.
+                            </p>
+                            <p>
+                                For the better part of a decade, I've specced, built, identified and
+                                removed bottlenecks, and breathed new life into both desktops and
+                                laptops. I have experience with all major operating systems
+                                including Windows, Linux, MacOS, Android, and iOS. My experience
+                                includes interaction with hardware and software from a variety of
+                                vendors, architectures, and ecosystems, big and niche.
+                            </p>
+                            <p>
+                                I sincerely appreciate your consideration of me as a candidate, and
+                                look forward to hearing from you.
+                            </p>
+                        </div>
+                        <!--
+                        Add a table of contents?... or just one disguised as a few shortcuts.
+                        Also make this look less long by making chunks into dropdowns.
+                        -->
+                        <div class="layout_row">
+                            <div class="item work_history">
+                                <h2 class="title">Work History</h2>
+                                <div class="chunk_list">
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">OTHS Tech Crew</h3>
+                                                <span class="subtitle"
+                                                    >September 2024 - June 2025</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <div class="body">
+                                            <p>Project Manager</p>
+                                            <ul>
+                                                <li>
+                                                    First year that the crew was entirely
+                                                    student-led.
+                                                </li>
+                                                <li>Identified project scope and requirements.</li>
+                                                <li>Ensured timely completion of tasks.</li>
+                                                <li>
+                                                    Coordinated crew setup and take-down efforts.
+                                                </li>
+                                                <li>
+                                                    Effectively worked around live program changes
+                                                    and weather patterns.
+                                                </li>
+                                                <li>Additionally handled equipment maintenance.</li>
+                                                <li>Acted as administrative liason.</li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Farmers' Market</h3>
+                                                <span class="subtitle"
+                                                    >Wee Youngn' - 2020, Summer 2023</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <div class="body">
+                                            <p>Volunteer - Various Roles</p>
+                                            <ul>
+                                                <li>
+                                                    Started as a young child attracting customers to
+                                                    a fudge stall by looking cute with divine,
+                                                    glorious red hair.
+                                                </li>
+                                                <li>Handled the sale of goods.</li>
+                                                <li>
+                                                    Handled the preparation of farm-grown goods.
+                                                </li>
+                                                <li>Stocked the displays.</li>
+                                                <li>
+                                                    Ran the Kids' Corner activities. (Summer 2023)
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">MPS Audio-Visual Club</h3>
+                                                <span class="subtitle">September 2018 - 2020</span>
+                                            </div>
+                                        </div>
+                                        <div class="body">
+                                            <p>Supervisor</p>
+                                            <ul>
+                                                <li>Identified project scope and requirements.</li>
+                                                <li>Ensured timely completion of tasks.</li>
+                                                <li>
+                                                    Coordinated crew setup and take-down efforts.
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Education -->
+                            <div class="item education">
+                                <h2 class="title">Education</h2>
+                                <div class="chunk_list">
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Carleton University</h3>
+                                                <span class="subtitle"
+                                                    >September 2025 to Present - Ottawa, ON</span
+                                                >
+                                            </div>
+                                            <h3 class="status">IN PROGRESS</h3>
+                                        </div>
+                                        <div class="body">
+                                            <p>Bachelor of Arts (Honours)</p>
+                                            <ul>
+                                                <li>Major in Psychology</li>
+                                                <li>
+                                                    [Intended] Minor in Women's and Gender Studies
+                                                </li>
+                                                <li>
+                                                    Concentration in Social/Personality Psychology
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Osgoode Township High School</h3>
+                                                <span class="subtitle"
+                                                    >September 2021 to 2025 - Ottawa, ON</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <div class="body">
+                                            <p>Gr. 9 to Gr. 12</p>
+                                            <ul>
+                                                <li>French Immersion Studies</li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Air Cadets, Squadron 742</h3>
+                                                <span class="subtitle"
+                                                    >November 2019 to September 2022 - Ottawa,
+                                                    ON</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <div class="body">
+                                            <p>Sergeant</p>
+                                            <ul>
+                                                <li>Drone Pilot Training Course (August 2022)</li>
+                                                <li>Cadet Actitivy Program (August 2022)</li>
+                                                <li>Poppy Drive (November 2021)</li>
+                                                <li>Music (June - July 2021)</li>
+                                                <li>Music (March 2021)</li>
+                                                <li>Music (August 2020)</li>
+                                                <li>Web Programming (April 2020)</li>
+                                                <li>Advanced Cybertraining Course (August 2020)</li>
+                                                <li>
+                                                    Cadet Band Member (September 2020 - February
+                                                    2022)
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <h3 class="early_history">
+                                        Earlier history available by request.
+                                    </h3>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layout_row">
+                            <!-- Awards -->
+                            <div class="item awards">
+                                <h2 class="title">Awards</h2>
+                                <div class="chunk_list">
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Ontario Scholar</h3>
+                                                <span class="subtitle"
+                                                    >Obtained an average of at least eighty percent
+                                                    in any six applicable Grade 12 courses.</span
+                                                >
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Silver Medalist</h3>
+                                                <span class="subtitle">Average over 90%</span>
+                                            </div>
+                                            <h3 class="status">x2</h3>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Double Blue</h3>
+                                                <span class="subtitle">80% or Greater Average</span>
+                                            </div>
+                                            <h3 class="status">x4</h3>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Subject Awards</h3>
+                                                <span class="subtitle"
+                                                    >Greatest Achievement for the Academic
+                                                    Year</span
+                                                >
+                                            </div>
+                                            <h3 class="status">x4</h3>
+                                        </div>
+                                    </div>
+                                    <h3 class="early_history">
+                                        Queries about awards available by request.
+                                    </h3>
+                                </div>
+                            </div>
+                            <!-- Certifications -->
+                            <div class="item certifications">
+                                <h2 class="title">Certifications and Diplomas</h2>
+                                <div class="chunk_list">
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <h3 class="name">Ontario Secondary School Diploma</h3>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <h3 class="name">DELF</h3>
+                                            <h3 class="status">Niveau B2</h3>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <h3 class="name">Red Cross Swimming</h3>
+                                            <h3 class="status">Level 10</h3>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <h3 class="name">Canadian Firearms Safety Course</h3>
+                                            <h3 class="status">PAL</h3>
+                                        </div>
+                                    </div>
+                                    <h3 class="early_history">
+                                        Queries about certifications available by request.
+                                    </h3>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="layout_row software_row">
+                            <!-- Software and Prog. Languages -->
+                            <!-- Software -->
+                            <div class="item software">
+                                <h2 class="title">Software</h2>
+                                <div class="quick_links">
+                                    <a href="">
+                                        <ion-icon name="logo-android" class="android"></ion-icon>
+                                        <p>Android</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="globe-outline" class="anubis"></ion-icon>
+                                        <p>Anubis</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="cube-outline" class="blender"></ion-icon>
+                                        <p>Blender</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon
+                                            name="color-filter-outline"
+                                            class="davinci_resolve"
+                                        ></ion-icon>
+                                        <p>DaVinci Resolve</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-docker" class="docker"></ion-icon>
+                                        <p>Docker</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="image-outline" class="gimp"></ion-icon>
+                                        <p>GIMP</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="git-branch-outline" class="git"></ion-icon>
+                                        <p>Git</p>
+                                    </a>
+                                    <a href="https://gitea.cutieguwu.ca">
+                                        <ion-icon name="cafe-outline" class="gitea"></ion-icon>
+                                        <p>Gitea</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-github" class="github"></ion-icon>
+                                        <p>Github</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-apple" class="ios"></ion-icon>
+                                        <p>iOS</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon
+                                            name="document-outline"
+                                            class="libreoffice"
+                                        ></ion-icon>
+                                        <p>LibreOffice</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-tux" class="linux"></ion-icon>
+                                        <p>Linux</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-apple" class="macos"></ion-icon>
+                                        <p>MacOS</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="apps-outline" class="ms_office"></ion-icon>
+                                        <p>MS Office</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-windows" class="ms_windows"></ion-icon>
+                                        <p>MS Windows</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="musical-notes" class="musescore"></ion-icon>
+                                        <p>MuseScore</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="apps-outline" class="nextcloud"></ion-icon>
+                                        <p>Nextcloud</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="globe-outline" class="nginx"></ion-icon>
+                                        <p>Nginx</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="aperture-outline" class="obs"></ion-icon>
+                                        <p>OBS</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="image-outline" class="photoshop"></ion-icon>
+                                        <p>Photoshop</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon
+                                            name="film-outline"
+                                            class="premiere_pro"
+                                        ></ion-icon>
+                                        <p>Premiere Pro</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon
+                                            name="layers-outline"
+                                            class="prusaslicer"
+                                        ></ion-icon>
+                                        <p>PrusaSlicer</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon
+                                            name="keypad-outline"
+                                            class="shopbot_control_software"
+                                        ></ion-icon>
+                                        <p>ShopBot Control Software</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon
+                                            name="play-skip-forward-outline"
+                                            class="vectric_aspire"
+                                        ></ion-icon>
+                                        <p>Vectric Aspire</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon
+                                            name="document-attach-outline"
+                                            class="zotero"
+                                        ></ion-icon>
+                                        <p>Zotero</p>
+                                    </a>
+                                </div>
+                            </div>
+                            <!-- Prog. Languages -->
+                            <div class="item prog_languages">
+                                <h2 class="title">Prog. Languages</h2>
+                                <div class="quick_links">
+                                    <a href="">
+                                        <ion-icon
+                                            name="document-text-outline"
+                                            class="asciidoc"
+                                        ></ion-icon>
+                                        <p>AsciiDoc</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-css3" class="css"></ion-icon>
+                                        <p>CSS</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-docker" class="docker"></ion-icon>
+                                        <p>Docker Compose</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-html5" class="html"></ion-icon>
+                                        <p>HTML</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="shapes-outline" class="json"></ion-icon>
+                                        <p>JSON</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-markdown" class="markdown"></ion-icon>
+                                        <p>Markdown</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="globe-outline" class="nginx"></ion-icon>
+                                        <p>Nginx</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-python" class="python"></ion-icon>
+                                        <p>Python</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="shapes-outline" class="ron"></ion-icon>
+                                        <p>RON</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="cog-outline" class="rust"></ion-icon>
+                                        <p>Rust</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="logo-sass" class="scss"></ion-icon>
+                                        <p>SCSS</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="shapes-outline" class="toml"></ion-icon>
+                                        <p>TOML</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="terminal-outline" class="shell"></ion-icon>
+                                        <p>[Bash] Shell</p>
+                                    </a>
+                                    <a href="">
+                                        <ion-icon name="shapes-outline" class="yaml"></ion-icon>
+                                        <p>YAML</p>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <include src="includes/tailer.html" />
+            </div>
+            <div class="pane_spacer pane_details">
+                <div class="spacer_container spacer_contact">
+                    <h2>Contact Info</h2>
+                    <div class="chunk_list contact_info">
+                        <div class="chunk">
+                            <div class="header">
+                                <div>
+                                    <h3 class="name">
+                                        <a href="mailto:olivia.a.brooks77@gmail.com"> Email </a>
+                                    </h3>
+                                    <span class="subtitle">olivia.a.brooks77@gmail.com</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="spacer_container spacer_contact">
+                    <h2>Spoken Languages</h2>
+                    <div class="chunk_list contact_info">
+                        <div class="chunk">
+                            <div class="header">
+                                <div>
+                                    <h3 class="name">English</h3>
+                                    <span class="subtitle">Fluent</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="chunk">
+                            <div class="header">
+                                <div>
+                                    <h3 class="name">French</h3>
+                                    <span class="subtitle">DELF B2</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="spacer_container spacer_contact">
+                    <h2>References</h2>
+                    <div class="chunk_list contact_info">
+                        <div class="chunk">
+                            <div class="header">
+                                <div>
+                                    <h3 class="name">By Request</h3>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>