Digital Handbook

Appearance

Response.Agency ​

Website: response.agency

Staging: staging.response.agency

Sophisticated Nuxt.js 2 static marketing agency website featuring heavy GSAP premium animation work, PIXI.js WebGL graphics, and video-centric content showcasing Response Marketing's services.

Billing ​

Hosting Platform ​

Current Hosting ​

  • Provider: Laravel Forge (production) + Netlify (staging)
  • Plan/Tier: Forge managed server + Netlify staging plan
  • Server Location: Forge managed VPS
  • SSL Certificate: Forge managed SSL

Domain Management ​

  • Domain Registrar: To be documented
  • DNS Provider: To be documented
  • CDN: Cloudinary CDN for optimized images/videos

Technical Stack ​

  • Framework: Nuxt.js 2.14.4 in static generation mode
  • Target: Static site generation (target: 'static')
  • State Management: Vuex with modules (menu.js, work.js)
  • Styling: SCSS with design system
  • Content Management: Mix of static content and Airtable CMS integration
  • Backup Strategy: Git version control with Forge automated deployment

Project Info ​

Project Details ​

  • Start Date: To be documented
  • Launch Date: To be documented
  • Project Status: Active Production
  • Last Updated: To be documented

Client Contact ​

  • Primary Contact: Response Marketing Team
  • Email: To be documented
  • Phone: To be documented
  • Role/Title: Internal Project

Project Team ​

  • Project Manager: To be documented
  • Developer(s): To be documented
  • Designer: To be documented
  • Content Manager: To be documented

Notes ​

Development Notes ​

  • Architecture: Jamstack site with file-based routing via /pages/ directory
  • Premium Features: GSAP licensed plugins (DrawSVG, ScrollTrigger, CSSRulePlugin)
  • Graphics: PIXI.js WebGL animations and interactive graphics
  • Video: HLS.js support via Plyr for video streaming
  • Build Process: Laravel Forge listens for master branch pushes and auto-deploys
  • Static Generation: Always use npm run generate for production builds (not npm run build)

Content Updates ​

  • Content Management: Airtable CMS integration via /middleware/airtable.js
  • Static Data: JSON data files in /static/data/ directory
  • Media Management: Cloudinary CDN for optimized delivery
  • Directory Structure: Components organized by feature (navigation, work portfolio, about)

Client Feedback ​

  • Premium Animations: Heavy animation work showcasing technical capabilities
  • Interactive Graphics: WebGL-powered visual elements for engagement
  • Video-Centric: Focus on video content and streaming capabilities
  • Performance: Static generation for optimal loading speeds
  • Deployment: Laravel Forge handles production deployment automatically

Performance Notes ​

  • Build System: Nuxt.js static generation for optimal performance
  • CDN Integration: Cloudinary for image and video optimization
  • Code Quality: Pre-commit hooks with ESLint validation
  • Bundle Analysis: Webpack bundle analyzer available via npm run analyze

Third Party Services ​

Analytics & Tracking ​

  • Google Analytics: Account details to be documented
  • Tag Manager: Container information to be documented
  • Performance Monitoring: Netlify analytics integration

Content Management ​

  • Airtable: Primary CMS for dynamic content
  • Airtable API: Content fetching via middleware
  • Environment Variables: Required for Airtable integration

Media Services ​

  • Cloudinary: CDN for optimized images and videos
  • Video Streaming: HLS.js integration for video content
  • Media Processing: Automated optimization and delivery

Development Tools ​

  • Repository: Git version control
  • Build Pipeline: Laravel Forge for production, Netlify for staging
  • Code Quality: ESLint with pre-commit validation
  • Bundle Analysis: Webpack analyzer for optimization

Animation & Graphics ​

  • GSAP Premium: Licensed animation plugins
  • PIXI.js: WebGL graphics rendering
  • Video Players: Plyr integration for video content
  • Scroll Libraries: Advanced scroll-triggered animations

Credentials / Keys ​

Hosting & Domain ​

  • Laravel Forge: Production deployment and server management
  • Netlify Account: Staging deployment and preview builds
  • Domain Management: DNS and SSL certificate access

Development ​

  • Repository Access: Git version control credentials
  • Airtable API: Content management system access
  • Environment Variables: Production and development configurations

Third Party Services ​

  • Cloudinary: Media CDN access and API keys
  • GSAP Premium: Licensed plugin credentials
  • Airtable: Database access tokens

APIs & Integrations ​

  • Airtable API: Content management integration
  • Cloudinary API: Media processing and delivery
  • Video Services: HLS streaming and player APIs

Security ​

  • SSL Certificates: Netlify managed certificates
  • Environment Protection: Secure variable management
  • API Security: Token-based authentication

⚠️ Security Note: All sensitive credentials and API keys should be stored securely using proper credential management systems. This documentation should only reference the location or method to access credentials, not the actual sensitive information.

Website Features ​

Premium Animations ​

  • GSAP Premium Plugins: DrawSVG, ScrollTrigger, CSSRulePlugin
  • Interactive Graphics: PIXI.js WebGL animations
  • Scroll Animations: Advanced scroll-triggered effects
  • Performance Optimized: Hardware-accelerated animations

Video-Centric Content ​

  • HLS Streaming: Professional video delivery via HLS.js
  • Video Players: Plyr integration for enhanced playback
  • Portfolio Showcase: Video case studies and work examples
  • Interactive Media: Engaging video-based storytelling

Agency Showcase ​

  • Work Portfolio: Case studies with interactive presentations
  • Service Pages: Detailed service offerings and capabilities
  • Team Profiles: Staff expertise and experience
  • Client Success Stories: Video testimonials and case studies

Technical Excellence ​

  • Static Generation: Optimal performance via Nuxt.js static mode
  • Responsive Design: Mobile-first SCSS design system
  • SEO Optimized: Static generation for search engine performance
  • Progressive Enhancement: JavaScript-enhanced experiences

Content Management ​

  • Airtable Integration: Dynamic content via CMS
  • File-Based Routing: Organized page structure
  • Component System: Modular Vue.js components
  • State Management: Vuex for complex interactions

Development Commands ​

bash
# Development
npm run dev          # Hot reload development server
npm run generate     # Static site generation (primary build command)
npm run build        # Production build
npm run start        # Start production server

# Code Quality
npm run lint         # ESLint validation (runs on pre-commit)

# Deployment
npm run netlify      # Deploy to Netlify (staging only)
npm run deploy       # Legacy custom SSH deployment
npm run push         # Auto-commit with "New Build" message and push to master (triggers Forge production deploy)

# Utilities
npm run analyze      # Webpack bundle analyzer
npm run clean        # Clean dist and .nuxt folders

Contact Information ​

Website: response.agency

Repository: Git version control with Laravel Forge production deployment

Additional contact details to be added