Hugging Face's logo

Spaces:
SangMoone
/
portfolio
Running

App Files Community
SangMoone commited on
Commit
6fed338
·
verified ·
1 Parent(s): cf48d65

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +800 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio
3
- emoji: 🏆
4
  colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: portfolio
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,800 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>개발자 포트폴리오</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#3B82F6',
16
+ secondary: '#10B981',
17
+ dark: '#1E293B',
18
+ light: '#F8FAFC',
19
+ },
20
+ animation: {
21
+ 'float': 'float 3s ease-in-out infinite',
22
+ 'fade-in': 'fadeIn 1s ease-in',
23
+ },
24
+ keyframes: {
25
+ float: {
26
+ '0%, 100%': { transform: 'translateY(0)' },
27
+ '50%': { transform: 'translateY(-10px)' },
28
+ },
29
+ fadeIn: {
30
+ '0%': { opacity: '0' },
31
+ '100%': { opacity: '1' },
32
+ }
33
+ }
34
+ }
35
+ }
36
+ }
37
+ </script>
38
+ <style>
39
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
40
+
41
+ body {
42
+ font-family: 'Noto Sans KR', sans-serif;
43
+ transition: background-color 0.3s, color 0.3s;
44
+ }
45
+
46
+ .project-card:hover .project-overlay {
47
+ opacity: 1;
48
+ transform: translateY(0);
49
+ }
50
+
51
+ .skill-bar {
52
+ transition: width 1.5s ease-out;
53
+ }
54
+
55
+ .nav-link {
56
+ position: relative;
57
+ }
58
+
59
+ .nav-link::after {
60
+ content: '';
61
+ position: absolute;
62
+ width: 0;
63
+ height: 2px;
64
+ bottom: -2px;
65
+ left: 0;
66
+ background-color: #3B82F6;
67
+ transition: width 0.3s;
68
+ }
69
+
70
+ .nav-link:hover::after {
71
+ width: 100%;
72
+ }
73
+
74
+ @media (max-width: 768px) {
75
+ .mobile-menu {
76
+ transform: translateX(-100%);
77
+ transition: transform 0.3s ease-out;
78
+ }
79
+
80
+ .mobile-menu.open {
81
+ transform: translateX(0);
82
+ }
83
+ }
84
+ </style>
85
+ </head>
86
+ <body class="bg-gray-50 text-gray-800 dark:bg-dark dark:text-light">
87
+ <!-- Header/Navigation -->
88
+ <header class="fixed w-full bg-white/80 dark:bg-dark/80 backdrop-blur-md z-50 shadow-sm">
89
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
90
+ <a href="#" class="text-2xl font-bold text-primary dark:text-secondary flex items-center">
91
+ <span class="mr-2">DEV</span>
92
+ <span class="bg-primary dark:bg-secondary text-white px-2 py-1 rounded">PORTFOLIO</span>
93
+ </a>
94
+
95
+ <!-- Desktop Navigation -->
96
+ <nav class="hidden md:flex space-x-8">
97
+ <a href="#home" class="nav-link font-medium">홈</a>
98
+ <a href="#about" class="nav-link font-medium">소개</a>
99
+ <a href="#skills" class="nav-link font-medium">기술</a>
100
+ <a href="#projects" class="nav-link font-medium">프로젝트</a>
101
+ <a href="#contact" class="nav-link font-medium">연락처</a>
102
+ </nav>
103
+
104
+ <!-- Dark Mode Toggle -->
105
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
106
+ <i data-feather="moon" class="hidden dark:block"></i>
107
+ <i data-feather="sun" class="block dark:hidden"></i>
108
+ </button>
109
+
110
+ <!-- Mobile Menu Button -->
111
+ <button id="mobile-menu-button" class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
112
+ <i data-feather="menu"></i>
113
+ </button>
114
+ </div>
115
+
116
+ <!-- Mobile Menu -->
117
+ <div id="mobile-menu" class="mobile-menu md:hidden fixed inset-0 bg-white dark:bg-dark z-40 pt-20 px-4">
118
+ <div class="flex flex-col space-y-6 text-lg">
119
+ <a href="#home" class="nav-link font-medium py-2 border-b border-gray-200 dark:border-gray-700">홈</a>
120
+ <a href="#about" class="nav-link font-medium py-2 border-b border-gray-200 dark:border-gray-700">소개</a>
121
+ <a href="#skills" class="nav-link font-medium py-2 border-b border-gray-200 dark:border-gray-700">기술</a>
122
+ <a href="#projects" class="nav-link font-medium py-2 border-b border-gray-200 dark:border-gray-700">프로젝트</a>
123
+ <a href="#contact" class="nav-link font-medium py-2 border-b border-gray-200 dark:border-gray-700">연락처</a>
124
+ </div>
125
+ <div class="absolute bottom-6 left-0 right-0 px-4">
126
+ <div class="flex justify-center space-x-4">
127
+ <a href="#" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
128
+ <i data-feather="github"></i>
129
+ </a>
130
+ <a href="#" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
131
+ <i data-feather="linkedin"></i>
132
+ </a>
133
+ <a href="#" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
134
+ <i data-feather="twitter"></i>
135
+ </a>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </header>
140
+
141
+ <!-- Hero Section -->
142
+ <section id="home" class="min-h-screen flex items-center pt-16">
143
+ <div class="container mx-auto px-4 py-20 flex flex-col md:flex-row items-center">
144
+ <div class="md:w-1/2 mb-12 md:mb-0 text-center md:text-left">
145
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">
146
+ 안녕하세요, <span class="text-primary dark:text-secondary">김개발</span>입니다
147
+ </h1>
148
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6">
149
+ 프론트엔드 개발자
150
+ </h2>
151
+ <p class="text-lg mb-8 max-w-lg mx-auto md:mx-0">
152
+ 사용자 경험을 중시하는 깔끔하고 현대적인 웹 애플리케이션을 개발합니다.
153
+ 최신 기술 스택을 활용하여 혁신적인 솔루션을 제공합니다.
154
+ </p>
155
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
156
+ <a href="#projects" class="bg-primary dark:bg-secondary text-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all shadow-lg">
157
+ 프로젝트 보기
158
+ </a>
159
+ <a href="#contact" class="border-2 border-primary dark:border-secondary text-primary dark:text-secondary px-6 py-3 rounded-lg font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
160
+ 연락하기
161
+ </a>
162
+ </div>
163
+ </div>
164
+ <div class="md:w-1/2 flex justify-center">
165
+ <div class="relative w-64 h-64 md:w-80 md:h-80">
166
+ <div class="absolute inset-0 bg-primary dark:bg-secondary rounded-full opacity-20 animate-pulse"></div>
167
+ <div class="absolute inset-4 bg-gradient-to-br from-primary to-secondary dark:from-secondary dark:to-primary rounded-full flex items-center justify-center overflow-hidden shadow-xl">
168
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
169
+ alt="프로필 이미지"
170
+ class="w-full h-full object-cover">
171
+ </div>
172
+ <div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 p-4 rounded-full shadow-lg">
173
+ <div class="w-16 h-16 bg-primary dark:bg-secondary rounded-full flex items-center justify-center text-white text-2xl font-bold">
174
+ 3+
175
+ </div>
176
+ <div class="absolute -top-2 -right-2 bg-yellow-400 text-xs px-2 py-1 rounded-full font-bold">
177
+ 경력
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- About Section -->
186
+ <section id="about" class="py-20 bg-gray-100 dark:bg-gray-900">
187
+ <div class="container mx-auto px-4">
188
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
189
+ <span class="border-b-4 border-primary dark:border-secondary pb-2">저를 소개합니다</span>
190
+ </h2>
191
+
192
+ <div class="flex flex-col lg:flex-row items-center">
193
+ <div class="lg:w-1/3 mb-12 lg:mb-0 flex justify-center">
194
+ <div class="relative w-64 h-64">
195
+ <div class="absolute inset-0 border-4 border-primary dark:border-secondary rounded-lg transform rotate-6"></div>
196
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
197
+ alt="프로필 이미지"
198
+ class="relative w-full h-full object-cover rounded-lg z-10">
199
+ </div>
200
+ </div>
201
+
202
+ <div class="lg:w-2/3 lg:pl-12">
203
+ <h3 class="text-2xl font-bold mb-6">김개발 (Kim Gaebal)</h3>
204
+ <p class="text-lg mb-6">
205
+ 저는 3년 이상의 경력을 가진 프론트엔드 개발자입니다. 사용자 중심의 디자인과 최적화된 성능을 갖춘 웹 애플리케이션을 개발하는 데 열정을 가지고 있습니다.
206
+ 새로운 기술을 배우고 적용하는 것을 즐기며, 팀워크와 커뮤니케이션을 중요하게 생각합니다.
207
+ </p>
208
+
209
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
210
+ <div class="flex items-start">
211
+ <div class="bg-primary dark:bg-secondary p-2 rounded-full mr-4 mt-1">
212
+ <i data-feather="user" class="text-white"></i>
213
+ </div>
214
+ <div>
215
+ <h4 class="font-bold">이름</h4>
216
+ <p>김개발</p>
217
+ </div>
218
+ </div>
219
+ <div class="flex items-start">
220
+ <div class="bg-primary dark:bg-secondary p-2 rounded-full mr-4 mt-1">
221
+ <i data-feather="mail" class="text-white"></i>
222
+ </div>
223
+ <div>
224
+ <h4 class="font-bold">이메일</h4>
225
+ <p>gaebal@example.com</p>
226
+ </div>
227
+ </div>
228
+ <div class="flex items-start">
229
+ <div class="bg-primary dark:bg-secondary p-2 rounded-full mr-4 mt-1">
230
+ <i data-feather="phone" class="text-white"></i>
231
+ </div>
232
+ <div>
233
+ <h4 class="font-bold">연락처</h4>
234
+ <p>010-1234-5678</p>
235
+ </div>
236
+ </div>
237
+ <div class="flex items-start">
238
+ <div class="bg-primary dark:bg-secondary p-2 rounded-full mr-4 mt-1">
239
+ <i data-feather="map-pin" class="text-white"></i>
240
+ </div>
241
+ <div>
242
+ <h4 class="font-bold">위치</h4>
243
+ <p>서울특별시, 대한민국</p>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="flex flex-wrap gap-4">
249
+ <a href="#" class="flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-800 rounded-lg">
250
+ <i data-feather="download" class="mr-2"></i>
251
+ 이력서 다운로드
252
+ </a>
253
+ <a href="#" class="flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-800 rounded-lg">
254
+ <i data-feather="github" class="mr-2"></i>
255
+ GitHub
256
+ </a>
257
+ <a href="#" class="flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-800 rounded-lg">
258
+ <i data-feather="linkedin" class="mr-2"></i>
259
+ LinkedIn
260
+ </a>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- Skills Section -->
268
+ <section id="skills" class="py-20">
269
+ <div class="container mx-auto px-4">
270
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
271
+ <span class="border-b-4 border-primary dark:border-secondary pb-2">기술 스택</span>
272
+ </h2>
273
+
274
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
275
+ <!-- Technical Skills -->
276
+ <div>
277
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
278
+ <i data-feather="code" class="mr-3 text-primary dark:text-secondary"></i>
279
+ 기술 능력
280
+ </h3>
281
+
282
+ <div class="space-y-6">
283
+ <div>
284
+ <div class="flex justify-between mb-2">
285
+ <span class="font-medium">HTML/CSS</span>
286
+ <span>95%</span>
287
+ </div>
288
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
289
+ <div class="skill-bar bg-primary dark:bg-secondary h-2.5 rounded-full" style="width: 95%"></div>
290
+ </div>
291
+ </div>
292
+
293
+ <div>
294
+ <div class="flex justify-between mb-2">
295
+ <span class="font-medium">JavaScript</span>
296
+ <span>90%</span>
297
+ </div>
298
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
299
+ <div class="skill-bar bg-primary dark:bg-secondary h-2.5 rounded-full" style="width: 90%"></div>
300
+ </div>
301
+ </div>
302
+
303
+ <div>
304
+ <div class="flex justify-between mb-2">
305
+ <span class="font-medium">React</span>
306
+ <span>85%</span>
307
+ </div>
308
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
309
+ <div class="skill-bar bg-primary dark:bg-secondary h-2.5 rounded-full" style="width: 85%"></div>
310
+ </div>
311
+ </div>
312
+
313
+ <div>
314
+ <div class="flex justify-between mb-2">
315
+ <span class="font-medium">Vue.js</span>
316
+ <span>80%</span>
317
+ </div>
318
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
319
+ <div class="skill-bar bg-primary dark:bg-secondary h-2.5 rounded-full" style="width: 80%"></div>
320
+ </div>
321
+ </div>
322
+
323
+ <div>
324
+ <div class="flex justify-between mb-2">
325
+ <span class="font-medium">Node.js</span>
326
+ <span>75%</span>
327
+ </div>
328
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
329
+ <div class="skill-bar bg-primary dark:bg-secondary h-2.5 rounded-full" style="width: 75%"></div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Professional Skills -->
336
+ <div>
337
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
338
+ <i data-feather="award" class="mr-3 text-primary dark:text-secondary"></i>
339
+ 전문 능력
340
+ </h3>
341
+
342
+ <div class="grid grid-cols-2 gap-6">
343
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
344
+ <div class="text-primary dark:text-secondary mb-3">
345
+ <i data-feather="layout" class="w-8 h-8"></i>
346
+ </div>
347
+ <h4 class="font-bold mb-2">반응형 디자인</h4>
348
+ <p class="text-sm text-gray-600 dark:text-gray-400">
349
+ 모든 기기에서 완벽하게 작동하는 반응형 웹사이트 구축
350
+ </p>
351
+ </div>
352
+
353
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
354
+ <div class="text-primary dark:text-secondary mb-3">
355
+ <i data-feather="zap" class="w-8 h-8"></i>
356
+ </div>
357
+ <h4 class="font-bold mb-2">성능 최적화</h4>
358
+ <p class="text-sm text-gray-600 dark:text-gray-400">
359
+ 빠른 로딩 속도와 부드러운 사용자 경험 제공
360
+ </p>
361
+ </div>
362
+
363
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
364
+ <div class="text-primary dark:text-secondary mb-3">
365
+ <i data-feather="users" class="w-8 h-8"></i>
366
+ </div>
367
+ <h4 class="font-bold mb-2">팀 협업</h4>
368
+ <p class="text-sm text-gray-600 dark:text-gray-400">
369
+ 효과적인 커뮤니케이션과 팀워크 능력
370
+ </p>
371
+ </div>
372
+
373
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
374
+ <div class="text-primary dark:text-secondary mb-3">
375
+ <i data-feather="code" class="w-8 h-8"></i>
376
+ </div>
377
+ <h4 class="font-bold mb-2">클린 코드</h4>
378
+ <p class="text-sm text-gray-600 dark:text-gray-400">
379
+ 유지보수가 용이한 깔끔하고 체계적인 코드 작성
380
+ </p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Tools & Technologies -->
387
+ <div class="mt-16">
388
+ <h3 class="text-2xl font-bold mb-8 text-center">
389
+ 사용하는 도구와 기술
390
+ </h3>
391
+
392
+ <div class="flex flex-wrap justify-center gap-6">
393
+ <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-shadow w-24">
394
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" alt="HTML5" class="w-12 h-12 mb-2">
395
+ <span class="text-sm">HTML5</span>
396
+ </div>
397
+ <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-shadow w-24">
398
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS3" class="w-12 h-12 mb-2">
399
+ <span class="text-sm">CSS3</span>
400
+ </div>
401
+ <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-shadow w-24">
402
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" class="w-12 h-12 mb-2">
403
+ <span class="text-sm">JavaScript</span>
404
+ </div>
405
+ <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-shadow w-24">
406
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" class="w-12 h-12 mb-2">
407
+ <span class="text-sm">React</span>
408
+ </div>
409
+ <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-shadow w-24">
410
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" alt="Vue.js" class="w-12 h-12 mb-2">
411
+ <span class="text-sm">Vue.js</span>
412
+ </div>
413
+ <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-shadow w-24">
414
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="Node.js" class="w-12 h-12 mb-2">
415
+ <span class="text-sm">Node.js</span>
416
+ </div>
417
+ <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-shadow w-24">
418
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg" alt="Tailwind CSS" class="w-12 h-12 mb-2">
419
+ <span class="text-sm">Tailwind</span>
420
+ </div>
421
+ <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-shadow w-24">
422
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" alt="Git" class="w-12 h-12 mb-2">
423
+ <span class="text-sm">Git</span>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </section>
429
+
430
+ <!-- Projects Section -->
431
+ <section id="projects" class="py-20 bg-gray-100 dark:bg-gray-900">
432
+ <div class="container mx-auto px-4">
433
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
434
+ <span class="border-b-4 border-primary dark:border-secondary pb-2">프로젝트</span>
435
+ </h2>
436
+
437
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
438
+ <!-- Project 1 -->
439
+ <div class="project-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
440
+ <div class="relative h-48 overflow-hidden">
441
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
442
+ alt="대시보드 프로젝트"
443
+ class="w-full h-full object-cover">
444
+ <div class="project-overlay absolute inset-0 bg-primary/90 dark:bg-secondary/90 flex flex-col justify-center items-center opacity-0 transform translate-y-4 transition-all duration-300 p-6">
445
+ <h3 class="text-xl font-bold text-white mb-2">대시보드 시스템</h3>
446
+ <p class="text-white text-center mb-4">
447
+ 실시간 데이터 시각화를 위한 관리자 대시보드 시스템 개발
448
+ </p>
449
+ <div class="flex flex-wrap justify-center gap-2">
450
+ <span class="bg-white/20 text-white px-3 py-1 rounded-full text-xs">React</span>
451
+ <span class="bg-white/20 text-white px-3 py-1 rounded-full text-xs">Chart.js</span>
452
+ <span class="bg-white/20 text-white px-3 py-1 rounded-full text-xs">Firebase</span>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ <div class="p-6">
457
+ <h3 class="text-xl font-bold mb-2">대시보드 시스템</h3>
458
+ <p class="text-gray-600 dark:text-gray-400 mb-4">
459
+ 기업을 위한 실시간 데이터 시각화 대시보드 시스템 개발. 다양한 차트와 위젯을 통해 복잡한 데이터를 직관적으로 표현.
460
+ </p>
461
+ <div class="flex justify-between items-center">
462
+ <a href="#" class="text-primary dark:text-secondary font-medium flex items-center">
463
+ 자세히 보기 <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
464
+ </a>
465
+ <a href="#" class="text-gray-500 hover:text-primary dark:hover:text-secondary">
466
+ <i data-feather="github" class="w-5 h-5"></i>
467
+ </a>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Project 2 -->
473
+ <div class="project-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
474
+ <div class="relative h-48 overflow-hidden">
475
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
476
+ alt="이커머스 웹사이트"
477
+ class="w-full h-full object-cover">
478
+ <div class="project-overlay absolute inset-0 bg-primary/90 dark:bg-secondary/90 flex flex-col justify-center items-center opacity-0 transform translate-y-4 transition-all duration-300 p-6">
479
+ <h3 class="text-xl font-bold text-white mb-2">이커머스 플랫폼</h3>
480
+ <p class="text-white text-center mb-4">
481
+ 온라인 쇼핑몰 플랫폼 개발 및 최적화
482
+ </p>
483
+ <div class="flex flex-wrap justify-center gap-2">
484
+ <span class="bg-white/20 text-white px-3 py-1 rounded-full text-xs">Vue.js</span>
485
+ <span class="bg-white/20 text-white px-3 py-1 rounded-full text-xs">Nuxt.js</span>
486
+ <span class="bg-white/20 text-white px-3 py-1 rounded-full text-xs">Stripe</span>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ <div class="p-6">
491
+ <h3 class="text-xl font-bold mb-2">이커머스 플랫폼</h3>
492
+ <p class="text-gray-600 dark:text-gray-400 mb-4">
493
+ 온라인 쇼핑몰 플랫폼 개발. 제품 검색, 장바구니, 결제 시스템 등 전반적인 기능 구현.
494
+ </p>
495
+ <div class="flex justify-between items-center">
496
+ <a href="#" class="text-primary dark:text-secondary font-medium flex items-center">
497
+ 자세히 보기 <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
498
+ </a>
499
+ <a href="#" class="text-gray-500 hover:text-primary dark:hover:text-secondary">
500
+ <i data-feather="github" class="w-5 h-5"></i>
501
+ </a>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- Project 3 -->
507
+ <div class="project-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
508
+ <div class="relative h-48 overflow-hidden">
509
+ <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
510
+ alt="모바일 앱"
511
+ class="w-full h-full object-cover">
512
+ <div class="project-overlay absolute inset-0 bg-primary/90 dark:bg-secondary/90 flex flex-col justify-center items-center opacity-0 transform translate-y-4 transition-all duration-300 p-6">
513
+ <h3 class="text-xl font-bold text-white mb-2">피트니스 모바일 앱</h3>
514
+ <p class="text-white text-center mb-4">
515
+ 건강 관리와 운동 추적을 위한 모바일 애플리케이션
516
+ </p>
517
+ <div class="flex flex-wrap justify-center gap-2">
518
+ <span class="bg-white/20 text-white px-3 py-1 rounded-full text-xs">React Native</span>
519
+ <span class="bg-white/20 text-white px-3 py-1 rounded-full text-xs">Expo</span>
520
+ <span class="bg-white/20 text-white px-3 py-1 rounded-full text-xs">Firebase</span>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ <div class="p-6">
525
+ <h3 class="text-xl font-bold mb-2">피트니스 모바일 앱</h3>
526
+ <p class="text-gray-600 dark:text-gray-400 mb-4">
527
+ 건강 관리와 운동 추적을 위한 모바일 애플리케이션 개발. 운동 루틴 추천 및 기록 기능 제공.
528
+ </p>
529
+ <div class="flex justify-between items-center">
530
+ <a href="#" class="text-primary dark:text-secondary font-medium flex items-center">
531
+ 자세히 보기 <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
532
+ </a>
533
+ <a href="#" class="text-gray-500 hover:text-primary dark:hover:text-secondary">
534
+ <i data-feather="github" class="w-5 h-5"></i>
535
+ </a>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </div>
540
+
541
+ <div class="text-center mt-12">
542
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-primary dark:border-secondary text-primary dark:text-secondary rounded-lg hover:bg-primary hover:text-white dark:hover:bg-secondary dark:hover:text-white transition-all">
543
+ 모든 프로젝트 보기
544
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
545
+ </a>
546
+ </div>
547
+ </div>
548
+ </section>
549
+
550
+ <!-- Contact Section -->
551
+ <section id="contact" class="py-20">
552
+ <div class="container mx-auto px-4">
553
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
554
+ <span class="border-b-4 border-primary dark:border-secondary pb-2">연락하기</span>
555
+ </h2>
556
+
557
+ <div class="flex flex-col lg:flex-row gap-12">
558
+ <div class="lg:w-1/2">
559
+ <h3 class="text-2xl font-bold mb-6">연락처 정보</h3>
560
+ <p class="mb-8">
561
+ 궁금한 점이 있으시면 언제든지 연락주세요. 새로운 프로젝트 제안이나 채용 기회에 대해 이야기하고 싶으시면 아래 양식을 작성해주시거나 직접 연락주세요.
562
+ </p>
563
+
564
+ <div class="space-y-6">
565
+ <div class="flex items-start">
566
+ <div class="bg-primary dark:bg-secondary p-3 rounded-full mr-4">
567
+ <i data-feather="mail" class="text-white"></i>
568
+ </div>
569
+ <div>
570
+ <h4 class="font-bold">이메일</h4>
571
+ <p>gaebal@example.com</p>
572
+ </div>
573
+ </div>
574
+
575
+ <div class="flex items-start">
576
+ <div class="bg-primary dark:bg-secondary p-3 rounded-full mr-4">
577
+ <i data-feather="phone" class="text-white"></i>
578
+ </div>
579
+ <div>
580
+ <h4 class="font-bold">전화번호</h4>
581
+ <p>010-1234-5678</p>
582
+ </div>
583
+ </div>
584
+
585
+ <div class="flex items-start">
586
+ <div class="bg-primary dark:bg-secondary p-3 rounded-full mr-4">
587
+ <i data-feather="map-pin" class="text-white"></i>
588
+ </div>
589
+ <div>
590
+ <h4 class="font-bold">위치</h4>
591
+ <p>서울특별시 강남구 테헤란로 123, 대한민국</p>
592
+ </div>
593
+ </div>
594
+ </div>
595
+
596
+ <div class="mt-8">
597
+ <h4 class="font-bold mb-4">소셜 미디어</h4>
598
+ <div class="flex space-x-4">
599
+ <a href="#" class="bg-gray-200 dark:bg-gray-800 p-3 rounded-full hover:bg-primary hover:text-white dark:hover:bg-secondary transition-all">
600
+ <i data-feather="github"></i>
601
+ </a>
602
+ <a href="#" class="bg-gray-200 dark:bg-gray-800 p-3 rounded-full hover:bg-primary hover:text-white dark:hover:bg-secondary transition-all">
603
+ <i data-feather="linkedin"></i>
604
+ </a>
605
+ <a href="#" class="bg-gray-200 dark:bg-gray-800 p-3 rounded-full hover:bg-primary hover:text-white dark:hover:bg-secondary transition-all">
606
+ <i data-feather="twitter"></i>
607
+ </a>
608
+ <a href="#" class="bg-gray-200 dark:bg-gray-800 p-3 rounded-full hover:bg-primary hover:text-white dark:hover:bg-secondary transition-all">
609
+ <i data-feather="facebook"></i>
610
+ </a>
611
+ </div>
612
+ </div>
613
+ </div>
614
+
615
+ <div class="lg:w-1/2">
616
+ <form class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md">
617
+ <div class="mb-6">
618
+ <label for="name" class="block font-medium mb-2">이름</label>
619
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-secondary bg-transparent">
620
+ </div>
621
+
622
+ <div class="mb-6">
623
+ <label for="email" class="block font-medium mb-2">이메일</label>
624
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-secondary bg-transparent">
625
+ </div>
626
+
627
+ <div class="mb-6">
628
+ <label for="subject" class="block font-medium mb-2">제목</label>
629
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-secondary bg-transparent">
630
+ </div>
631
+
632
+ <div class="mb-6">
633
+ <label for="message" class="block font-medium mb-2">메시지</label>
634
+ <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-secondary bg-transparent"></textarea>
635
+ </div>
636
+
637
+ <button type="submit" class="w-full bg-primary dark:bg-secondary text-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all">
638
+ 메시지 보내기
639
+ </button>
640
+ </form>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ </section>
645
+
646
+ <!-- Footer -->
647
+ <footer class="bg-gray-800 text-gray-300 py-12">
648
+ <div class="container mx-auto px-4">
649
+ <div class="flex flex-col md:flex-row justify-between items-center">
650
+ <div class="mb-6 md:mb-0">
651
+ <a href="#" class="text-2xl font-bold text-white flex items-center">
652
+ <span class="mr-2">DEV</span>
653
+ <span class="bg-primary text-white px-2 py-1 rounded">PORTFOLIO</span>
654
+ </a>
655
+ <p class="mt-2">© 2023 김개발. 모든 권리 보유.</p>
656
+ </div>
657
+
658
+ <div class="flex flex-col items-center md:items-end">
659
+ <div class="flex space-x-4 mb-4">
660
+ <a href="#" class="hover:text-primary transition-colors">
661
+ <i data-feather="github"></i>
662
+ </a>
663
+ <a href="#" class="hover:text-primary transition-colors">
664
+ <i data-feather="linkedin"></i>
665
+ </a>
666
+ <a href="#" class="hover:text-primary transition-colors">
667
+ <i data-feather="twitter"></i>
668
+ </a>
669
+ <a href="#" class="hover:text-primary transition-colors">
670
+ <i data-feather="facebook"></i>
671
+ </a>
672
+ </div>
673
+ <a href="mailto:gaebal@example.com" class="hover:text-primary transition-colors">
674
+ gaebal@example.com
675
+ </a>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ </footer>
680
+
681
+ <!-- Back to Top Button -->
682
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary dark:bg-secondary text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all">
683
+ <i data-feather="arrow-up"></i>
684
+ </button>
685
+
686
+ <script>
687
+ // Initialize Feather Icons
688
+ feather.replace();
689
+
690
+ // Mobile Menu Toggle
691
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
692
+ const mobileMenu = document.getElementById('mobile-menu');
693
+
694
+ mobileMenuButton.addEventListener('click', () => {
695
+ mobileMenu.classList.toggle('open');
696
+ const icon = mobileMenuButton.querySelector('i');
697
+ if (mobileMenu.classList.contains('open')) {
698
+ feather.icons['x'].replace(icon);
699
+ } else {
700
+ feather.icons['menu'].replace(icon);
701
+ }
702
+ });
703
+
704
+ // Close mobile menu when clicking on a link
705
+ document.querySelectorAll('#mobile-menu a').forEach(link => {
706
+ link.addEventListener('click', () => {
707
+ mobileMenu.classList.remove('open');
708
+ feather.icons['menu'].replace(mobileMenuButton.querySelector('i'));
709
+ });
710
+ });
711
+
712
+ // Dark Mode Toggle
713
+ const themeToggle = document.getElementById('theme-toggle');
714
+
715
+ themeToggle.addEventListener('click', () => {
716
+ document.documentElement.classList.toggle('dark');
717
+ const icons = themeToggle.querySelectorAll('i');
718
+ icons.forEach(icon => icon.classList.toggle('hidden'));
719
+
720
+ // Save preference to localStorage
721
+ if (document.documentElement.classList.contains('dark')) {
722
+ localStorage.setItem('theme', 'dark');
723
+ } else {
724
+ localStorage.setItem('theme', 'light');
725
+ }
726
+ });
727
+
728
+ // Check for saved theme preference
729
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
730
+ document.documentElement.classList.add('dark');
731
+ document.querySelector('#theme-toggle i.feather-moon').classList.remove('hidden');
732
+ document.querySelector('#theme-toggle i.feather-sun').classList.add('hidden');
733
+ } else {
734
+ document.documentElement.classList.remove('dark');
735
+ document.querySelector('#theme-toggle i.feather-moon').classList.add('hidden');
736
+ document.querySelector('#theme-toggle i.feather-sun').classList.remove('hidden');
737
+ }
738
+
739
+ // Back to Top Button
740
+ const backToTopButton = document.getElementById('back-to-top');
741
+
742
+ window.addEventListener('scroll', () => {
743
+ if (window.pageYOffset > 300) {
744
+ backToTopButton.classList.remove('opacity-0', 'invisible');
745
+ backToTopButton.classList.add('opacity-100', 'visible');
746
+ } else {
747
+ backToTopButton.classList.remove('opacity-100', 'visible');
748
+ backToTopButton.classList.add('opacity-0', 'invisible');
749
+ }
750
+ });
751
+
752
+ backToTopButton.addEventListener('click', () => {
753
+ window.scrollTo({ top: 0, behavior: 'smooth' });
754
+ });
755
+
756
+ // Smooth scrolling for anchor links
757
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
758
+ anchor.addEventListener('click', function(e) {
759
+ e.preventDefault();
760
+
761
+ const targetId = this.getAttribute('href');
762
+ const targetElement = document.querySelector(targetId);
763
+
764
+ if (targetElement) {
765
+ window.scrollTo({
766
+ top: targetElement.offsetTop - 80,
767
+ behavior: 'smooth'
768
+ });
769
+ }
770
+ });
771
+ });
772
+
773
+ // Animate skill bars on scroll
774
+ const animateSkillBars = () => {
775
+ const skillBars = document.querySelectorAll('.skill-bar');
776
+
777
+ skillBars.forEach(bar => {
778
+ const width = bar.style.width;
779
+ bar.style.width = '0';
780
+
781
+ const observer = new IntersectionObserver((entries) => {
782
+ entries.forEach(entry => {
783
+ if (entry.isIntersecting) {
784
+ bar.style.width = width;
785
+ observer.unobserve(entry.target);
786
+ }
787
+ });
788
+ }, { threshold: 0.5 });
789
+
790
+ observer.observe(bar);
791
+ });
792
+ };
793
+
794
+ // Initialize animations when page loads
795
+ window.addEventListener('load', () => {
796
+ animateSkillBars();
797
+ });
798
+ </script>
799
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SangMoone/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
800
+ </html>