SjxSubham/COntribute-HAcktoX

[Feature] Add Image Gallery Section

Open

#10 opened on Oct 12, 2025

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (14 forks)auto 404
enhancementhacktoberfesthacktoberfest-accepted

Repository metrics

Stars
 (8 stars)
PR merge metrics
 (PR metrics pending)

Description

Description

Add an image gallery section to showcase projects, portfolio items, or photos.

Current Behavior

There is no gallery section on the site.

Proposed Solution

Create a responsive image gallery with lightbox functionality.

Implementation Ideas

  • Use a grid layout for thumbnails
  • Implement lightbox for full-size image viewing
  • Add image lazy loading for performance
  • Consider using libraries like react-image-gallery or Photoswipe
  • Or implement with custom React components

Acceptance Criteria

  • Gallery displays images in a responsive grid
  • Images can be clicked to view in larger size
  • Gallery is performant with lazy loading
  • Navigation between images in lightbox view
  • Mobile-friendly and touch-enabled

Additional Context

You can use placeholder images from Unsplash or Lorem Picsum.

Contributor guide

Research direction
Implement a responsive image gallery component with lightbox functionality using React. Start by creating a new component for the gallery grid, then integrate a lightbox library like react image gallery or Photoswipe. Ensure lazy loading and touch support.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85