Tools of the Trade
A deep dive into the technologies, frameworks, and architectural choices I use to build high-converting ecommerce experiences and modern web applications.
The Shopify Ecosystem
Liquid & Theme Architecture
The foundation of Shopify storefronts. I use advanced Liquid techniques to build highly customisable, performant themes (like Dawn and Horizon) that merchants can easily manage via the Theme Editor. It is the gold standard for reliable, high-speed commerce.
Shopify Plus & B2B
For enterprise clients, I leverage Shopify Plus features like custom checkout scripts, B2B wholesale portals, and Shopify Functions to create complex, multi-tiered pricing and promotional logic that scales globally.
Hydrogen (Headless)
When a brand needs ultimate control over performance and omnichannel experiences, I use Shopify Hydrogen (Remix) and the Storefront API to decouple the frontend from the backend, delivering sub-second page loads.
Frontend Engineering
Next.js & React
My go-to framework for creating dynamic web applications outside the standard Shopify theme engine. This very portfolio is built with Next.js App Router to leverage Server Components, ensuring incredibly fast initial loads and optimal SEO.
TypeScript
I use TypeScript strictly across all custom apps and headless builds. It catches errors during development and acts as living documentation for complex ecommerce data structures (like cart lines and product variants).
Framer Motion
A powerful animation library for React. I use it (as seen on this site) to craft micro-interactions, smooth page transitions, and scroll animations that elevate the user experience from standard to premium.
Styling & Design Systems
CSS Modules & Vanilla CSS
For this portfolio, I opted for Vanilla CSS with CSS Modules and a custom token system (tokens.css) rather than Tailwind. This allowed me to create a highly specific, dual-theme architecture (Glassmorphism & Minimal Dark) with granular control over complex pseudo-element lighting effects.
Tailwind CSS
For rapid prototyping and standard headless projects (like Hydrogen builds), I frequently use Tailwind CSS for its utility-first approach and seamless integration with modern component libraries.
Infrastructure & Tooling
Vercel
The platform hosting this portfolio. It provides seamless CI/CD, Edge Network caching, and edge-function capabilities like dynamically generating the OpenGraph social images you see when sharing my links.
GitHub
Essential for version control and collaborative development. I document my processes meticulously, using branching strategies and code reviews to ensure production stability. (Check out this portfolio's source code on my GitHub!)
Resend API
Used on this site to power the serverless contact form, reliably delivering emails directly to my inbox without needing a traditional backend server.
Security & Spam Prevention
Serverless APIs are exposed to the public. To protect the contact endpoint, I implemented multi-layered security including an invisible Honeypot field to trap bots, IP-based Rate Limiting to prevent spam bursts, strict Origin Validation, and aggressive Input Sanitization to prevent XSS injection attacks.
Let's build your next
Shopify store
Whether you're launching a new brand or scaling an existing store — I'd love to hear about your project and how I can help.