diff --git a/docs/index2.md b/docs/index2.md
deleted file mode 100644
index 5f33111..0000000
--- a/docs/index2.md
+++ /dev/null
@@ -1,196 +0,0 @@
----
-title: Gugulethu Hlekwayo
-description: "This is not the website you're looking for."
-hide:
-        - toc
-        - navigation
-        - footer
----
-
-<link href="https://api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700&family=Libre+Baskerville&display=swap" rel="stylesheet">
-
-<style>
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
-
-    header, nav {
-        display: none !important;
-    }
-
-    body {
-        background-color: white;
-        height: 100%;
-        font-family: 'Lato', sans-serif;
-        font-weight: bold;
-    }
-
-    .md-content .md-typeset h1 {
-        display: none;
-    }
-
-    footer {
-        display: none;
-    }
-
-    .container {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 3rem;
-        padding: 2rem;
-        height: 90vh;
-    }
-
-    .grid-item {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-    }
-
-    /* Left half - Image background */
-    .image-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-        max-width: 1276px;
-        max-height: 1276px;
-        background-color: rgba(255, 255, 255, 0.5);
-        transition: all 0.5s ease-in-out;
-        background-size: cover;
-        background-position: center;
-    }
-
-    .image-container::before,
-    .image-container::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        transition: opacity 0.5s ease-in-out;
-    }
-
-    .image-container:hover::before,
-    .image-container:hover::after {
-        opacity: 0;
-    }
-
-    /* Right half - Menu */
-    .menu-container {
-        padding: 2rem;
-        background-color: var(--md-default-bg-color);
-    }
-
-    .menu-list {
-        list-style: none !important;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        text-align: left;
-        padding-left: 0;
-        height: fit-content;
-    }
-
-    .menu-list li {
-        margin: 1.5rem 0;
-        transition: all 0.3s ease;
-        padding-bottom: 1rem;
-        border-bottom: 1px solid var(--md-primary-fg-color--light);
-    }
-
-     .menu-list .description {
-          font-family: 'Libre Baskerville', serif;
-          font-size: 0.7rem;
-          color: #666;
-          text-align: left;
-          margin-left: 1.5rem;
-     }
-
-     .menu-list li:last-child {
-          margin-bottom: 0;
-     }
-
-    .menu-list a {
-        text-decoration: none;
-        color: #333;
-        font-size: 1.2rem;
-        padding: 1rem;
-        display: block;
-    }
-
-    .menu-list a:hover {
-        color: #666;
-    }
-
-    /* Responsive design */
-    @media (max-width: 768px) {
-          .container {
-               grid-template-columns: 1fr;
-          }
-
-          .grid-item {
-               min-height: auto;
-               height: calc(100vh - 4rem);
-          }
-
-          .image-container {
-               max-width: none !important;
-               width: 95vw;
-          }
-
-        .menu-list .description {
-               display: none;
-          }
-    }
-</style>
-
-<div class="container">
-    <div class="grid-item image-container" style="background-image: url(src/gugulet.hu-unedited-face-1276x1276.webp)" ></div>
-
-    <div class="grid-item menu-container">
-          <ul class="menu-list">
-               <li data-image="unedited" >
-                    <a href="#">Resumé</a>
-                    <div class="description">View my professional summary and work experience.</div>
-               </li>
-               <li data-image="writing" >
-                    <a href="#">Writing</a>
-                    <div class="description">Explore my articles and creative writing pieces.</div>
-               </li>
-               <li data-image="technical" >
-                    <a href="#">Technical</a>
-                    <div class="description">Discover my coding projects and technical skills.</div>
-               </li>
-               <li data-image="visual" >
-                    <a href="#">Visual</a>
-                    <div class="description">Browse my photography and visual projects.</div>
-               </li>
-          </ul>
-    </div>
-</div>
-
-<script>
-    document.querySelectorAll('.menu-list li').forEach(item => {
-        const imageData = item.dataset.image;
-
-        item.addEventListener('mouseover', function() {
-            // Set the background image for the container
-            const container = document.querySelector('.image-container');
-            container.style.backgroundImage = `url('src/gugulet.hu-${imageData}-face-1276x1276.webp')`;
-
-            // Add a small delay to ensure the new image loads before applying transition
-            setTimeout(() => {
-                container.style.transition = 'background-image 0.5s ease-in-out';
-            }, 50);
-        });
-    });
-</script>
diff --git a/docs/index3.md b/docs/index3.md
deleted file mode 100644
index 48314f0..0000000
--- a/docs/index3.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: Gugulethu Hlekwayo
-description: "This is not the website you're looking for."
-hide:
-        - toc
-        - navigation
-        - footer
----
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const columns = document.querySelectorAll('.column');
-
-    columns.forEach(column => {
-        column.addEventListener('mouseover', function() {
-            // Remove background images from all other columns
-            columns.forEach(otherColumn => {
-                if (otherColumn !== this) {
-                    otherColumn.style.backgroundImage = 'none';
-                }
-            });
-
-            // Show content in other columns
-            const contents = document.querySelectorAll('.content');
-            contents.forEach(content => {
-                if (content.parentElement !== this) {
-                    content.style.opacity = '1';
-                    content.style.animation = 'fadeIn 0.3s ease-out forwards';
-                }
-            });
-        });
-
-        column.addEventListener('mouseout', function() {
-            // Reset styles when mouse leaves
-            columns.forEach(otherColumn => {
-                otherColumn.style.backgroundImage = otherColumn.dataset.originalBackground;
-            });
-
-            const contents = document.querySelectorAll('.content');
-            contents.forEach(content => {
-                content.style.opacity = '0';
-                content.style.animation = '';
-            });
-        });
-
-        // Store original background images
-        column.dataset.originalBackground = column.style.backgroundImage;
-    });
-});
-</script>
-
-<link href="https://api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
-
-<style>
-     @import url(src/stylesheets/index.css)
-</style>
-
-
-<div class="grid-container">
-        <div class="column" style="background-image: url('src/gugulet.hu-visual-face-1276x1276.webp')">
-               <div class="content">
-                    <div style="font-family: 'Lato', mono">a thousand words at a time</div>
-               </div>
-        </div>
-        <div class="column" style="background-image: url('src/gugulet.hu-writing-face-1276x1276.webp')">
-               <div class="content">
-                    <div style="font-family: 'Libre Baskerville', mono">words for humans</div>
-               </div>
-        </div>
-        <div class="column" style="background-image: url('src/gugulet.hu-technical-face-1276x1276.webp')">
-               <div class="content">
-                    <div style="font-family: 'DM Mono', mono">> console.log("words")</div>
-               </div>
-        </div>
-    </div>
diff --git a/docs/code-data.md b/docs/resume.md
similarity index 100%
rename from docs/code-data.md
rename to docs/resume.md
diff --git a/docs/src/gugulet.hu-technical-face-1276x425.png b/docs/src/gugulet.hu-technical-face-1276x425.png
deleted file mode 100644
index 6cd41c4..0000000
Binary files a/docs/src/gugulet.hu-technical-face-1276x425.png and /dev/null differ
diff --git a/docs/src/gugulet.hu-visual-face-1276x1276 copy.webp b/docs/src/gugulet.hu-visual-face-1276x1276 copy.webp
deleted file mode 100644
index 0c3d1bd..0000000
Binary files a/docs/src/gugulet.hu-visual-face-1276x1276 copy.webp and /dev/null differ
diff --git a/docs/src/gugulet.hu-visual-face-1276x425.png b/docs/src/gugulet.hu-visual-face-1276x425.png
deleted file mode 100644
index 4ea9b88..0000000
Binary files a/docs/src/gugulet.hu-visual-face-1276x425.png and /dev/null differ
diff --git a/docs/src/gugulet.hu-writing-face-1276x425.png b/docs/src/gugulet.hu-writing-face-1276x425.png
deleted file mode 100644
index c8086f1..0000000
Binary files a/docs/src/gugulet.hu-writing-face-1276x425.png and /dev/null differ
diff --git a/docs/src/stylesheets/index2.css b/docs/src/stylesheets/index2.css
deleted file mode 100644
index a11edd6..0000000
--- a/docs/src/stylesheets/index2.css
+++ /dev/null
@@ -1,104 +0,0 @@
-@import url(_colours.css);
-
-header,
-nav,
-footer,
-.md-content .md-typeset h1 {
-     display: none !important;
-}
-
-* {
-     margin: 0;
-     padding: 0;
-     box-sizing: border-box;
-}
-
-html {
-     min-height: 100vh;
-     width: 100%;
-}
-
-body {
-     background-color: white;
-     height: 100%;
-     font-family: 'Lato', sans-serif;
-     font-weight: bold;
-     margin: 0;
-     padding: 0;
-     box-sizing: border-box;
-}
-
-.md-grid {
-     max-width: 100vw;
-     margin: 0;
-     padding: 0;
-}
-
-.md-content__inner {
-     padding: 0;
-     margin: 0;
-}
-
-.grid-container {
-     display: grid;
-     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-     gap: 50px;
-     min-height: 95vh;
-     width: 100%;
-     padding: 0;
-}
-
-.column {
-     position: relative;
-     width: 100%;
-     height: auto;
-     background-size: contain;
-     background-repeat: no-repeat;
-     background-position: center center;
-     transition: all 0.3s ease;
-     opacity: 0.5;
-}
-
-.column:hover {
-     opacity: 1;
-     filter: invert(50%);
-}
-
-.content {
-     position: static;
-     top: 0;
-     left: 0;
-     width: 100%;
-     height: 100%;
-     opacity: 0;
-     transition: all 0.3s ease;
-     color: var(--md-primary-fg-color);
-     display: flex;
-     align-items: center;
-     justify-content: center;
-     text-align: center;
-     z-index: 1;
-}
-
-.column:hover .content {
-     opacity: 0;
-     animation: fadeIn 1s ease-out forwards;
-}
-
-@keyframes fadeIn {
-     from {
-          opacity: 0;
-     }
-
-     to {
-          opacity: 1;
-     }
-}
-
-div.content>div {
-     margin: 0;
-     font-size: 1.5em;
-     color: var(--md-primary-fg-color);
-     padding: 8px;
-     font-size: 1.5em;
-}
diff --git a/docs/technical.md b/docs/technical.md
new file mode 100644
index 0000000..e69de29
diff --git a/mkdocs.yml b/mkdocs.yml
index f5f8389..739bc14 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -91,8 +91,8 @@ nav:
      - Homepage: index.md
      - Writing: writing.md
      - Visual: visual.md
-     - Code and Data:
-          - code-data.md
+     - Technical:
+          - technical.md
           - Qself:
                - qself/qself.md
                - Getting started: qself/getting-started.md