diff --git a/src/assets/logos/logo-axway-icon.svg b/src/assets/logos/logo-axway-icon.svg new file mode 100644 index 0000000..41e56b1 --- /dev/null +++ b/src/assets/logos/logo-axway-icon.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + diff --git a/src/assets/logos/logo-axway.svg b/src/assets/logos/logo-axway.svg new file mode 100644 index 0000000..1e5c045 --- /dev/null +++ b/src/assets/logos/logo-axway.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/logos/logo-digitalelement-icon.svg b/src/assets/logos/logo-digitalelement-icon.svg new file mode 100644 index 0000000..62381dd --- /dev/null +++ b/src/assets/logos/logo-digitalelement-icon.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/src/assets/logos/logo-digitalelement.svg b/src/assets/logos/logo-digitalelement.svg new file mode 100644 index 0000000..db09661 --- /dev/null +++ b/src/assets/logos/logo-digitalelement.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/logos/logo-dopple-icon.svg b/src/assets/logos/logo-dopple-icon.svg new file mode 100644 index 0000000..708d84a --- /dev/null +++ b/src/assets/logos/logo-dopple-icon.svg @@ -0,0 +1,21 @@ + + + + + + + + + + diff --git a/src/assets/logos/logo-dopple.svg b/src/assets/logos/logo-dopple.svg new file mode 100644 index 0000000..dfb5ac4 --- /dev/null +++ b/src/assets/logos/logo-dopple.svg @@ -0,0 +1,42 @@ + + + + + + diff --git a/src/components/blocks/Nav.astro b/src/components/blocks/Nav.astro index 3a5abdc..ffc16fc 100644 --- a/src/components/blocks/Nav.astro +++ b/src/components/blocks/Nav.astro @@ -10,8 +10,8 @@ const links = [ paths: '' }, { - title: 'Work', - href: '#', + title: 'Experience', + href: '/#experience', paths: '' }, { @@ -31,7 +31,7 @@ const links = [ }, { title: 'CodePen', - href: 'https://codepen.io/bbagg/', + href: 'https://codepen.io/bbagg', paths: '' }, ] diff --git a/src/components/home/Experience.astro b/src/components/home/Experience.astro new file mode 100644 index 0000000..8307645 --- /dev/null +++ b/src/components/home/Experience.astro @@ -0,0 +1,180 @@ +--- +import { Image } from 'astro:assets' +import KeyboardButton from '@/components/base/KeyboardButton.astro' +import SectionHeading from '@/components/blocks/SectionHeading.astro' + +import LogoAxway from '@/assets/logos/logo-axway-icon.svg' +import LogoDigitalElement from '@/assets/logos/logo-digitalelement-icon.svg' +import LogoDopple from '@/assets/logos/logo-dopple-icon.svg' + +interface WorkItemDate { + month: number + year: number +} + +interface WorkItem { + company: string + dateEnd: WorkItemDate | 'present' + dateStart: WorkItemDate + description: string + href: string + logo: ImageMetadata + role: string +} + +const work: WorkItem[] = [ + { + company: 'Dopple', + logo: LogoDopple, + href: 'https://www.dopple.io', + role: 'Frontend Developer, Experience Designer', + dateStart: { month: 4, year: 2021 }, + dateEnd: 'present', + description: 'Serve as lead client-facing engineer; lead design & development (primarily Vue.js) for core features across Dopple’s 3D asset management platform; crafted Dopple’s official design system; wrote, built, & maintain Dopple’s developer documentation site.' + }, + { + company: 'Axway', + logo: LogoAxway, + href: 'https://www.axway.com', + role: 'Frontend Developer, Principal Product Mktg. Manager', + dateStart: { month: 7, year: 2019 }, + dateEnd: { month: 3, year: 2021 }, + description: 'Served as hybrid Developer/Principal Product Marketer leading Axway’s developer strategy; from POC to production, brought new developer-centric features to Axway’s core SaaS/iPaaS product.' + }, + { + company: 'Digital Element', + logo: LogoDigitalElement, + href: 'https://www.digitalelement.com', + role: 'Developer, Senior Creative & Digital Marketing', + dateStart: { month: 6, year: 2014 }, + dateEnd: { month: 6, year: 2019 }, + description: 'Led Digital Element’s digital marketing & web initiatives; led the redesign & relaunch of Digital Element’s website; designed, built, and optimized key landing pages, improving conversion rates upwards of 140%.' + }, +] + +function formatDate(date: WorkItemDate | 'present') { + if (date === 'present') { + return 'present' + } + + const month = date.month.toString().padStart(2, '0') + const year = date.year.toString().padStart(2, '0') + return `${month}/${year}` +} +--- + +
+ +
    + {work.map((item) => ( +
  1. +
    + +

    {item.role}

    +
    +

    + {item.company} — {formatDate(item.dateStart)} to {formatDate(item.dateEnd)} +

    +

    {item.description}

    +
    2. + ))} +
+
+ + \ No newline at end of file diff --git a/src/components/home/Projects.astro b/src/components/home/Projects.astro index 19ed6f6..9437ea9 100644 --- a/src/components/home/Projects.astro +++ b/src/components/home/Projects.astro @@ -19,7 +19,12 @@ function priorityValue(priority: string) { } } -const layoutButtonPaths = [ +interface LayoutButtonPath { + name: string; + html: string; +} + +const layoutButtonPaths: LayoutButtonPath[] = [ { name: 'cards', html: '' @@ -34,7 +39,13 @@ const layoutButtonPaths = [ } ] -const linkButtons = [ +interface LinkButton { + label: string; + svg?: string; + title?: string; +} + +const linkButtons: LinkButton[] = [ { label: 'github', svg: '', diff --git a/src/pages/index.astro b/src/pages/index.astro index 5c31a56..a94badf 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,11 +2,13 @@ import Layout from '@/layouts/Layout.astro' import HomeHero from '@/components/home/HomeHero.astro' import Projects from '@/components/home/Projects.astro' +import Experience from '@/components/home/Experience.astro' --- +