@prosophia/personal-cv 0.0.3 → 0.0.5

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.
@@ -0,0 +1,107 @@
1
+ .about {
2
+ scroll-margin-top: 96px;
3
+ margin-bottom: 48px;
4
+ }
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
+
18
+ @media (min-width: 768px) {
19
+ .card {
20
+ flex-direction: row;
21
+ align-items: center;
22
+ padding: 40px;
23
+ }
24
+ }
25
+
26
+ .imageWrapper {
27
+ flex-shrink: 0;
28
+ }
29
+
30
+ .profileImage {
31
+ width: 128px;
32
+ height: 128px;
33
+ border-radius: 50%;
34
+ background-size: cover;
35
+ background-position: center;
36
+ background-repeat: no-repeat;
37
+ box-shadow: 0 4px 6px -1px var(--shadow-color);
38
+ ring: 4px solid var(--background-color);
39
+ }
40
+
41
+ @media (min-width: 768px) {
42
+ .profileImage {
43
+ width: 160px;
44
+ height: 160px;
45
+ }
46
+ }
47
+
48
+ .content {
49
+ display: flex;
50
+ flex-direction: column;
51
+ justify-content: center;
52
+ gap: 12px;
53
+ }
54
+
55
+ .greeting {
56
+ font-size: 30px;
57
+ font-weight: 700;
58
+ letter-spacing: -0.02em;
59
+ color: var(--text-color);
60
+ margin-bottom: 8px;
61
+ line-height: 1.2;
62
+ }
63
+
64
+ @media (min-width: 768px) {
65
+ .greeting {
66
+ font-size: 36px;
67
+ }
68
+ }
69
+
70
+ .title {
71
+ font-size: 18px;
72
+ font-weight: 500;
73
+ color: var(--text-secondary);
74
+ line-height: 1.4;
75
+ }
76
+
77
+ .bio {
78
+ font-size: 16px;
79
+ font-weight: 400;
80
+ color: var(--text-secondary);
81
+ line-height: 1.6;
82
+ max-width: 672px;
83
+ margin-top: 8px;
84
+ }
85
+
86
+ .socialLinks {
87
+ display: flex;
88
+ flex-wrap: wrap;
89
+ gap: 16px;
90
+ margin-top: 8px;
91
+ }
92
+
93
+ .socialLink {
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ color: var(--text-secondary);
98
+ transition: color 0.2s ease;
99
+ }
100
+
101
+ .socialLink:hover {
102
+ color: var(--primary-color);
103
+ }
104
+
105
+ .socialLink span {
106
+ font-size: 24px;
107
+ }
@@ -0,0 +1,124 @@
1
+ .cv {
2
+ scroll-margin-top: 96px;
3
+ margin-bottom: 64px;
4
+ }
5
+
6
+ .card {
7
+ position: relative;
8
+ overflow: hidden;
9
+ background-color: var(--primary-color);
10
+ border-radius: 12px;
11
+ padding: 32px;
12
+ text-align: center;
13
+ color: var(--background-color);
14
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
15
+ }
16
+
17
+ @media (min-width: 768px) {
18
+ .card {
19
+ padding: 48px;
20
+ }
21
+ }
22
+
23
+ .content {
24
+ position: relative;
25
+ z-index: 10;
26
+ display: flex;
27
+ flex-direction: column;
28
+ align-items: center;
29
+ gap: 24px;
30
+ }
31
+
32
+ .iconWrapper {
33
+ position: relative;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ padding: 12px;
38
+ border-radius: 50%;
39
+ }
40
+
41
+ .iconWrapper::before {
42
+ content: '';
43
+ position: absolute;
44
+ inset: 0;
45
+ background-color: var(--background-color);
46
+ opacity: 0.2;
47
+ border-radius: 50%;
48
+ }
49
+
50
+ .iconWrapper span {
51
+ position: relative;
52
+ font-size: 30px;
53
+ }
54
+
55
+ .textContent {
56
+ display: flex;
57
+ flex-direction: column;
58
+ gap: 8px;
59
+ }
60
+
61
+ .title {
62
+ font-size: 24px;
63
+ font-weight: 700;
64
+ margin-bottom: 8px;
65
+ }
66
+
67
+ @media (min-width: 768px) {
68
+ .title {
69
+ font-size: 30px;
70
+ }
71
+ }
72
+
73
+ .description {
74
+ color: var(--background-color);
75
+ opacity: 0.8;
76
+ max-width: 512px;
77
+ margin: 0 auto;
78
+ font-size: 14px;
79
+ line-height: 1.6;
80
+ }
81
+
82
+ @media (min-width: 768px) {
83
+ .description {
84
+ font-size: 16px;
85
+ }
86
+ }
87
+
88
+ .downloadBtn {
89
+ display: inline-flex;
90
+ align-items: center;
91
+ gap: 8px;
92
+ padding: 12px 24px;
93
+ background-color: var(--background-color);
94
+ color: var(--text-color);
95
+ font-size: 14px;
96
+ font-weight: 700;
97
+ border-radius: 8px;
98
+ box-shadow: 0 1px 3px var(--shadow-color);
99
+ transition: background-color 0.2s ease;
100
+ border: none;
101
+ cursor: pointer;
102
+ }
103
+
104
+ @media (min-width: 768px) {
105
+ .downloadBtn {
106
+ font-size: 16px;
107
+ }
108
+ }
109
+
110
+ .downloadBtn:hover {
111
+ background-color: var(--hover-background);
112
+ }
113
+
114
+ .background {
115
+ position: absolute;
116
+ top: 0;
117
+ left: 0;
118
+ width: 100%;
119
+ height: 100%;
120
+ opacity: 0.1;
121
+ pointer-events: none;
122
+ background-image: radial-gradient(circle at 20% 50%, var(--background-color) 0%, transparent 20%),
123
+ radial-gradient(circle at 80% 80%, var(--background-color) 0%, transparent 20%);
124
+ }
@@ -0,0 +1,41 @@
1
+ .footer {
2
+ background-color: var(--card-background);
3
+ border-top: 1px solid var(--border-light);
4
+ padding: 32px 16px;
5
+ }
6
+
7
+ .content {
8
+ display: flex;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ gap: 16px;
12
+ text-align: center;
13
+ max-width: 960px;
14
+ margin: 0 auto;
15
+ }
16
+
17
+ .copyright {
18
+ font-size: 14px;
19
+ color: var(--text-secondary);
20
+ }
21
+
22
+ .emailWrapper {
23
+ display: flex;
24
+ align-items: center;
25
+ gap: 8px;
26
+ font-size: 14px;
27
+ color: var(--text-secondary);
28
+ }
29
+
30
+ .emailWrapper span {
31
+ font-size: 16px;
32
+ }
33
+
34
+ .email {
35
+ color: var(--text-secondary);
36
+ transition: color 0.2s ease;
37
+ }
38
+
39
+ .email:hover {
40
+ color: var(--primary-color);
41
+ }
@@ -0,0 +1,226 @@
1
+ .header {
2
+ position: sticky;
3
+ top: 0;
4
+ z-index: 50;
5
+ background-color: var(--header-bg);
6
+ backdrop-filter: blur(12px);
7
+ border-bottom: 1px solid var(--border-light);
8
+ }
9
+
10
+ .headerInner {
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: space-between;
14
+ max-width: 960px;
15
+ margin: 0 auto;
16
+ padding: 12px 16px;
17
+ }
18
+
19
+ @media (min-width: 768px) {
20
+ .headerInner {
21
+ padding: 12px 40px;
22
+ }
23
+ }
24
+
25
+ .logo {
26
+ display: flex;
27
+ align-items: center;
28
+ gap: 16px;
29
+ }
30
+
31
+ .logoIcon {
32
+ width: 32px;
33
+ height: 32px;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ color: var(--primary-color);
38
+ }
39
+
40
+ .logoIcon span {
41
+ font-size: 30px;
42
+ }
43
+
44
+ .siteName {
45
+ font-size: 18px;
46
+ font-weight: 700;
47
+ letter-spacing: -0.015em;
48
+ color: var(--text-color);
49
+ }
50
+
51
+ .desktopNav {
52
+ display: none;
53
+ flex: 1;
54
+ justify-content: flex-end;
55
+ align-items: center;
56
+ gap: 32px;
57
+ }
58
+
59
+ @media (min-width: 768px) {
60
+ .desktopNav {
61
+ display: flex;
62
+ }
63
+ }
64
+
65
+ .navLinks {
66
+ display: flex;
67
+ align-items: center;
68
+ gap: 24px;
69
+ }
70
+
71
+ .navLink {
72
+ font-size: 14px;
73
+ font-weight: 500;
74
+ color: var(--text-color);
75
+ transition: color 0.2s ease;
76
+ }
77
+
78
+ .navLink:hover {
79
+ color: var(--primary-color);
80
+ }
81
+
82
+ .contactBtn {
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ min-width: 84px;
87
+ height: 36px;
88
+ padding: 0 16px;
89
+ background-color: var(--primary-color);
90
+ color: var(--background-color);
91
+ font-size: 14px;
92
+ font-weight: 700;
93
+ border-radius: 8px;
94
+ box-shadow: 0 1px 2px var(--shadow-color);
95
+ transition: opacity 0.2s ease;
96
+ }
97
+
98
+ .contactBtn:hover {
99
+ opacity: 0.85;
100
+ }
101
+
102
+ .mobileMenuBtn {
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ color: var(--text-color);
107
+ background: none;
108
+ border: none;
109
+ cursor: pointer;
110
+ padding: 8px;
111
+ }
112
+
113
+ @media (min-width: 768px) {
114
+ .mobileMenuBtn {
115
+ display: none;
116
+ }
117
+ }
118
+
119
+ /* Mobile Menu */
120
+ .mobileMenu {
121
+ display: none;
122
+ position: fixed;
123
+ top: 61px;
124
+ left: 0;
125
+ right: 0;
126
+ background-color: var(--background-color);
127
+ border-bottom: 1px solid var(--border-light);
128
+ padding: 16px;
129
+ box-shadow: 0 4px 6px -1px var(--shadow-color);
130
+ z-index: 40;
131
+ }
132
+
133
+ .mobileMenu.open {
134
+ display: block;
135
+ }
136
+
137
+ @media (min-width: 768px) {
138
+ .mobileMenu {
139
+ display: none !important;
140
+ }
141
+ }
142
+
143
+ .mobileNavLinks {
144
+ display: flex;
145
+ flex-direction: column;
146
+ gap: 16px;
147
+ }
148
+
149
+ .mobileNavLink {
150
+ font-size: 16px;
151
+ font-weight: 500;
152
+ color: var(--text-color);
153
+ padding: 8px 0;
154
+ }
155
+
156
+ .mobileContactBtn {
157
+ display: flex;
158
+ align-items: center;
159
+ justify-content: center;
160
+ width: 100%;
161
+ height: 44px;
162
+ margin-top: 16px;
163
+ background-color: var(--primary-color);
164
+ color: white;
165
+ font-size: 14px;
166
+ font-weight: 700;
167
+ border-radius: 8px;
168
+ }
169
+
170
+ /* Theme Toggle Button */
171
+ .themeToggle {
172
+ display: flex;
173
+ align-items: center;
174
+ justify-content: center;
175
+ width: 40px;
176
+ height: 40px;
177
+ background: none;
178
+ border: 1px solid var(--border-color);
179
+ border-radius: 8px;
180
+ cursor: pointer;
181
+ color: var(--text-color);
182
+ transition: all 0.2s ease;
183
+ }
184
+
185
+ .themeToggle:hover {
186
+ background-color: var(--hover-background);
187
+ border-color: var(--text-secondary);
188
+ }
189
+
190
+ .themeToggle span {
191
+ font-size: 20px;
192
+ }
193
+
194
+ /* Mobile Actions Container */
195
+ .mobileActions {
196
+ display: flex;
197
+ align-items: center;
198
+ gap: 8px;
199
+ }
200
+
201
+ @media (min-width: 768px) {
202
+ .mobileActions {
203
+ display: none;
204
+ }
205
+ }
206
+
207
+ .mobileThemeToggle {
208
+ display: flex;
209
+ align-items: center;
210
+ justify-content: center;
211
+ width: 40px;
212
+ height: 40px;
213
+ background: none;
214
+ border: none;
215
+ cursor: pointer;
216
+ color: var(--text-color);
217
+ transition: color 0.2s ease;
218
+ }
219
+
220
+ .mobileThemeToggle:hover {
221
+ color: var(--primary-color);
222
+ }
223
+
224
+ .mobileThemeToggle span {
225
+ font-size: 22px;
226
+ }
@@ -0,0 +1,114 @@
1
+ .projects {
2
+ scroll-margin-top: 96px;
3
+ margin-bottom: 48px;
4
+ }
5
+
6
+ .header {
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: space-between;
10
+ margin-bottom: 24px;
11
+ padding: 0 8px;
12
+ }
13
+
14
+ .title {
15
+ font-size: 24px;
16
+ font-weight: 700;
17
+ letter-spacing: -0.015em;
18
+ color: var(--text-color);
19
+ }
20
+
21
+ .viewAllLink {
22
+ font-size: 14px;
23
+ font-weight: 500;
24
+ color: var(--primary-color);
25
+ transition: text-decoration 0.2s ease;
26
+ }
27
+
28
+ .viewAllLink:hover {
29
+ text-decoration: underline;
30
+ }
31
+
32
+ .grid {
33
+ display: grid;
34
+ grid-template-columns: 1fr;
35
+ gap: 24px;
36
+ }
37
+
38
+ @media (min-width: 768px) {
39
+ .grid {
40
+ grid-template-columns: repeat(2, 1fr);
41
+ }
42
+ }
43
+
44
+ .card {
45
+ display: flex;
46
+ flex-direction: column;
47
+ background-color: var(--card-background);
48
+ border-radius: 12px;
49
+ overflow: hidden;
50
+ box-shadow: 0 1px 3px var(--shadow-color);
51
+ border: 1px solid var(--border-color);
52
+ transition: box-shadow 0.2s ease;
53
+ }
54
+
55
+ .card:hover {
56
+ box-shadow: 0 4px 6px -1px var(--shadow-color);
57
+ }
58
+
59
+ .imageWrapper {
60
+ width: 100%;
61
+ overflow: hidden;
62
+ }
63
+
64
+ .image {
65
+ width: 100%;
66
+ aspect-ratio: 16 / 9;
67
+ background-size: cover;
68
+ background-position: center;
69
+ background-repeat: no-repeat;
70
+ transition: transform 0.5s ease;
71
+ }
72
+
73
+ .card:hover .image {
74
+ transform: scale(1.05);
75
+ }
76
+
77
+ .content {
78
+ padding: 20px;
79
+ display: flex;
80
+ flex-direction: column;
81
+ gap: 8px;
82
+ }
83
+
84
+ .projectTitle {
85
+ font-size: 18px;
86
+ font-weight: 700;
87
+ color: var(--text-color);
88
+ line-height: 1.3;
89
+ }
90
+
91
+ .description {
92
+ font-size: 14px;
93
+ color: var(--text-secondary);
94
+ line-height: 1.6;
95
+ }
96
+
97
+ .caseStudyLink {
98
+ display: inline-flex;
99
+ align-items: center;
100
+ gap: 4px;
101
+ margin-top: 8px;
102
+ font-size: 14px;
103
+ font-weight: 700;
104
+ color: var(--primary-color);
105
+ transition: gap 0.2s ease;
106
+ }
107
+
108
+ .caseStudyLink:hover {
109
+ gap: 8px;
110
+ }
111
+
112
+ .caseStudyLink span {
113
+ font-size: 14px;
114
+ }
@@ -0,0 +1,118 @@
1
+ .publications {
2
+ scroll-margin-top: 96px;
3
+ margin-bottom: 48px;
4
+ }
5
+
6
+ .header {
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: space-between;
10
+ margin-bottom: 24px;
11
+ padding: 0 8px;
12
+ }
13
+
14
+ .title {
15
+ font-size: 24px;
16
+ font-weight: 700;
17
+ letter-spacing: -0.015em;
18
+ color: var(--text-color);
19
+ }
20
+
21
+ .list {
22
+ display: flex;
23
+ flex-direction: column;
24
+ background-color: var(--card-background);
25
+ border-radius: 12px;
26
+ box-shadow: 0 1px 3px var(--shadow-color);
27
+ border: 1px solid var(--border-color);
28
+ overflow: hidden;
29
+ }
30
+
31
+ .item {
32
+ padding: 24px;
33
+ display: flex;
34
+ flex-direction: column;
35
+ gap: 8px;
36
+ border-bottom: 1px solid var(--border-light);
37
+ transition: background-color 0.2s ease;
38
+ }
39
+
40
+ .item:last-child {
41
+ border-bottom: none;
42
+ }
43
+
44
+ .item:hover {
45
+ background-color: var(--hover-background);
46
+ }
47
+
48
+ .itemHeader {
49
+ display: flex;
50
+ justify-content: space-between;
51
+ align-items: flex-start;
52
+ gap: 16px;
53
+ }
54
+
55
+ .pubTitle {
56
+ font-size: 18px;
57
+ font-weight: 700;
58
+ color: var(--text-color);
59
+ line-height: 1.3;
60
+ }
61
+
62
+ .year {
63
+ display: none;
64
+ font-size: 12px;
65
+ font-weight: 700;
66
+ color: var(--text-secondary);
67
+ background-color: var(--border-light);
68
+ padding: 4px 8px;
69
+ border-radius: 4px;
70
+ text-transform: uppercase;
71
+ letter-spacing: 0.05em;
72
+ flex-shrink: 0;
73
+ }
74
+
75
+ @media (min-width: 640px) {
76
+ .year {
77
+ display: inline-block;
78
+ }
79
+ }
80
+
81
+ .authors {
82
+ font-size: 14px;
83
+ color: var(--text-color);
84
+ }
85
+
86
+ .venue {
87
+ font-size: 14px;
88
+ font-style: italic;
89
+ color: var(--text-secondary);
90
+ }
91
+
92
+ .links {
93
+ display: flex;
94
+ gap: 12px;
95
+ margin-top: 8px;
96
+ flex-wrap: wrap;
97
+ }
98
+
99
+ .linkBtn {
100
+ display: inline-flex;
101
+ align-items: center;
102
+ gap: 4px;
103
+ padding: 6px 12px;
104
+ background-color: var(--link-btn-bg);
105
+ color: var(--primary-color);
106
+ font-size: 12px;
107
+ font-weight: 700;
108
+ border-radius: 9999px;
109
+ transition: background-color 0.2s ease;
110
+ }
111
+
112
+ .linkBtn:hover {
113
+ background-color: var(--link-btn-hover);
114
+ }
115
+
116
+ .linkBtn span {
117
+ font-size: 14px;
118
+ }