Project
Report

How I worked

I began this project by gathering references, mainly editorial magazine layouts like DAZED and the bold red typography of Freddie Braun’s portfolio. From there I sketched out low-fidelity wireframes in Figma to plan the structure of every page before touching any code.

Once I was happy with the layout, I installed WordPress locally through Laragon and chose Twenty Twenty-Five as the base theme. From there everything was about pushing that base theme as far as I could with custom CSS and content.

Theme

Twenty Twenty-Five, the default WordPress block theme that ships with the latest version of WordPress.
wordpress.org/themes/twentytwentyfive

I chose this theme because it gave me a clean, minimal foundation without locking me into a specific look. All of the personality on the site comes from my custom CSS, not from the theme itself.

Plugins

Contact Form 7, for the form on the Contact page. I created one form (Name / Email / Subject / Message) and embedded it via shortcode.

WooCommerce, powers the Shop page. I ran the setup wizard with Cyprus / EUR, then added a few demo products that match the products described on the Shop page (riso prints, posters, stickers).

Yoast SEO, for the SEO requirement. I filled in basic meta titles and descriptions for each page through Yoast’s sidebar.

WPvivid Backup, how I made the backup ZIP for submission. Backed up files + database in one click.

CSS modifications, the heart of this project

Most of my time went into the CSS. I wrote it all in the Customiser’s Additional CSS area. The full file is around 600 lines. Some of the key things I built:

— A consistent design system: every page uses the same topbar, info row, and section grid so the site feels unified.
, A custom photo-circle component (a red disc behind a portrait photo) that I reuse on the About, Education, and Resume sections.
, A fullscreen navigation overlay built with the CSS checkbox hack, so it works without JavaScript.
, Mixed typography: Archivo Black for the heavy display headlines, Playfair Display italic for the accent words inside them, Space Mono for small labels, and Inter for body text.
, A grainy halftone overlay on every section to give it a printed, editorial feel.
, A scrolling marquee strip between sections.
, Animated red glow on the big PORTFOLIO hero text.
, Responsive layout that collapses to a single column under 900px.

Prototypes

See the Prototypes page for the wireframes and Figma mockups I made before development.

Final notes

I’m proud of how this turned out, especially the typography pairings and how restrained the colour palette is. If I had more time I’d build a proper child theme instead of relying on the Customiser, and add scroll-based animations between sections.