diff --git a/src/assets/resumer.json b/src/assets/resumer.json
new file mode 100644
index 0000000..c181c5a
--- /dev/null
+++ b/src/assets/resumer.json
@@ -0,0 +1 @@
+{"basics":{"name":"Christofer Cousins","label":null,"image":null,"email":"cschristofer@gmail.com","phone":"\u002B1 (647)-631-3282","location":{"address":"Ontario, Canada","postalCode":null,"city":null,"countryCode":null,"region":null},"summary":"I am an honest and ambitious computer scientist and programmer. I am an excellent collaborator and also work well alone. I go above and beyond to learn, understand, and apply new concepts and search for solutions to implement the desired goal.","profiles":[]},"work":[{"name":"Afghan Network of Social Services","position":"Database Developer","url":null,"startDate":"2024-06-10","endDate":"2024-08-10","highlights":["Support overall data management and administration capabilities in the organization, design and implement data collection, storage, and reporting","Developing and deploying customized applications using Microsoft platforms, incorporating database and application solutions","Managing infrastructure on Microsoft platforms, ensuring optimal performance and security","Implement security measures within databases and infrastructure, ensuring compliance with industry standards and best practices","Optimize and improve database performance through indexing, query optimization, and other Microsoft SQL Server tools","Effectively collaborate with cross-functional teams, utilizing Microsoft platforms for seamless communication and project management","Actively engaged in staying updated with Microsoft\u0027s Intelligent Data Platform advancements and incorporating relevant technologies into database development","Thorough documentation of database architecture, processes, and configurations to facilitate knowledge transfer and maintain a robust knowledge base"]},{"name":"Smart Moves Play Place","position":"System Developer","url":null,"startDate":"2022-10-13","endDate":"2022-11-07","highlights":["Migrated existing bookings to the new system","Created YouCanBookMe page for party room bookings","Consulted and worked with clients to meet their dynamic expectations","Reported to client on development progress and next steps"]},{"name":"Ontario Public Service","position":"Assistant Web Developer","url":null,"startDate":"2022-05-16","endDate":"2022-09-01","highlights":["Use content management systems and/or coding to refresh and update web sites","Support the development of electronic communications","Plan, organize, coordinate, and manage daily assigned work","Organized, managed and led a team project to revamp the branch website","Present, edited, and created reports and projects","Created working alpha solutions for their proposed site"]}],"volunteer":[],"education":[{"institution":"Lakehead University \u0026 Georgian College","url":null,"area":"Computer Science \u0026 Computer Programming","studyType":"Honours Bachelor","startDate":"2020-09-01","endDate":"2024-05-01","score":"","courses":null}],"awards":[],"certificates":[],"publications":[],"skills":[{"name":"C","level":null,"keywords":null},{"name":"C#","level":null,"keywords":null},{"name":"Kotlin","level":null,"keywords":null},{"name":"HTML","level":null,"keywords":null},{"name":"Office 365","level":null,"keywords":null},{"name":"git","level":null,"keywords":null},{"name":"bash","level":null,"keywords":null},{"name":"powershell","level":null,"keywords":null},{"name":"javascript","level":null,"keywords":null},{"name":"css/sass/scss","level":null,"keywords":null},{"name":"typescript","level":null,"keywords":null},{"name":"dart","level":null,"keywords":null},{"name":"java","level":null,"keywords":null},{"name":"Angular.js","level":null,"keywords":null},{"name":"c\u002B\u002B","level":null,"keywords":null},{"name":"MongoDB","level":null,"keywords":null},{"name":"Mobile App Development","level":null,"keywords":null},{"name":"Flutter","level":null,"keywords":null},{"name":"Web Development","level":null,"keywords":null},{"name":"Desktop Development","level":null,"keywords":null},{"name":"Visual Basic .Net","level":null,"keywords":null},{"name":"XML","level":null,"keywords":null},{"name":"VueJs","level":null,"keywords":null},{"name":"Google Workspace","level":null,"keywords":null},{"name":"Docker","level":null,"keywords":null},{"name":"PHP","level":null,"keywords":null},{"name":"UX Design","level":null,"keywords":null},{"name":"Customer Service","level":null,"keywords":null},{"name":"ASP/.NET","level":null,"keywords":null},{"name":"Team Management","level":null,"keywords":null},{"name":"MySQL","level":null,"keywords":null},{"name":"Microsoft SQL Server","level":null,"keywords":null}],"languages":[{"language":"English","fluency":null},{"language":"Fran\u00E7ais","fluency":null}],"interests":[{"name":"reading","keywords":null},{"name":"learning","keywords":null},{"name":"coding","keywords":null},{"name":"philosophy","keywords":null},{"name":"tv \u0026 movies","keywords":null},{"name":"video games","keywords":null},{"name":"health","keywords":null}],"references":[],"projects":[{"name":"Vuebulma","startDate":"2022-09-06","endDate":null,"description":"bulma css framework components for vue.js","highlights":["Created Bulma components, layouts, and elements as Vue components","Tested each component to be rendered as made by Bulma","Created and maintained documentation and a website on how to use the package","Distributed library package on npm and saved codebase on GitHub"],"url":"https://www.npmjs.com/package/@csc530/vuebulma"},{"name":"Resumer","startDate":"2023-09-12","endDate":null,"description":"Command Line Resume Builder","highlights":["Created a CLI for users to add, edit, and delete resume details using Spectre.Console framework","Persist user data using dotnet entity framework in a sqlite database","Extend app functionality to work with Typst to allow for svg, pdf, and png exports"],"url":"https://github.com/csc530/resumer"}]}
\ No newline at end of file
diff --git a/src/components/IconListSection.vue b/src/components/IconListSection.vue
new file mode 100644
index 0000000..71d9e58
--- /dev/null
+++ b/src/components/IconListSection.vue
@@ -0,0 +1,35 @@
+<template>
+    <section class="section">
+        <h2 class="title is-2">{{ title }}</h2>
+        <p>{{ description }}</p>
+        <small>{{ blurb }}</small>
+        <ul
+            class="section 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" class="p-2">
+                <dev-icon :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';
+
+
+    withDefaults(defineProps<IconListSectionProps>(),
+        {
+            iconStyle() {
+                return {
+                    size: Number(document.body.style.fontSize) / 2  || 5,
+                    coloured: true,
+                    wordmark: true,
+                    design: 'plain',
+                    fallback: 'no-text'
+                }
+            }
+        });
+</script>
\ No newline at end of file
diff --git a/src/components/TheFoot.vue b/src/components/TheFoot.vue
index d6b3514..aaed22f 100644
--- a/src/components/TheFoot.vue
+++ b/src/components/TheFoot.vue
@@ -4,8 +4,12 @@
             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" title="get it cuz... heh heh, it's the footer😆    .. oh nvm">insert obligatory
-                mort quote here</small>
+
+            <p>Want to contact me?
+                <br>
+                <a :href="`mailto:${email}?subject=Hello...`">Send me an e-mail <i class="fas fa-envelope"></i></a>
+            </p>
+
             <section class="section">
                 <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">
@@ -24,7 +28,8 @@
                     </li>
                     <li title="catppuccin" class="image is-128x128">
                         <a href="https://catppuccin.com">
-                            <img class="is-rounded" src="https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/1544x1544_circle.png?raw=true"
+                            <img class="is-rounded"
+                                src="https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/1544x1544_circle.png?raw=true"
                                 alt="catppuccin" loading="lazy" />
                         </a>
                     </li>
@@ -99,6 +104,7 @@
     watch([], () => {
         // teleport.value = true
     });
+    const email = 'csc530+mywebsite@vivaldi.net'
 
     const theme = useColorMode({ modes: PuccinTheme });
     const colour = computed(() => {
diff --git a/src/components/WorkCard.vue b/src/components/WorkCard.vue
new file mode 100644
index 0000000..4d52363
--- /dev/null
+++ b/src/components/WorkCard.vue
@@ -0,0 +1,43 @@
+<template lang="html">
+    <div class="card is-flex is-flex-direction-column">
+        <header class="card-header is-flex-shrink-1">
+            <p class="card-header-title">
+                <a v-if="job.url" :href="job.url" target="_blank">
+                    {{ job.position }} @ {{ job.name }}
+                </a>
+                <template v-else>
+                    {{ job.position }} @ {{ job.name }}
+                </template>
+            </p>
+            <!-- <button class="card-header-icon" aria-label="more options">
+                <span class="icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                </span>
+            </button> -->
+        </header>
+        <section class="card-content is-flex-grow-1">
+            <div class="content">
+                <ul>
+                    <li v-for="item in job.highlights" :key="item">{{ item }}</li>
+                </ul>
+            </div>
+        </section>
+        <footer class="card-footer is-flex-shrink-1">
+            <time class="card-footer-item"
+                :datetime="new Date(job.startDate).toISOString()">{{ new Date(job.startDate).toLocaleDateString() }}</time>
+            <time class="card-footer-item"
+                :datetime="new Date(job.endDate).toISOString()">{{ new Date(job.endDate).toLocaleDateString() ?? 'Present' }}</time>
+        </footer>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import type { WorkCardProps } from '@/types/workCard';
+    import { defineProps, useAttrs } from 'vue';
+
+    const props = defineProps<WorkCardProps>();
+    // merge props with attrs
+    const attrs = useAttrs();
+
+    const job: typeof import('@/assets/resumer.json').work[number] = Object.assign({}, props, attrs);
+</script>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 103e443..cb231cf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,7 +6,6 @@ import router from './router'
 
 import './assets/cat.scss'
 import './assets/stylesheets/sense.css'
-import 'devicon/devicon.min.css'
 
 import { inject } from '@vercel/analytics';
 
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 90b15d7..d61b738 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -1,7 +1,9 @@
 <template>
     <TheWelcome />
+    <JobsView/>
+    <LanguagesView />
     <ProjectsView />
-    <IconListSection v-bind="sections[2]" />
+    <FrameworkView />
     <section class="section">
         <h2 class="title is-2">Schooling 🎓</h2>
         <ol>
@@ -18,7 +20,7 @@
             </li>
         </ol>
     </section>
-    <IconListSection v-for="section in sections.splice(0, 2)" :key="section.title" v-bind="section" />
+    <ToolsView />
 </template>
 
 <style scoped>
@@ -30,88 +32,11 @@
 </style>
 
 <script setup lang="ts">
-    import { getDesigns } from "@/types/devIcon";
-    import type { IconListSectionProps } from "@/types/iconListSection";
-    import IconListSection from "@/views/IconListSection.vue";
+    import LanguagesView from "@/views/LanguagesView.vue";
     import ProjectsView from "@/views/ProjectsView.vue";
+    import FrameworkView from "@/views/FrameworksView.vue";
+    import ToolsView from "@/views/ToolsView.vue";
     import TheWelcome from "@/views/TheWelcome.vue";
-    // import resumer from "./../assets/json_2024-08-17_11-20-13.json";
-    const languages = [
-        "vuejs",
-        "react",
-        "angularjs",
-        "typescript",
-        "javascript",
-        "nodejs",
-        "php",
-        "json",
-        "java",
-        "bash",
-        "powershell",
-        // "nushell",
-        "c",
-        "csharp",
-        "css3",
-        "html5",
-        "markdown",
-        "kotlin",
-        "visualbasic",
-        "mysql",
-        "sqlite",
-        "xml",
-        "yaml",
-    ].sort(() => Math.random() - 0.5);
-
-    const tools = [
-        "vscode",
-        "git",
-        "github",
-        "docker",
-        "phpstorm",
-        "jetbrains",
-        "visualstudio",
-        "mongodb",
-        "webstorm",
-        // "fatcow",
-        "azure",
-        "androidstudio",
-        "ubuntu",
-        "bun",
-        "faunadb",
-        "firebase",
-        "netlify",
-        "intellij",
-        "linux",
-        "windows11",
-        "photoshop",
-        "rider",
-        "vercel",
-    ].sort(() => Math.random() - 0.5);
-
-    const frameworks = [
-        ".net",
-        "DotNetCore",
-        "bulma",
-        "flutter",
-        "gatsby",
-        "unity",
-        "handlebars",
-        "junit",
-        "nuxtjs"
-    ].sort(() => Math.random() - 0.5);
-
-
-    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)];
-    }
+import JobsView from "@/views/JobsView.vue";
 
 </script>
\ No newline at end of file
diff --git a/src/types/iconListSection.ts b/src/types/iconListSection.ts
index 7dd5f1a..bf0cf76 100644
--- a/src/types/iconListSection.ts
+++ b/src/types/iconListSection.ts
@@ -2,7 +2,7 @@ import type { DeviconProps } from "./devIcon"
 
 export type IconListSectionProps = {
     icons: string[]
-    iconStyle: Omit<DeviconProps, "icon">
+    iconStyle?: Omit<DeviconProps, "icon">
     title: string
     blurb?: string | undefined
     description?: string | undefined
diff --git a/src/types/workCard.ts b/src/types/workCard.ts
new file mode 100644
index 0000000..ed8851a
--- /dev/null
+++ b/src/types/workCard.ts
@@ -0,0 +1,3 @@
+import resumer from "@/assets/resumer.json"
+//FIXME: doesn't work cuz?
+export type WorkCardProps = {} // & typeof resumer.work[number]
\ No newline at end of file
diff --git a/src/views/FrameworksView.vue b/src/views/FrameworksView.vue
new file mode 100644
index 0000000..aa8f250
--- /dev/null
+++ b/src/views/FrameworksView.vue
@@ -0,0 +1,26 @@
+<template lang="html">
+    <IconListSection v-bind="data" />
+</template>
+
+<script setup lang="ts">
+    import type { IconListSectionProps } from '@/types/iconListSection';
+    import IconListSection from '@/components/IconListSection.vue';
+    const frameworks = [
+        ".net",
+        "DotNetCore",
+        "bulma",
+        "flutter",
+        "gatsby",
+        "unity",
+        "handlebars",
+        "junit",
+        "nuxtjs"
+    ]
+
+    const data: IconListSectionProps = {
+        title: "Frameworks",
+        description: "I've worked with these frameworks in my professional and personal projects to offload the start of development and build upon known solutions. They're all frameworks I'm comfortable with and have experience with.",
+        blurb: "",
+        icons: frameworks.sort(() => Math.random() - 0.5),
+    }
+</script>
\ No newline at end of file
diff --git a/src/views/IconListSection.vue b/src/views/IconListSection.vue
deleted file mode 100644
index d794222..0000000
--- a/src/views/IconListSection.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<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() {
-                return {
-                size: 12,
-                coloured: true,
-                wordmark: true,
-                design: 'plain',
-                fallback: 'no-text'
-            }
-        }
-    });
-</script>
\ No newline at end of file
diff --git a/src/views/JobsView.vue b/src/views/JobsView.vue
new file mode 100644
index 0000000..ab840c4
--- /dev/null
+++ b/src/views/JobsView.vue
@@ -0,0 +1,15 @@
+<template lang="html">
+    <section class="section">
+        <h2 class="title is-2">Work Experience</h2>
+
+        <div class="is-flex is-flex-direction-row is-justify-content-space-evenly is-flex-wrap-wrap">
+            <WorkCard class="is-flex-shrink-1" style="margin-bottom: 1rem;" v-for="(job, i) in jobs" v-bind="job"
+                :key="i" />
+        </div>
+    </section>
+</template>
+<script setup lang="ts">
+    import resume from '@/assets/resumer.json';
+    import WorkCard from '@/components/WorkCard.vue';
+    const jobs: typeof resume.work = resume.work;
+</script>
\ No newline at end of file
diff --git a/src/views/LanguagesView.vue b/src/views/LanguagesView.vue
new file mode 100644
index 0000000..a81efad
--- /dev/null
+++ b/src/views/LanguagesView.vue
@@ -0,0 +1,40 @@
+<template lang="html">
+    <IconListSection v-bind="data" />
+</template>
+
+<script setup lang="ts">
+    import type { IconListSectionProps } from '@/types/iconListSection';
+    import IconListSection from '@/components/IconListSection.vue';
+    const languages = [
+        "vuejs",
+        "react",
+        "angularjs",
+        "typescript",
+        "javascript",
+        "nodejs",
+        "php",
+        "json",
+        "java",
+        "bash",
+        "powershell",
+        // "nushell",
+        "c",
+        "csharp",
+        "css3",
+        "html5",
+        "markdown",
+        "kotlin",
+        "visualbasic",
+        "mysql",
+        "sqlite",
+        "xml",
+        "yaml",
+    ];
+
+    const data: IconListSectionProps = {
+        title: 'Languages',
+        description: 'Programming languages I have worked with and comfortable using to solution problems.',
+        blurb: "in no particular order",
+        icons: languages.sort(() => Math.random() - 0.5),
+    }
+</script>
\ No newline at end of file
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index 67bc4c9..835d953 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -6,21 +6,23 @@
                 <a href="https://github.com/csc530/vuebulma" class="has-text-current">
                     <h3 class="has-text-link">Vuebulma</h3>
                     <p>Vue.js and Bulma component library</p>
-                    <small>currently upgrading to bulma v1.0...</small>
+                    <small>Pre built HTML with tags and JS functionality to simply create websites and using bulma's CSS framework and vue.js framework.</small>
                 </a>
             </li>
 
             <li class="box">
                 <a href="https://github.com/csc530/resumer" class="has-text-current">
                     <h3 class="has-text-link">Resumer</h3>
-                    <p>C# command line interface (CLI) app for creating resumes</p>
+                    <p>C# command line interface (CLI) app for creating resumes.</p>
                 </a>
             </li>
 
             <li class="box">
                 <a href="https://github.com/csc530/mysite" class="has-text-current">
-                    <h3 class="has-text-link">this totally amazing awesome site :DDD</h3>
-                    <p>my personal website and lil' corner of the internet</p>
+                    <h3 class="has-text-link">My web portfolio</h3>
+                    <p>This website that you;re viewing now.
+                        An online channel to promote and develop my professional skills.
+                    </p>
                 </a>
             </li>
         </ul>
diff --git a/src/views/ToolsView.vue b/src/views/ToolsView.vue
new file mode 100644
index 0000000..758e5c1
--- /dev/null
+++ b/src/views/ToolsView.vue
@@ -0,0 +1,40 @@
+<template lang="html">
+    <IconListSection v-bind="data" />
+</template>
+
+<script setup lang="ts">
+    import type { IconListSectionProps } from '@/types/iconListSection';
+    import IconListSection from '@/components/IconListSection.vue';
+    const    tools = [
+        "vscode",
+        "git",
+        "github",
+        "docker",
+        "phpstorm",
+        "jetbrains",
+        "visualstudio",
+        "mongodb",
+        "webstorm",
+        // "fatcow",
+        "azure",
+        "androidstudio",
+        "ubuntu",
+        "bun",
+        "faunadb",
+        "firebase",
+        "netlify",
+        "intellij",
+        "linux",
+        "windows11",
+        "photoshop",
+        "rider",
+        "vercel",
+    ]
+
+    const data: IconListSectionProps = {
+        title: "Tools",
+        description: "An essential component to build, test, and deploy any project.",
+        blurb: "I am well versed in many tools and not dependent upon any set and can pivot quite easily to new technologies because of my diverse experience.",
+        icons: tools.sort(() => Math.random() - 0.5),
+    }
+</script>
\ No newline at end of file