Petitioner is a WordPress plugin that allows you to create petitions and send them to the target email.

Petitioner

A custom Google Tag Manager template that integrates HubSpot's cookie banner with Google's consent mode.

Hubspot CMP + GTM

I’m always busy with my next personal project. Here’s a peek at what I’ve been up to lately:

Personal projects

Hi, I am Anton Voytenko

I make custom web applications using Javascript, PHP, and React. My hands touched over [highlight-primary]300 websites[/highlight-primary] for digital agencies and startups. I am currently employed full-time at Rewind but also take freelance projects on the side.

A full-stack [text-gradient-blue-yellow]web developer[/text-gradient-blue-yellow] from Ottawa

Rewind Backups _ Top-Rated Backup Service for SaaS Apps (1).gif

I was introduced to the company through a shared connection. I had a blast working with Rewind as a freelancer and later joined as a full-time employee. During my time at Rewind, I’ve worked on many different projects, many of which included their marketing websites. 

Rewind helps businesses protect their SaaS and cloud data. Their backups solution has integrations with several apps like Shopify, BigCommerce, QuickBooks Online, Github, and more. Just like any other SaaS company, their online presence and brand are very important aspects of their business.

Rewind’s website was originally made using a visual builder (Divi). Divi worked well while the team (and the site) was small and didn’t have a developer, but became a burden once the site became too big to manage every page one by one. The site was slow (10s fully loaded time) and relied heavily on many additional plugins to handle things like sliders, forms, and popups.

All 700 pages of the website were made using Divi, which meant that you couldn’t disable it until every single one of them is not using the builder. The challenge was to convert pages into parts instead of doing everything at once. Both variants also had to look identical to keep a good user experience. The project had to be broken down into phases:

Most important pages. A custom child theme was created to be able to switch off Divi for the individual pages. When you choose to use a custom theme instead of a builder, all scripts/styles of the theme & any additional extensions were removed from the page. On the surface, you were getting a custom theme, but only for that specific page. This was created for the most important pages of the site (data from Google Analytics was used to decide this).

Other important pages & archives. In this phase, templates for archives and single templates were made. A lot of elements were enhanced during this phase.

The leftovers & dynamic components. Rewind’s website had a lot of pages that didn’t fit into a specific category but still needed to be reworked. These pages were addressed during phase 3. Even though Divi was causing issues to the site, it also had some benefits, like its flexibility. Rewind’s marketing team was able to create unique layouts quickly without needing a developer. This flexibility was partially kept by introducing a dynamic component system to WordPress’ backend. This system was made based on Flexible Content functionality from Advanced Custom Fields Pro. This functionality allowed to reuse any section that was ever created on the site, making the editing process fast and keeping it flexible.

Standalone theme. In this phase, the site was completely reworked and converted to a standalone custom WordPress theme on Bootstrap 5. The theme uses SASS and ES6 Javascript compiled via Babel. The new theme is managed with GitHub to make sure Rewind has full control over what goes live.

Completely resolved website downtime caused by plugin conflicts

Rewind's website has several integrations to help meet the needs of its internal teams.

The site pulls all of the partners using the PartnerStack API and caches them via WordPress transients. This data is used throughout the site to personalize partner-related landing pages with partner-specific data. The site is also able to generate partner-specific landing pages without creating entries in the database using custom rewrite rules.

There is a form integration that styles HubSpot forms and adds new variants to them: a pop-up form and a multi-step form. Certain user actions are captured with HubSpot’s custom behavioral events.

Started as a Divi extension, this custom WordPress plugin is meant to show pricing for different products Rewind has to offer. Everything is controlled via WP admin: you can edit text, hide/show certain elements, and choose different price formulas (per-item calculations, tiered pricing, plan pricing, or a mix of 3). From a technical standpoint, the backend functionality is organized into PHP classes to make it easier to extend and manage. The front end uses vanilla ES6 Javascript and SCSS. The plugin is made to be extended outside of its code: there are several WordPress hooks baked in to let you add new features without changing the source code. There is also a custom JavaScript event that lets you make changes to the frontend based on the interaction with the price slider. This is used to personalize the page (like updating CTAs based on the slider value) and also tracking (like sending a GA event whenever a certain plan is shown to see demand).

One of the most popular and converting pages on the website 

As the site evolved, I had a chance to create a suite of custom Gutenberg blocks using React. The blocks are mirroring the component library created by the design team. This addition to the website allowed Rewind to create landing pages 3 times faster and enable more non-technical people to create them.

Every feature listed above is thoroughly explained in over 20 pages of documentation. There are docs explaining how to use the theme, where to edit the pages, and even what components are available. There is also a document for the third-party agencies that go over our setup and how to properly work with the site.

This project included setting up Google Analytics events for the most important actions on the website, such as:

Website migrations, custom plugins and themes, various marketing integrations, tracking, and more.

PHP, SCSS, JS (ES6), WordPress, Babel, MySQL, React, Next.js, Bootstrap 5

A complete overhaul

Site overhaul, React microsites and more for Rewind

SEO Variants _ Grow Your Sales With Flexible Product Variants.gif

SEOVariants, a Shopify app for generating SEO-friendly variants, required a high-performance, SEO-optimized website. The site was built using Astro.js, a framework that enhances efficiency by generating static files from a headless CMS. This setup allows quick content updates and easy editing through reusable sections. Custom transitions ensure smooth loading experiences.

The site employs TinaCMS, which stores content in markdown files, allowing for excellent git-based version control. Despite adding performance-impacting marketing scripts, optimization techniques were implemented to maintain solid Google PageSpeed scores.

Additionally, the website features a custom help portal integrated into the CMS, enhancing user support and accessibility.

The website is built on Astro.js, a web framework designed for ultra-fast and efficient websites.

Unlike traditional CMS setups, where content is fetched live from the database with each user request, Astro.js improves efficiency by converting the site into static files with content directly from the headless CMS. This means pages are only generated once, and incremental rebuilds occur whenever content is updated to add what's missing.

Pages in the CMS are constructed from reusable sections, making the editing process quick and easy, allowing SEOVariants to create content rapidly.

The site uses TinaCMS for the content management system, which saves all of your data in markdown files. Because of this, you are able to store all of it in git and have an amazing version control. This approach is fairly uncommon, but there are definitely some big companies that use this, like the Smashing magazine.

The project required the addition of several marketing scripts, which initially caused a significant drop in performance. To fix this, I applied some optimization techniques to ensure the scripts ran smoothly without slowing down the load time.

The website features a built-in help portal that is fully integrated into the CMS, ensuring seamless access to support resources. The changelog includes an API endpoint that allows data to be passed both to the app and the website, ensuring synchronized updates across all platforms.

A scalable headless website for a Shopify startup

Admin preview

Astro.js, TinaCMS, Node.js, TailwindCSS, HubSpot

Headless and serverless

Powering growth with a scalable headless website for a Shopify app

seoplus-new.gif

As a web developer at seoplus+, I have worked on more than 200 websites. While the majority of the project was on WordPress, seoplus also has clients on platforms like Shopify, CraftCMS, Drupal, Grav, and even custom CMS solutions. In order to stay respectful to seoplus+ and not create any conflicts of interest, I won’t be directly disclosing the names of the clients.

seoplus+ is an award-winning digital marketing agency with a strong focus on SEO (as you can probably imagine from their name). They hold a special place in my heart because I have never seen so much bonding happening in the workplace. Whether you are a client or their employee, you will be surrounded by friends.

During my time in seoplus I had an opportunity to work on several projects for a Canadian phone repair company. I’ve worked on maintaining their WordPress website, adding new features, and working on the performance of the site. Below are a few projects that are worth mentioning.

The company needed a multi-step tool that gives users an instant quote on the device they want to sell.

The user selects their device model, brand, and specs. The user then answers a few questions that help determine the condition level. After that, the tool connects to a third-party API of the phone prices and returns the correct one based on the API. From a technical standpoint, the tool was mainly written in PHP - it is a custom page template that decides which content to show based on the URL query parameters. There were 2 versions created for the A/B test - one that gives the quote instantly and one that sends it over email (a Contact Form 7 plugin extension was created to pass in custom shortcodes in the email body).

The company needed a tool that will allow its users to book an on-site repair session with one of their technicians. Here is how it works:

The user enters their address or a postal code

The system assigns a technician that covers that area

A booking window for that technician is shown to choose the date and time.

Most of the functionality was handled in JavaScript using the jQuery library. The address field is using the Google Maps autocompletion API. The booking component has custom integration with a third-party booking system.

Below are a few projects worth noting that were made for an Ottawa-based rental company.

Automating the content throughout the site

The company has a list of rental properties that are shown on its WordPress website. The information on these listings changes every month, so it needs to be updated throughout the site. Originally, the website and the list of properties were a lot smaller, so their theme was not automating a lot of the things that should be automated: pricing was often a text field and had multiple different formats, which meant you have to update everything manually every time something changes.

To solve this, I proposed a project that will allow the pricing for all of the properties to be controlled in one place. An options page was created that allowed you to create a relationship between a property page and a price. To allow usage of the price in the WYSIWYG editors, a few custom shortcodes were made, one of them was a shortcode that shows the “Starting from” price based on the cheapest option of the selected property type (1-2-3 bedroom apartments, townhomes, houses).

This project drastically reduced the number of hours needed to update the website.

The company needed a new listing page that would show all of its available properties. The page had to have a filtering system that lets you choose the price ranges, amenities, property types, and features. This functionality was mainly created with jQuery and the properties were pulled from the WP Rest API.

While working at seoplus+ I’ve made a lot of custom themes for WordPress. To avoid any conflict of interests, I will not share the company names, but here are some of the project types that I’ve done:

Traveling museum exhibit website: a custom theme with an integration with Google Maps to show their current exhibits throughout the world. Built with Bootstrap 4 and jQuery

Testing facility for self-driving cars: a custom WP theme built with the Understrap framework

A new website for a pest control company made with the Understrap framework

Working on a client site’s performance was a common task at seoplus+ since a lot of clients already have a site and need help promoting it. Because of this, I’ve done a lot of work optimizing websites. Some of the common improvements include:

reducing the number of resources loaded on the page

lazy loading elements or breaking down into subpages

Another common task in seoplus. I’ve done many website migrations during my time there, some of which included writing custom scripts to automatically migrate/create post types based on the data available.

Seoplus specializes in SEO, so every website we worked on was made with best SEO practices in mind. There was also a lot of work-related to SEO on existing sites. Here are some of the tasks I’ve done:

Find & replace text actions via the database

Custom WordPress themes, website improvements, working with third-party APIs, site optimizations, technical seo work, website migrations, maintenance, and more.

PHP, CSS, JavaScript, WordPress, Shopify, GravCMS, Bootstrap 3,4, jQuery

Custom WordPress themes

Projects done while working for seoplus+

allrotors-preview.gif

Allrotors needed a new website for their custom e-commerce PHP CMS. Project was done for Superior Web Systems.

A full-stack web developer from Ottawa

Latest case studies

Site overhaul, React microsites and more for Rewind

Powering growth with a scalable headless website for a Shopify app

I offer web design and development services of all kind

Personal projects