The Problem with My Own Website

There is a particular irony in a web developer having a poor website. Not because it is embarrassing — but because a developer’s portfolio is their most important sales asset, and if it does not convert, nothing else matters. That was the situation I found myself in with my own portfolio site.

The old design looked like a template. It had the structure of a portfolio — a hero section, some projects listed out, a contact form at the bottom — but it had no character, no visual weight, and no sense of craft. It was light-background, generic-layout, forgettable on first scroll. Exactly the kind of site a potential client glances at and closes within seconds.

For a period, I prioritised client work over my own site — which is a common trap for freelancers. Client deadlines come first, your own site gets pushed back. But at some point, I looked at it honestly and recognised the problem clearly: the site looked like it was built by someone who knew how to set up WordPress, not by someone who understood design, conversion, and the business of building trust online. That had to change.

What the Old Site Was Missing

The issues were not just visual. They went deeper into structure and function:

• No strong first impression. The hero section had no visual impact. Nothing in the first scroll communicated skill, credibility, or differentiation.
• Template aesthetics. The colour palette, font choices, and layout felt generic — like a free theme from 2020 that had not been meaningfully customised.
• Portfolio section with no filtering. Projects were listed flat with no way to filter by skill or category, making it difficult for a specific type of client to quickly find relevant work.
• No proper testimonial system. Social proof existed but was not structured, not manageable from the dashboard, and not presented in a way that built real trust.
• No conversion flow. The page sections did not lead the visitor anywhere deliberately. There was no felt progression from “who is this person” to “I want to work with this person.”

The goal of the redesign was not just to make the site look better. It was to make it work — to build a site that a serious client would land on and feel immediate confidence in.

No Premium Tools. No Problem.

The entire site was built using the free version of Elementor alongside free plugins — no Pro licence, no premium page builder addons, no paid theme. And that was not a budget decision. It was a capability one.

When you have a deep enough understanding of PHP and a precise command of CSS, you do not need a premium page builder to unlock advanced functionality. The features that page builder Pro licences charge for — dynamic filtering, custom post type displays, popup systems, conditional rendering logic — can be replicated and often surpassed with raw code written exactly to the specification the project needs. That is what was done throughout this build.

Every so-called “premium” feature on this site was custom coded from scratch — written in PHP and CSS to behave precisely the way the business and the website required, not the way a plugin was designed to work generically. This is the difference between configuring a tool and actually building a system.

This matters beyond this project alone. It means that for any client, the question is never “which premium plugin do we need to buy to make this work?” The question is always “what is the right way to build this?” — and the answer is almost always cleaner, more maintainable, and more precisely fitted to the business than a stack of paid add-ons would ever produce.

The Architecture: Custom Post Types and ACF Field Groups

The backbone of the site is a custom data architecture built using Advanced Custom Fields (ACF) — the free version — alongside custom post type registration handled entirely through code. This is where most WordPress sites built with visual builders fall short: they have no real data structure underneath. Everything is just page content. This site was built differently.

Two custom post types were registered and fully configured:

• Portfolio CPT — for managing all case studies and projects from the WordPress dashboard
• Testimonial CPT — for managing all client reviews and feedback independently from any page

Each post type was given its own set of ACF field groups with carefully structured custom fields covering every piece of data the front end needs to display correctly. The field groups built for the Portfolio CPT include:

• Portfolio Information fields — project subtitle, completion date, duration, live URL, intro line, and other summary metadata
• Company Information fields — client name, company name, industry, and company description
• Tasty Portfolio fields — the core project data fields including description, services provided, categories, and skills

The Testimonial CPT was given its own dedicated field group:

• Testimonial Information fields — client name, designation, company, star rating, review text, and profile image

What this architecture means in practice is that new testimonials and new portfolio entries can be added entirely from the WordPress dashboard — with no page editing required. A new testimonial is created as a post, the fields are filled in, and it appears automatically on the front end in the right place, styled correctly, ready to display. The site manages itself as a proper CMS rather than a collection of manually updated page sections.

The Design Direction: SaaS-Style, Dark, and Conversion-First

The new visual direction was deliberate and specific: dark background, high contrast, sharp typographic hierarchy, and a layout that reads closer to a premium SaaS product page than a typical freelancer portfolio. This was not a stylistic preference made casually — it was a considered decision about what kind of first impression converts clients.

Dark themes read as premium. They draw the eye to content rather than background noise. They communicate that the person behind the site is intentional and serious about their work. And when executed with proper spacing, hierarchy, and accent colours — which here required precise custom CSS written by hand, not drag-and-drop defaults — they create the kind of first impression that makes a visitor stay and read rather than bounce.

The free version of Elementor was used as the layout foundation. Where its free widgets fell short of the intended design, the gaps were filled with custom CSS and PHP written from scratch. Every section, every spacing decision, every typographic detail that makes the site feel polished was deliberate — none of it came from a preset or a template.

The Portfolio Section: Filtering Built from Raw PHP

The portfolio section was the most technically involved part of the rebuild. Previously, projects sat in a flat grid with no organisation — no way for a visitor to filter by the type of work they were interested in. A client looking for WooCommerce experience could not isolate those projects. A client wanting to see landing page work saw everything instead. That makes proof of work far less effective than it should be.

The rebuilt portfolio section is powered by the Portfolio CPT and rendered dynamically using custom PHP. Two filtering systems were coded entirely from scratch:

• Skill-based filtering — visitors can filter the portfolio grid by the primary technical skill used in each project (WordPress, WooCommerce, Elementor, PHP, and more)
• Category-based filtering — visitors can filter by project type (E-Commerce, Service Website, Landing Page, Blog, and others)

These filters were not built using a plugin. They were not enabled by a Pro licence toggle. The taxonomy registration, the query logic, the front-end filter UI, and the dynamic grid update behaviour were all written in PHP, JavaScript, and CSS — coded precisely to match how this site needed to behave, not how a generic plugin would handle it.

Each portfolio card pulls its data directly from the ACF fields attached to the Portfolio CPT — the project title, thumbnail, category, skills, subtitle, and intro line — all managed from the dashboard and rendered cleanly on the front end without touching the page editor.

The Testimonial Section: Dashboard-Managed, Popup-Enabled

The testimonial section operates as a fully independent system. Testimonials are not hardcoded into any page. They are not managed inside Elementor widgets. They live as their own post type — each one created from the WordPress dashboard with a structured set of ACF fields — and rendered on the front end through a custom PHP template that queries the Testimonial CPT and outputs each review in the correct format.

Adding a new client review is as simple as creating a new post, filling in the fields — name, company, rating, review text, photo — and publishing. It appears on the site automatically. No page editing. No plugin configuration. Just a clean CMS workflow backed by solid architecture.

The front-end presentation includes a custom popup system — coded without any premium popup plugin. Each testimonial is surfaced in the main section with the client name, rating, and a preview of the review. A click opens the full review in a popup built entirely with custom JavaScript and CSS. The behaviour, animation, and styling were all written to spec — because that is what the site needed, not what a plugin happened to offer.

Core Skills Section: Business-Framed, Not Just Technical

The Core Skills section was designed to give visitors a scannable, structured overview of the full capability on offer — not a list of buzzwords, but skill blocks written to communicate what each skill actually does for a client’s business. WordPress is not just “CMS experience” — it is the ability to build custom systems, manage complex content architectures, and deliver sites that perform. PHP is not just a language — it is the tool that makes custom checkout logic, dynamic pricing, and backend automation possible without relying on overpriced plugins.

The section covers WordPress, PHP, Elementor (Free), WooCommerce, JavaScript and jQuery, Performance Optimisation, SEO Structure, Multilingual and RTL development, and Security Hardening. Each block was laid out using Elementor Free and refined with custom CSS to achieve the spacing, visual weight, and icon treatment the design required. Nothing in this section required a Pro widget — it required knowing exactly what CSS to write to get the result the design called for.

The Contact Section and Conversion Flow

The contact section closes the page — and in a conversion-focused layout, it has to feel like a natural next step, not a cold ask. The redesigned contact section is clean, direct, and low-friction. A free contact form plugin was integrated into the Elementor layout and styled entirely with custom CSS so that it matches the dark UI precisely rather than looking like a generic embedded form.

But the contact section only works because of what comes before it. The entire page was structured as a deliberate conversion sequence:

1. Hero section — immediate positioning and credibility, including a stats row (completed projects, client satisfaction rate, responsive design record, years of experience) that establishes trust within the first scroll
2. Portfolio section — filterable proof of work that lets each visitor find projects relevant to their own brief
3. Testimonial section — dashboard-managed client reviews with full popup access, building social proof progressively
4. Core Skills section — a business-framed map of the full technical capability, answering “can this person handle my project?” before the question is even asked
5. Contact section — a direct, low-friction invitation to reach out, arriving after every layer of trust has already been established

Each section earns the next. By the time a visitor reaches the contact form, they have seen the work, read the reviews, understood the skills, and experienced the quality of the site itself as a live demonstration of what is on offer. The form is the easy part — the work above it is what makes someone actually want to fill it in.

The Outcome

The before and after of this project is stark. The old site looked like a starting point — a light, template-style layout that blended into the sea of generic freelancer portfolios and communicated nothing distinctive. The new site looks and functions like a professional business platform. Where the old design said “this person can set up WordPress,” the new one says “this person builds systems that perform.”

What makes this case study particularly meaningful is the method. Every advanced feature on this site — the CPT architecture, the ACF field groups, the filtering logic, the popup system, the dynamic testimonial rendering — was built without a single premium tool. It was built with PHP, CSS, free plugins used intelligently, and a deep enough understanding of how WordPress works to not need anything more than that.

That is the real proof of work this portfolio offers. Not just the projects inside it — but the site itself. Built exactly the way the business needed it, coded to do exactly what was required, using raw skills rather than expensive shortcuts.

A developer’s portfolio is a live product and a live argument for why someone should hire them. This one finally makes that argument — and backs it up with every line of code underneath it.