@howssatoshi/quantumcss 1.5.1 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/quantum.min.css +1 -4885
- package/examples/admin-panel.html +834 -0
- package/examples/analytics-dashboard.html +949 -0
- package/examples/chat-messaging.html +264 -0
- package/examples/email-template.html +697 -0
- package/examples/index.html +129 -1
- package/examples/music-streaming.html +1239 -0
- package/examples/portfolio-resume.html +653 -0
- package/examples/starlight.html +56 -3
- package/examples/travel/index.html +0 -4
- package/examples/video-streaming.html +564 -0
- package/package.json +1 -1
- package/src/styles/quantum-base.css +1 -1
- package/src/styles/quantum-components.css +954 -0
|
@@ -0,0 +1,653 @@
|
|
|
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>Alex Chen - Creative Developer</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<link rel="stylesheet" href="../src/styles/quantum-components.css">
|
|
9
|
+
<script src="../src/starlight.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
12
|
+
body {
|
|
13
|
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
14
|
+
background: var(--bg-primary, #08081a);
|
|
15
|
+
color: var(--text-primary, #f1f5f9);
|
|
16
|
+
line-height: 1.6;
|
|
17
|
+
overflow-x: hidden;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Navigation */
|
|
21
|
+
nav {
|
|
22
|
+
position: fixed;
|
|
23
|
+
top: 0;
|
|
24
|
+
left: 0;
|
|
25
|
+
right: 0;
|
|
26
|
+
z-index: 1000;
|
|
27
|
+
padding: 1.25rem 2rem;
|
|
28
|
+
background: rgba(8, 8, 26, 0.8);
|
|
29
|
+
backdrop-filter: blur(20px);
|
|
30
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
31
|
+
}
|
|
32
|
+
.nav-content {
|
|
33
|
+
max-width: 1200px;
|
|
34
|
+
margin: 0 auto;
|
|
35
|
+
display: flex;
|
|
36
|
+
justify-content: space-between;
|
|
37
|
+
align-items: center;
|
|
38
|
+
}
|
|
39
|
+
.logo {
|
|
40
|
+
font-size: 1.5rem;
|
|
41
|
+
font-weight: 700;
|
|
42
|
+
background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6);
|
|
43
|
+
-webkit-background-clip: text;
|
|
44
|
+
-webkit-text-fill-color: transparent;
|
|
45
|
+
background-clip: text;
|
|
46
|
+
}
|
|
47
|
+
.nav-links {
|
|
48
|
+
display: flex;
|
|
49
|
+
gap: 2rem;
|
|
50
|
+
list-style: none;
|
|
51
|
+
}
|
|
52
|
+
.nav-links a {
|
|
53
|
+
color: var(--text-secondary, #94a3b8);
|
|
54
|
+
text-decoration: none;
|
|
55
|
+
font-size: 0.9375rem;
|
|
56
|
+
font-weight: 500;
|
|
57
|
+
transition: color 0.3s;
|
|
58
|
+
}
|
|
59
|
+
.nav-links a:hover { color: var(--color-starlight, #00d4ff); }
|
|
60
|
+
|
|
61
|
+
/* Hero Section */
|
|
62
|
+
.hero {
|
|
63
|
+
min-height: 100vh;
|
|
64
|
+
display: flex;
|
|
65
|
+
align-items: center;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
padding: 8rem 2rem 4rem;
|
|
68
|
+
position: relative;
|
|
69
|
+
}
|
|
70
|
+
.hero-bg {
|
|
71
|
+
position: absolute;
|
|
72
|
+
inset: 0;
|
|
73
|
+
background:
|
|
74
|
+
radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
|
|
75
|
+
radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
|
|
76
|
+
pointer-events: none;
|
|
77
|
+
}
|
|
78
|
+
.hero-content {
|
|
79
|
+
max-width: 1000px;
|
|
80
|
+
text-align: center;
|
|
81
|
+
position: relative;
|
|
82
|
+
z-index: 1;
|
|
83
|
+
}
|
|
84
|
+
.hero-badge {
|
|
85
|
+
display: inline-flex;
|
|
86
|
+
align-items: center;
|
|
87
|
+
gap: 0.5rem;
|
|
88
|
+
padding: 0.5rem 1rem;
|
|
89
|
+
background: rgba(0, 212, 255, 0.1);
|
|
90
|
+
border: 1px solid rgba(0, 212, 255, 0.2);
|
|
91
|
+
border-radius: 9999px;
|
|
92
|
+
font-size: 0.875rem;
|
|
93
|
+
color: var(--color-starlight, #00d4ff);
|
|
94
|
+
margin-bottom: 1.5rem;
|
|
95
|
+
}
|
|
96
|
+
.hero h1 {
|
|
97
|
+
font-size: clamp(2.5rem, 8vw, 5rem);
|
|
98
|
+
font-weight: 800;
|
|
99
|
+
line-height: 1.1;
|
|
100
|
+
margin-bottom: 1.5rem;
|
|
101
|
+
}
|
|
102
|
+
.hero h1 span {
|
|
103
|
+
background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #8b5cf6);
|
|
104
|
+
-webkit-background-clip: text;
|
|
105
|
+
-webkit-text-fill-color: transparent;
|
|
106
|
+
background-clip: text;
|
|
107
|
+
}
|
|
108
|
+
.hero-subtitle {
|
|
109
|
+
font-size: 1.25rem;
|
|
110
|
+
color: var(--text-secondary, #94a3b8);
|
|
111
|
+
max-width: 600px;
|
|
112
|
+
margin: 0 auto 2rem;
|
|
113
|
+
}
|
|
114
|
+
.hero-cta {
|
|
115
|
+
display: flex;
|
|
116
|
+
gap: 1rem;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
flex-wrap: wrap;
|
|
119
|
+
}
|
|
120
|
+
.btn {
|
|
121
|
+
padding: 0.875rem 2rem;
|
|
122
|
+
border-radius: 0.75rem;
|
|
123
|
+
font-size: 0.9375rem;
|
|
124
|
+
font-weight: 600;
|
|
125
|
+
text-decoration: none;
|
|
126
|
+
transition: all 0.3s;
|
|
127
|
+
display: inline-flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
gap: 0.5rem;
|
|
130
|
+
}
|
|
131
|
+
.btn-primary {
|
|
132
|
+
background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6);
|
|
133
|
+
color: white;
|
|
134
|
+
box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
|
|
135
|
+
}
|
|
136
|
+
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 50px rgba(0, 212, 255, 0.4); }
|
|
137
|
+
.btn-secondary {
|
|
138
|
+
background: rgba(255, 255, 255, 0.05);
|
|
139
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
140
|
+
color: var(--text-primary, #f1f5f9);
|
|
141
|
+
}
|
|
142
|
+
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }
|
|
143
|
+
|
|
144
|
+
/* Section Styles */
|
|
145
|
+
section { padding: 6rem 2rem; }
|
|
146
|
+
.container { max-width: 1200px; margin: 0 auto; }
|
|
147
|
+
.section-header {
|
|
148
|
+
text-align: center;
|
|
149
|
+
margin-bottom: 4rem;
|
|
150
|
+
}
|
|
151
|
+
.section-header h2 {
|
|
152
|
+
font-size: 2.5rem;
|
|
153
|
+
font-weight: 700;
|
|
154
|
+
margin-bottom: 1rem;
|
|
155
|
+
}
|
|
156
|
+
.section-header p {
|
|
157
|
+
color: var(--text-secondary, #94a3b8);
|
|
158
|
+
font-size: 1.125rem;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/* Skills Grid */
|
|
162
|
+
.skills-grid {
|
|
163
|
+
display: grid;
|
|
164
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
165
|
+
gap: 2rem;
|
|
166
|
+
}
|
|
167
|
+
.skill-card {
|
|
168
|
+
background: rgba(255, 255, 255, 0.03);
|
|
169
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
170
|
+
border-radius: 1.5rem;
|
|
171
|
+
padding: 2rem;
|
|
172
|
+
transition: all 0.3s;
|
|
173
|
+
}
|
|
174
|
+
.skill-card:hover {
|
|
175
|
+
background: rgba(255, 255, 255, 0.05);
|
|
176
|
+
transform: translateY(-5px);
|
|
177
|
+
border-color: rgba(0, 212, 255, 0.2);
|
|
178
|
+
}
|
|
179
|
+
.skill-icon {
|
|
180
|
+
width: 60px;
|
|
181
|
+
height: 60px;
|
|
182
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(59, 130, 246, 0.2));
|
|
183
|
+
border-radius: 1rem;
|
|
184
|
+
display: flex;
|
|
185
|
+
align-items: center;
|
|
186
|
+
justify-content: center;
|
|
187
|
+
margin-bottom: 1.5rem;
|
|
188
|
+
color: var(--color-starlight, #00d4ff);
|
|
189
|
+
}
|
|
190
|
+
.skill-card h3 { font-size: 1.25rem; margin-bottom: 1rem; }
|
|
191
|
+
.skill-card p { color: var(--text-secondary, #94a3b8); font-size: 0.9375rem; }
|
|
192
|
+
.skill-tags {
|
|
193
|
+
display: flex;
|
|
194
|
+
flex-wrap: wrap;
|
|
195
|
+
gap: 0.5rem;
|
|
196
|
+
margin-top: 1rem;
|
|
197
|
+
}
|
|
198
|
+
.skill-tag {
|
|
199
|
+
padding: 0.375rem 0.875rem;
|
|
200
|
+
background: rgba(255, 255, 255, 0.05);
|
|
201
|
+
border-radius: 9999px;
|
|
202
|
+
font-size: 0.8125rem;
|
|
203
|
+
color: var(--text-secondary, #94a3b8);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Projects */
|
|
207
|
+
.projects-grid {
|
|
208
|
+
display: grid;
|
|
209
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
210
|
+
gap: 2rem;
|
|
211
|
+
}
|
|
212
|
+
.project-card {
|
|
213
|
+
background: rgba(255, 255, 255, 0.03);
|
|
214
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
215
|
+
border-radius: 1.5rem;
|
|
216
|
+
overflow: hidden;
|
|
217
|
+
transition: all 0.3s;
|
|
218
|
+
}
|
|
219
|
+
.project-card:hover { transform: translateY(-5px); border-color: rgba(0, 212, 255, 0.3); }
|
|
220
|
+
.project-image {
|
|
221
|
+
height: 200px;
|
|
222
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(139, 92, 246, 0.1));
|
|
223
|
+
display: flex;
|
|
224
|
+
align-items: center;
|
|
225
|
+
justify-content: center;
|
|
226
|
+
font-size: 4rem;
|
|
227
|
+
}
|
|
228
|
+
.project-content { padding: 1.5rem; }
|
|
229
|
+
.project-content h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
|
|
230
|
+
.project-content p { color: var(--text-secondary, #94a3b8); font-size: 0.9375rem; margin-bottom: 1rem; }
|
|
231
|
+
.project-links { display: flex; gap: 1rem; }
|
|
232
|
+
.project-links a {
|
|
233
|
+
color: var(--color-starlight, #00d4ff);
|
|
234
|
+
text-decoration: none;
|
|
235
|
+
font-size: 0.875rem;
|
|
236
|
+
font-weight: 500;
|
|
237
|
+
display: flex;
|
|
238
|
+
align-items: center;
|
|
239
|
+
gap: 0.25rem;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
/* Timeline */
|
|
243
|
+
.timeline {
|
|
244
|
+
position: relative;
|
|
245
|
+
max-width: 800px;
|
|
246
|
+
margin: 0 auto;
|
|
247
|
+
}
|
|
248
|
+
.timeline::before {
|
|
249
|
+
content: '';
|
|
250
|
+
position: absolute;
|
|
251
|
+
left: 50%;
|
|
252
|
+
transform: translateX(-50%);
|
|
253
|
+
width: 2px;
|
|
254
|
+
height: 100%;
|
|
255
|
+
background: linear-gradient(180deg, var(--color-starlight, #00d4ff), transparent);
|
|
256
|
+
}
|
|
257
|
+
.timeline-item {
|
|
258
|
+
display: grid;
|
|
259
|
+
grid-template-columns: 1fr 1fr;
|
|
260
|
+
gap: 3rem;
|
|
261
|
+
margin-bottom: 3rem;
|
|
262
|
+
position: relative;
|
|
263
|
+
}
|
|
264
|
+
.timeline-item:nth-child(even) .timeline-content { grid-column: 2; }
|
|
265
|
+
.timeline-item:nth-child(even) .timeline-date { grid-column: 1; text-align: right; }
|
|
266
|
+
.timeline-dot {
|
|
267
|
+
position: absolute;
|
|
268
|
+
left: 50%;
|
|
269
|
+
transform: translateX(-50%);
|
|
270
|
+
width: 16px;
|
|
271
|
+
height: 16px;
|
|
272
|
+
background: var(--color-starlight, #00d4ff);
|
|
273
|
+
border-radius: 50%;
|
|
274
|
+
border: 3px solid var(--bg-primary, #08081a);
|
|
275
|
+
}
|
|
276
|
+
.timeline-content {
|
|
277
|
+
background: rgba(255, 255, 255, 0.03);
|
|
278
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
279
|
+
border-radius: 1rem;
|
|
280
|
+
padding: 1.5rem;
|
|
281
|
+
}
|
|
282
|
+
.timeline-content h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
|
|
283
|
+
.timeline-content .company { color: var(--color-starlight, #00d4ff); font-size: 0.9375rem; margin-bottom: 0.5rem; }
|
|
284
|
+
.timeline-content p { color: var(--text-secondary, #94a3b8); font-size: 0.875rem; }
|
|
285
|
+
.timeline-date {
|
|
286
|
+
color: var(--text-muted, #64748b);
|
|
287
|
+
font-size: 0.875rem;
|
|
288
|
+
font-weight: 500;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/* Testimonials */
|
|
292
|
+
.testimonials-grid {
|
|
293
|
+
display: grid;
|
|
294
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
295
|
+
gap: 2rem;
|
|
296
|
+
}
|
|
297
|
+
.testimonial-card {
|
|
298
|
+
background: rgba(255, 255, 255, 0.03);
|
|
299
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
300
|
+
border-radius: 1.5rem;
|
|
301
|
+
padding: 2rem;
|
|
302
|
+
position: relative;
|
|
303
|
+
}
|
|
304
|
+
.testimonial-card::before {
|
|
305
|
+
content: '"';
|
|
306
|
+
position: absolute;
|
|
307
|
+
top: 1rem;
|
|
308
|
+
right: 2rem;
|
|
309
|
+
font-size: 6rem;
|
|
310
|
+
color: rgba(0, 212, 255, 0.1);
|
|
311
|
+
font-family: Georgia, serif;
|
|
312
|
+
line-height: 1;
|
|
313
|
+
}
|
|
314
|
+
.testimonial-text {
|
|
315
|
+
color: var(--text-secondary, #94a3b8);
|
|
316
|
+
font-size: 1rem;
|
|
317
|
+
line-height: 1.7;
|
|
318
|
+
margin-bottom: 1.5rem;
|
|
319
|
+
position: relative;
|
|
320
|
+
z-index: 1;
|
|
321
|
+
}
|
|
322
|
+
.testimonial-author {
|
|
323
|
+
display: flex;
|
|
324
|
+
align-items: center;
|
|
325
|
+
gap: 1rem;
|
|
326
|
+
}
|
|
327
|
+
.testimonial-author img {
|
|
328
|
+
width: 50px;
|
|
329
|
+
height: 50px;
|
|
330
|
+
border-radius: 50%;
|
|
331
|
+
object-fit: cover;
|
|
332
|
+
}
|
|
333
|
+
.testimonial-author h4 { font-size: 1rem; margin-bottom: 0.125rem; }
|
|
334
|
+
.testimonial-author p { color: var(--text-muted, #64748b); font-size: 0.875rem; }
|
|
335
|
+
|
|
336
|
+
/* Contact */
|
|
337
|
+
.contact-section {
|
|
338
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(139, 92, 246, 0.05));
|
|
339
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
340
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
341
|
+
}
|
|
342
|
+
.contact-grid {
|
|
343
|
+
display: grid;
|
|
344
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
345
|
+
gap: 2rem;
|
|
346
|
+
max-width: 800px;
|
|
347
|
+
margin: 0 auto;
|
|
348
|
+
}
|
|
349
|
+
.contact-item {
|
|
350
|
+
display: flex;
|
|
351
|
+
align-items: center;
|
|
352
|
+
gap: 1rem;
|
|
353
|
+
padding: 1.5rem;
|
|
354
|
+
background: rgba(255, 255, 255, 0.03);
|
|
355
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
356
|
+
border-radius: 1rem;
|
|
357
|
+
text-decoration: none;
|
|
358
|
+
color: inherit;
|
|
359
|
+
transition: all 0.3s;
|
|
360
|
+
}
|
|
361
|
+
.contact-item:hover {
|
|
362
|
+
background: rgba(255, 255, 255, 0.05);
|
|
363
|
+
border-color: rgba(0, 212, 255, 0.3);
|
|
364
|
+
transform: translateY(-3px);
|
|
365
|
+
}
|
|
366
|
+
.contact-icon {
|
|
367
|
+
width: 50px;
|
|
368
|
+
height: 50px;
|
|
369
|
+
background: rgba(0, 212, 255, 0.1);
|
|
370
|
+
border-radius: 1rem;
|
|
371
|
+
display: flex;
|
|
372
|
+
align-items: center;
|
|
373
|
+
justify-content: center;
|
|
374
|
+
color: var(--color-starlight, #00d4ff);
|
|
375
|
+
}
|
|
376
|
+
.contact-item h3 { font-size: 1rem; margin-bottom: 0.25rem; }
|
|
377
|
+
.contact-item p { color: var(--text-muted, #64748b); font-size: 0.875rem; }
|
|
378
|
+
|
|
379
|
+
/* Footer */
|
|
380
|
+
footer {
|
|
381
|
+
padding: 3rem 2rem;
|
|
382
|
+
text-align: center;
|
|
383
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
384
|
+
}
|
|
385
|
+
footer p { color: var(--text-muted, #64748b); font-size: 0.9375rem; }
|
|
386
|
+
|
|
387
|
+
/* Light Mode */
|
|
388
|
+
body.light-mode {
|
|
389
|
+
--bg-primary: #f8fafc;
|
|
390
|
+
--text-primary: #0f172a;
|
|
391
|
+
--text-secondary: #475569;
|
|
392
|
+
--text-muted: #64748b;
|
|
393
|
+
}
|
|
394
|
+
body.light-mode nav { background: rgba(248, 250, 252, 0.9); border-bottom-color: #e2e8f0; }
|
|
395
|
+
body.light-mode .skill-card, body.light-mode .project-card, body.light-mode .timeline-content,
|
|
396
|
+
body.light-mode .testimonial-card, body.light-mode .contact-item {
|
|
397
|
+
background: #ffffff;
|
|
398
|
+
border-color: #e2e8f0;
|
|
399
|
+
}
|
|
400
|
+
body.light-mode .timeline::before { background: linear-gradient(180deg, #3b82f6, transparent); }
|
|
401
|
+
body.light-mode .timeline-dot { border-color: #f8fafc; }
|
|
402
|
+
|
|
403
|
+
@media (max-width: 768px) {
|
|
404
|
+
.nav-links { display: none; }
|
|
405
|
+
.timeline::before { left: 0; }
|
|
406
|
+
.timeline-item { grid-template-columns: 1fr; gap: 1rem; padding-left: 2rem; }
|
|
407
|
+
.timeline-item:nth-child(even) .timeline-content,
|
|
408
|
+
.timeline-item:nth-child(even) .timeline-date { grid-column: 1; text-align: left; }
|
|
409
|
+
.timeline-dot { left: 0; transform: translateX(-50%); }
|
|
410
|
+
}
|
|
411
|
+
</style>
|
|
412
|
+
</head>
|
|
413
|
+
<body>
|
|
414
|
+
<nav>
|
|
415
|
+
<div class="nav-content">
|
|
416
|
+
<div class="logo">Alex.dev</div>
|
|
417
|
+
<ul class="nav-links">
|
|
418
|
+
<li><a href="#about">About</a></li>
|
|
419
|
+
<li><a href="#skills">Skills</a></li>
|
|
420
|
+
<li><a href="#projects">Projects</a></li>
|
|
421
|
+
<li><a href="#experience">Experience</a></li>
|
|
422
|
+
<li><a href="#contact">Contact</a></li>
|
|
423
|
+
</ul>
|
|
424
|
+
<button class="btn btn-secondary" onclick="toggleTheme()" style="padding: 0.5rem 1rem;">
|
|
425
|
+
<svg class="sun-icon" style="display:none;" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
|
|
426
|
+
<svg class="moon-icon" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
|
|
427
|
+
</button>
|
|
428
|
+
</div>
|
|
429
|
+
</nav>
|
|
430
|
+
|
|
431
|
+
<section class="hero" id="about">
|
|
432
|
+
<div class="hero-bg"></div>
|
|
433
|
+
<div class="hero-content">
|
|
434
|
+
<div class="hero-badge">
|
|
435
|
+
<span>👋</span> Available for hire
|
|
436
|
+
</div>
|
|
437
|
+
<h1>Hi, I'm <span>Alex Chen</span></h1>
|
|
438
|
+
<p class="hero-subtitle">Creative Full-Stack Developer crafting beautiful digital experiences with modern technologies and cosmic design aesthetics.</p>
|
|
439
|
+
<div class="hero-cta">
|
|
440
|
+
<a href="#projects" class="btn btn-primary">View My Work</a>
|
|
441
|
+
<a href="#contact" class="btn btn-secondary">Get In Touch</a>
|
|
442
|
+
</div>
|
|
443
|
+
</div>
|
|
444
|
+
</section>
|
|
445
|
+
|
|
446
|
+
<section id="skills">
|
|
447
|
+
<div class="container">
|
|
448
|
+
<div class="section-header">
|
|
449
|
+
<h2>Skills & Expertise</h2>
|
|
450
|
+
<p>Technologies and tools I use to bring ideas to life</p>
|
|
451
|
+
</div>
|
|
452
|
+
<div class="skills-grid">
|
|
453
|
+
<div class="skill-card">
|
|
454
|
+
<div class="skill-icon">⚛️</div>
|
|
455
|
+
<h3>Frontend Development</h3>
|
|
456
|
+
<p>Building responsive, interactive user interfaces with modern frameworks and best practices.</p>
|
|
457
|
+
<div class="skill-tags">
|
|
458
|
+
<span class="skill-tag">React</span>
|
|
459
|
+
<span class="skill-tag">Vue.js</span>
|
|
460
|
+
<span class="skill-tag">TypeScript</span>
|
|
461
|
+
<span class="skill-tag">Tailwind CSS</span>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
<div class="skill-card">
|
|
465
|
+
<div class="skill-icon">🚀</div>
|
|
466
|
+
<h3>Backend Development</h3>
|
|
467
|
+
<p>Creating robust APIs and server-side solutions that power scalable applications.</p>
|
|
468
|
+
<div class="skill-tags">
|
|
469
|
+
<span class="skill-tag">Node.js</span>
|
|
470
|
+
<span class="skill-tag">Python</span>
|
|
471
|
+
<span class="skill-tag">PostgreSQL</span>
|
|
472
|
+
<span class="skill-tag">GraphQL</span>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
<div class="skill-card">
|
|
476
|
+
<div class="skill-icon">🎨</div>
|
|
477
|
+
<h3>UI/UX Design</h3>
|
|
478
|
+
<p>Designing intuitive interfaces and delightful user experiences that engage and convert.</p>
|
|
479
|
+
<div class="skill-tags">
|
|
480
|
+
<span class="skill-tag">Figma</span>
|
|
481
|
+
<span class="skill-tag">Adobe XD</span>
|
|
482
|
+
<span class="skill-tag">Prototyping</span>
|
|
483
|
+
<span class="skill-tag">Animation</span>
|
|
484
|
+
</div>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
</section>
|
|
489
|
+
|
|
490
|
+
<section id="projects" style="background: rgba(255,255,255,0.02);">
|
|
491
|
+
<div class="container">
|
|
492
|
+
<div class="section-header">
|
|
493
|
+
<h2>Featured Projects</h2>
|
|
494
|
+
<p>A selection of my recent work and side projects</p>
|
|
495
|
+
</div>
|
|
496
|
+
<div class="projects-grid">
|
|
497
|
+
<div class="project-card">
|
|
498
|
+
<div class="project-image">📊</div>
|
|
499
|
+
<div class="project-content">
|
|
500
|
+
<h3>Starlight Analytics</h3>
|
|
501
|
+
<p>Real-time data visualization dashboard with cosmic design aesthetics and interactive charts.</p>
|
|
502
|
+
<div class="project-links">
|
|
503
|
+
<a href="#">View Project →</a>
|
|
504
|
+
<a href="#">GitHub →</a>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
<div class="project-card">
|
|
509
|
+
<div class="project-image">🎵</div>
|
|
510
|
+
<div class="project-content">
|
|
511
|
+
<h3>Cosmic Music App</h3>
|
|
512
|
+
<p>Music streaming application with glassmorphic design and seamless audio playback.</p>
|
|
513
|
+
<div class="project-links">
|
|
514
|
+
<a href="#">View Project →</a>
|
|
515
|
+
<a href="#">GitHub →</a>
|
|
516
|
+
</div>
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
<div class="project-card">
|
|
520
|
+
<div class="project-image">💬</div>
|
|
521
|
+
<div class="project-content">
|
|
522
|
+
<h3>Nebula Chat</h3>
|
|
523
|
+
<p>Real-time messaging platform with end-to-end encryption and modern UI.</p>
|
|
524
|
+
<div class="project-links">
|
|
525
|
+
<a href="#">View Project →</a>
|
|
526
|
+
<a href="#">GitHub →</a>
|
|
527
|
+
</div>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
</div>
|
|
531
|
+
</div>
|
|
532
|
+
</section>
|
|
533
|
+
|
|
534
|
+
<section id="experience">
|
|
535
|
+
<div class="container">
|
|
536
|
+
<div class="section-header">
|
|
537
|
+
<h2>Work Experience</h2>
|
|
538
|
+
<p>My professional journey and career highlights</p>
|
|
539
|
+
</div>
|
|
540
|
+
<div class="timeline">
|
|
541
|
+
<div class="timeline-item">
|
|
542
|
+
<div class="timeline-dot"></div>
|
|
543
|
+
<div class="timeline-content">
|
|
544
|
+
<h3>Senior Frontend Developer</h3>
|
|
545
|
+
<div class="company">Starlight Technologies</div>
|
|
546
|
+
<p>Leading frontend development for enterprise SaaS products. Architected design system used across 5 products.</p>
|
|
547
|
+
</div>
|
|
548
|
+
<div class="timeline-date">2022 - Present</div>
|
|
549
|
+
</div>
|
|
550
|
+
<div class="timeline-item">
|
|
551
|
+
<div class="timeline-dot"></div>
|
|
552
|
+
<div class="timeline-content">
|
|
553
|
+
<h3>Full-Stack Developer</h3>
|
|
554
|
+
<div class="company">Quantum Labs</div>
|
|
555
|
+
<p>Built scalable web applications serving 100k+ users. Implemented CI/CD pipelines and testing frameworks.</p>
|
|
556
|
+
</div>
|
|
557
|
+
<div class="timeline-date">2020 - 2022</div>
|
|
558
|
+
</div>
|
|
559
|
+
<div class="timeline-item">
|
|
560
|
+
<div class="timeline-dot"></div>
|
|
561
|
+
<div class="timeline-content">
|
|
562
|
+
<h3>Junior Developer</h3>
|
|
563
|
+
<div class="company">Digital Agency</div>
|
|
564
|
+
<p>Developed websites and web applications for diverse clients. Specialized in React and modern CSS.</p>
|
|
565
|
+
</div>
|
|
566
|
+
<div class="timeline-date">2018 - 2020</div>
|
|
567
|
+
</div>
|
|
568
|
+
</div>
|
|
569
|
+
</div>
|
|
570
|
+
</section>
|
|
571
|
+
|
|
572
|
+
<section style="background: rgba(255,255,255,0.02);">
|
|
573
|
+
<div class="container">
|
|
574
|
+
<div class="section-header">
|
|
575
|
+
<h2>What People Say</h2>
|
|
576
|
+
<p>Testimonials from colleagues and clients</p>
|
|
577
|
+
</div>
|
|
578
|
+
<div class="testimonials-grid">
|
|
579
|
+
<div class="testimonial-card">
|
|
580
|
+
<p class="testimonial-text">"Alex is an exceptional developer with an eye for design. Their ability to transform complex requirements into elegant solutions is remarkable. A true asset to any team."</p>
|
|
581
|
+
<div class="testimonial-author">
|
|
582
|
+
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" alt="Sarah">
|
|
583
|
+
<div>
|
|
584
|
+
<h4>Sarah Chen</h4>
|
|
585
|
+
<p>Product Manager at TechCorp</p>
|
|
586
|
+
</div>
|
|
587
|
+
</div>
|
|
588
|
+
</div>
|
|
589
|
+
<div class="testimonial-card">
|
|
590
|
+
<p class="testimonial-text">"Working with Alex was a game-changer for our startup. They delivered a stunning product that our users love. Highly recommend their services!"</p>
|
|
591
|
+
<div class="testimonial-author">
|
|
592
|
+
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" alt="Mike">
|
|
593
|
+
<div>
|
|
594
|
+
<h4>Mike Ross</h4>
|
|
595
|
+
<p>CEO at StartupXYZ</p>
|
|
596
|
+
</div>
|
|
597
|
+
</div>
|
|
598
|
+
</div>
|
|
599
|
+
</div>
|
|
600
|
+
</div>
|
|
601
|
+
</section>
|
|
602
|
+
|
|
603
|
+
<section class="contact-section" id="contact">
|
|
604
|
+
<div class="container">
|
|
605
|
+
<div class="section-header">
|
|
606
|
+
<h2>Let's Work Together</h2>
|
|
607
|
+
<p>Have a project in mind? Let's create something amazing.</p>
|
|
608
|
+
</div>
|
|
609
|
+
<div class="contact-grid">
|
|
610
|
+
<a href="mailto:alex@example.com" class="contact-item">
|
|
611
|
+
<div class="contact-icon">✉️</div>
|
|
612
|
+
<div>
|
|
613
|
+
<h3>Email</h3>
|
|
614
|
+
<p>alex@example.com</p>
|
|
615
|
+
</div>
|
|
616
|
+
</a>
|
|
617
|
+
<a href="#" class="contact-item">
|
|
618
|
+
<div class="contact-icon">💼</div>
|
|
619
|
+
<div>
|
|
620
|
+
<h3>LinkedIn</h3>
|
|
621
|
+
<p>linkedin.com/in/alexchen</p>
|
|
622
|
+
</div>
|
|
623
|
+
</a>
|
|
624
|
+
<a href="#" class="contact-item">
|
|
625
|
+
<div class="contact-icon">🐙</div>
|
|
626
|
+
<div>
|
|
627
|
+
<h3>GitHub</h3>
|
|
628
|
+
<p>github.com/alexchen</p>
|
|
629
|
+
</div>
|
|
630
|
+
</a>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
</section>
|
|
634
|
+
|
|
635
|
+
<footer>
|
|
636
|
+
<p>© 2024 Alex Chen. Built with Starlight Design System.</p>
|
|
637
|
+
</footer>
|
|
638
|
+
|
|
639
|
+
<script>
|
|
640
|
+
function toggleTheme() {
|
|
641
|
+
document.body.classList.toggle('light-mode');
|
|
642
|
+
localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
|
|
643
|
+
document.querySelector('.sun-icon').style.display = document.body.classList.contains('light-mode') ? 'inline' : 'none';
|
|
644
|
+
document.querySelector('.moon-icon').style.display = document.body.classList.contains('light-mode') ? 'none' : 'inline';
|
|
645
|
+
}
|
|
646
|
+
if (localStorage.getItem('theme') === 'light') {
|
|
647
|
+
document.body.classList.add('light-mode');
|
|
648
|
+
document.querySelector('.sun-icon').style.display = 'inline';
|
|
649
|
+
document.querySelector('.moon-icon').style.display = 'none';
|
|
650
|
+
}
|
|
651
|
+
</script>
|
|
652
|
+
</body>
|
|
653
|
+
</html>
|