When I set out to redesign my portfolio website I had two goals in mind. First, I wanted to give myself a platform I could use to write about my work and my process as a front-end developer. I also wanted to make a more modular site that could be iterated upon and added to more easily.
Second, I wanted to improve the accessibility of my website. To do so, I targeted three areas:
- Better adherence to the WCAG guidelines for accessibility.
- Improved color contrast on all content.
- Improved compatibility with legacy browsers.
I sought to do this while maintaining a simple, modern design.
I started by determining the desired content and layout of my front page. To do this, I sat down with a pen and paper and made a list of all the necessary information for the page, as well as possible layouts for this content.
I then used Automattic’s excellent Underscores starter theme as a base for my theme. I turned my HTML prototype into a front page template and a reusable header and footer. I then reused components from the front page to make a template for a blog page and for individual posts. I also used the Advanced Custom Fields and Custom Post Type UI plugins along with custom PHP in order to more easily add, subtract and edit content on my website directly from the WordPress dashboard.
The Finished Product
The final product achieved my goal of increased adherence to web accessibility standards. Additionally, the creation of a custom-themed WordPress site will allow for smoother and alterations and enhancements going forward due to WordPress’s modular template structure. Finally, the addition of WordPress’s content management system to my website gives me a platform to better document my projects and progress.
The code for this project is available on GitHub, and I intend to continue updating this theme as my needs for this site change.