@Accelerate Media – Website Launch – Ferris Agency


A Collaborative Effort with Accelerate Media

New Website Launch for Ferris Agency: A Collaborative Effort with Accelerate Media

I’m excited to announce the launch of the brand new website for Ferris Agency, an insurance agency based in Rochester. This project was a team effort alongside the talented folks at Accelerate Media. While I was responsible for the website development, I want to give a huge shout-out to the incredible team who worked on the graphic design. Their work laid a strong foundation, and I couldn’t have completed the development without their support.

This relaunch marks a drastic improvement in Ferris Agency’s web presence, and though we’re still in phase one, the progress is already significant. The site was built using custom React Gutenberg blocks and follows the latest best practices for WordPress development, entirely within the block editor.

One of the accomplishments I’m particularly proud of is the site’s stellar performance, consistently achieving a 100% PageSpeed score. While WP Rocket certainly played a role, I spent considerable time minimizing and compressing CSS, implementing lazy loading for images, and ensuring different images were served to different devices for optimal performance.

Some of the more challenging parts of the build included crafting a chevron arrow. It took some creative HTML and CSS to stack two elements and overlap them correctly. After much trial and error, I found CSS clip-path to be the best solution, though it involved carefully cutting out the chevron shape, applying a red background with the same clip-path, and layering everything over an image. JavaScript then helped tie it all together.

Here is what part of the CSS looks like for the effect:

.chevron-container:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--wp--preset--color--deep-red);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), calc(50% + 39px) calc(100% - 42px), 50% 100%, calc(50% - 39px) calc(100% - 42px), 0 calc(100% - 42px));
    z-index: -1;
}

We also used custom WordPress query loops, especially for the staff bio section—don’t miss checking out the bio for their cat!

This project is a great example of WordPress’s potential when it’s not overloaded with plugins. In fact, we only used three plugins on the entire site, keeping things fast and efficient!

Photo Gallery

Tagged Skills

CMS HTML / CSS PHP React WordPress