ginipick commited on
Commit
cdd4109
ยท
verified ยท
1 Parent(s): 6505dd1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +51 -36
index.html CHANGED
@@ -1,9 +1,9 @@
1
  <!DOCTYPE html>
2
- <html lang="ko">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI ํ”„๋กœ์ ํŠธ ๊ฐค๋Ÿฌ๋ฆฌ</title>
7
  <style>
8
  * {
9
  margin: 0;
@@ -31,7 +31,7 @@
31
  margin-bottom: 10px;
32
  }
33
 
34
- /* ๋‚˜๋…ธ ๋ฐ”๋‚˜๋‚˜ ์„น์…˜ */
35
  .featured-link {
36
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
37
  border-radius: 20px;
@@ -77,7 +77,7 @@
77
  box-shadow: 0 10px 20px rgba(255,255,255,0.3);
78
  }
79
 
80
- /* ๊ฐค๋Ÿฌ๋ฆฌ ๊ทธ๋ฆฌ๋“œ */
81
  .section-title {
82
  font-size: 2em;
83
  margin: 40px 0 20px 0;
@@ -118,7 +118,7 @@
118
  font-size: 1.1em;
119
  }
120
 
121
- /* ๋ผ์ดํŠธ๋ฐ•์Šค ๋ชจ๋‹ฌ */
122
  .lightbox {
123
  display: none;
124
  position: fixed;
@@ -177,60 +177,75 @@
177
  </head>
178
  <body>
179
  <div class="header">
180
- <h1>๐Ÿค– AI ํ”„๋กœ์ ํŠธ ๊ฐค๋Ÿฌ๋ฆฌ</h1>
181
- <p>ํ—ˆ๊น…ํŽ˜์ด์Šค ๊ธฐ๋ฐ˜ AI ๊ฐœ๋ฐœ ํฌํŠธํด๋ฆฌ์˜ค</p>
182
  </div>
183
 
184
- <!-- ๋‚˜๋…ธ ๋ฐ”๋‚˜๋‚˜ ํŠน์ง‘ ์„น์…˜ -->
185
  <div class="featured-link">
186
  <img src="images/ginigen-screenshot.png" alt="Ginigen AI">
187
  <div class="content">
188
  <h2>๐ŸŒ Ginigen AI</h2>
189
- <p>์ฐจ์„ธ๋Œ€ AI ์†”๋ฃจ์…˜ ํ”Œ๋žซํผ</p>
190
- <p>ํ˜์‹ ์ ์ธ ์ธ๊ณต์ง€๋Šฅ ๊ธฐ์ˆ ๋กœ ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ๊ฐ€์†ํ™”ํ•˜์„ธ์š”</p>
191
  <a href="https://www.ginigen.ai/en" target="_blank" class="visit-button">
192
- ์ง€๊ธˆ ๋ฐฉ๋ฌธํ•˜๊ธฐ โ†’
193
  </a>
194
  </div>
195
  </div>
196
 
197
- <!-- ์ด๋ฏธ์ง€ ๊ฐค๋Ÿฌ๋ฆฌ -->
198
- <h2 class="section-title">๐Ÿ“ธ ์ด๋ฏธ์ง€ ๊ฐค๋Ÿฌ๋ฆฌ</h2>
199
- <div class="gallery" id="image-gallery">
200
- <div class="gallery-item" onclick="openLightbox('images/project1.jpg')">
201
- <img src="images/project1.jpg" alt="ํ”„๋กœ์ ํŠธ 1">
202
- <div class="caption">AI ์ด๋ฏธ์ง€ ์ƒ์„ฑ</div>
203
- </div>
204
- <div class="gallery-item" onclick="openLightbox('images/project2.png')">
205
- <img src="images/project2.png" alt="ํ”„๋กœ์ ํŠธ 2">
206
- <div class="caption">ํ…์ŠคํŠธ ๋ถ„์„ ๋ชจ๋ธ</div>
207
  </div>
208
- <div class="gallery-item" onclick="openLightbox('images/project3.jpg')">
209
- <img src="images/project3.jpg" alt="ํ”„๋กœ์ ํŠธ 3">
210
- <div class="caption">์Œ์„ฑ ์ธ์‹ ์‹œ์Šคํ…œ</div>
 
 
211
  </div>
212
- <!-- ์ด๋ฏธ์ง€ ํŒŒ์ผ ์ถ”๊ฐ€ -->
213
- </div>
214
-
215
- <!-- ๋น„๋””์˜ค ๊ฐค๋Ÿฌ๋ฆฌ -->
216
- <h2 class="section-title">๐ŸŽฌ ๋น„๋””์˜ค ๊ฐค๋Ÿฌ๋ฆฌ</h2>
217
- <div class="gallery" id="video-gallery">
218
  <div class="gallery-item">
219
  <video src="videos/demo1.mp4" controls>
220
  Your browser does not support the video tag.
221
  </video>
222
- <div class="caption">AI ์ฑ—๋ด‡ ๋ฐ๋ชจ</div>
223
  </div>
224
  <div class="gallery-item">
225
  <video src="videos/demo2.mp4" controls>
226
  Your browser does not support the video tag.
227
  </video>
228
- <div class="caption">๊ฐ์ฒด ์ธ์‹ ์‹œ์—ฐ</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
229
  </div>
230
- <!-- ๋น„๋””์˜ค ํŒŒ์ผ ์ถ”๊ฐ€ -->
231
  </div>
232
 
233
- <!-- ๋ผ์ดํŠธ๋ฐ•์Šค ๋ชจ๋‹ฌ -->
234
  <div class="lightbox" id="lightbox" onclick="closeLightbox()">
235
  <button class="close-lightbox">&times;</button>
236
  <div class="lightbox-content">
@@ -248,7 +263,7 @@
248
  document.getElementById('lightbox').classList.remove('active');
249
  }
250
 
251
- // ESC ํ‚ค๋กœ ๋ผ์ดํŠธ๋ฐ•์Šค ๋‹ซ๊ธฐ
252
  document.addEventListener('keydown', function(e) {
253
  if (e.key === 'Escape') {
254
  closeLightbox();
@@ -256,4 +271,4 @@
256
  });
257
  </script>
258
  </body>
259
- </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Project Gallery</title>
7
  <style>
8
  * {
9
  margin: 0;
 
31
  margin-bottom: 10px;
32
  }
33
 
34
+ /* Featured Link Section */
35
  .featured-link {
36
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
37
  border-radius: 20px;
 
77
  box-shadow: 0 10px 20px rgba(255,255,255,0.3);
78
  }
79
 
80
+ /* Gallery Grid */
81
  .section-title {
82
  font-size: 2em;
83
  margin: 40px 0 20px 0;
 
118
  font-size: 1.1em;
119
  }
120
 
121
+ /* Lightbox Modal */
122
  .lightbox {
123
  display: none;
124
  position: fixed;
 
177
  </head>
178
  <body>
179
  <div class="header">
180
+ <h1>๐Ÿค– AI Project Gallery</h1>
181
+ <p>HuggingFace-based AI Development Portfolio</p>
182
  </div>
183
 
184
+ <!-- Featured Link Section -->
185
  <div class="featured-link">
186
  <img src="images/ginigen-screenshot.png" alt="Ginigen AI">
187
  <div class="content">
188
  <h2>๐ŸŒ Ginigen AI</h2>
189
+ <p>Next-Generation AI Solution Platform</p>
190
+ <p>Accelerate your business with innovative AI technology</p>
191
  <a href="https://www.ginigen.ai/en" target="_blank" class="visit-button">
192
+ Visit Now โ†’
193
  </a>
194
  </div>
195
  </div>
196
 
197
+ <!-- Video Gallery -->
198
+ <h2 class="section-title">๐ŸŽฌ Video Gallery</h2>
199
+ <div class="gallery" id="video-gallery">
200
+ <!-- First two videos: h1.mp4 and h2.mp4 -->
201
+ <div class="gallery-item">
202
+ <video src="videos/h1.mp4" controls>
203
+ Your browser does not support the video tag.
204
+ </video>
205
+ <div class="caption">Featured Demo 1</div>
 
206
  </div>
207
+ <div class="gallery-item">
208
+ <video src="videos/h2.mp4" controls>
209
+ Your browser does not support the video tag.
210
+ </video>
211
+ <div class="caption">Featured Demo 2</div>
212
  </div>
213
+
214
+ <!-- Additional videos -->
 
 
 
 
215
  <div class="gallery-item">
216
  <video src="videos/demo1.mp4" controls>
217
  Your browser does not support the video tag.
218
  </video>
219
+ <div class="caption">AI Chatbot Demo</div>
220
  </div>
221
  <div class="gallery-item">
222
  <video src="videos/demo2.mp4" controls>
223
  Your browser does not support the video tag.
224
  </video>
225
+ <div class="caption">Object Detection Demo</div>
226
+ </div>
227
+ <!-- Add more video files here -->
228
+ </div>
229
+
230
+ <!-- Image Gallery -->
231
+ <h2 class="section-title">๐Ÿ“ธ Image Gallery</h2>
232
+ <div class="gallery" id="image-gallery">
233
+ <div class="gallery-item" onclick="openLightbox('images/project1.jpg')">
234
+ <img src="images/project1.jpg" alt="Project 1">
235
+ <div class="caption">AI Image Generation</div>
236
+ </div>
237
+ <div class="gallery-item" onclick="openLightbox('images/project2.png')">
238
+ <img src="images/project2.png" alt="Project 2">
239
+ <div class="caption">Text Analysis Model</div>
240
+ </div>
241
+ <div class="gallery-item" onclick="openLightbox('images/project3.jpg')">
242
+ <img src="images/project3.jpg" alt="Project 3">
243
+ <div class="caption">Voice Recognition System</div>
244
  </div>
245
+ <!-- Add more image files here -->
246
  </div>
247
 
248
+ <!-- Lightbox Modal -->
249
  <div class="lightbox" id="lightbox" onclick="closeLightbox()">
250
  <button class="close-lightbox">&times;</button>
251
  <div class="lightbox-content">
 
263
  document.getElementById('lightbox').classList.remove('active');
264
  }
265
 
266
+ // Close lightbox with ESC key
267
  document.addEventListener('keydown', function(e) {
268
  if (e.key === 'Escape') {
269
  closeLightbox();
 
271
  });
272
  </script>
273
  </body>
274
+ </html>