Account
Cart

No products in the basket.

My Portfolio Site

UI DesignUX DesignWeb Design

Creating My Portfolio

Why I built it & what it had to include

Goal: a single, fast, and maintainable hub to showcase work, attract briefs, and publish thinking.
Requirements:

  • Portfolio gallery (custom cards, categories/tags, filters, responsive images)

  • Blog (editor-friendly, Yoast-ready meta, share/OG data)

  • Services and Skills pages (clear CTAs, contact capture via Gravity Forms)

  • Speed, SEO & accessibility (Core Web Vitals focus, semantic HTML5, ARIA where useful)

  • Easy editing for non-devs (modular blocks / page-builder approach)

  • Consistent design system (Bootstrap 5.3 spacing/typography, reusable components)

My Role | Web Designer

My stack, and how I built it

Role: Product designer → front-end dev → WordPress developer (end-to-end).
Approach: wireframes → static Bootstrap comps → WordPress child theme → ACF-powered page builder.

Key implementation details

  • Platform/Theming: WordPress, Bootscore child theme, Bootstrap 5.3.

  • Content model: Custom Post Type for portfolio items, categories for filtering, custom template parts for cards, grids, and headers.

  • Page builder: ACF Pro (Flexible Content + repeaters) to create modular sections (hero, media blocks, icon lists, galleries), so editors can build pages without code.

  • Templating: PHP partials with clean loops and WP_Query, theme filters/actions for layout control, and careful guard rails on save hooks.

  • Front-end: HTML5, CSS3 (utility-first Bootstrap with small custom layers), subtle JS enhancements (e.g., header fade-ins), off-canvas navigation styling and SVG icon color control.

  • Performance: image dimensioning + lazy loading, minified assets, caching with WP Rocket, lean queries, and defer/async where safe.

  • SEO/Sharing: Yoast SEO (titles, meta, schema integration), correct Open Graph/Twitter tags, canonical hygiene.

  • Forms & email: Gravity Forms with SMTP deliverability via Google Workspace.

  • Ops: Local dev → SFTP/SSH deploy on Linux ( /var/www/html ), versioned theme changes, ManageWP for updates/monitoring.

Collaboration & learning

  • Built as a culmination of ongoing learning and collaboration with web developer John McCole—code reviews, ACF architecture decisions, WordPress hook best practices, and performance tuning.

On This Project

Visual Studio Code

ACF Pro

Figma

Bootstrap 5.3

To top