Erin Witzel

Designed and developed a custom WordPress site based on an existing website and identity. As an international dog rescue, this site required multiple language support using PolyLang. The site is designed to allow for easy perusing and sharing of adoptable dogs, features several contact forms, and more.

This portfolio site was one of three related sites for this client, so they all shared a side navigation in addition to their individual navigations. Within the portfolio, the projects have a unique side-scrolling display, adding complexity to perfect programmatically. Other text pages use a variety of layouts, which are made easy to update in the backend despite the complicated frontend.

Designed and developed this small but effective site for a Florida-based greyhound rescue, Greyhounds in Motion. Using the idea of “in motion”, I opted for slow-motion videos of greyhounds running on the homepage. The site uses various fun scroll effects to keep with the “in motion” theme. With limited content, the design really carries one through the site in easy-to-consume bites of information. The site also features a lengthy, conditional adoption application form.

Small portfolio website for artisan potter, Carl Witzel, aka. my father!

With a wide variety of layout components, this site utilizes the best capabilities of WordPress’s Gutenberg Blocks and the Advanced Custom Fields plugin to create customized block types to facilitate the range of content. The flexibility this approach offers can’t be understated! Most importantly, the custom blocks are easy to update by content editors.

As my own personal website, featuring my illustration work, I of course had free reign on design and functionality. I implemented a single-page scrolling site that has seamless background color transitions and AJAX calls for loading project content on click. As a single-page site, extra attention to permalinks is necessary for good SEO. The URL updates on scroll using Waypoints.js and History.js to dynamically push the new permalink.

This site implementation brought Metropolitan Bakery from a clunky payment processor online store to Shopify—a move that has opened many opportunities to expand their e-commerce, which proved particularly important during the COVID-19 pandemic. The templates and styles expand upon the Debut default theme with custom block types to expand functionality. Customizable color setting themes were also added as a way for the client to easily choose holiday colors to display on the site. The site has many other expansions, driven by client requests for features on the front-end, but also inventory, shipping, and order management on the backend side of things.

The design of this site presented many challenges to consider. The loose layout needed to be incorporated into WordPress in a easy and logical way to allow for client updating. The layouts were achieved using Flexbox and controlled in the backend with ACF Custom Blocks in the Content Editor that give options for sizing and positioning. There are also fun dual-scrolling pages for a bit of an unconventional user interface.

Highlights of this site include smooth page transitions with Barba.js, snapping pages on scroll with CSS’s new “scroll-snap-type”, and the utilization of the new “Intersection Observer” JS event listener.

This site is a self-started pro-bono project. After initially getting involved with my local civic association, I noticed the group’s website was down. I reached out and offered to help fix the problem and create a new site for them. As the new Web Master, I subsequently became a board member! The project had little direction, so I was tasked with making all of the decisions, including design, functionality, programming, and even some content writing. As a site with a wide audience, I kept the mobile-friendly design straightforward for ease of use.

This site involved a complex filtering system with a large amount of items to keep organized in the backend. The hundred-plus projects featured under “Work” are stored in WordPress as a Custom Post Type to allow for simple filtering using Post Categories. The filtering system on the frontend allows for cross-filtering between categories. This particular site uses Isotope.js and custom-built JS code using GET variables in the URL to perform the user interactivity of the filters.

This single-scroll site features AJAX calls for dynamic content load without page change, smooth background color transitions on scroll, and dynamic updating of the URL bar. One of the more unique aspects of the site, especially from a coding-perspective, are the thumbnail rollovers in the Gallery section. Achieving the see-through cut-out number effect was a challenge. The solution seen here is a dynamic SVG that masks the thumbnail image with the current number count. Thus, the effect is fully-dynamic and allows for easy growth with no burden on the client to produce extra assets.