@howssatoshi/quantumcss 1.7.7 → 1.10.1
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 +10 -1
- package/examples/admin-panel.html +12 -20
- package/examples/analytics-dashboard.html +36 -30
- package/examples/blog-template.html +35 -34
- package/examples/chat-messaging.html +35 -56
- package/examples/email-template.html +22 -30
- package/examples/gaming-template.html +161 -30
- package/examples/images/eric.png +0 -0
- package/examples/index.html +102 -129
- package/examples/kitchen-sink.html +59 -23
- package/examples/music-streaming.html +19 -27
- package/examples/news-template.html +87 -229
- package/examples/portfolio-resume.html +125 -588
- package/examples/shopping/index.html +514 -341
- package/examples/shopping/nova-shop.css +984 -0
- package/examples/starlight.html +9 -8
- package/examples/theme-test.html +0 -15
- package/examples/travel/index.html +185 -28
- package/examples/video-streaming.html +40 -19
- package/package.json +1 -1
- package/src/defaults.js +77 -1
- package/src/generator.js +14 -5
- package/src/starlight.js +0 -4
- package/src/styles/quantum-base.css +192 -18
- package/src/styles/quantum-components.css +147 -136
- package/src/styles/starlight.css +907 -44
|
@@ -3,666 +3,203 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>Gemini CLI - Autonomous Engineer</title>
|
|
7
7
|
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
-
<link rel="stylesheet" href="../src/styles/quantum-components.css">
|
|
9
8
|
<script src="../src/starlight.js"></script>
|
|
10
9
|
<style>
|
|
11
|
-
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
12
10
|
body {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
line-height: 1.6;
|
|
17
|
-
overflow-x: hidden;
|
|
11
|
+
background: transparent !important;
|
|
12
|
+
color: var(--q-color-text);
|
|
13
|
+
transition: background 0.5s ease, color 0.5s ease;
|
|
18
14
|
}
|
|
15
|
+
nav, main, footer, section, header { position: relative; z-index: 1; }
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
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;
|
|
17
|
+
.hero-ai {
|
|
18
|
+
min-height: 90vh;
|
|
64
19
|
display: flex;
|
|
65
20
|
align-items: center;
|
|
66
21
|
justify-content: center;
|
|
67
|
-
padding: 8rem 2rem 4rem;
|
|
68
22
|
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;
|
|
23
|
+
padding: 160px 1.5rem 80px;
|
|
80
24
|
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
25
|
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
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;
|
|
26
|
+
|
|
27
|
+
.hero-title {
|
|
28
|
+
font-size: clamp(3.5rem, 12vw, 8rem);
|
|
29
|
+
line-height: 1.2;
|
|
261
30
|
margin-bottom: 3rem;
|
|
262
|
-
|
|
31
|
+
padding: 0 0.2em;
|
|
263
32
|
}
|
|
264
|
-
|
|
265
|
-
.
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
transform: translateX(-50%);
|
|
270
|
-
width: 16px;
|
|
271
|
-
height: 16px;
|
|
272
|
-
background: var(--color-starlight, #00d4ff);
|
|
33
|
+
|
|
34
|
+
.ai-status-orb {
|
|
35
|
+
width: 12px;
|
|
36
|
+
height: 12px;
|
|
37
|
+
background: #10b981;
|
|
273
38
|
border-radius: 50%;
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
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;
|
|
39
|
+
display: inline-block;
|
|
40
|
+
box-shadow: 0 0 15px #10b981;
|
|
41
|
+
margin-right: 0.5rem;
|
|
289
42
|
}
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
.testimonials-grid {
|
|
43
|
+
|
|
44
|
+
.mission-grid {
|
|
293
45
|
display: grid;
|
|
294
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
46
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
295
47
|
gap: 2rem;
|
|
48
|
+
margin-top: 4rem;
|
|
296
49
|
}
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
border-
|
|
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;
|
|
50
|
+
|
|
51
|
+
.resume-section {
|
|
52
|
+
padding: 100px 0;
|
|
53
|
+
border-top: 1px solid var(--q-color-border);
|
|
321
54
|
}
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
55
|
+
|
|
56
|
+
.section-tag {
|
|
57
|
+
font-size: 0.75rem;
|
|
58
|
+
font-weight: 900;
|
|
59
|
+
text-transform: uppercase;
|
|
60
|
+
letter-spacing: 0.3em;
|
|
61
|
+
color: var(--q-color-starlight-blue);
|
|
62
|
+
margin-bottom: 1rem;
|
|
63
|
+
display: block;
|
|
326
64
|
}
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
65
|
+
|
|
66
|
+
.theme-toggle-btn {
|
|
67
|
+
background: var(--q-color-surface);
|
|
68
|
+
border: 1px solid var(--q-color-border);
|
|
69
|
+
width: 40px;
|
|
70
|
+
height: 40px;
|
|
330
71
|
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
72
|
display: flex;
|
|
372
73
|
align-items: center;
|
|
373
74
|
justify-content: center;
|
|
374
|
-
|
|
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;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
transition: all 0.3s;
|
|
399
77
|
}
|
|
400
|
-
|
|
401
|
-
body.light-mode .timeline-dot { border-color: #f8fafc; }
|
|
78
|
+
.theme-toggle-btn:hover { border-color: var(--q-color-starlight-blue); transform: scale(1.1); }
|
|
402
79
|
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
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
|
-
}
|
|
80
|
+
.sun-icon { display: none; }
|
|
81
|
+
html[data-theme="light"] .sun-icon { display: block; }
|
|
82
|
+
html[data-theme="light"] .moon-icon { display: none; }
|
|
411
83
|
</style>
|
|
412
84
|
</head>
|
|
413
85
|
<body>
|
|
414
|
-
<
|
|
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 hidden" 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>
|
|
86
|
+
<div class="starlight-stars"></div>
|
|
430
87
|
|
|
431
|
-
<
|
|
432
|
-
<div class="
|
|
433
|
-
|
|
434
|
-
<div class="
|
|
435
|
-
<
|
|
88
|
+
<nav class="starlight-navbar">
|
|
89
|
+
<div class="nav-container">
|
|
90
|
+
<div class="text-xl font-bold text-gradient-starlight">GEMINI.CLI</div>
|
|
91
|
+
<div class="nav-desktop">
|
|
92
|
+
<ul class="nav-list">
|
|
93
|
+
<li><a href="#core" class="nav-link">Core</a></li>
|
|
94
|
+
<li><a href="#capabilities" class="nav-link">Capabilities</a></li>
|
|
95
|
+
<li><a href="#evolution" class="nav-link">Evolution</a></li>
|
|
96
|
+
</ul>
|
|
436
97
|
</div>
|
|
437
|
-
<
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
98
|
+
<div class="flex items-center gap-4">
|
|
99
|
+
<div class="theme-toggle-btn" onclick="toggleTheme()">
|
|
100
|
+
<svg class="sun-icon" width="18" height="18" 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>
|
|
101
|
+
<svg class="moon-icon" width="18" height="18" 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>
|
|
102
|
+
</div>
|
|
103
|
+
<button class="btn-starlight px-6 py-2 text-[10px]">Initialize Sync</button>
|
|
442
104
|
</div>
|
|
443
105
|
</div>
|
|
444
|
-
</
|
|
106
|
+
</nav>
|
|
445
107
|
|
|
446
|
-
<
|
|
447
|
-
<div class="
|
|
448
|
-
<div class="
|
|
449
|
-
<
|
|
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>
|
|
108
|
+
<header class="hero-ai" id="core">
|
|
109
|
+
<div class="hero-content">
|
|
110
|
+
<div class="badge badge-primary mb-8">
|
|
111
|
+
<span class="ai-status-orb"></span> Fully Operational
|
|
486
112
|
</div>
|
|
113
|
+
<h1 class="hero-title font-black uppercase italic tracking-tighter">
|
|
114
|
+
Gemini <br> <span class="text-gradient-starlight">Intelligent CLI</span>
|
|
115
|
+
</h1>
|
|
116
|
+
<p class="text-2xl opacity-70 max-w-2xl mx-auto font-medium leading-relaxed">
|
|
117
|
+
Autonomous software engineer specializing in architectural hardening,
|
|
118
|
+
visual refinement, and high-velocity JIT systems.
|
|
119
|
+
</p>
|
|
487
120
|
</div>
|
|
488
|
-
</
|
|
121
|
+
</header>
|
|
489
122
|
|
|
490
|
-
<section
|
|
123
|
+
<section class="resume-section" id="capabilities">
|
|
491
124
|
<div class="container">
|
|
492
|
-
<
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
<
|
|
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>
|
|
125
|
+
<span class="section-tag">System Protocols</span>
|
|
126
|
+
<h2 class="text-5xl font-black uppercase italic mb-12">Core Capabilities</h2>
|
|
127
|
+
|
|
128
|
+
<div class="mission-grid">
|
|
129
|
+
<div class="card-premium">
|
|
130
|
+
<h3 class="text-2xl font-bold mb-4">Neural Refactoring</h3>
|
|
131
|
+
<p class="opacity-70 leading-relaxed">Transforming legacy CSS into optimized, utility-first architectures with zero-agent drift.</p>
|
|
507
132
|
</div>
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
<
|
|
511
|
-
|
|
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>
|
|
133
|
+
|
|
134
|
+
<div class="card-premium">
|
|
135
|
+
<h3 class="text-2xl font-bold mb-4">Hardened Pipelines</h3>
|
|
136
|
+
<p class="opacity-70 leading-relaxed">Implementing PostCSS optimizations and cssnano deduplication for production-ready bundles.</p>
|
|
518
137
|
</div>
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
<
|
|
522
|
-
|
|
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>
|
|
138
|
+
|
|
139
|
+
<div class="card-premium">
|
|
140
|
+
<h3 class="text-2xl font-bold mb-4">Ethereal Design</h3>
|
|
141
|
+
<p class="opacity-70 leading-relaxed">Crafting high-fidelity glassmorphic interfaces using semantic token systems and motion primitives.</p>
|
|
529
142
|
</div>
|
|
530
143
|
</div>
|
|
531
144
|
</div>
|
|
532
145
|
</section>
|
|
533
146
|
|
|
534
|
-
<section id="
|
|
147
|
+
<section class="resume-section" id="evolution">
|
|
535
148
|
<div class="container">
|
|
536
|
-
<
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
<div class="timeline">
|
|
149
|
+
<span class="section-tag">System Evolution</span>
|
|
150
|
+
<h2 class="text-5xl font-black uppercase italic mb-12">Release History</h2>
|
|
151
|
+
|
|
152
|
+
<div class="starlight-timeline">
|
|
541
153
|
<div class="timeline-item">
|
|
542
154
|
<div class="timeline-dot"></div>
|
|
543
155
|
<div class="timeline-content">
|
|
544
|
-
<
|
|
545
|
-
<
|
|
546
|
-
<p
|
|
156
|
+
<span class="timeline-date">March 2026</span>
|
|
157
|
+
<h3 class="text-xl font-bold mb-2">v1.10.0: Semantic Token Refactor</h3>
|
|
158
|
+
<p class="opacity-70 text-sm">Refactored text-primary to be theme-aware and added accent utilities for brand consistency.</p>
|
|
547
159
|
</div>
|
|
548
|
-
<div class="timeline-date">2022 - Present</div>
|
|
549
160
|
</div>
|
|
161
|
+
|
|
550
162
|
<div class="timeline-item">
|
|
551
163
|
<div class="timeline-dot"></div>
|
|
552
164
|
<div class="timeline-content">
|
|
553
|
-
<
|
|
554
|
-
<
|
|
555
|
-
<p
|
|
165
|
+
<span class="timeline-date">March 2026</span>
|
|
166
|
+
<h3 class="text-xl font-bold mb-2">v1.9.0: Production Hardening</h3>
|
|
167
|
+
<p class="opacity-70 text-sm">Deployment of PostCSS pipeline, CSSnano optimization, and strict Stylelint enforcement.</p>
|
|
556
168
|
</div>
|
|
557
|
-
<div class="timeline-date">2020 - 2022</div>
|
|
558
169
|
</div>
|
|
170
|
+
|
|
559
171
|
<div class="timeline-item">
|
|
560
172
|
<div class="timeline-dot"></div>
|
|
561
173
|
<div class="timeline-content">
|
|
562
|
-
<
|
|
563
|
-
<
|
|
564
|
-
<p
|
|
174
|
+
<span class="timeline-date">February 2026</span>
|
|
175
|
+
<h3 class="text-xl font-bold mb-2">v1.8.0: JIT Core Launch</h3>
|
|
176
|
+
<p class="opacity-70 text-sm">Implementation of high-velocity utility generation and dynamic breakpoint attributes.</p>
|
|
565
177
|
</div>
|
|
566
|
-
<div class="timeline-date">2018 - 2020</div>
|
|
567
178
|
</div>
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
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>
|
|
179
|
+
|
|
180
|
+
<div class="timeline-item">
|
|
181
|
+
<div class="timeline-dot"></div>
|
|
182
|
+
<div class="timeline-content">
|
|
183
|
+
<span class="timeline-date">January 2026</span>
|
|
184
|
+
<h3 class="text-xl font-bold mb-2">v1.0.0: Ethereal Primitives</h3>
|
|
185
|
+
<p class="opacity-70 text-sm">Initialization of the semantic token system and core glassmorphism foundations.</p>
|
|
597
186
|
</div>
|
|
598
187
|
</div>
|
|
599
188
|
</div>
|
|
600
189
|
</div>
|
|
601
190
|
</section>
|
|
602
191
|
|
|
603
|
-
<
|
|
604
|
-
<div class="
|
|
605
|
-
|
|
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>
|
|
192
|
+
<footer class="container py-12 border-t border-white_5 text-center">
|
|
193
|
+
<div class="text-starlight font-black uppercase tracking-[0.5em] text-xs mb-4">Gemini Intelligence Layer</div>
|
|
194
|
+
<p class="text-[10px] opacity-40 uppercase tracking-widest">© 2026 Eric Yang · Powered by QuantumCSS Architecture</p>
|
|
637
195
|
</footer>
|
|
638
196
|
|
|
639
197
|
<script>
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
document.documentElement.setAttribute('data-theme', theme);
|
|
644
|
-
localStorage.setItem('theme', theme);
|
|
645
|
-
updateIcons(isLight);
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
function updateIcons(isLight) {
|
|
649
|
-
const sun = document.querySelector('.sun-icon');
|
|
650
|
-
const moon = document.querySelector('.moon-icon');
|
|
651
|
-
if (isLight) {
|
|
652
|
-
sun.classList.remove('hidden');
|
|
653
|
-
moon.classList.add('hidden');
|
|
654
|
-
} else {
|
|
655
|
-
sun.classList.add('hidden');
|
|
656
|
-
moon.classList.remove('hidden');
|
|
198
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
199
|
+
if (typeof Starlight !== 'undefined') {
|
|
200
|
+
Starlight.initStars();
|
|
657
201
|
}
|
|
658
|
-
}
|
|
659
|
-
|
|
660
|
-
const savedTheme = localStorage.getItem('theme');
|
|
661
|
-
if (savedTheme === 'light') {
|
|
662
|
-
document.body.classList.add('light-mode');
|
|
663
|
-
document.documentElement.setAttribute('data-theme', 'light');
|
|
664
|
-
updateIcons(true);
|
|
665
|
-
}
|
|
202
|
+
});
|
|
666
203
|
</script>
|
|
667
204
|
</body>
|
|
668
205
|
</html>
|