Merge pull request #9 from queenkjuul/dev

Resume page, layout work
queenkjuul · Apr 1, 2024 · a406d58 · a406d58
2 parents 069ed91 + bff4290
commit a406d58
Show file tree

Hide file tree

Showing 27 changed files with 360 additions and 70 deletions.
diff --git a/mdsvex.config.js b/mdsvex.config.js
@@ -10,7 +10,7 @@ const config = defineConfig({
   remarkPlugins: [],
   rehypePlugins: [],
   layout: {
-    _: './src/lib/layout/MdPageLayout.svelte',
+    _: './src/lib/util/md-wrappers/MdPageLayout.svelte',
   },
 })
 

diff --git a/src/app.html b/src/app.html
@@ -3,6 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+    />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

diff --git a/src/lib/assets/resume.pdf b/src/lib/assets/resume.pdf
diff --git a/src/lib/content/resume.md b/src/lib/content/resume.md
@@ -0,0 +1,82 @@
+---
+blurb: 'Web Frontend Engineer with an eye for detail and proven experience across a range of technologies at enterprises big and small. Dedicated to quality code and polished experiences for users and developers alike'
+
+featuredLanguages:
+  - Svelte
+  - TypeScript
+  - Java
+
+skills:
+  - React
+  - Angular
+  - Vue
+  - Playwright
+  - TailwindCSS
+  - Sass/SCSS
+  - Node.js
+  - TurboRepo
+  - Express
+  - Redux
+  - SQL
+  - JavaFX
+  - Spring
+  - Cypress
+  - Docker
+  - Jenkins
+  - Python
+---
+
+# Professional Experience
+
+---
+
+## Tastytrade
+
+### Web Frontend Engineer
+
+#### July 2022 - Present
+
+- Using primarily Svelte and SvelteKit, built a suite of web
+  applications facilitating an end-to-end financial trading platform,
+  from account creation and management to real-time tracking
+  and trading of stocks, bonds, options, and crypto
+- Implemented integrations with third party applications, libraries,
+  and APIs, as well as white-labelling Tastytrade products for
+  consumption by other corporate brands and external partners
+- Participated in project planning, story writing, prioritization, and
+  ticket sizing meetings with project managers and senior staff
+- Wrote extensive unit and integration tests using Vitest and
+  Playwright, with validated code deployed via GitHub Actions
+- Delivered presentations and documentation on best practices
+  and new technologies
+
+## Union Pacific
+
+### Associate Senior Application Developer
+
+#### April 2021-July 2022
+
+- Engaged directly with customers, business partners, and UI/UX
+  designers to build excellent customer experiences
+- Developed new applications through all stages of the software
+  development lifecycle, from planning through to maintenance
+- Worked with a team of developers to improve and maintain
+  existing services as well as add new functionality to complex
+  business applications hosted on private cloud resources
+- Built and deployed REST and JMS microservices using
+  Java+Spring following a Service Oriented Architecture
+- Built front end applications in TypeScript with the Angular
+  framework, the Angular Material component library, and UP’s
+  custom UI component library
+- Set up and maintained Jenkins CI/CD pipelines
+
+## Techtonic
+
+### Software Developemnt Apprentice
+
+#### October 2020 - April 2021
+
+- Completed the Department of Labor-accredited Techtonic
+  Academy software development apprenticeship program
+- Spent three months in full-time, hands-on classes covering full stack development using React, Java+Spring, and MySQL
+- Worked full-time for three months as a full stack developer for Techtonic using Vue, Express, and PostgreSQL
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -1,4 +1,6 @@
 // place files you want to import through the `$lib` alias in this folder.
+export const RESUME_LABEL = 'Résumé'
+
 export * from './util/config'
 export * from './util/devicons'
 export * from './util/pages'
diff --git a/src/lib/layout/Breadcrumbs.svelte b/src/lib/layout/Breadcrumbs.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte'
+
+  export let title: string
+  export let href: string | null = null
+</script>
+
+<Breadcrumb class="mb-4 ml-4">
+  <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
+  <BreadcrumbItem href={`/${href ?? title}`}>{title}</BreadcrumbItem>
+</Breadcrumb>
diff --git a/src/lib/layout/ContentWrapper.svelte b/src/lib/layout/ContentWrapper.svelte
@@ -0,0 +1,27 @@
+<script context="module">
+  // expose class - using component breaks nested global styling in /resume
+  export const wrapperClass = `divide-gray-100 
+    rounded-lg 
+    border 
+    border-gray-100 
+    bg-white 
+    p-4 
+    shadow-md 
+    dark:divide-gray-700 
+    dark:border-gray-700 
+    dark:bg-gray-800 
+    lg:p-8`
+</script>
+
+<script>
+  let cssClass
+  export { cssClass as class }
+</script>
+
+<div
+  class={`
+  ${cssClass} 
+  ${wrapperClass}`}
+>
+  <slot />
+</div>
diff --git a/src/lib/layout/Header.svelte b/src/lib/layout/Header.svelte
@@ -2,20 +2,35 @@
   import { page } from '$app/stores'
   import pfp from '$assets/pfp.png'
   import ToolbarSocialLink from '$src/lib/toolbar/ToolbarSocialLink.svelte'
-  import { Avatar, DarkMode, NavBrand, NavHamburger, Navbar, Toolbar } from 'flowbite-svelte'
+  import {
+    Avatar,
+    DarkMode,
+    NavBrand,
+    NavHamburger,
+    NavLi,
+    NavUl,
+    Navbar,
+    Toolbar,
+  } from 'flowbite-svelte'
   import { getContext } from 'svelte'
-  import { DATA_KEY, DRAWER_KEY } from '..'
+  import { DATA_KEY, DRAWER_KEY, RESUME_LABEL } from '..'
+
+  const hideAvatarPaths = ['/', '/resume']
 
   const context = getContext(DATA_KEY)
   const { person, socials } = context
   const { firstName, lastName } = person
 
   const drawerHidden = getContext(DRAWER_KEY)
 
-  $: hideAvatar = $page.url.pathname == '/'
+  $: hideAvatar = hideAvatarPaths.includes($page.url.pathname)
 </script>
 
-<Navbar rounded color="form" class="mb-4 mt-2 py-1.5 md:mt-0">
+<Navbar
+  rounded
+  color="form"
+  class={`mb-4 mt-2 py-1.5 shadow-md dark:border dark:border-gray-600 md:mt-0 ${hideAvatar ? 'print:hidden' : ''}`}
+>
   <div class="navbar-title-section flex flex-row items-center justify-center gap-4">
     <NavHamburger
       class="md:block lg:block"
@@ -29,6 +44,9 @@
       ><Avatar src={pfp} class={`mr-4 ${hideAvatar ? 'hidden' : ''}`} />
       <div>{firstName} {lastName}</div></NavBrand
     >
+    <NavUl>
+      <NavLi href="/resume">{RESUME_LABEL}</NavLi>
+    </NavUl>
   </div>
   <div class="navbar-buttons-section xs:hidden">
     <Toolbar>

diff --git a/src/lib/layout/MdPageLayout.svelte b/src/lib/layout/MdPageLayout.svelte
diff --git a/src/lib/layout/NavDrawer.svelte b/src/lib/layout/NavDrawer.svelte
@@ -11,7 +11,7 @@
   } from 'flowbite-svelte'
   import { getContext } from 'svelte'
   import { sineIn } from 'svelte/easing'
-  import { DATA_KEY, DRAWER_KEY, PAGELINKS_KEY } from '..'
+  import { DATA_KEY, DRAWER_KEY, PAGELINKS_KEY, RESUME_LABEL } from '..'
   import ToolbarSocialLink from '../toolbar/ToolbarSocialLink.svelte'
 
   const drawerHidden = getContext(DRAWER_KEY)
@@ -54,8 +54,14 @@
           on:click={closeDrawer}
           activeClass="dark:bg-primary-300 bg-primary-800 text-gray-800 dark:text-gray-300"
         />
+        <SidebarItem
+          label={RESUME_LABEL}
+          href="/resume"
+          on:click={closeDrawer}
+          activeClass="dark:bg-primary-300 bg-primary-800 text-gray-800 dark:text-gray-300"
+        />
         {#each $pageLinks as { label, filename }}
-          <SidebarItem {label} href={`/${filename}`} on:click={closeDrawer} />
+          <SidebarItem {label} href={`/pages/${filename}`} on:click={closeDrawer} />
         {/each}
       </SidebarGroup>
       <div class="grow" />

diff --git a/src/lib/layout/Title.svelte b/src/lib/layout/Title.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { getContext } from 'svelte'
+  import { DATA_KEY } from '..'
+
+  const context = getContext(DATA_KEY)
+  const { firstName, lastName } = context.person
+
+  export let title
+</script>
+
+<svelte:head
+  ><title>
+    {firstName}
+    {lastName} - {title}
+  </title>
+</svelte:head>
diff --git a/src/lib/util/config.ts b/src/lib/util/config.ts
@@ -11,6 +11,7 @@ export interface Person {
   occupation?: string
   location?: string
   languages?: Languages
+  email?: string
 }
 
 export interface Language {
@@ -51,5 +52,6 @@ export type AppData = {
   socials: Socials
   languageImages: HTMLImgAttributes[]
   pfp: string
+  pdf: string
   pages: Pages
 }
diff --git a/src/lib/util/md-wrappers/MdPageLayout.svelte b/src/lib/util/md-wrappers/MdPageLayout.svelte
@@ -0,0 +1,6 @@
+<script context="module">
+  import { a, blockquote, h1, h2, h3, h4, h5, h6, hr, img, li, ol, p, ul } from '$util/md-wrappers'
+  export { a, blockquote, h1, h2, h3, h4, h5, h6, hr, img, li, ol, p, ul }
+</script>
+
+<slot />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -10,6 +10,7 @@
   import Footer from '$src/lib/layout/Footer.svelte'
   import Header from '$src/lib/layout/Header.svelte'
   import NavDrawer from '$src/lib/layout/NavDrawer.svelte'
+  import Title from '$src/lib/layout/Title.svelte'
   import { setContext } from 'svelte'
   import { readable, writable } from 'svelte/store'
   import { fade } from 'svelte/transition'
@@ -19,7 +20,7 @@
   export let data: PageData
 
   const { pages, person } = data
-  const { firstName, lastName, occupation } = person
+  const { occupation } = person
 
   const drawerHidden = writable<boolean>(true)
   setContext(DRAWER_KEY, drawerHidden)
@@ -30,9 +31,7 @@
   $: setContext<AppData>(DATA_KEY, data)
 </script>
 
-<svelte:head>
-  <title>{firstName} {lastName} - {occupation}</title>
-</svelte:head>
+<Title title={occupation} />
 
 <NavDrawer />
 

diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -1,4 +1,5 @@
 import pfp from '$assets/pfp.png'
+import pdf from '$assets/resume.pdf'
 import { loadMarkdownPages, type AppData, type Language } from '$src/lib'
 import { getDeviconAttributes } from '$src/lib/util/devicons'
 import { userConfig } from '$src/user.config'
@@ -14,10 +15,12 @@ export const load: LayoutLoad = async () => {
       occupation: userConfig?.person?.occupation,
       languages: userConfig?.person?.languages ?? [defaultLanguage],
       location: userConfig?.person?.location,
+      email: userConfig?.person?.email ?? '',
     },
     languageImages: userConfig?.person?.languages?.map(getDeviconAttributes) ?? [],
     socials: userConfig?.socials ?? [],
     pfp,
+    pdf,
     pages: await loadMarkdownPages(),
   }
   return appData

diff --git a/src/routes/PersonalInfoSection.svelte b/src/routes/PersonalInfoSection.svelte
@@ -1,5 +1,6 @@
 <script>
   import About from '$lib/content/about.md'
+  import ContentWrapper from '$src/lib/layout/ContentWrapper.svelte'
   import { Heading, Img } from 'flowbite-svelte'
   import { getContext } from 'svelte'
   import { DATA_KEY } from '../lib'
@@ -9,17 +10,13 @@
   const { firstName, lastName, occupation, location } = person
 </script>
 
-<div
+<ContentWrapper
   class="
     flex w-full
     flex-col
     items-center
     justify-center
     gap-4
-    rounded-lg
-    bg-white
-    p-4
-    dark:bg-gray-800
     md:flex-row
     md:items-start
     md:p-8"
@@ -42,4 +39,4 @@
     {/if}
     <About />
   </div>
-</div>
+</ContentWrapper>
diff --git a/src/routes/[page]/+page.svelte b/src/routes/[page]/+page.svelte