- 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