Modern Developer Portfolio

useEffect(() => {
    // Respect reduced motion preference
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReducedMotion) return;

    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    let animationFrameId: number;

    // Particle count based on screen size for performance
    const particleCount = window.innerWidth < 768 ? 30 : 50;

    const animate = () => {
      // Clear and redraw particles using requestAnimationFrame
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      particles.forEach(particle => {
        particle.update();
        particle.draw(ctx);
      });

      animationFrameId = requestAnimationFrame(animate);
    };

    animate();

    return () => cancelAnimationFrame(animationFrameId);
  }, []);

describe('ProjectCard', () => {
    it('renders with all required props', () => {
      render(<ProjectCard {...mockProject} />);

      expect(screen.getByText(mockProject.title)).toBeInTheDocument();
      expect(screen.getByText(mockProject.description)).toBeInTheDocument();
    });

    it('tracks analytics on case study click', async () => {
      const user = userEvent.setup();
      render(<ProjectCard {...mockProject} />);

      const caseStudyLink = screen.getByRole('link', { name: /view case study/i });
      await user.click(caseStudyLink);

      expect(trackEvent).toHaveBeenCalledWith('case_study_click', {
        project: mockProject.slug,
        location: 'project_card',
      });
    });

    it('is keyboard accessible', async () => {
      render(<ProjectCard {...mockProject} />);

      const links = screen.getAllByRole('link');
      links.forEach(link => {
        expect(link).toHaveAttribute('href');
      });
    });
  });

export function generateProjectMetadata(project: Project): Metadata {
    const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';

    return {
      title: `${project.title} | Dave Donnelly`,
      description: project.description,
      openGraph: {
        title: project.title,
        description: project.description,
        url: `${siteUrl}/projects/${project.slug}`,
        type: 'article',
        images: [{
          url: `${siteUrl}${project.screenshot}`,
          width: 1200,
          height: 630,
          alt: project.title,
        }],
      },
      twitter: {
        card: 'summary_large_image',
        title: project.title,
        description: project.description,
        images: [`${siteUrl}${project.screenshot}`],
      },
    };
  }