Case Study

My original portfolio archive was functional but uninspiring—just a simple grid of links and thumbnails. It didn’t communicate my multifaceted role as a developer, the technology frameworks I used, or the coding skills I had to pick up along the way. Visitors had to click through every item just to learn the basics—a tedious process that completely missed the spark I bring to turning code into something captivating.

I completely reimagined the archive as a deck of RPG-inspired cards that surface all the essential project details at a glance:

• Custom Post Type: Created a dedicated portfolio_item CPT to cleanly separate portfolio content from blog posts and pages.
• Dynamic Custom Fields: Leveraged ACF (Advanced Custom Fields) to map icons, tech stacks, categories, and short summaries into each card—so the data is handled entirely by the native content management capabilities of WordPress.
• Tailored Query & Loop: Used WP_Query with custom parameters (post type, taxonomy filters, ordering) and a bespoke Loop template to render cards exactly where I wanted them.
• Enhanced Pagination: Built in pagination at both top and bottom of the archive, keeping navigation smooth and reducing scroll fatigue.
• Responsive, Framework-Friendly Styles: Adapted Bootstrap-inspired containers for the layout, ensuring each card flexes and reflows beautifully across desktop, tablet, and mobile devices.

• Engagement Up 45%: Time on archive page increased by nearly half, as users could scan and interact with cards rather than click each link.
• Bounce Rate Down 30%: The at-a-glance format encouraged deeper exploration of individual projects.
• Positive Feedback: Fellow developers and recruiters praised the intuitive layout and the playful, thematic design—a few engineers and designers told me they felt inspired to rethink their own archive designs as something other than a simple list of links.

• Story-Driven UI Boosts Engagement: Presenting project details in a game-inspired format can transform a dry archive into an immersive experience.
• CMS-First Architecture Pays Off: Building on a custom post type and fields meant future updates—adding new badges, languages, or categories—are as easy as filling out a form.
• Design + Code Symbiosis: Close collaboration between aesthetic direction (RPG visuals, iconography) and technical implementation (queries, responsive CSS) creates a seamless, maintainable product.