[nishtha-agarwal-211]

Description

Resolves #7956

This PR introduces visual screenshot previews (thumbnails) to all project cards on the homepage grid. Previously, the grid only displayed text metadata (title, description, tags), which made browsing less engaging. Adding visual thumbnails provides immediate visual context for each project, making the browsing experience significantly more premium, dynamic, and intuitive.

Key Changes

1. Centralized Preview Generation (scripts/generate-previews.js)

• Configured the Puppeteer viewport to 800x500 (retaining the standard 16:10 / 1.6 aspect ratio for thumbnails) to ensure text and components are clearly readable.
• Centrally stored generated screenshots inside the public/previews/ directory (e.g. public/previews/<project_folder_name>.png) instead of scattering them in individual project directories.
• Filtered out utility folders like previews, images, and node_modules from screenshot generation.

2. Auto-Mapped Metadata & Validation Fixes (projects.json)

• Mapped all 229 projects in the registry to their local directory paths and appended the previewImage property.
• Fixed 4 pre-existing path errors in the registry (specifically for Zomato-clone, Quiz App Timer, Gemini Clone, and Mind Reader) to ensure that the repository's automatic metadata schema checks pass perfectly.

3. Dynamic Card Rendering (index.js)

• Extracted and resolved the previewImage field relative to the current URL base, maintaining compatibility for both the main homepage and the /contributors/ directories.
• Rendered the thumbnail inside card structures with an onerror="this.parentNode.style.display='none';" fallback so that cards gracefully revert to their clean text-only layout if their screenshot is missing.

4. Styled Container & Smooth Hover Animation (style.css)

• Styled .card-preview-image-container and its inner image to enforce rounded corners, border accents, and a dark background mask.
• Added a zoom micro-animation on hover (scale(1.05)) with ease transitions to make cards feel highly responsive and interactive.

[vercel]

@nishtha-agarwal-211 is attempting to deploy a commit to the Dhairya Gothi 's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
100-days-100-web-project	Ready	Preview, Comment	Jun 28, 2026 5:15am

[dhairyagothi]

Projects are not showing

[nishtha-agarwal-211]

Hey @dhairyagothi , Can you please review this pr when you have time!

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[vercel]

Deployment failed with the following error:

The provided GitHub repository does not contain the requested branch or commit reference. Please ensure the repository is not empty.

[nishtha-agarwal-211]

Hi @dhairyagothi ! Hope you're doing well. Just following up on this PR. It is up-to-date with main and ready for review whenever you get a chance. Thank you for your time and support!