Background
My goal for my portfolio is to create a fast and simple website with both dark and light themes, a non-intrusive, and clean design. My aim is to be intentional with my copywriting, keeping SEO in mind, and ensuring relevance to the industries I work in. I also incorporate DevTools audits to inspire the design process. The tools I used include WordPress, OceanWP Theme and Elementor.
Chrome DevTools Audits
My hope is that by starting in a minimalist way and reaching the minimum viable product, my focus can be on the essence of what is most important first.
By doing that, I hope to build a foundation that focuses on simple solutions with significant impacts. By incorporating the guidelines from the Google Dev Tools audits into the foundation, I hope it becomes a guide and inspiration to keep things simple.
This will allow me to learn more about their parameters for performance, accessibility, best practices, and SEO, and how they impact the process and the end product. In time, I will delve more into the individual steps, but you can get the Chrome DevTools for free from their website.
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.
Cross Device Compatibility
By simplifying the content and design, I hope it will be easier to create consistency across devices. I don’t want there to be too much content that is visible only on desktop. And I want to avoid creating content specifically for mobile, as well as steering clear of the need to make too many custom solutions for different device sizes.
Material is a design system that helps teams build digital experiences.
Light and Dark Theme
One important common thread in the website concept was to incorporate both a dark and a light theme. There is research supporting either side of this conversation; therefore, I wanted to provide both options with a toggle.
Currently, I am testing WP Night Mode by Marko Arula. It’s easy to get started, and it works seamlessly across devices. This decision had a major impact on the design, as discussed in my article about LLD Website Design.
With this plugin, I’ve found that a simpler design facilitates a smoother toggle between the themes. Therefore, I aim to keep things clean. This approach cohesively aligns with the clean, instructive theme I set out to build, and I hope it will serve as a solid foundation for showcasing the work effectively.
Wordpress plugin which enables users to switch between Night and Day Mode.
Loading Speed
Page speed and loading have become more important in recent years. It’s more accessible and provides a better user experience. Some of my design choices, such as CSS for both a dark and light theme, and using WordPress plugins, are going to have their impacts on the speed.
I want to go through some of the parameters of PageSpeed Insights and find ways that make sense to optimize for speed while keeping a balance with the website concept. I still have some work to do; this is a learning process.
Make your web pages fast on all devices.
Copywriting
For this project, I wanted the writing for the digital and print portfolio, the website, and SEO to all work well together. I wanted there to be good cohesion between the website design and brand identity. The goal is to keep the text to a minimum in each category and have the ability to borrow text between mediums.
When preparing the text for the website, I’m looking at SEO optimization as an important constraint and point of inspiration. This will help me find a balance between the marketing elements and staying on brand—being to the point but keeping personality within each text, which is informative and on brand.
Some of the tips for optimizing SEO have a way of getting to the essence of the information you want to communicate with your audience. They have greatly inspired me in the direction I want to take the content and the kinds of posts I want to write—telling the story about who I am, the work and projects I have worked on, and where we go from here.
Reflection
This was a great learning experience that, unfortunately, I had to abandon and start fresh. After years of building and rebuilding my portfolio on the same database, using different themes, frameworks, and testing other techniques, I created a monster that had become out of control.
Not too long ago, when attempting to turn off a plugin, the database completely gave up on me, and I decided, rather than recover the backup, it was time to launch my new portfolio.
In general, I think anyone who wants to, or does, work with producing or maintaining websites should have personal projects like these—fun playgrounds to test things without deadlines or requests from PMs.
Resources
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.
Material is a design system that helps teams build digital experiences.
Wordpress plugin which enables users to switch between Night and Day Mode.
Make your web pages fast on all devices.
