Bolt.new - Creator Support Gallery

1. Google AI studio

→ 이미지 생성 후 저장

2. Git

→ image_gallery repository 생성

→ 이미지 파일 업로드 (번호.png 로 이름 통일되어야함)

3. JSDelivr

Migrate from GitHub to jsDelivr

→ Github에 있는 이미지들을 빠르게 불러오기 위함

4. Buy me a coffee

Buy Me a Coffee

Buy Me a Coffee

 

→ 크리에이터 후원 위젯 코드로 만들어줌

 

5. Bolt.new

Bolt.new

Bolt AI builder: Websites, apps & prototypes

## 개요

GitHub 저장소의 이미지들을 부드러운 애니메이션,
호버 효과와 함께 표시하고 Buy Me a Coffee 통합 기능을 포함한
현대적이고 반응형 이미지 갤러리 웹사이트를 React를 사용하여 만들어주세요.

## 플레이스 홀더
```
[YOUR_BUYMEACOFFEE_WIDGET_SCRIPT]
<script></script>

[YOUR_CDN_URL]

```

## 메인 프롬프트
다음 사양으로 React 기반 이미지 갤러리 웹사이트를 만들어주세요:

### 핵심 기능

1. 이미지 로딩 시스템
   - GitHub 저장소에서 번호가 매겨진 PNG 이미지(1.png, 2.png, 3.png 등)를 자동으로 감지하고 로드
   - 더 빠른 로딩을 위해 CDN URL 사용: [YOUR_CDN_URL]
2. 레이아웃 & 디자인
   - 반응형 그리드 레이아웃 (모바일 1열, 태블릿 2열, 데스크톱 3열, xl 화면 4열)
   - CSS 변수를 사용한 다크/라이트 모드 지원
   - 호버효과
3. Buy Me a Coffee 통합

4. 이미지 기능
   -호버 시 나타나는 각 이미지에 다운로드 버튼 추가
   - Twitter, Facebook, LinkedIn 공유 버튼 추가
   - lucide-react 라이브러리 아이콘 사용 가능
   - 버튼들은 이미지 호버 시 오버레이에 나타나야 함
   - 다운로드 기능 포함해야함
   

모든 인터랙티브 요소들이 적절한 호버 상태를 가지고 있고
전체 경험이 부드럽고 현대적이어야 합니다.
갤러리는 모든 기기 크기에서 완벽하게 작동해야 합니다.

https://snapcat.bolt.host/

Snapcat