▶️ Final Design
🔍 Research & Early Setup
Before building my first portfolio, I grounded my approach in industry research. Resources from Nielsen Norman Group strengthened my understanding of usability and accessibility, while SEMRush sharpened my SEO and content strategy. These principles guided the structure and presentation of my initial build.
With this foundation, I launched a multisite portfolio using Astra Pro and Elementor Pro. Each discipline lived on its own subdomain, with tailored layouts that let me provide recruiters and hiring managers with direct links to the most relevant work for each application. This solved the challenge of showing diverse skills without overwhelming visitors.
Over time, the system’s weaknesses surfaced: plugin bloat slowed performance, customization was limited, and the structure constrained creative expression. What once clarified my work eventually restricted it, setting the stage for a custom-coded rebuild.
🎨 Art Direction & Design System
My previous site was limited in color, visually flat, and weighed down by slow plugins. It didn’t reflect the range of my skills or the energy I wanted to communicate. For this new version, I wanted a system that was functional but also pushed beyond traditional web and product design conventions.
My vision centered on expanding the light/dark mode into a full experience: light mode as playful yet restrained, and dark mode as immersive and interactive — much like how Las Vegas “comes alive” at night. To refine this direction, I developed multiple mood boards exploring different aesthetics before finalizing the one that defined the design system.
Style Guide Development
While developing my style guide, I tested every color pairing in WebAIM’s contrast checker. Some combinations failed AAA but passed AA, the recognized WCAG standard for usability, allowing me to balance expressiveness with inclusivity. I tracked clashes in a custom accessibility chart, which doubled as a coding reference to avoid pitfalls during development.
Finally, I built light and dark palettes as complementary pairs. Dark mode borrowed lighter accents from the light palette, while light mode pulled darker accents from the dark set. This intentional swapping created consistent contrast and tied both modes into one unified system.
Web Design Direction
After finalizing my style guide, I explored website styles that could complement it while reflecting my brand. I wanted something nostalgic yet bold, with bright, playful colors balanced by structure. That led me to neubrutalism, a design approach known for its high-contrast layouts, vibrant palettes, and unapologetically raw edges. It captured the expressive energy I was aiming for while aligning with the accessibility and consistency already built into my system.
✏️ Wireframes & Mockups
To translate my design direction into structure, I created low-fidelity wireframes in Procreate. These early sketches mapped navigation, hierarchy, and page flow across the main portfolio site, subdomains, and key templates like galleries and case studies. Working at this level gave me freedom to test layouts before visuals—ensuring accessibility, consistency, and scalability across the entire multisite system.
⚙️ Development Journey
I began with basic <div> layouts the way I first learned to build WordPress sites. Revisiting this reminded me why I leaned into computer science, but it also showed how outdated and fragile that approach had become. When the code kept breaking and lacked responsiveness, I started researching how modern WordPress stacks were built.
Tailwind stood out as a promising framework, but recurring Node.js issues on my Mac limited its use. I tested WindPress as a workaround, but its constraints pushed me toward frameworks with more stability. Bootstrap emerged as a strong option, and Bootscore gave me the flexibility I needed without plugin bloat. I built a child theme in LocalWP as a staging environment and used PHPStorm for debugging, version control, and instant feedback, ensuring my design system translated seamlessly into code.
⚙️ Coding & Build
With my local workflow in place, I customized the Bootscore child theme using WordPress functions, HTML5, CSS, JavaScript, and Bootstrap. The build centered on four key areas:
-
Custom light/dark mode toggle for an immersive design system
-
ACF Pro with custom post types and taxonomies for flexible content and organization
-
AJAX-powered filtering and pagination for case studies and portfolio items
-
GLightbox integration for lightweight, accessible media handling
I used ChatGPT to speed up repetitive coding tasks and verify implementation, but relied on my own coding expertise for final decisions and refinements.
Light / Dark Mode Toggle
The light/dark mode toggle was built as more than a color switch—it defines two distinct visual experiences. Light mode embraces a high-contrast neubrutalist style for clarity and boldness, while dark mode shifts into a cyberpunk aesthetic with glowing borders, neon hovers, and immersive contrast. Even the toggle button reinforces the transition, swapping icons to signal the shift between each mode.
ACF Pro + Custom Fields
To make the multisite portfolio scalable and recruiter-friendly, I used ACF Pro to define custom fields for case studies and portfolio projects, each entered as a post. Standard posts couldn’t capture the depth of each discipline, so I built field groups that displayed only the information relevant to that subdomain. For example, design posts included tools, timeline, problems, and solutions, while marketing posts excluded development and design-related fields.
Fields were conditionally displayed, so only those filled out in the WordPress dashboard appeared on the post. This kept posts clean and focused, showing recruiters only what mattered. By pulling fields directly into PHP templates, I ensured consistency across the system while avoiding page builders, keeping the portfolio lean, scalable, and discipline-specific.
GLightbox for Media
Heavy plugins often bloat performance, so I integrated GLightbox as a gallery plugin alternative. It delivered responsive galleries that aligned with my design system while keeping load times fast. Custom PHP and JavaScript ensured images, captions, and case study links displayed consistently across subdomains. The result: recruiters could quickly scan project visuals without slowdowns, making the portfolio both memorable and practical.
AJAX-Powered Filtering
I implemented AJAX filtering and pagination to make navigating case studies and portfolio items seamless. Instead of full page reloads, JavaScript captures requests and sends them to WordPress, while functions.php returns the correct posts. Results fade in with smooth animations and re-initiate GLightbox, so browsing feels fluid. This kept the system fast and user-friendly; recruiters could instantly filter by discipline and dive into relevant work without interruption.
Performance, Optimization & Tools
Expanding the light/dark mode toggle into two distinct experiences made performance just as important as design. This setup only worked if the site loaded seamlessly. To keep my portfolio fast across devices, I compressed media locally with ImageOptim and used Optimole to automatically compress and serve responsive images through a CDN. This minimized file sizes and ensured smooth browsing, keeping recruiters focused on my work instead of waiting for pages to load. On the visibility side, Rank Math SEO structured content across all sites, helping my portfolio surface in relevant searches and strengthening my reach as a creative professional.
📝 Insights & Reflections
Risk and Brand
This was a risky build. Its bold, expressive design may not appeal to every recruiter, but I embraced that risk as part of my brand. My tagline, “Compiled from Sugar, Spikes and Everything Not Nice,” captures both my technical ability and my willingness to lean into edgier creative directions. It’s not for everybody, and that’s the point. I wasn’t aiming for another safe, cookie-cutter portfolio, but for a site that carried my brand as clearly as my work.
Inspiration
I wanted to push beyond today’s minimalist, corporate web conventions. While I was building, I kept thinking about when websites had real personality—when a homepage felt like an extension of its brand or its creator. The original Space Jam site, Nickelodeon’s wacky pages, the early Backstreet Boys fan hub, and the old Pokémon site each radiated their own distinct voice. My goal was to bring that same spirit into my portfolio, a place that shows my work and reflects who I am as a designer.
Brutal by Day, Cyber by Night
Neubrutalism thrives in light mode, where bold borders, flat blocks, and playful colors stand out against bright contrast. In dark mode, that logic fails as borders overwhelm, colors glare, and layouts lose space. Rather than diluting the neubrutalist style in dark mode, I pivoted to cyberpunk, a visual language that embraces darkness. Neon accents, glowing edges, and layered vibrancy don’t fight the black canvas — they come alive on it.Just like the Vegas Strip, bare by day and neon by night, my site moves from neubrutalist to cyberpunk, making the toggle a true tonal shift, not a simple theme swap.
Balancing Creativity & Performance
Expressive design still had to balance usability and speed. Some early dark mode ideas, like overlays and animated text, would have slowed performance, so I cut them to keep the system fast and intuitive. Even with its unconventional style, the portfolio scored 90+ across accessibility, SEO, and best practices, with mobile performance at 86.
The About page and other secondary pages were hard-coded with content, which limited search engine indexing but gave me full creative control. This was essential for the light/dark mode design system. To preserve visibility, case studies were built as posts with structured fields, keeping them fully crawlable and indexable so the most important content—my work—remained discoverable to recruiters and search engines.
Accessibility Beyond Colors
Beyond color contrast, I considered several other accessibility factors to make the portfolio easier to navigate and understand:
- Standard Cursors: I kept the default operating system cursors. In a visually loud and unconventional portfolio, leaving this one familiar element ensures users always recognize how to interact.
- Hover Microinteractions: Subtle jiggle and glow effects highlight clickable elements. These cues reinforce interactivity without relying only on the cursor.
- Sticky Navigation Bar: The navbar stays fixed at the top, keeping navigation and CTAs always in view. This makes it easier to move through long pages without backtracking.
- Collapsible Sections: Key sections like the project summary, the problem, and the solution are collapsible. This prevents information overload while supporting both quick scans and deeper reading.
- Final Product Preview: The final design or prototype appears immediately after the summary. This gives readers a clear outcome upfront before diving into the full case study.
Old Tools, New Tricks
I chose to build on WordPress and PHP, tools often dismissed as dated. I was urged to switch to Webflow or other site builders, but those platforms can be restrictive when it comes to customization and performance. I wanted to show how a lean, hand-coded PHP theme could integrate modern frameworks and deliver performance on par with newer stacks. For me, innovation isn’t about chasing new tools, but about evolving what you know to meet modern needs.
Future Directions
I’d love to explore this approach with new aesthetics and palettes. Each build presents an opportunity to merge technical rigor with art direction, demonstrating that bold, unconventional web design can still be functional, accessible, and memorable.
I also plan to revisit my choice of lightbox. GLightbox tested well and delivered accessibility, but its styling flexibility felt limited. The default white caption box overpowered my design work, so I’ll explore alternatives that allow more seamless integration with my visual system.
