Design & Code Development
Ben Shrimpton of Shrimpton Agency
Tools used

Nuxt is a Vue.js framework for building modern web applications. In this project, we've leveraged Nuxt 3's powerful features including:

  • Server-side rendering (SSR) for improved SEO and performance
  • Auto-imports for components and composables
  • File-based routing system for pages
  • Built-in image optimization with @nuxt/image
  • Meta tag management for social sharing

Tailwind CSS is a utility-first CSS framework. We've used it throughout the site for:

  • Responsive design with mobile-first breakpoints
  • Custom color utilities with hex values like text-[#a6a6a5]
  • Flexbox and Grid layouts for complex page structures
  • Spacing and typography utilities for consistent design
  • Hover and transition effects for interactive elements

Apollo GraphQL is a comprehensive state management library for JavaScript. We've implemented it to:

  • Query the Craft CMS GraphQL API for dynamic content
  • Fetch portfolio entries with categories and images
  • Filter and display studio work based on user selections
  • Implement lazy loading with useLazyAsyncQuery
  • Manage data caching and real-time updates

Craft CMS is a flexible, user-friendly content management system. It powers the backend of this site with:

  • Custom content sections for portfolio entries
  • Category management for filtering studio work
  • Asset management for images and media
  • GraphQL API for headless CMS functionality
  • Content authoring interface for easy updates

Cursor is an AI-powered code editor. It was instrumental in building this site by:

  • Accelerating development with intelligent code completion
  • Generating Vue components and composables
  • Refactoring code for better organization and DRY principles
  • Creating responsive layouts and styling
  • Implementing features like email copying and marquee animations

Netlify is a modern web hosting and automation platform. We use it for:

  • Continuous deployment from Git repository
  • Automatic builds on code changes
  • Global CDN for fast content delivery
  • Image optimization with Netlify Image CDN
  • SSL certificates and custom domain management
  • Form handling and serverless functions