Projects

I was the project lead for Mole Street’s new website, working with a junior developer on the initial development, and then keeping things organized when two additional developers were pulled in at the end of the project to meet an accelerated deadline.

This included:

• Setting up the codebase in a way that was easy to use and scalable (and making sure everyone on the team understood and maintained the setup)
• Using HubL macros, Field.JS partials, and SCSS mixins to create a modular, scalable website
• Working closely with the designers over a few months to create a design system that aligned with the code and could be a blueprint for future projects

As the project lead on our in-house website rebuild, she guided the technical direction, mentored teammates, and thoughtfully planned for long-term scalability and maintainability. She shaped the structure of the codebase in a way that set the team up for success well beyond launch. The impact of her leadership was immediate—the site went live smoothly and sparked new business opportunities on day one."
—Sam Morgan, LinkedIn Recommendation

With over nearly 40 books published across multiple genres, Janette needed a website that seamlessly melded a decade’s worth of online content and created a unified brand. I designed and developed a custom template that used ACF fields to make it easy to update the site's content and give her the flexibility to grow.

The majority of the content for this site was related to the books, so we created a custom post type for her to easily manage her books and their related content.

We wireframed several options for the Book Listings page in Figma and ultimately went with an alphabetical card listing that was filterable by categories, with a text listing of all books underneath.

For the post pages, we created a template to display the various content for each books—synopsis, blurbs, links to bonus content, other books in the series, video trailers, CTAs to leave reviews, and more. Using ACF flexible layouts, I was able to create uniformity among the book pages, while giving her the option of omitting content for books that didn’t have as much.

A related posts module shows related books by category—YA, adult rom-coms, Sci-Fi/Fantasy, etc.

Other fun WordPress customizations included a custom greeting message with adjusted hours as a playful nod to Janette’s night-owl tendencies: "Good Morning" doesn't display until after 4am.

This theme became the boilerplate template I used for other Author Sites in the future.

I was the primary developer on this full site build for a community college in Illinois. The project was done in three phases, which meant we didn't have the designs 100% completed when we began. Because of this, I later went through and refactored some of the earlier modules and templates to make sure the project was consistent throughout and the components were as modular as possible.

Lisa has a keen eye for scalability and re-usability within her work, and has a consistent understanding of how future work might benefit from what she does today… This future-thinking development has also been apparent on some of her larger-scale website builds, like Rend Lake College, where Lisa’s code splitting makes it easier to dive into the project without being the individual who built it. This is a skill of Lisa’s that doesn’t just benefit her work, but benefits the whole team.”

— Performance Review, December 2024

In addition to the new theme, the project also involved challenging migrations from their old custom CMS, including old blogs, multiple archives, and tens of thousands of resource files.

Events Module

A favorite I have from this project is the events calendar. This HubSpot module uses vanilla Javascript to load events from a HubDB table.

The module also has a list view, which preserves the same navigation.

Each calendar item links to an event page that is dynamically generated from the same HubDB table.

Client Training

I also worked with the strategist and consultant to train the client's internal team on HubSpot. Initially, we had only trained the primary points of contact who were involved with the creation of the site. However, because of the scale of the project, they had recruited additional assistance from team members who were not familiar with HubSpot, and there was definitely a learning curve involved. About a third of the way through the content-loading process, after identifying repeated problems and areas of improvement, we recommended a second training with the rest of the team, to go over HubSpot's page editor and the way our themes and modules were set up. This resulted in an immediate improvement in the speed and quality of the page creation.

“Clients love Lisa. Clients she’s been dedicated to fully, like Rend Lake and Achievement Network, speak highly of her presence on calls and trainings, and her willingness to walk them through documentation and HubSpot features.”

— Performance Review, December 2024

View Codepen

Inspired by an artist on Instagram, a few years ago I wondered if I could create a digital bookshelf using only HTML and CSS.

This involves a keen eye for detail, down to the last pixel. My processes boils down to:

1. Find comparable fonts. This is more difficult for older books than newer ones that use modern fonts with web versions.
2. Use Figma to match colors and get the size of the elements. All of the images are scaled the same so that exact pixel widths can be used.
3. Create Logos and other accent shapes: By breaking down icons into simple shapes, I am able to recreate them without SVGs.
4. Add shadows and highlights with linear gradients and clipping masks. This is what adds depth to the images and creates a hyper-realistic look.

You can read more about the project on Instagram!