|
9 | 9 | <header> |
10 | 10 | <h1>Tanner Heffner</h1> |
11 | 11 | <p> |
12 | | - I am a full-stack engineer with a record of delivering successful projects at scale for organizations in a variety of industries. A big advocate for accessible design systems and responsive component libraries. Let's build something cool together. |
| 12 | + Full-stack engineer and technical lead with a decade at agencies delivering for government, enterprise, and startup clients. Known for on-time delivery, steady execution under pressure, and moving fluidly between prototyping, production delivery, and design system work. Let's build something cool together. |
13 | 13 | </p> |
14 | 14 | </header> |
15 | 15 |
|
16 | 16 | <section> |
17 | 17 | <h2>Contact</h2> |
18 | 18 | <ul class="contact"> |
19 | 19 | <li> |
20 | | - <a data-i="e" href="mailto:tannerjheffner@gmail.com">tannerjheffner@gmail.com</a> |
| 20 | + <a data-i="e" href="mailto:tanner@hyzer.sh">tanner@hyzer.sh</a> |
21 | 21 | </li> |
22 | 22 | <li> |
23 | 23 | <a data-i="t" href="tel:7023380110">(702) 338-0110</a> |
|
28 | 28 | </ul> |
29 | 29 | </section> |
30 | 30 |
|
31 | | -<section> |
32 | | - <h2>Skills & Tools</h2> |
33 | | - <ul class="tags"> |
34 | | - <li>Typescript</li> |
35 | | - <li>Design Systems</li> |
36 | | - <li>Accessibility</li> |
37 | | - <li>UX</li> |
38 | | - <li>DevOps</li> |
39 | | - <li>Node</li> |
40 | | - <li>HTML</li> |
41 | | - <li>CSS</li> |
42 | | - <li>React</li> |
43 | | - <li>Svelte</li> |
44 | | - <li>PHP</li> |
45 | | - <li>Drupal</li> |
46 | | - <li>AWS</li> |
47 | | - <li>Python</li> |
48 | | - <li>Ruby</li> |
49 | | - <li>Public Speaking</li> |
50 | | - <li>Cypress</li> |
51 | | - <li>Playwright</li> |
52 | | - <li>Storybook</li> |
53 | | - <li>Figma</li> |
54 | | - </ul> |
55 | | -</section> |
56 | | - |
57 | 31 | <main> |
58 | 32 | <div class="list"> |
59 | 33 | <h2 id="experience">Experience</h2> |
60 | | - <h3 id="Agile Six">Hyzer</h3> |
61 | | - <h4 id="tech lead">Self-employed</h4> |
62 | | - <p>June 2025 - Present</p> |
| 34 | + |
| 35 | + <h3 id="Hyzer">Hyzer</h3> |
| 36 | + <h4>Founder & Principal Engineer</h4> |
| 37 | + <p>June 2025 — Present</p> |
| 38 | + <p>Independent consultancy providing full-stack engineering and design leadership to agencies, startups, and direct clients.</p> |
63 | 39 | <ul> |
64 | | - <li>Providing engineering expertise and design perspective across the stack.</li> |
65 | | - <li>Creative prototyping, mobile app development, design systems, realtime shared interactivity, PWAs, animations, e-commerce, AI integrations, and accessibility.</li> |
66 | | - <li>Clients: <a href="https://wlcr.io">WLCR</a>, <a href="https://twothings.co">two things</a></li> |
| 40 | + <li>Shipped three mobile app prototypes for a Fortune 500 client over multiple engagements totaling five-plus months. A 40-person focus group tested the second prototype to strong reception.</li> |
| 41 | + <li>Partnered with an agency on multiple production launches, including a three-week animation-heavy brand rebuild and realtime messaging and notification features for a social platform.</li> |
| 42 | + <li>Extended a retailer's headless Shopify codebase into a B2B storefront, forking from their existing D2C site and adding context-aware catalogs and pricing for different company and region segments. Also built a customer intake form integrated with Shopify.</li> |
| 43 | + <li>Stood up the design system for an early-stage startup over two months, migrating existing code into an accessible navigation system, a consistent type scale, and shared tokens.</li> |
67 | 44 | </ul> |
68 | 45 |
|
69 | | - <h3 id="Agile Six">Agile Six</h3> |
70 | | - <h4 id="tech lead">Technical Lead</h4> |
| 46 | + <h3 id="Agile Six TL">Agile Six</h3> |
| 47 | + <h4>Technical Lead</h4> |
71 | 48 | <p>June 2023 — May 2025</p> |
| 49 | + <p>Led a cross-functional team of six engineers spanning frontend, backend, and DevOps.</p> |
72 | 50 | <ul> |
73 | | - <li><strong>Architected the modern headless foundation</strong> for <a href="https://va.gov">VA.gov</a>, reducing content publishing times for thousands of editors from hours to under five minutes.</li> |
74 | | - <li><strong>Foundational workflow research & development</strong> for Accredited Representatives helping Veterans with the claims process.</li> |
75 | | - <li>Rapid <strong>prototyping of technical solutions</strong> leading to major contract vehicle wins, <strong>receiving highest technical marks</strong> from government evaluators.</li> |
| 51 | + <li>Architected the modern headless foundation for <a href="https://va.gov">VA.gov</a>, cutting content publishing times for thousands of editors from hours to under five minutes. Named Key Personnel on the Accelerated Publishing contract.</li> |
| 52 | + <li>Led discovery and technical research for a new Accredited Representatives workflow supporting Veterans through the claims process, coordinating changes across multiple siloed VA departments where legal jurisdiction restricted direct API access. Named Key Personnel on the contract.</li> |
| 53 | + <li>Delivered rapid technical prototypes for two successful government contract bids, VA's SPRUCE and HHS SWIFT, each earning the highest technical marks from government evaluators. For SPRUCE, built an example form with full validation using the VA design system and external USPS address verification, in five days.</li> |
| 54 | + <li>Prototyped an experimental no-code form builder using Drupal as the source of truth, shipped for evaluation on a separate contract team.</li> |
76 | 55 | </ul> |
77 | 56 |
|
78 | 57 | <h3 id="Coforma">Coforma</h3> |
79 | | - <h4 id="senior dev 2">Senior Software Engineer</h4> |
| 58 | + <h4>Senior Software Engineer</h4> |
80 | 59 | <p>January 2023 — June 2023 (Contract)</p> |
81 | 60 | <ul> |
82 | | - <li><strong>Architected the <a href="https://www.cms.gov/medical-bill-rights">Medical Bill Rights</a> portal</strong> for CMS.gov with localized content in English and Spanish in support of the No Surprises Act.</li> |
83 | | - <li><strong>Led front-end implementation</strong>, providing direction to junior team members and actively building out the React form architecture including <strong>localization, field and schema validations, plus Salesforce and Drupal integration.</strong></li> |
| 61 | + <li>Architected the <a href="https://www.cms.gov/medical-bill-rights">Medical Bill Rights</a> portal for CMS.gov in support of the No Surprises Act, shipping under a tight legislative deadline within six months with fully localized English and Spanish content.</li> |
| 62 | + <li>Owned front-end implementation and mentored junior engineers while building the React form architecture, including localization, field and schema validation, and Salesforce and Drupal integration.</li> |
84 | 63 | </ul> |
85 | 64 |
|
86 | | - <h3 id="Agile Six">Agile Six</h3> |
87 | | - <h4 id="tech lead">Senior Software Engineer</h4> |
| 65 | + <h3 id="Agile Six SSE">Agile Six</h3> |
| 66 | + <h4>Senior Software Engineer</h4> |
88 | 67 | <p>September 2021 — January 2023</p> |
89 | 68 | <ul> |
90 | | - <li>Improved the editor experience for VA.gov content editors, with a focus on usability and accessibility.</li> |
91 | | - <li>Assisted with <strong>benefits claims processing improvements across the VA stack</strong> as part of the PACT Act. Including <strong>accessibility updates</strong> to custom React form inputs and improving <strong>OCR processing</strong> of PDF claim data in Python.</li> |
| 69 | + <li>Led the upgrade of VA.gov's Drupal admin theme from Seven to a VA-branded theme based on Claro, dramatically improving accessibility and day-to-day usability for hundreds of content editors, many of them hospital staff without web admin backgrounds. Built an extensible foundation for custom field widgets and established content modeling standards adopted across three CMS teams.</li> |
| 70 | + <li>Delivered features across the CMS, including email notifications, preview improvements, editor workflow refinements, and updates to the internal editor knowledge base, all reducing editor confusion and support complaints.</li> |
| 71 | + <li>Contributed to benefits claims processing improvements across the VA stack as part of the PACT Act, including accessibility updates to custom React form inputs and Python-based OCR improvements for both scanned claim forms and generated PDFs from digital submissions.</li> |
92 | 72 | </ul> |
93 | 73 |
|
94 | 74 | <h3 id="Instrument">Instrument</h3> |
95 | | - <h4 id="senior dev 1">Senior Developer</h4> |
| 75 | + <h4>Senior Developer</h4> |
96 | 76 | <p>October 2019 — March 2021</p> |
97 | 77 | <ul> |
98 | | - <li>Developed a bespoke <strong>responsive component library</strong> combined with an <strong>A/B testing system</strong> with Craft CMS, allowing site builders to continously optimize with confidence.</li> |
99 | | - <li>Rapidly <strong>prototyped brand explorations</strong> with React and Storybook for the former Twitter.com design team.</li> |
100 | | - <li>Created <strong>custom responsive components</strong> for <a href="https://google.org">Google.org</a> using Python and vanilla Javascript.</li> |
101 | | - <li><strong>Built new React components</strong> for <a href="https://business.pinterest.com/getting-started/">Pinterest Business</a>.</li> |
102 | | - <li>Helped <strong>implement the achievements functionality for games and social sharing</strong> across the Epic Games platform.</li> |
103 | | - </ul> |
| 78 | + <li>Designed a bespoke responsive component library paired with an A/B testing system in Craft CMS for Greenhouse.com, enabling their marketing team to continuously optimize conversions by running tests against every component on every page.</li> |
| 79 | + <li>Prototyped brand explorations in React and Storybook for the former Twitter.com design team.</li> |
| 80 | + <li>Launched custom responsive components for <a href="https://google.org">Google.org</a> using Python and vanilla JavaScript.</li> |
| 81 | + <li>Shipped React components to production for <a href="https://business.pinterest.com/getting-started/">Pinterest Business</a>.</li> |
| 82 | + <li>Contributed to the achievements and social sharing system for the Epic Games launcher, an event-driven React overlay that integrates with game SDKs platform-wide. Worked primarily on the state management layer for achievement lifecycle events.</li> </ul> |
104 | 83 |
|
105 | 84 | <h3 id="Phase2">Phase2</h3> |
106 | | - <h4 id="intern to senior">Senior Developer</h4> |
| 85 | + <h4>Senior Developer</h4> |
107 | 86 | <p>June 2015 — August 2019</p> |
| 87 | + <p>Started as part of Phase2's first intern class and grew into a Senior Developer over four years, later mentoring new interns through the same program.</p> |
108 | 88 | <ul> |
109 | | - <li><strong>Co-maintained our agency's front-end toolkit</strong>, enabling the rapid stand-up of new sites with atomic design principles & consistent processes.</li> |
110 | | - <li>Helped <strong>multiple enterprise organizations</strong> migrate from Drupal 7 to Drupal 8 efficiently.</li> |
111 | | - <li><strong>Won a Webby award</strong> as part of the team shipping the revamped <a href="https://arsenal.com">Arsenal.com</a>.</li> |
| 89 | + <li>Co-maintained our agency's front-end toolkit, enabling the rapid stand-up of new sites with atomic design principles and consistent processes.</li> |
| 90 | + <li>Contributed to Drupal 7 to Drupal 8 migrations for at least five enterprise organizations, including Al Jazeera, Weight Watchers, and Memorial Sloan Kettering Cancer Center.</li> |
| 91 | + <li>Won a Webby Award as part of the team shipping the revamped <a href="https://arsenal.com">Arsenal.com</a>.</li> |
112 | 92 | </ul> |
113 | 93 |
|
114 | 94 | <h2 id="recent-projects">Highlighted Projects</h2> |
| 95 | + |
| 96 | + <h3 id="later-rebrand">Later.com Rebrand</h3> |
| 97 | + <p>Partnered with <a href="https://wlcr.io">WLCR</a> to deliver Later's rebrand on their existing marketing site, refreshing design system tokens across the board and updating responsive components with new motion and animation treatments. Also built the custom parallax landing page for <em>Made You Look</em>, a flagship creator campaign featuring original films, immersive scroll interactions, and multiple creator story panels.</p> |
| 98 | + <p> |
| 99 | + <a href="https://later.com/made-you-look/">later.com/made-you-look</a> |
| 100 | + </p> |
| 101 | + |
115 | 102 | <h3 id="va.gov">VA.gov</h3> |
116 | | - <p>Architected a Next.js build system for an existing headless Drupal installation to improve publishing times for VA Editors. With >55,000 pieces of content, growing daily, timely publishing is key. The legacy system's build times took a minimum of 45 minutes, sometimes closer to two hours! This new approach enables rapid publishing of content in under five minutes. It also provides editors the capability to preview their content exactly as it would appear on VA.gov <em>before publishing</em>, a major pain point of the prior process.</p> |
| 103 | + <p>Architected a Next.js build system on top of an existing headless Drupal installation to dramatically improve publishing times for VA editors. With over 55,000 pieces of content and growing daily, timely publishing is critical. The legacy system took a minimum of 45 minutes per build, sometimes closer to two hours. The new approach gets content live in under five minutes and gives editors the ability to preview their work exactly as it will appear on VA.gov <em>before publishing</em>, addressing a major pain point of the prior workflow.</p> |
117 | 104 | <p> |
118 | 105 | <a href="https://va.gov">VA.gov</a> |
119 | 106 | </p> |
120 | 107 |
|
121 | 108 | <h3 id="medical-bill-rights">Medical Bill Rights</h3> |
122 | | - <p>For the No Surprises Act, this portal has all the information citizens need for understanding their newly enshrined rights around medical billing, whether they are using Medicare/Medicaid or not. There are 26 different fact pages (localized in two languages, with support for more) and two separate React apps, also with localization support: a wizard to help users find the relevant fact page for their situation, and a multi-page form with client and server side validation that sends submissions off to a CRM for claims processing by CMS agents.</p> |
| 109 | + <p>Built in support of the No Surprises Act, this CMS.gov portal gives citizens the information they need to understand their rights around medical billing, whether or not they use Medicare/Medicaid. The site includes 26 fact pages localized in two languages (with support for more), a React-based wizard that helps users find the relevant fact page for their situation, and a multi-page form with client and server-side validation that routes submissions to a CRM for claims processing by CMS agents.</p> |
123 | 110 | <p><a href="https://www.cms.gov/medical-bill-rights">cms.gov/medical-bill-rights</a></p> |
| 111 | + </div> |
| 112 | +</main> |
124 | 113 |
|
125 | | - <h3 id="greenhouse">Greenhouse</h3> |
126 | | - <p>A bespoke marketing website for a leading hiring solutions company, using Craft CMS, Twig and vanilla JavaScript. As a freelance front-end developer I joined a small team at Instrument and built Greenhouse's marketing website from the ground up. Collaborating closely with designers, we worked to design an accessible, responsive component library with a wide range of flexibility. |
127 | | - |
128 | | - Almost every component can be reversed, and every single page or component slot can be A/B tested, all controlled through the CMS itself, giving Greenhouse's marketing team full control to test optimal user flows to their heart's desire.</p> |
129 | | - <p><a href="https://greenhouse.com">greenhouse.com</a></p> |
130 | | - </div> |
131 | | - </main> |
| 114 | +<section class="skills"> |
| 115 | + <h2>Skills & Tools</h2> |
| 116 | + <ul class="tags"> |
| 117 | + <li>TypeScript</li> |
| 118 | + <li>JavaScript</li> |
| 119 | + <li>Swift</li> |
| 120 | + <li>PHP</li> |
| 121 | + <li>Python</li> |
| 122 | + <li>Ruby</li> |
| 123 | + <li>React</li> |
| 124 | + <li>Next.js</li> |
| 125 | + <li>Svelte/SvelteKit</li> |
| 126 | + <li>Node</li> |
| 127 | + <li>Drupal</li> |
| 128 | + <li>Design Systems</li> |
| 129 | + <li>Accessibility</li> |
| 130 | + <li>Figma</li> |
| 131 | + <li>Storybook</li> |
| 132 | + </ul> |
| 133 | +</section> |
0 commit comments