Hugging Face's logo

Spaces:
Laikokwei
/
kokwui-portfolio
Running

App Files Community
Laikokwei commited on
Commit
49a804b
·
verified ·
1 Parent(s): b19cf44

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +589 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kokwui Portfolio
3
- emoji: 📉
4
- colorFrom: green
5
- colorTo: purple
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: kokwui-portfolio
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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,589 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Kok Wui | Software Engineer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Space Grotesk', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+
24
+ .card-hover {
25
+ transition: all 0.3s ease;
26
+ }
27
+
28
+ .card-hover:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
31
+ }
32
+
33
+ .terminal {
34
+ background-color: #011627;
35
+ border-radius: 8px;
36
+ font-family: 'Courier New', monospace;
37
+ }
38
+
39
+ .terminal-header {
40
+ background-color: #1d3b53;
41
+ border-top-left-radius: 8px;
42
+ border-top-right-radius: 8px;
43
+ }
44
+
45
+ .terminal-dot {
46
+ width: 12px;
47
+ height: 12px;
48
+ border-radius: 50%;
49
+ display: inline-block;
50
+ margin-right: 6px;
51
+ }
52
+
53
+ .typewriter {
54
+ overflow: hidden;
55
+ border-right: .15em solid #3b82f6;
56
+ white-space: nowrap;
57
+ animation:
58
+ typing 3.5s steps(40, end),
59
+ blink-caret .75s step-end infinite;
60
+ }
61
+
62
+ @keyframes typing {
63
+ from { width: 0 }
64
+ to { width: 100% }
65
+ }
66
+
67
+ @keyframes blink-caret {
68
+ from, to { border-color: transparent }
69
+ 50% { border-color: #3b82f6; }
70
+ }
71
+
72
+ /* Marquee styles */
73
+ .marquee {
74
+ width: 100%;
75
+ overflow: hidden;
76
+ white-space: nowrap;
77
+ box-sizing: border-box;
78
+ }
79
+
80
+ .marquee span {
81
+ display: inline-block;
82
+ padding-left: 100%;
83
+ animation: marquee 15s linear infinite;
84
+ }
85
+
86
+ @keyframes marquee {
87
+ 0% { transform: translate(0, 0); }
88
+ 100% { transform: translate(-100%, 0); }
89
+ }
90
+ </style>
91
+ </head>
92
+ <body class="bg-gray-50 text-gray-800">
93
+ <!-- Navigation -->
94
+ <nav class="fixed w-full bg-white/80 backdrop-blur-md z-50 shadow-sm">
95
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
96
+ <div class="flex justify-between h-16">
97
+ <div class="flex items-center">
98
+ <span class="text-xl font-bold gradient-text">KW</span>
99
+ </div>
100
+ <div class="hidden md:flex items-center space-x-8">
101
+ <a href="#about" class="text-gray-600 hover:text-indigo-600 transition">About</a>
102
+ <a href="#projects" class="text-gray-600 hover:text-indigo-600 transition">Projects</a>
103
+ <a href="#skills" class="text-gray-600 hover:text-indigo-600 transition">Skills</a>
104
+ <a href="#contact" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>
105
+ </div>
106
+ <div class="md:hidden flex items-center">
107
+ <button id="menu-btn" class="text-gray-600 hover:text-indigo-600">
108
+ <i class="fas fa-bars text-xl"></i>
109
+ </button>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Mobile menu -->
115
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg">
116
+ <div class="flex flex-col space-y-4">
117
+ <a href="#about" class="text-gray-600 hover:text-indigo-600 transition">About</a>
118
+ <a href="#projects" class="text-gray-600 hover:text-indigo-600 transition">Projects</a>
119
+ <a href="#skills" class="text-gray-600 hover:text-indigo-600 transition">Skills</a>
120
+ <a href="#contact" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>
121
+ </div>
122
+ </div>
123
+ </nav>
124
+
125
+ <!-- Hero Section -->
126
+ <section class="min-h-screen flex items-center pt-16">
127
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
128
+ <div class="grid md:grid-cols-2 gap-12 items-center">
129
+ <div>
130
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="gradient-text">Kok Wui</span></h1>
131
+ <div class="marquee text-2xl md:text-3xl font-medium mb-6">
132
+ <span class="gradient-text">Software Programmer • Frontend Mobile Developer • Tech Enthusiast </span>
133
+ </div>
134
+ <p class="text-gray-600 mb-8 text-lg">
135
+ I build exceptional digital experiences with clean, efficient code and modern technologies.
136
+ </p>
137
+ <div class="flex space-x-4">
138
+ <a href="#projects" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition shadow-md">
139
+ View My Work
140
+ </a>
141
+ <a href="#contact" class="px-6 py-3 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition">
142
+ Contact Me
143
+ </a>
144
+ </div>
145
+ </div>
146
+ <div class="terminal p-0 overflow-hidden">
147
+ <div class="terminal-header px-4 py-2 flex items-center">
148
+ <span class="terminal-dot bg-red-500"></span>
149
+ <span class="terminal-dot bg-yellow-500"></span>
150
+ <span class="terminal-dot bg-green-500"></span>
151
+ <span class="text-gray-300 text-sm ml-2">bash</span>
152
+ </div>
153
+ <div class="p-4 text-green-400">
154
+ <p class="mb-2">$ kokwui --intro</p>
155
+ <p class="mb-2">> Hello World!</p>
156
+ <p class="mb-2">> I'm a passionate developer with 2+ years</p>
157
+ <p class="mb-2">> of experience building web applications.</p>
158
+ <p class="mb-2">> Currently working with React, Node.js & Python.</p>
159
+ <p class="mb-2">$ <span class="cursor-blink">|</span></p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </section>
165
+
166
+ <!-- About Section -->
167
+ <section id="about" class="py-20 bg-white">
168
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
169
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2>
170
+ <div class="grid md:grid-cols-3 gap-8">
171
+ <div class="col-span-2">
172
+ <p class="text-gray-600 mb-6 text-lg">
173
+ I'm a software engineer with a passion for solving complex problems through code.
174
+ My journey in tech started when I built my first website at 14, and I've been
175
+ hooked ever since.
176
+ </p>
177
+ <p class="text-gray-600 mb-6 text-lg">
178
+ I specialize in JavaScript ecosystems, but I'm always exploring new technologies
179
+ and frameworks. Currently, I'm diving deeper into cloud architecture and machine
180
+ learning applications.
181
+ </p>
182
+ <p class="text-gray-600 mb-6 text-lg">
183
+ When I'm not coding, you can find me contributing to open-source projects,
184
+ reading tech blogs, or experimenting with new gadgets.
185
+ </p>
186
+ <div class="mt-8">
187
+ <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-800">
188
+ <span>Download Resume</span>
189
+ <i class="fas fa-download ml-2"></i>
190
+ </a>
191
+ </div>
192
+ </div>
193
+ <div class="flex justify-center">
194
+ <div class="relative">
195
+ <div class="w-64 h-64 bg-indigo-100 rounded-full overflow-hidden border-4 border-white shadow-xl">
196
+ <img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
197
+ alt="Alex Carter" class="w-full h-full object-cover">
198
+ </div>
199
+ <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-lg shadow-lg">
200
+ <div class="flex items-center">
201
+ <div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white">
202
+ <i class="fas fa-code"></i>
203
+ </div>
204
+ <div class="ml-3">
205
+ <p class="text-xs text-gray-500">Currently working on</p>
206
+ <p class="text-sm font-medium">AI Chatbot</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </section>
215
+
216
+ <!-- Skills Section -->
217
+ <section id="skills" class="py-20 bg-gray-50">
218
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
219
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">My Skills</h2>
220
+
221
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
222
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
223
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
224
+ <i class="fas fa-laptop-code text-indigo-600 text-xl"></i>
225
+ </div>
226
+ <h3 class="text-xl font-semibold mb-3">Frontend Development</h3>
227
+ <div class="flex flex-wrap gap-2">
228
+ <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">React</span>
229
+ <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Next.js</span>
230
+ <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">TypeScript</span>
231
+ <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Tailwind</span>
232
+ <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">GraphQL</span>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="bg-white p=6 rounded-xl shadow-sm card-hover">
237
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
238
+ <i class="fas fa-server text-blue-600 text-xl"></i>
239
+ </div>
240
+ <h3 class="text-xl font-semibold mb-3">Backend Development</h3>
241
+ <div class="flex flex-wrap gap=2">
242
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Node.js</span>
243
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Express</span>
244
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Python</span>
245
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Django</span>
246
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">PostgreSQL</span>
247
+ </div>
248
+ </div>
249
+
250
+ <div class="bg-white p=6 rounded-xl shadow-sm card-hover">
251
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
252
+ <i class="fas fa-cloud text-purple-600 text-xl"></i>
253
+ </div>
254
+ <h3 class="text-xl font-semibold mb-3">DevOps & Cloud</h3>
255
+ <div class="flex flex-wrap gap=2">
256
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">AWS</span>
257
+ <span class="px=3 py=1 bg-purple-100 text-purple-800 rounded-full text-sm">Docker</span>
258
+ <span class="px=3 py=1 bg-purple-100 text-purple-800 rounded-full text-sm">Kubernetes</span>
259
+ <span class="px=3 py=1 bg-purple-100 text-purple-800 rounded-full text-sm">CI/CD</span>
260
+ <span class="px=3 py=1 bg-purple-100 text-purple-800 rounded-full text-sm">Terraform</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="bg-white p=6 rounded-xl shadow-sm">
266
+ <h3 class="text-xl font-semibold mb=4">My Tech Stack</h3>
267
+ <div class="grid grid-cols-3 md:grid-cols-6 gap=4">
268
+ <div class="flex flex-col items-center p=4 hover:bg-gray-50 rounded-lg transition">
269
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" class="w-12 h-12 mb=2" alt="React" />
270
+ <span class="text-sm">React</span>
271
+ </div>
272
+ <div class="flex flex-col items-center p=4 hover:bg-gray-50 rounded-lg transition">
273
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" class="w-12 h-12 mb=2" alt="Node.js" />
274
+ <span class="text-sm">Node.js</span>
275
+ </div>
276
+ <div class="flex flex-col items-center p=4 hover:bg-gray-50 rounded-lg transition">
277
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" class="w-12 h-12 mb=2" alt="TypeScript" />
278
+ <span class="text-sm">TypeScript</span>
279
+ </div>
280
+ <div class="flex flex-col items-center p=4 hover:bg-gray-50 rounded-lg transition">
281
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" class="w-12 h-12 mb=2" alt="Python" />
282
+ <span class="text-sm">Python</span>
283
+ </div>
284
+ <div class="flex flex-col items-center p=4 hover:bg-gray-50 rounded-lg transition">
285
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/aws/aws-original.svg" class="w-12 h-12 mb=2" alt="AWS" />
286
+ <span class="text-sm">AWS</span>
287
+ </div>
288
+ <div class="flex flex-col items-center p=4 hover:bg-gray-50 rounded-lg transition">
289
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" class="w-12 h-12 mb=2" alt="Docker" />
290
+ <span class="text-sm">Docker</span>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </section>
296
+
297
+ <!-- Projects Section -->
298
+ <section id="projects" class="py-20 bg-white">
299
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
300
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Featured Projects</h2>
301
+
302
+ <div class="grid md:grid-cols-2 gap=8">
303
+ <!-- Project 1 -->
304
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover">
305
+ <div class="h-48 bg-indigo-100 overflow-hidden">
306
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
307
+ alt="AI Dashboard" class="w-full h-full object-cover">
308
+ </div>
309
+ <div class="p=6">
310
+ <div class="flex justify-between items-start mb=2">
311
+ <h3 class="text-xl font-semibold">AI Analytics Dashboard</h3>
312
+ <span class="text-xs px=2 py=1 bg-indigo-100 text-indigo-800 rounded-full">2023</span>
313
+ </div>
314
+ <p class="text-gray-600 mb=4">
315
+ A real-time analytics dashboard powered by machine learning algorithms to provide business insights.
316
+ </p>
317
+ <div class="flex flex-wrap gap=2 mb=4">
318
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">React</span>
319
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">Node.js</span>
320
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">TensorFlow</span>
321
+ </div>
322
+ <div class="flex space-x=3">
323
+ <a href="#" class="text-indigo-600 hover:text-indigo-800">
324
+ <i class="fab fa-github"></i>
325
+ </a>
326
+ <a href="#" class="text-indigo-600 hover:text-indigo-800">
327
+ <i class="fas fa-external-link-alt"></i>
328
+ </a>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Project 2 -->
334
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover">
335
+ <div class="h-48 bg-blue-100 overflow-hidden">
336
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
337
+ alt="E-commerce Platform" class="w-full h-full object-cover">
338
+ </div>
339
+ <div class="p=6">
340
+ <div class="flex justify-between items-start mb=2">
341
+ <h3 class="text-xl font-semibold">E-commerce Platform</h3>
342
+ <span class="text-xs px=2 py=1 bg-blue-100 text-blue-800 rounded-full">2022</span>
343
+ </div>
344
+ <p class="text-gray-600 mb=4">
345
+ A full-featured e-commerce platform with payment integration, inventory management, and analytics.
346
+ </p>
347
+ <div class="flex flex-wrap gap=2 mb=4">
348
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">Next.js</span>
349
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">Stripe</span>
350
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">MongoDB</span>
351
+ </div>
352
+ <div class="flex space-x=3">
353
+ <a href="#" class="text-blue-600 hover:text-blue-800">
354
+ <i class="fab fa-github"></i>
355
+ </a>
356
+ <a href="#" class="text-blue-600 hover:text-blue-800">
357
+ <i class="fas fa-external-link-alt"></i>
358
+ </a>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Project 3 -->
364
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover">
365
+ <div class="h-48 bg-purple-100 overflow-hidden">
366
+ <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
367
+ alt="Task Automation" class="w-full h-full object-cover">
368
+ </div>
369
+ <div class="p=6">
370
+ <div class="flex justify-between items-start mb=2">
371
+ <h3 class="text-xl font-semibold">Workflow Automation</h3>
372
+ <span class="text-xs px=2 py=1 bg-purple-100 text-purple-800 rounded-full">2023</span>
373
+ </div>
374
+ <p class="text-gray-600 mb=4">
375
+ An automation tool that streamlines repetitive tasks across multiple platforms with custom triggers.
376
+ </p>
377
+ <div class="flex flex-wrap gap=2 mb=4">
378
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">Python</span>
379
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">AWS Lambda</span>
380
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">Zapier API</span>
381
+ </div>
382
+ <div class="flex space-x=3">
383
+ <a href="#" class="text-purple-600 hover:text-purple-800">
384
+ <i class="fab fa-github"></i>
385
+ </a>
386
+ <a href="#" class="text-purple-600 hover:text-purple-800">
387
+ <i class="fas fa-external-link-alt"></i>
388
+ </a>
389
+ </div>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Project 4 -->
394
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover">
395
+ <div class="h-48 bg-green-100 overflow-hidden">
396
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
397
+ alt="Health App" class="w-full h-full object-cover">
398
+ </div>
399
+ <div class="p=6">
400
+ <div class="flex justify-between items-start mb=2">
401
+ <h3 class="text-xl font-semibold">Health Tracker App</h3>
402
+ <span class="text-xs px=2 py=1 bg-green-100 text-green-800 rounded-full">2021</span>
403
+ </div>
404
+ <p class="text-gray-600 mb=4">
405
+ A mobile application that tracks fitness metrics, nutrition, and provides personalized recommendations.
406
+ </p>
407
+ <div class="flex flex-wrap gap=2 mb=4">
408
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">React Native</span>
409
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">Firebase</span>
410
+ <span class="text-xs px=2 py=1 bg-gray-200 text-gray-700 rounded-full">HealthKit</span>
411
+ </div>
412
+ <div class="flex space-x=3">
413
+ <a href="#" class="text-green-600 hover:text-green-800">
414
+ <i class="fab fa-github"></i>
415
+ </a>
416
+ <a href="#" class="text-green-600 hover:text-green-800">
417
+ <i class="fas fa-external-link-alt"></i>
418
+ </a>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="text-center mt=12">
425
+ <a href="#" class="inline-flex items-center px=6 py=3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
426
+ <span>View All Projects</span>
427
+ <i class="fas fa-arrow-right ml=2"></i>
428
+ </a>
429
+ </div>
430
+ </div>
431
+ </section>
432
+
433
+ <!-- Contact Section -->
434
+ <section id="contact" class="py=20 bg-gray-50">
435
+ <div class="max-w-6xl mx-auto px=4 sm:px=6 lg:px=8">
436
+ <h2 class="text-3xl font-bold text-center mb=12 gradient-text">Get In Touch</h2>
437
+
438
+ <div class="grid md:grid-cols-2 gap=12">
439
+ <div>
440
+ <h3 class="text-xl font-semibold mb=4">Let's talk about your project</h3>
441
+ <p class="text-gray-600 mb=8">
442
+ I'm currently available for freelance work and open to new opportunities.
443
+ Whether you have a question or just want to say hi, I'll try my best to get back to you!
444
+ </p>
445
+
446
+ <div class="space-y=4">
447
+ <div class="flex items-center">
448
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mr=4">
449
+ <i class="fas fa-envelope"></i>
450
+ </div>
451
+ <div>
452
+ <p class="text-sm text-gray-500">Email me at</p>
453
+ <a href="mailto:[email protected]" class="font-medium hover:text-indigo-600">[email protected]</a>
454
+ </div>
455
+ </div>
456
+
457
+ <div class="flex items-center">
458
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr=4">
459
+ <i class="fas fa-phone-alt"></i>
460
+ </div>
461
+ <div>
462
+ <p class="text-sm text-gray-500">Call me at</p>
463
+ <a href="tel:+1234567890" class="font-medium hover:text-blue-600">+1 (234) 567-890</a>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="flex items-center">
468
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mr=4">
469
+ <i class="fas fa-map-marker-alt"></i>
470
+ </div>
471
+ <div>
472
+ <p class="text-sm text-gray-500">Find me at</p>
473
+ <p class="font-medium">San Francisco, CA</p>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <div class="mt=8">
479
+ <h4 class="text-lg font-medium mb=4">Connect with me</h4>
480
+ <div class="flex space-x=4">
481
+ <a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-indigo-600 hover:text-white transition">
482
+ <i class="fab fa-github"></i>
483
+ </a>
484
+ <a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-600 hover:text-white transition">
485
+ <i class="fab fa-linkedin-in"></i>
486
+ </a>
487
+ <a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-400 hover:text-white transition">
488
+ <i class="fab fa-twitter"></i>
489
+ </a>
490
+ <a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-red-500 hover:text-white transition">
491
+ <i class="fab fa-youtube"></i>
492
+ </a>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <div class="bg-white p=6 rounded-xl shadow-sm">
498
+ <h3 class="text-xl font-semibold mb=6">Send me a message</h3>
499
+ <form>
500
+ <div class="mb=4">
501
+ <label for="name" class="block text-sm font-medium text-gray-700 mb=1">Name</label>
502
+ <input type="text" id="name" class="w-full px=4 py=2 border border-gray-300 rounded-lg focus:ring=2 focus:ring-indigo-200 focus:border-indigo-500">
503
+ </div>
504
+ <div class="mb=4">
505
+ <label for="email" class="block text-sm font-medium text-gray-700 mb=1">Email</label>
506
+ <input type="email" id="email" class="w-full px=4 py=2 border border-gray-300 rounded-lg focus:ring=2 focus:ring-indigo-200 focus:border-indigo-500">
507
+ </div>
508
+ <div class="mb=4">
509
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb=1">Subject</label>
510
+ <input type="text" id="subject" class="w-full px=4 py=2 border border-gray-300 rounded-lg focus:ring=2 focus:ring-indigo-200 focus:border-indigo-500">
511
+ </div>
512
+ <div class="mb=6">
513
+ <label for="message" class="block text-sm font-medium text-gray-700 mb=1">Message</label>
514
+ <textarea id="message" rows="4" class="w-full px=4 py=2 border border-gray-300 rounded-lg focus:ring=2 focus:ring-indigo-200 focus:border-indigo-500"></textarea>
515
+ </div>
516
+ <button type="submit" class="w-full bg-indigo-600 text-white py=3 rounded-lg hover:bg-indigo-700 transition shadow-md">
517
+ Send Message
518
+ </button>
519
+ </form>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </section>
524
+
525
+ <!-- Footer -->
526
+ <footer class="bg-white py=8 border-t border-gray-200">
527
+ <div class="max-w-6xl mx-auto px=4 sm:px=6 lg:px=8">
528
+ <div class="flex flex-col md:flex-row justify-between items-center">
529
+ <div class="mb=4 md:mb=0">
530
+ <span class="text-xl font-bold gradient-text">Kok Wui</span>
531
+ <p class="text-gray-500 text-sm mt=1">Building digital experiences with code.</p>
532
+ </div>
533
+ <div class="flex space-x=6">
534
+ <a href="#" class="text-gray-500 hover:text-indigo-600 transition">
535
+ <i class="fab fa-github"></i>
536
+ </a>
537
+ <a href="#" class="text-gray-500 hover:text-blue-600 transition">
538
+ <i class="fab fa-linkedin-in"></i>
539
+ </a>
540
+ <a href="#" class="text-gray-500 hover:text-blue-400 transition">
541
+ <i class="fab fa-twitter"></i>
542
+ </a>
543
+ <a href="#" class="text-gray-500 hover:text-red-500 transition">
544
+ <i class="fab fa-youtube"></i>
545
+ </a>
546
+ </div>
547
+ </div>
548
+ <div class="mt=8 pt=8 border-t border-gray-200 text-center text-sm text-gray=500">
549
+ <p>© 2023 Alex Carter. All rights reserved.</p>
550
+ </div>
551
+ </div>
552
+ </footer>
553
+
554
+ <script>
555
+ // Mobile menu toggle
556
+ const menuBtn = document.getElementById('menu-btn');
557
+ const mobileMenu = document.getElementById('mobile-menu');
558
+
559
+ menuBtn.addEventListener('click', () => {
560
+ mobileMenu.classList.toggle('hidden');
561
+ });
562
+
563
+ // Close mobile menu when clicking on a link
564
+ const mobileLinks = mobileMenu.querySelectorAll('a');
565
+ mobileLinks.forEach(link => {
566
+ link.addEventListener('click', () => {
567
+ mobileMenu.classList.add('hidden');
568
+ });
569
+ });
570
+
571
+ // Smooth scrolling for all links
572
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
573
+ anchor.addEventListener('click', function (e) {
574
+ e.preventDefault();
575
+
576
+ const targetId = this.getAttribute('href');
577
+ const targetElement = document.querySelector(targetId);
578
+
579
+ if (targetElement) {
580
+ window.scrollTo({
581
+ top: targetElement.offsetTop - 80,
582
+ behavior: 'smooth'
583
+ });
584
+ }
585
+ });
586
+ });
587
+ </script>
588
+ <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=Laikokwei/kokwui-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
589
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ a mordern minimalist personal portfolio for software engineer/ tech geeky
2
+ add marquee to the text "Software Programmer & Tech Enthusiast