Skip to content

DEPLOYMENT.md

Latest commit

 

History

History
151 lines (113 loc) · 4.25 KB

DEPLOYMENT.md

File metadata and controls

151 lines (113 loc) · 4.25 KB
Raw

Deployment & Testing Guide

Quick Deploy to GitHub Pages (Recommended)

The easiest way to test is to deploy directly to GitHub Pages:

git add .
git commit -m "feat: modernize meme platform"
git push origin main

GitHub Pages will build and deploy automatically. Visit your site at: https://lucianoadonis.github.io/talent

Local Development (Optional)

Requirements

  • Ruby 3.0+ (macOS system Ruby 2.6 is too old)
  • Bundler

Option 1: Docker (Easiest for Local Testing)

docker run -it --rm \
  -v "$PWD":/usr/src/app \
  -p 4000:4000 \
  jekyll/jekyll:4.2.0 \
  jekyll serve --force_polling --host 0.0.0.0

# Visit http://localhost:4000/talent

Option 2: Using rbenv/rvm (Ruby Version Manager)

# Install rbenv or rvm first, then:
rbenv install 3.2.0
rbenv local 3.2.0

# Then install and serve
bundle install
bundle exec jekyll serve

# Visit http://localhost:4000/talent

Option 3: GitHub Codespaces

Create a codespace from your repository for a pre-configured environment.

GitHub Pages Deployment

This site is configured for GitHub Pages. Simply push to the main branch:

git add .
git commit -m "Modernize meme delivery platform"
git push origin main

GitHub Pages will automatically build and deploy the site.

Testing Checklist

Homepage

  • Featured memes carousel displays 20 memes
  • Carousel auto-advances every 3 seconds
  • Manual carousel navigation (prev/next) works
  • Global search filters memes across all categories
  • Search clears with Escape key or X button
  • Tab switching between categories works smoothly
  • All category icons display correctly

Meme Cards

  • Images load with lazy loading
  • Hover shows action buttons (Copy URL, Download)
  • Copy URL copies full absolute URL to clipboard
  • Download button downloads the image file
  • Toast notifications appear for actions
  • Cards have consistent sizing (aspect-ratio)
  • Borders and rounded corners display properly

Category Pages

  • Each category page has search within category
  • Meme cards display with modern design
  • Copy and Download buttons work
  • Back button in header returns to homepage
  • YouTube link opens @EnergonHQ channel

Responsive Design

  • Mobile (< 768px): 2 columns gallery, collapsible carousel
  • Tablet (768-1024px): 3-4 columns gallery
  • Desktop (> 1024px): 5-6 columns gallery
  • All text is readable on all screen sizes
  • Touch gestures work on mobile

Performance

  • Lighthouse score > 90 for Performance
  • Images load progressively (lazy loading)
  • No layout shifts (CLS < 0.1)
  • Search debouncing prevents excessive filtering
  • Smooth animations (no jank)

SEO

  • Meta tags present in
  • Structured data (JSON-LD) present
  • robots.txt accessible
  • sitemap.xml generates correctly
  • Open Graph tags for social sharing
  • Alt text on all images

Accessibility

  • Keyboard navigation works (Tab, Enter, Escape)
  • Focus indicators visible
  • ARIA labels present on interactive elements
  • Color contrast meets WCAG AA standards
  • Screen reader compatible

Known Limitations

  • Browser Clipboard API: Copy URL feature requires HTTPS or localhost. On HTTP sites, falls back to legacy document.execCommand()
  • Download Feature: Some browsers may prompt for download permission
  • Carousel Auto-play: Pauses when user interacts with carousel controls

Performance Tips

  • Optimize images before adding (use WebP, compress to < 200KB)
  • Keep image dimensions consistent (recommended: 800x800px)
  • Limit featured carousel to 20-30 memes maximum

Troubleshooting

Issue: Tailwind classes not working

  • Fix: Clear browser cache, Tailwind CDN should load from

Issue: Memes not displaying in category

  • Fix: Ensure images are in correct /assets/images/CATEGORY/ path

Issue: Search not working

  • Fix: Check browser console for JavaScript errors, ensure meme data loads

Issue: Clipboard permission denied

  • Fix: Site must be on HTTPS or localhost for Clipboard API

Support

For issues or questions:

  • Check CLAUDE.md for project documentation
  • Review Jekyll build logs on GitHub Pages
  • Verify all paths match the baseurl: /talent