diff --git a/.gitattributes b/.gitattributes
deleted file mode 100644
index a8fa35b..0000000
--- a/.gitattributes
+++ /dev/null
@@ -1,5 +0,0 @@
-**.pdf filter=lfs diff=lfs merge=lfs -text
-**.gif filter=lfs diff=lfs merge=lfs -text
-**.jpeg filter=lfs diff=lfs merge=lfs -text
-**.jpg filter=lfs diff=lfs merge=lfs -text
-**.png filter=lfs diff=lfs merge=lfs -text
diff --git a/docs/code-data.md b/docs/code-data.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/index2.md b/docs/index2.md
new file mode 100644
index 0000000..5f33111
--- /dev/null
+++ b/docs/index2.md
@@ -0,0 +1,196 @@
+---
+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
new file mode 100644
index 0000000..48314f0
--- /dev/null
+++ b/docs/index3.md
@@ -0,0 +1,75 @@
+---
+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/src/gugulet.hu-technical-face-1276x425.png b/docs/src/gugulet.hu-technical-face-1276x425.png
new file mode 100644
index 0000000..6cd41c4
Binary files /dev/null and b/docs/src/gugulet.hu-technical-face-1276x425.png differ
diff --git a/docs/src/gugulet.hu-visual-face-1276x1276 copy.webp b/docs/src/gugulet.hu-visual-face-1276x1276 copy.webp
new file mode 100644
index 0000000..0c3d1bd
Binary files /dev/null and b/docs/src/gugulet.hu-visual-face-1276x1276 copy.webp differ
diff --git a/docs/src/gugulet.hu-visual-face-1276x425.png b/docs/src/gugulet.hu-visual-face-1276x425.png
new file mode 100644
index 0000000..4ea9b88
Binary files /dev/null and b/docs/src/gugulet.hu-visual-face-1276x425.png differ
diff --git a/docs/src/gugulet.hu-writing-face-1276x425.png b/docs/src/gugulet.hu-writing-face-1276x425.png
new file mode 100644
index 0000000..c8086f1
Binary files /dev/null and b/docs/src/gugulet.hu-writing-face-1276x425.png differ
diff --git a/docs/src/js/index-text.js b/docs/src/js/index-text.js
new file mode 100644
index 0000000..ce53e22
--- /dev/null
+++ b/docs/src/js/index-text.js
@@ -0,0 +1,11 @@
+document.getElementById('visual-hover').onmouseover = function () {
+     document.getElementById('hover-text').innerHTML = "a thousand words at a time";
+};
+
+document.getElementById('technical-hover').onmouseover = function () {
+     document.getElementById('hover-text').innerHTML = "in zeroes, ones, and other numbers";
+};
+
+document.getElementById('writing-hover').onmouseover = function () {
+     document.getElementById('hover-text').innerHTML = "letter by letter, word by word";
+};
diff --git a/docs/src/stylesheets/index.css b/docs/src/stylesheets/index.css
new file mode 100644
index 0000000..99fc32f
--- /dev/null
+++ b/docs/src/stylesheets/index.css
@@ -0,0 +1,213 @@
+@import url(_colours.css);
+@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");
+
+header,
+nav,
+footer,
+.md-content .md-typeset h1 {
+     display: none !important;
+}
+
+article,
+.md-container {
+     min-height: 100vh;
+     width: 100%;
+     margin: 0;
+     padding: 0;
+}
+
+.md-content__inner,
+.md-main__inner,
+.md-grid,
+html,
+body,
+* {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+}
+
+.md-grid {
+     max-width: none;
+}
+
+/* This was creating an annoying space at the top */
+article.md-content__inner.md-typeset:before,
+article.md-content__inner.md-typeset:after {
+     content: none;
+}
+
+body {
+     min-height: 100vh;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     background-color: white;
+     width: 100%;
+}
+
+.container {
+     width: 100%;
+     height: 100%;
+}
+
+.columns {
+     display: flex;
+     justify-content: space-between;
+     width: 100%;
+     height: 50vh;
+}
+
+.top-row {
+     flex: 1;
+     min-width: 100vw;
+     height: 50vh;
+     display: flex;
+     flex-direction: row;
+     justify-content: center;
+     padding: 5em;
+     font-family: 'Libre Baskerville', serif;
+}
+
+.top-row h2 {
+     margin-bottom: 0.1em;
+     font-size: 5vw;
+     font-weight: 900;
+     overflow: hidden;
+     border-right: .15em solid #818589;
+     white-space: nowrap;
+     letter-spacing: .05em;
+     animation:
+          typing 5s steps(40, end) forwards 2s,
+          blink-caret 0.75s step-end infinite;
+}
+
+@keyframes typing {
+     from {
+          width: 0
+     }
+
+     to {
+          width: 100%
+     }
+}
+
+@keyframes blink-caret {
+
+     from,
+     to {
+          border-color: transparent;
+     }
+
+     50% {
+          border-color: #818589;
+     }
+}
+
+.top-row p {
+     font-size: 3vw;
+     color: #818589;
+}
+
+.top-row * {
+     text-align: left;
+}
+
+/* Image Container Styling */
+.image-container {
+     width: 100%;
+     height: 33.33vh;
+     position: relative;
+     overflow: hidden;
+}
+
+.image-container:hover {
+     filter: invert(50%);
+}
+
+.image-container img {
+     width: 100%;
+     height: 100%;
+     object-fit: contain;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+     .columns {
+          flex-direction: column;
+     }
+}
+
+#loader {
+     position: fixed;
+     top: 0;
+     left: 0;
+     width: 100vw;
+     height: 100vh;
+     background-color: #EFE5DC;
+     display: flex !important;
+     justify-content: center;
+     align-items: center;
+     z-index: 9998;
+     transition: opacity 1s ease-out, transform 0.5s ease-out;
+}
+
+#loader.fade-out {
+     opacity: 0;
+     transform: scale(1.1);
+}
+
+#loader img {
+     width: 50px;
+     height: 50px;
+
+}
+
+@keyframes spin {
+     from {
+          transform: rotate(0deg);
+     }
+
+     to {
+          transform: rotate(360deg);
+     }
+}
+
+#loading-text {
+     font-family: Arial, sans-serif;
+     font-size: 24px;
+     color: black;
+     /* Change text color if needed */
+     animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes pulse {
+     0% {
+          opacity: 1;
+     }
+
+     50% {
+          opacity: 0.5;
+     }
+
+     100% {
+          opacity: 1;
+     }
+}
+
+/* Add fade-out animation */
+@keyframes fadeOut {
+     from {
+          opacity: 1;
+          transform: scale(1);
+     }
+
+     to {
+          opacity: 0;
+          transform: scale(1.1);
+     }
+}
+
+.fade-out {
+     animation: fadeOut 1s ease-out forwards;
+}
diff --git a/docs/src/stylesheets/index2.css b/docs/src/stylesheets/index2.css
new file mode 100644
index 0000000..a11edd6
--- /dev/null
+++ b/docs/src/stylesheets/index2.css
@@ -0,0 +1,104 @@
+@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;
+}