@prosophia/personal-cv 0.0.2 → 0.0.4

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/dist/index.css ADDED
@@ -0,0 +1,648 @@
1
+ /* src/styles/About.module.css */
2
+ .about {
3
+ scroll-margin-top: 96px;
4
+ margin-bottom: 48px;
5
+ }
6
+ .card {
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: 32px;
10
+ align-items: flex-start;
11
+ background-color: var(--card-background);
12
+ padding: 24px;
13
+ border-radius: 12px;
14
+ box-shadow: 0 1px 3px var(--shadow-color);
15
+ border: 1px solid var(--border-color);
16
+ }
17
+ @media (min-width: 768px) {
18
+ .card {
19
+ flex-direction: row;
20
+ align-items: center;
21
+ padding: 40px;
22
+ }
23
+ }
24
+ .imageWrapper {
25
+ flex-shrink: 0;
26
+ }
27
+ .profileImage {
28
+ width: 128px;
29
+ height: 128px;
30
+ border-radius: 50%;
31
+ background-size: cover;
32
+ background-position: center;
33
+ background-repeat: no-repeat;
34
+ box-shadow: 0 4px 6px -1px var(--shadow-color);
35
+ ring: 4px solid var(--background-color);
36
+ }
37
+ @media (min-width: 768px) {
38
+ .profileImage {
39
+ width: 160px;
40
+ height: 160px;
41
+ }
42
+ }
43
+ .content {
44
+ display: flex;
45
+ flex-direction: column;
46
+ justify-content: center;
47
+ gap: 12px;
48
+ }
49
+ .greeting {
50
+ font-size: 30px;
51
+ font-weight: 700;
52
+ letter-spacing: -0.02em;
53
+ color: var(--text-color);
54
+ margin-bottom: 8px;
55
+ line-height: 1.2;
56
+ }
57
+ @media (min-width: 768px) {
58
+ .greeting {
59
+ font-size: 36px;
60
+ }
61
+ }
62
+ .title {
63
+ font-size: 18px;
64
+ font-weight: 500;
65
+ color: var(--text-secondary);
66
+ line-height: 1.4;
67
+ }
68
+ .bio {
69
+ font-size: 16px;
70
+ font-weight: 400;
71
+ color: var(--text-secondary);
72
+ line-height: 1.6;
73
+ max-width: 672px;
74
+ margin-top: 8px;
75
+ }
76
+ .socialLinks {
77
+ display: flex;
78
+ flex-wrap: wrap;
79
+ gap: 16px;
80
+ margin-top: 8px;
81
+ }
82
+ .socialLink {
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ color: var(--text-secondary);
87
+ transition: color 0.2s ease;
88
+ }
89
+ .socialLink:hover {
90
+ color: var(--primary-color);
91
+ }
92
+ .socialLink span {
93
+ font-size: 24px;
94
+ }
95
+
96
+ /* src/styles/CVSection.module.css */
97
+ .cv {
98
+ scroll-margin-top: 96px;
99
+ margin-bottom: 64px;
100
+ }
101
+ .card {
102
+ position: relative;
103
+ overflow: hidden;
104
+ background-color: var(--primary-color);
105
+ border-radius: 12px;
106
+ padding: 32px;
107
+ text-align: center;
108
+ color: var(--background-color);
109
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
110
+ }
111
+ @media (min-width: 768px) {
112
+ .card {
113
+ padding: 48px;
114
+ }
115
+ }
116
+ .content {
117
+ position: relative;
118
+ z-index: 10;
119
+ display: flex;
120
+ flex-direction: column;
121
+ align-items: center;
122
+ gap: 24px;
123
+ }
124
+ .iconWrapper {
125
+ position: relative;
126
+ display: flex;
127
+ align-items: center;
128
+ justify-content: center;
129
+ padding: 12px;
130
+ border-radius: 50%;
131
+ }
132
+ .iconWrapper::before {
133
+ content: "";
134
+ position: absolute;
135
+ inset: 0;
136
+ background-color: var(--background-color);
137
+ opacity: 0.2;
138
+ border-radius: 50%;
139
+ }
140
+ .iconWrapper span {
141
+ position: relative;
142
+ font-size: 30px;
143
+ }
144
+ .textContent {
145
+ display: flex;
146
+ flex-direction: column;
147
+ gap: 8px;
148
+ }
149
+ .title {
150
+ font-size: 24px;
151
+ font-weight: 700;
152
+ margin-bottom: 8px;
153
+ }
154
+ @media (min-width: 768px) {
155
+ .title {
156
+ font-size: 30px;
157
+ }
158
+ }
159
+ .description {
160
+ color: var(--background-color);
161
+ opacity: 0.8;
162
+ max-width: 512px;
163
+ margin: 0 auto;
164
+ font-size: 14px;
165
+ line-height: 1.6;
166
+ }
167
+ @media (min-width: 768px) {
168
+ .description {
169
+ font-size: 16px;
170
+ }
171
+ }
172
+ .downloadBtn {
173
+ display: inline-flex;
174
+ align-items: center;
175
+ gap: 8px;
176
+ padding: 12px 24px;
177
+ background-color: var(--background-color);
178
+ color: var(--text-color);
179
+ font-size: 14px;
180
+ font-weight: 700;
181
+ border-radius: 8px;
182
+ box-shadow: 0 1px 3px var(--shadow-color);
183
+ transition: background-color 0.2s ease;
184
+ border: none;
185
+ cursor: pointer;
186
+ }
187
+ @media (min-width: 768px) {
188
+ .downloadBtn {
189
+ font-size: 16px;
190
+ }
191
+ }
192
+ .downloadBtn:hover {
193
+ background-color: var(--hover-background);
194
+ }
195
+ .background {
196
+ position: absolute;
197
+ top: 0;
198
+ left: 0;
199
+ width: 100%;
200
+ height: 100%;
201
+ opacity: 0.1;
202
+ pointer-events: none;
203
+ background-image:
204
+ radial-gradient(
205
+ circle at 20% 50%,
206
+ var(--background-color) 0%,
207
+ transparent 20%),
208
+ radial-gradient(
209
+ circle at 80% 80%,
210
+ var(--background-color) 0%,
211
+ transparent 20%);
212
+ }
213
+
214
+ /* src/styles/Footer.module.css */
215
+ .footer {
216
+ background-color: var(--card-background);
217
+ border-top: 1px solid var(--border-light);
218
+ padding: 32px 16px;
219
+ }
220
+ .content {
221
+ display: flex;
222
+ flex-direction: column;
223
+ align-items: center;
224
+ gap: 16px;
225
+ text-align: center;
226
+ max-width: 960px;
227
+ margin: 0 auto;
228
+ }
229
+ .copyright {
230
+ font-size: 14px;
231
+ color: var(--text-secondary);
232
+ }
233
+ .emailWrapper {
234
+ display: flex;
235
+ align-items: center;
236
+ gap: 8px;
237
+ font-size: 14px;
238
+ color: var(--text-secondary);
239
+ }
240
+ .emailWrapper span {
241
+ font-size: 16px;
242
+ }
243
+ .email {
244
+ color: var(--text-secondary);
245
+ transition: color 0.2s ease;
246
+ }
247
+ .email:hover {
248
+ color: var(--primary-color);
249
+ }
250
+
251
+ /* src/styles/Header.module.css */
252
+ .header {
253
+ position: sticky;
254
+ top: 0;
255
+ z-index: 50;
256
+ background-color: var(--header-bg);
257
+ backdrop-filter: blur(12px);
258
+ border-bottom: 1px solid var(--border-light);
259
+ }
260
+ .headerInner {
261
+ display: flex;
262
+ align-items: center;
263
+ justify-content: space-between;
264
+ max-width: 960px;
265
+ margin: 0 auto;
266
+ padding: 12px 16px;
267
+ }
268
+ @media (min-width: 768px) {
269
+ .headerInner {
270
+ padding: 12px 40px;
271
+ }
272
+ }
273
+ .logo {
274
+ display: flex;
275
+ align-items: center;
276
+ gap: 16px;
277
+ }
278
+ .logoIcon {
279
+ width: 32px;
280
+ height: 32px;
281
+ display: flex;
282
+ align-items: center;
283
+ justify-content: center;
284
+ color: var(--primary-color);
285
+ }
286
+ .logoIcon span {
287
+ font-size: 30px;
288
+ }
289
+ .siteName {
290
+ font-size: 18px;
291
+ font-weight: 700;
292
+ letter-spacing: -0.015em;
293
+ color: var(--text-color);
294
+ }
295
+ .desktopNav {
296
+ display: none;
297
+ flex: 1;
298
+ justify-content: flex-end;
299
+ align-items: center;
300
+ gap: 32px;
301
+ }
302
+ @media (min-width: 768px) {
303
+ .desktopNav {
304
+ display: flex;
305
+ }
306
+ }
307
+ .navLinks {
308
+ display: flex;
309
+ align-items: center;
310
+ gap: 24px;
311
+ }
312
+ .navLink {
313
+ font-size: 14px;
314
+ font-weight: 500;
315
+ color: var(--text-color);
316
+ transition: color 0.2s ease;
317
+ }
318
+ .navLink:hover {
319
+ color: var(--primary-color);
320
+ }
321
+ .contactBtn {
322
+ display: flex;
323
+ align-items: center;
324
+ justify-content: center;
325
+ min-width: 84px;
326
+ height: 36px;
327
+ padding: 0 16px;
328
+ background-color: var(--primary-color);
329
+ color: var(--background-color);
330
+ font-size: 14px;
331
+ font-weight: 700;
332
+ border-radius: 8px;
333
+ box-shadow: 0 1px 2px var(--shadow-color);
334
+ transition: opacity 0.2s ease;
335
+ }
336
+ .contactBtn:hover {
337
+ opacity: 0.85;
338
+ }
339
+ .mobileMenuBtn {
340
+ display: flex;
341
+ align-items: center;
342
+ justify-content: center;
343
+ color: var(--text-color);
344
+ background: none;
345
+ border: none;
346
+ cursor: pointer;
347
+ padding: 8px;
348
+ }
349
+ @media (min-width: 768px) {
350
+ .mobileMenuBtn {
351
+ display: none;
352
+ }
353
+ }
354
+ .mobileMenu {
355
+ display: none;
356
+ position: fixed;
357
+ top: 61px;
358
+ left: 0;
359
+ right: 0;
360
+ background-color: var(--background-color);
361
+ border-bottom: 1px solid var(--border-light);
362
+ padding: 16px;
363
+ box-shadow: 0 4px 6px -1px var(--shadow-color);
364
+ z-index: 40;
365
+ }
366
+ .mobileMenu.open {
367
+ display: block;
368
+ }
369
+ @media (min-width: 768px) {
370
+ .mobileMenu {
371
+ display: none !important;
372
+ }
373
+ }
374
+ .mobileNavLinks {
375
+ display: flex;
376
+ flex-direction: column;
377
+ gap: 16px;
378
+ }
379
+ .mobileNavLink {
380
+ font-size: 16px;
381
+ font-weight: 500;
382
+ color: var(--text-color);
383
+ padding: 8px 0;
384
+ }
385
+ .mobileContactBtn {
386
+ display: flex;
387
+ align-items: center;
388
+ justify-content: center;
389
+ width: 100%;
390
+ height: 44px;
391
+ margin-top: 16px;
392
+ background-color: var(--primary-color);
393
+ color: white;
394
+ font-size: 14px;
395
+ font-weight: 700;
396
+ border-radius: 8px;
397
+ }
398
+ .themeToggle {
399
+ display: flex;
400
+ align-items: center;
401
+ justify-content: center;
402
+ width: 40px;
403
+ height: 40px;
404
+ background: none;
405
+ border: 1px solid var(--border-color);
406
+ border-radius: 8px;
407
+ cursor: pointer;
408
+ color: var(--text-color);
409
+ transition: all 0.2s ease;
410
+ }
411
+ .themeToggle:hover {
412
+ background-color: var(--hover-background);
413
+ border-color: var(--text-secondary);
414
+ }
415
+ .themeToggle span {
416
+ font-size: 20px;
417
+ }
418
+ .mobileActions {
419
+ display: flex;
420
+ align-items: center;
421
+ gap: 8px;
422
+ }
423
+ @media (min-width: 768px) {
424
+ .mobileActions {
425
+ display: none;
426
+ }
427
+ }
428
+ .mobileThemeToggle {
429
+ display: flex;
430
+ align-items: center;
431
+ justify-content: center;
432
+ width: 40px;
433
+ height: 40px;
434
+ background: none;
435
+ border: none;
436
+ cursor: pointer;
437
+ color: var(--text-color);
438
+ transition: color 0.2s ease;
439
+ }
440
+ .mobileThemeToggle:hover {
441
+ color: var(--primary-color);
442
+ }
443
+ .mobileThemeToggle span {
444
+ font-size: 22px;
445
+ }
446
+
447
+ /* src/styles/Projects.module.css */
448
+ .projects {
449
+ scroll-margin-top: 96px;
450
+ margin-bottom: 48px;
451
+ }
452
+ .header {
453
+ display: flex;
454
+ align-items: center;
455
+ justify-content: space-between;
456
+ margin-bottom: 24px;
457
+ padding: 0 8px;
458
+ }
459
+ .title {
460
+ font-size: 24px;
461
+ font-weight: 700;
462
+ letter-spacing: -0.015em;
463
+ color: var(--text-color);
464
+ }
465
+ .viewAllLink {
466
+ font-size: 14px;
467
+ font-weight: 500;
468
+ color: var(--primary-color);
469
+ transition: text-decoration 0.2s ease;
470
+ }
471
+ .viewAllLink:hover {
472
+ text-decoration: underline;
473
+ }
474
+ .grid {
475
+ display: grid;
476
+ grid-template-columns: 1fr;
477
+ gap: 24px;
478
+ }
479
+ @media (min-width: 768px) {
480
+ .grid {
481
+ grid-template-columns: repeat(2, 1fr);
482
+ }
483
+ }
484
+ .card {
485
+ display: flex;
486
+ flex-direction: column;
487
+ background-color: var(--card-background);
488
+ border-radius: 12px;
489
+ overflow: hidden;
490
+ box-shadow: 0 1px 3px var(--shadow-color);
491
+ border: 1px solid var(--border-color);
492
+ transition: box-shadow 0.2s ease;
493
+ }
494
+ .card:hover {
495
+ box-shadow: 0 4px 6px -1px var(--shadow-color);
496
+ }
497
+ .imageWrapper {
498
+ width: 100%;
499
+ overflow: hidden;
500
+ }
501
+ .image {
502
+ width: 100%;
503
+ aspect-ratio: 16 / 9;
504
+ background-size: cover;
505
+ background-position: center;
506
+ background-repeat: no-repeat;
507
+ transition: transform 0.5s ease;
508
+ }
509
+ .card:hover .image {
510
+ transform: scale(1.05);
511
+ }
512
+ .content {
513
+ padding: 20px;
514
+ display: flex;
515
+ flex-direction: column;
516
+ gap: 8px;
517
+ }
518
+ .projectTitle {
519
+ font-size: 18px;
520
+ font-weight: 700;
521
+ color: var(--text-color);
522
+ line-height: 1.3;
523
+ }
524
+ .description {
525
+ font-size: 14px;
526
+ color: var(--text-secondary);
527
+ line-height: 1.6;
528
+ }
529
+ .caseStudyLink {
530
+ display: inline-flex;
531
+ align-items: center;
532
+ gap: 4px;
533
+ margin-top: 8px;
534
+ font-size: 14px;
535
+ font-weight: 700;
536
+ color: var(--primary-color);
537
+ transition: gap 0.2s ease;
538
+ }
539
+ .caseStudyLink:hover {
540
+ gap: 8px;
541
+ }
542
+ .caseStudyLink span {
543
+ font-size: 14px;
544
+ }
545
+
546
+ /* src/styles/Publications.module.css */
547
+ .publications {
548
+ scroll-margin-top: 96px;
549
+ margin-bottom: 48px;
550
+ }
551
+ .header {
552
+ display: flex;
553
+ align-items: center;
554
+ justify-content: space-between;
555
+ margin-bottom: 24px;
556
+ padding: 0 8px;
557
+ }
558
+ .title {
559
+ font-size: 24px;
560
+ font-weight: 700;
561
+ letter-spacing: -0.015em;
562
+ color: var(--text-color);
563
+ }
564
+ .list {
565
+ display: flex;
566
+ flex-direction: column;
567
+ background-color: var(--card-background);
568
+ border-radius: 12px;
569
+ box-shadow: 0 1px 3px var(--shadow-color);
570
+ border: 1px solid var(--border-color);
571
+ overflow: hidden;
572
+ }
573
+ .item {
574
+ padding: 24px;
575
+ display: flex;
576
+ flex-direction: column;
577
+ gap: 8px;
578
+ border-bottom: 1px solid var(--border-light);
579
+ transition: background-color 0.2s ease;
580
+ }
581
+ .item:last-child {
582
+ border-bottom: none;
583
+ }
584
+ .item:hover {
585
+ background-color: var(--hover-background);
586
+ }
587
+ .itemHeader {
588
+ display: flex;
589
+ justify-content: space-between;
590
+ align-items: flex-start;
591
+ gap: 16px;
592
+ }
593
+ .pubTitle {
594
+ font-size: 18px;
595
+ font-weight: 700;
596
+ color: var(--text-color);
597
+ line-height: 1.3;
598
+ }
599
+ .year {
600
+ display: none;
601
+ font-size: 12px;
602
+ font-weight: 700;
603
+ color: var(--text-secondary);
604
+ background-color: var(--border-light);
605
+ padding: 4px 8px;
606
+ border-radius: 4px;
607
+ text-transform: uppercase;
608
+ letter-spacing: 0.05em;
609
+ flex-shrink: 0;
610
+ }
611
+ @media (min-width: 640px) {
612
+ .year {
613
+ display: inline-block;
614
+ }
615
+ }
616
+ .authors {
617
+ font-size: 14px;
618
+ color: var(--text-color);
619
+ }
620
+ .venue {
621
+ font-size: 14px;
622
+ font-style: italic;
623
+ color: var(--text-secondary);
624
+ }
625
+ .links {
626
+ display: flex;
627
+ gap: 12px;
628
+ margin-top: 8px;
629
+ flex-wrap: wrap;
630
+ }
631
+ .linkBtn {
632
+ display: inline-flex;
633
+ align-items: center;
634
+ gap: 4px;
635
+ padding: 6px 12px;
636
+ background-color: var(--link-btn-bg);
637
+ color: var(--primary-color);
638
+ font-size: 12px;
639
+ font-weight: 700;
640
+ border-radius: 9999px;
641
+ transition: background-color 0.2s ease;
642
+ }
643
+ .linkBtn:hover {
644
+ background-color: var(--link-btn-hover);
645
+ }
646
+ .linkBtn span {
647
+ font-size: 14px;
648
+ }