👋 Hello there!I’m Kyle Bavender.
I am a Front-end Developer working at Studio Science. I have been building custom user interfaces, design systems, storytelling animations, and interactive experiences for companies large and small the better part of a decade.
Between my years of development experience and design background, I have a big-picture, user-centric view of the web platform. When I work, I care about the details; I “sweat the pixels” of an interface. Accessibility, performance, and user experience are considered from the start.
Below are some recent projects that I have had the privelege of working on.
Recent Work
Studio Science
With Studio Science I have built custom marketing sites, developed interactive experiences, engineered modular admin systems, developed style guides, integrated with APIs, and much more. I am fortunate to get to regularly empower companies and people in my work.
I have also created complex storytelling animations, conducted web performance audits, led client presentations, and more. Increasingly I am leveraging serverless platforms and reactive, stateful Javascript to enhance everything from feedback loops, to code sustainability, to user experience.
Genesys Product Tours
Highlights
- Wrote a bespoke vanilla JS front-end application, including state management, back/forward history, and more
- Conceptualized & built back-end schema, fields, & controls
- Co-designed the UX flows, architecture, & interaction model
- Validated UX with a minimal web-based prototype
- Enabled the Genesys web team to create their own embeddable, customized product tours
- (WIP 2021-2022) Extending functionality with new features at Genesys’ request for continued work
See a Product TourSee under the "Make your agents your customers’ heroes" headingBloomerang Pricing Calculator
Highlights
- Wrote using a stateful, reactive, functional JavaScript pattern
- Developed a cross-browser, truly custom range input
- Leveraged CSS Custom Properties to deliver "gliding" LERP’ed animations of the tooltip and slider thumb
- Wrote a custom container query-esque Resize Observer script for more responsive & dynamic sizing of the pricing card
- Used CSS Grid for managing multiple layouts
View the Pricing CalculatorMost of the site was developed by others on our team; I fully owned the Pricing Calculator project.Genesys Empathy Assessment
Highlights
- Developed the assessment as a reactive, stateful JS application
- Wrote dynamic data visualization for the results page/report using the Chart.js library
- Integrated with a client side PDF generation library
- Gathered report PDF and assessment data, and used a mixture of APIs to send them to different places
- Established back-end structure using custom fields for Genesys to customize questions, scoring/weighting, and more
Quorum
Highlights
- Strategized a modular-based approach to faithfully, responsively bring the design to life
- Built admin-controlled module customization systems for interweaving stylized lines, custom edge dividers, and more
- Wrote custom lazyload treatments to limit loading of certain modules until they are in/approaching the browser viewport
- Integrated Lottie animations with admin controls
- Leveraged advanced CSS layering & masking techniques
- Consulted with design team on opportunities & feasibility
Code42 Front-end Modules
Highlights
- Provided ready-to-implement front-end modules prepared for the WordPress Block Editor
- Documented all modules & variations in a visual module library, and components & elements in a style guide
- Used Eleventy (SSG) + Netlify for rapid iteration
- Collaborated with the Code42 development team to codify patterns and optimize delivery
- Built a project tracking interface using Eleventy front matter
View the Finished Code42 SiteThe development of this site was done by the Code42 team, using the markup, styles, layouts, and patterns that I established.Searchspring
Highlights
- Employed CSS Masking in a module edge divider system
- Leveraged CSS Custom Properties for relational, context-aware systems of values
- Developed a custom, flexible Tabbed Content module
- Wrote JS to enable swiping on certain modules
- Implemented the designed-by-Searchspring site according to their Adobe XD prototype & feedback
Emplify
Highlights
- Developed a complex, animated, parallax home hero brand expression
- Aided and informed design of the brand expression as well as other modules
- Built an admin-controlled system for module edge dividers
- Built all modules to be fully customizable in the admin
- Created an in-view fade-in animation system
Visit EmplifyEmplify has been acquired and has replaced their home hero brand expression. Demo available upon request.
Rare Bird
Prior to joining Studio Science, I worked at Rare Bird Inc., where I developed complex sites & experiences from scratch, built an internal front-end library, designed & developed e‑commerce experiences, and much more.
I had the pleasure of working with many clients while at Rare Bird, including Harvard Health Publications, Superman Hall of Heroes, Cub Cadet, Premier1Supplies, Intelligent Fiber Network, and Reis‑Nichols Jewelers.
Annie’s Kit Clubs
Highlights
- Developed most of the Kit Club “network” of sites
- Made a multi-site build process using Laravel Mix (Webpack)
- Created shared libraries, methods, and variables to speed up the creation of new sites
- Used Laravel Blade templates for modularizing code
- Used CSS border-image, clip-path animation, grid, calc(), injected SVGs, & more to achieve a variety of effects & styles
- Worked alongisde other developers in git
Annie’s Fiction
Highlights
- Worked with our designer to strategize & plan various information architecture and UX aspects of the site
- Designed & implemented hover, focus, interaction treatments
- Implemented e-commerce cart & checkout front-end layout, styling, and UX details
- Wrote custom JS for handling interactive interface elements
- Leveraged & extended the delightful Flickity slider library
Highlighted Skills
Recognizing skills lists can be a bit unnecessary at times, I am aiming to list skills that I have achieved some relative level of true mastery over. Not just “I used this once“.
In the past few years, I have been aggressively leveling up my knowledge of Javascript — particularly for reactive, stateful applications. This site has been handwritten in React + custom React Hooks using the Next.js framework.
Front-end
- Advanced CSS
- Semantic HTML
- Vanilla JS
- React
- Next.js
- SVG
- Web Standards
- Web Performance
- Lighthouse & Core Web Vitals
- Accessibility Standards
- WordPress Themes & Plugins
- WP: Advanced Custom Fields
- Serverless platforms
- Browser Testing & Debugging
Design
- Interaction Design
- UX Patterns
- User Interface Design
- Web Animation
- E-commerce UI/UX
- Design Systems
- Design Critique
Tools
- VS Code
- Chrome Dev Tools
- Terminal / CLIs
- npm + build tools
- git
- Figma
- Sketch
- XD
- Photoshop
- Illustrator
- GSAP
- macOS
Currently Learning
Most of the items below are attached to my interests in development, engineering, automation, and design — and have found homes in a project, or test case. Several of the items are skills & tools that I am learning through my current projects at Studio Science.
- Single Page Applications
- React Query
- REST APIs
- GraphQL
- TypeScript
- Software design patterns
- Headless CMSs
- State Machines
- CI & CD