diff --git a/bun.lockb b/bun.lockb
index 6eb586f..a70abef 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 9e6b928..3c980ee 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --host --logLevel info --clearScreen --debug",
+    "dev": "bunx --bun vite --host --logLevel info --clearScreen --debug",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
@@ -18,27 +18,29 @@
     "consola": "^3.2.3",
     "devicon": "^2.16.0",
     "i": "^0.3.7",
-    "pinia": "^2.1.7",
+    "pinia": "^2.2.0",
     "sass": "^1.77.8",
     "sass-embedded": "^1.77.8",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue": "^3.4.35",
+    "vue-router": "^4.4.2"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.8.0",
+    "@rushstack/eslint-patch": "^1.10.4",
     "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.12.5",
+    "@types/node": "^20.14.14",
     "@types/bun": "latest",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.23.0",
-    "npm-run-all2": "^6.1.2",
-    "typescript": "~5.4.0",
-    "vite": "^5.2.8",
-    "vite-plugin-vue-devtools": "^7.0.25",
-    "vue-tsc": "^2.0.11"
+    "eslint-plugin-vue": "^9.27.0",
+    "npm-run-all2": "^6.2.2",
+    "vite": "^5.3.5",
+    "vite-plugin-vue-devtools": "^7.3.7",
+    "vue-tsc": "^2.0.29"
+  },
+  "peerDependencies": {
+    "typescript": "~5.4.5"
   }
 }
diff --git a/src/assets/stylesheets/sense.css b/src/assets/stylesheets/sense.css
new file mode 100644
index 0000000..e554d48
--- /dev/null
+++ b/src/assets/stylesheets/sense.css
@@ -0,0 +1,6 @@
+/* title case all headers */
+h1, h2, h3, h4, h5, h6 {
+    text-transform: capitalize;
+    /* small caps */
+    font-variant: small-caps;
+}
\ No newline at end of file
diff --git a/src/components/DevIcon.vue b/src/components/DevIcon.vue
index 1bc4ddb..2ca8043 100644
--- a/src/components/DevIcon.vue
+++ b/src/components/DevIcon.vue
@@ -16,7 +16,7 @@ i {
 </style>
 
 <script setup lang="ts">
-import { hasWordmark, type Design, type DeviconProps } from "@/types/devicon";
+import { hasWordmark, type Design, type DeviconProps } from "@/types/devIcon";
 import consola from "consola";
 import deviconJson from "devicon/devicon.json";
 import { computed } from "vue";
@@ -26,7 +26,7 @@ import { computed } from "vue";
 const props = withDefaults(defineProps<DeviconProps>(),
     {
         design: 'plain',
-        size: 3
+        size: 3,
     });
 
 const iconClass = computed(() => {
diff --git a/src/components/TheFoot.vue b/src/components/TheFoot.vue
index 337b299..8545e98 100644
--- a/src/components/TheFoot.vue
+++ b/src/components/TheFoot.vue
@@ -1,33 +1,72 @@
 <template>
     <teleport to="body" :disabled="teleport" ref="teleportRef">
-        <footer v-bind="$attrs" class="footer  has-text-centered has-background-inherit">
+        <footer v-bind="$attrs"
+            class="footer flex is-flex-direction-column justify-content-center has-text-centered has-background-inherit">
             <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/18acd8f58d49b551eb8cc0ff035a006d605c9905/assets/footers/ext_black_monochromatic.svg"
-                    alt="logo"  :width="width" decoding="auto" loading="lazy" />
-            <small class="font-italic">insert obligatory mort quote here</small>
+                alt="logo" :width="width" decoding="auto" loading="lazy" />
+            <small class="font-italic" title="get it cuz... heh heh, it's the footer😆    .. oh nvm">insert obligatory
+                mort quote here</small>
 
             <section class="section">
-                <h2 class="subtitle is-7">Acknowledgements</h2>
-                <ul>
-                    <li>Icons from <a href="https://feathericons.com/">feathericons.com</a></li>
-                    <li><a href="https://bulma.io">Bulma</a></li>
-                    <li><a href="https://vuejs.org">Vue</a></li>
-                    <li><a href="https://catppuccin.com">Catppuccin</a></li>
+                <h2 class="subtitle is-7">Acknowledgements, Thx, Credits</h2>
+                <ul class="is-flex is-flex-direction-row is-gap-3 is-justify-content-space-around">
+                    <li title="bulma"><a href="https://bulma.io"><img
+                                :src="`https://bulma.io/assets/brand/Bulma%20Logo${colour && '%20'.concat(colour)}.svg`"
+                                alt="bulma logo" loading="lazy">
+                        </a>
+                    </li>
+                    <li title="vue"><a href="https://vuejs.org">
+                        <img srcset="https://github.com/vuejs/art/blob/master/vue-badge-outlined.svg?raw=true, https://vuejs.org/images/logo.png" width="100" alt="vue logo" loading="lazy" />
+                    </a></li>
+                    <li title="catppuccin"><a href="https://catppuccin.com">
+                        <img srcset="https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/1544x1544_circle.png?raw=true" width="100" alt="catppuccin logo" loading="lazy" />
+                    </a></li>
                 </ul>
             </section>
+
+            <!-- <figure class="image is-16by9">
+                <img class="is-rounded" :src="mort" alt="mort" loading="eager" />
+            </figure> -->
+
         </footer>
     </teleport>
 </template>
 
 <style scoped>
-	/*place footer at the bottom always*/
-	footer {
-		margin-top: auto;
-	}
+
+    /*place footer at the bottom always*/
+    /* footer::before {
+        content: "";
+        display: flex;
+        position: absolute;
+        width: 100%;
+        min-height: 55%;
+        max-height: max-content;
+        align-self: auto;
+        height: 100%;
+        flex-grow: 1;
+
+        left: 0;
+
+        opacity: 0.25;
+
+        background-image: v-bind("mort");
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+        background-clip: border-box;
+    } */
+
+    figure {
+        width: 12em
+    }
 </style>
 
 <script setup lang="ts">
+    import { PuccinTheme } from "@/types/helper";
+    import { useColorMode } from "@vueuse/core";
     import consola from "consola";
-    import {ref, type Teleport, type TeleportProps, watch} from "vue";
+    import { computed, ref, type Teleport, type TeleportProps, watch } from "vue";
 
     // const teleportRef = ref<InstanceType<typeof Teleport> | null>(null);
     const teleport = ref(true);
@@ -35,5 +74,26 @@
         // teleport.value = true
     });
 
+    const colour = computed(() => {
+        const theme = useColorMode({ modes: PuccinTheme }).value
+        switch (theme) {
+            case PuccinTheme.latte:
+            case 'light':
+                return 'Black';
+            case PuccinTheme.mocha:
+            case 'dark':
+                return 'White';
+            default:
+                return null;
+        }
+    });
     const width = ref(window.innerWidth)
+
+    const mort = computed(() => 'url(' +
+        [
+            // 'https://static.wikia.nocookie.net/penguinsofmadagascar/images/f/f8/Ahkjmort.png/revision/latest?cb=20190727144938',
+            'https://64.media.tumblr.com/dbcf458d4e48c956fa405194144a40b8/tumblr_omtcvafd8g1qmzwx0o1_640.gif',
+            'https://media.giphy.com/media/l2RnsEqcQ0Cveecfu/giphy.gif'
+        ].sort(() => Math.random() - 0.5).pop() + ')'
+    );
 </script>
diff --git a/src/components/TheNav.vue b/src/components/TheNav.vue
index d230a47..07d8890 100644
--- a/src/components/TheNav.vue
+++ b/src/components/TheNav.vue
@@ -2,9 +2,8 @@
     <nav class="navbar is-spaced -has-shadow" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
             <a class="navbar-item" title="you know the sh*t">✝️👽🧠🖤</a>
-            <button ref="hamburgerRef" @click.stop.prevent="toggleHamburger" class="navbar-burger"
-                    aria-label="menu"
-                    aria-expanded="false">
+            <button ref="hamburgerRef" @click.stop.prevent="toggleHamburger" class="navbar-burger" aria-label="menu"
+                aria-expanded="false">
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
@@ -22,8 +21,8 @@
 
         <div class="navbar-end">
             <div class="navbar-item">
-                <img @click="toggleTheme" :src="themeIcons[colourTheme]" alt="theme icon" decoding="auto"
-                        loading="lazy" />
+                <img @click="toggleTheme" :src="themeIcons.getTheme(colourTheme)" alt="theme icon" decoding="auto"
+                    loading="lazy" />
             </div>
         </div>
 
@@ -31,38 +30,38 @@
 </template>
 
 <script setup lang="ts">
-    import {useRouter} from "vue-router";
-    import {ref,} from "vue";
-    import {PuccinTheme} from "@/types/helper";
-    import {useColorMode, usePreferredDark} from "@vueuse/core";
-    import consola from "consola";
+    import { useRouter } from "vue-router";
+    import { ref, } from "vue";
+    import { PuccinTheme } from "@/types/helper";
+    import { useColorMode, usePreferredDark } from "@vueuse/core";
 
     const router = useRouter();
     const routes = router.getRoutes();
     const navMenuRef = ref<HTMLDivElement | null>(null);
     const hamburgerRef = ref<HTMLDivElement | null>(null);
 
-    function toggleHamburger(event: Event) {
+    function toggleHamburger() {
         navMenuRef.value?.classList.toggle("is-active");
-        if(hamburgerRef.value)
+        if (hamburgerRef.value)
             hamburgerRef.value.ariaExpanded = String(hamburgerRef.value.classList.toggle("is-active"));
     }
 
     const themeIcons = {
         [PuccinTheme.latte]: "https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/latte_squircle.png?raw=true",// 'https://github.com/catppuccin/catppuccin/blob/18acd8f58d49b551eb8cc0ff035a006d605c9905/assets/logos/exports/latte_squircle.png?raw=true',
-        [PuccinTheme.mocha]: "https://github.com/catppuccin/catppuccin/blob/18acd8f58d49b551eb8cc0ff035a006d605c9905/assets/logos/exports/macchiato_squircle.png?raw=true"
+        [PuccinTheme.mocha]: "https://github.com/catppuccin/catppuccin/blob/18acd8f58d49b551eb8cc0ff035a006d605c9905/assets/logos/exports/macchiato_squircle.png?raw=true",
+        getTheme(theme: any) {
+            if (Object.keys(PuccinTheme).includes(theme))
+                return this[theme as PuccinTheme];
+            return this.latte;
+        }
     };
     const colourTheme = useColorMode({
         attribute: "data-theme",
-        modes: {
-            [PuccinTheme.latte]: PuccinTheme.latte,
-            [PuccinTheme.mocha]: PuccinTheme.mocha
-        }
+        modes: PuccinTheme
     });
 
     function toggleTheme() {
         colourTheme.value = colourTheme.value === PuccinTheme.latte ? PuccinTheme.mocha : PuccinTheme.latte;
-        consola.log(colourTheme.value);
     }
 
     colourTheme.value = usePreferredDark() ? PuccinTheme.mocha : PuccinTheme.latte;
diff --git a/src/main.ts b/src/main.ts
index 0c5c671..24facd5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 
 import './assets/cat.scss'
+import './assets/stylesheets/sense.css'
 
 const app = createApp(App)
 
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 873fd36..2f571c5 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -2,55 +2,39 @@
     <TheWelcome />
     <ProjectsView />
 
-    <section class="section">
-        <h2 class="title is-2">Languages</h2>
-        <small>some programming languages I know and have used over the years (in no particular order(●'◡'●)</small>
-        <ul
-            class="is-flex is-justify-content-center is-flex-wrap-wrap is-flex-direction-row is-align-content-space-around">
-            <li v-for="lang in languages" :key="lang">
-                <dev-icon :size="5" :icon="lang" fallback="no-text" :wordmark="randomBool()" :design="randomDesign()"
-                    coloured :title="lang" />
-            </li>
-        </ul>
-    </section>
-
-    <section class="section">
-        <h2 class="title is-2">Tools</h2>
-        <small>a list of tools I've gotten familiar with that help soooo much in development, cuz why sweat the small
-            stuff</small>
-        <ul
-            class="is-flex is-justify-content-center is-flex-wrap-wrap is-flex-direction-row is-align-content-space-around">
-            <li v-for="tool in tools" :key="tool">
-                <dev-icon :size="5" :design="randomDesign()" :wordmark="randomBool()" fallback="no-text" :icon="tool"
-                    :title="tool" coloured />
-            </li>
-        </ul>
-    </section>
+    <IconListSection v-for="section in sections" :key="section.title" v-bind="section" />
 
     <section class="section">
-        <h2 class="title is-2">Frameworks</h2>
-        <small>yep, not quite a frameworker but these libraries and frameworks have made projects easier; I like wheels
-            but I try not to reinvent them ;-)</small>
-        <ul
-            class="is-flex is-justify-content-center is-flex-wrap-wrap is-flex-direction-row is-align-content-space-around">
-            <li v-for="framework in frameworks" :key="framework">
-                <dev-icon :design="randomDesign()" :wordmark="randomBool()" :size=5 fallback="no-text"
-                    :title="framework" :icon="framework" coloured />
+        <h2 class="title is-2">Schooling🎓</h2>
+        <ol>
+            <li>
+                <h3 class="title is-3">Lakehead University & Georgian College</h3>
+                <p class="subtitle is-3">Computer Science & Computer Programming</p>
+                <p>Honours bachelor's (BsC) of Science</p>
+                <time datetime="2020-2024">2020 - 2024</time>
+                <p></p>
             </li>
-        </ul>
+        </ol>
     </section>
 </template>
 
-<style scoped></style>
+<style scoped>
+    ol {
+        list-style-type: none;
+        padding-left: 0;
+
+    }
+</style>
 
 <script setup lang="ts">
     import consola from "consola";
     import TheWelcome from "../components/TheWelcome.vue";
     import DevIcon from "@/components/DevIcon.vue";
-    import { getDesigns, type Design } from "@/types/devicon";
+    import { getDesigns, type Design } from "@/types/devIcon";
     import ProjectsView from "@/views/ProjectsView.vue";
+    import IconListSection from "@/views/IconListSection.vue";
+    import type { IconListSectionProps } from "@/types/iconListSection";
 
-    const randomBool = () => Math.random() > 0.5;
     const languages = [
         "vuejs",
         "react",
@@ -115,9 +99,18 @@
         "nuxtjs"
     ].sort(() => Math.random() - 0.5);
 
-    const randomDesign = () => {
+
+    const randomBool = () => Math.random() > 0.5;
+    const iconStyle = (): IconListSectionProps['iconStyle'] => ({ design: randomDesign(), wordmark: randomBool(), coloured: true, fallback: 'no-text', size: 7 });
+    const sections: IconListSectionProps[] = [
+        { title: 'Languages', blurb: "some programming languages I know and have used over the years (in no particular order(●'◡'●)", icons: languages, iconStyle: iconStyle() },
+        { title: 'Tools', blurb: "a list of tools I've gotten familiar with that help soooo much in development, cuz why sweat the small stuff", icons: tools, iconStyle: iconStyle() },
+        { title: 'frameworks', blurb: "yep, not quite a frameworker but these libraries and frameworks have made projects easier; I like wheels but I try not to reinvent them ;-)", icons: frameworks, iconStyle: iconStyle() }
+    ];
+
+    function randomDesign() {
         const designs = getDesigns();
         return designs[Math.floor(Math.random() * designs.length)];
-    };
+    }
 
 </script>
\ No newline at end of file
diff --git a/src/types/iconListSection.ts b/src/types/iconListSection.ts
new file mode 100644
index 0000000..7dd5f1a
--- /dev/null
+++ b/src/types/iconListSection.ts
@@ -0,0 +1,9 @@
+import type { DeviconProps } from "./devIcon"
+
+export type IconListSectionProps = {
+    icons: string[]
+    iconStyle: Omit<DeviconProps, "icon">
+    title: string
+    blurb?: string | undefined
+    description?: string | undefined
+}
\ No newline at end of file
diff --git a/src/views/IconListSection.vue b/src/views/IconListSection.vue
new file mode 100644
index 0000000..b2b2573
--- /dev/null
+++ b/src/views/IconListSection.vue
@@ -0,0 +1,33 @@
+<template>
+    <section class="section">
+        <h2 class="title is-2">{{ title }}</h2>
+        <p>{{ description }}</p>
+        <small>{{ blurb }}</small>
+        <ul
+            class="is-flex is-justify-content-center is-flex-wrap-wrap is-flex-direction-row is-align-content-space-around">
+            <li v-for="icon in icons" :key="icon">
+                <dev-icon :size="5" :icon="icon" v-bind="iconStyle" :title="icon" />
+            </li>
+        </ul>
+    </section>
+</template>
+
+
+<script setup lang="ts">
+    import type { IconListSectionProps } from '@/types/iconListSection';
+    import { defineProps, withDefaults } from 'vue';
+
+    import DevIcon from '@/components/DevIcon.vue';
+
+
+    const props = withDefaults(defineProps<IconListSectionProps>(),
+        {
+            iconStyle: {
+                size: 12,
+                coloured: true,
+                wordmark: true,
+                design: 'plain',
+                fallback: 'no-text'
+            }
+        });
+</script>
\ No newline at end of file