✨ add job history

bore down footer
extract sections to views

src/assets/resumer.json

@@ -0,0 +1 @@
+{"basics":{"name":"Christofer Cousins","label":null,"image":null,"email":"[email protected]","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"}]}

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>

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 = '[email protected]'
 
     const theme = useColorMode({ modes: PuccinTheme });
     const colour = computed(() => {

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>

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';
 

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>

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

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]

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>

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>

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>