Building My Portfolio

Settling up WordPress with Hostinger

I chose Hostinger as my hosting provider because of its affordable pricing and built-in WordPress integration. Once I had my domain name secured (markcunningham.help), I installed WordPress and reviewed different templates to build from.

After testing various themes, I settled on Blocksy due to its lightweight design, speed, and extensive customization options—an ideal combination for performance and flexibility.

Essential Plugins – What I Installed First

Once WordPress was ready, I installed a set of core plugins to improve security, speed, and overall functionality.

Code Snippets

This plugin allowed me to add custom functionality to my website without modifying the theme’s functions.php file. It made adjustments easier to manage and ensured safe customization even after updates.

Wordfence Security

Security is a priority, so I installed Wordfence to protect against:

• Antivirus threats
• Firewall protection
• Malware scanning

This ensures my site remains protected from brute-force attacks and security vulnerabilities.

LiteSpeed Cache

Website speed directly affects both SEO and user experience, so I installed LiteSpeed Cache to:

• Enable page caching for faster loading times
• Minifying CSS/JS files to improve performance
• Optimize images for better load times

This keeps my site fast and responsive, especially when on a mobile device.

Tested & Removed: LotieFiles

Originally, I experimented with Lottie animations to create a moving cloud effect for my homepage. However, I eventually removed it due to accessibility concerns (motion-heavy elements), distraction to content readability, and increased site load times.

While visually appealing, I prioritized performance and usability over aesthetics.

Customisation & CSS Fixes

Once my core plugins were in place, I set up my brand guidelines through the Blocksy Theme Customiser, applied the Sky Layered color palette, and adjusted the typography and button styles.

However, some theme settings didn’t apply correctly, so I added custom CSS to correct color consistency, adjust buttons and hyperlink styling, and remove white space across the site.

Use Case Examples:

Fixing Header Title Colour: The site title in the header was displaying yellow instead of orange. To fix this I added:

.site-title {
    color: #FF8C42 !important;
}

Removing Page Titles Globally: I didn’t want the default page titles to show unnecessarily. To fix this I added:

.page-title {
    display: none !important;
}

Forcing Blog Hyperlinks to Be Orange: Some links appeared in yellow, so I added this code to ensure all blog post links were following my branding:

.single-post .entry-content a {
    color: #FF8C42 !important;
    text-decoration: none;
}

SEO & Analytic Setup

Rank Math SEO

For SEO, I installed Rank Math to improve meta descriptions and title tags, optimize on-page content for better search rankings, and generate structured schema markup automatically.

Site Kit by Google

To track website performance and visitor insights, I linked my site to Google Analytics and Google Search Console.

What I Should Have Done First (Lessons Learned)

Set Up a Child Theme First

Since I was overriding multiple Blocksy settings with CCS, I should have created a child theme using a plugin first. This would have kept customizations safe from theme updates, allowed for easier future changes, and enabled PHP modifications if needed.

Now, adding a Child Theme plugin is on my list of things to do amongst many, many others.

What’s Next?

With the site’s foundation in place, the next stage is refining the visuals, user experience, and content structure. In my next blog update, I’ll focus on fine-tuning the UI/UX design, optimizing images and accessibility, and further developing the homepage and portfolio structure.