Portfolio website for sustainability copywriter

Purpose & Goals

The goal was to create a high-performing, easy-to-manage website that would:

• Drive leads down the sales funnel by guiding them through a structured, intuitive layout.
• Support content flexibility by integrating a headless CMS (Sanity) for easy updates.
• Prioritise performance & SEO using Gatsby’s static site generation for fast load times.

Since no design assets were available upfront, I had to work in parallel across design, CMS setup, and development, ensuring an efficient workflow without bottlenecks.

Core features

• Clear navigation and structured layout to make her case studies easy to explore and guide potential clients toward conversion
• Headless CMS integration for seamless content updates, allowing her to maintain her portfolio independently
• Optimised performance for fast load times and a smooth user experience, ensuring the site works well for visitors and search engines

Spotlight feature: Dynamic filtering

One of the most impactful features of the site is dynamic case study filtering, which makes it easy for visitors to browse Sophia’s portfolio based on relevant categories.

To implement this, I:

• Added structured tag fields to each case study entry in Sanity CMS
• Set up GraphQL queries in Gatsby to fetch all case study data along with their tags
• Implemented a client-side filtering mechanism using React state and Framer Motion animations. When a visitor selects a tag from the dropdown, the site instantly filters and animates the case studies without a full page reload, keeping navigation seamless.

Approach

I used Gatsby.js for fast, static site generation. Sanity headless CMS allowed for easy content updates, with Gatsby’s built-in GraphQL layer querying data during builds. Hosting was handled by Netlify for automated deployments, and Tailwind CSS ensured responsive design. Gatsby Image was used to optimise images for quicker load times.

Challenges & Solutions

Tight timeline and no design assets

The project had to be delivered quickly, but there were no wireframes, defined structure, or existing UI elements—only the copy. This required an agile approach to ensure the CMS and front-end were developed efficiently in parallel.

To streamline the process, I:

• Built a modular design system using Tailwind CSS, ensuring UI consistency while allowing rapid iteration.
• Defined the CMS structure first by creating JSON schemas in Sanity, ensuring that the content was well-organised and ready for dynamic querying via GraphQL
• Developed the UI, allowing content to be populated in real-time while front-end components were built
• Implemented reusable components in Gatsby to reduce redundant code and speed up development while keeping the website easily maintainable

Impact & Results

After launch, Sophia noticed an increase in outreach and inquiries. Prospective clients were impressed by the site's professional look and easy navigation, which helped her showcase her portfolio effectively and connect with new opportunities.

Sophia Habl

Plant Copy

Since launching the website earlier this year, I have noticed that business has really taken off. I feel so proud to share my new website with prospects. Thank you Ronald for your amazing work!

Lessons Learned

This project reinforced some key takeaways for me:

• Planning CMS structure early prevents bottlenecks. Defining schemas first allowed content to be populated and tested alongside UI development, making the process much smoother
• GraphQL requires thoughtful query structuring. I improved my ability to write efficient, targeted queries, optimising data fetching for development speed
• Tight deadlines demand a balance between speed and scalability. I learned to prioritise key features, make quick decisions, and avoid unnecessary complexity while keeping future updates in mind
• Clear communication is essential. Setting expectations early helped avoid back-and-forth changes and kept the project on track

And while design isn’t my main focus, I ended up creating a logo for Sophia, which was a fun side project. Overall, this project helped me get faster at building scalable, easy-to-manage web solutions while keeping things clean, efficient, and client-friendly.

Current Status

The Plant Copy website is actively in use, with Sophia managing updates independently through Sanity CMS. The structured content system allows her to keep the site fresh without developer assistance, and client feedback has been overwhelmingly positive.