I was hired as the Lead Developer on this project and was responsible for translating the design team's mockups into a responsive, accessible Wordpress site. Having never used Wordpress previously, this project was challenging. To prepare myself, I took a course on Udemy and read through the Wordpress documentation.
The main goal was to create a custom site with the ability for a non-technical user to easily make updates to the site layout and content. Due to the specificity in the design guides and the need for the site to persist in the future with minimal technical support, third-party plugins had to be kept to a minimum. In researching, I found the best solution to be a custom theme and a plugin to create custom Gutenberg blocks.
I built the theme and plugin from the ground up using a combination of PHP, JavaScript, and HTML/CSS. A few of the notable features that I implemented were:
- custom Gutenberg blocks that allow for easily adding layout items to the site including an embedded YouTube player, multicolumn text sections, information tiles, a full-screen landing page with customizable background, and more
- infinite scrolling for blog posts
- custom color palette and font sizes that could be utilized in both custom and delivered block types
- fully responsive design for all screen sizes
In addition to being responsible for the development, I was in charge of making sure the development environment was set up and updated when needed. This included setting up a test instance of the site and pushing code to the hosting provider via FTP.
Due to my role as a contractor, I do not have ownership of the source code, but the site can be found at franciscostoller.com.