@prosophia/personal-portfolio 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,11 @@
1
+ .divider {
2
+ border: none;
3
+ border-top: 1px solid var(--border);
4
+ margin: 4rem 0;
5
+ }
6
+
7
+ @media (min-width: 768px) {
8
+ .divider {
9
+ margin: 6rem 0;
10
+ }
11
+ }
@@ -0,0 +1,122 @@
1
+ .section {
2
+ scroll-margin-top: 7rem;
3
+ }
4
+
5
+ .header {
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: 1rem;
9
+ margin-bottom: 2.5rem;
10
+ }
11
+
12
+ @media (min-width: 768px) {
13
+ .header {
14
+ flex-direction: row;
15
+ align-items: center;
16
+ justify-content: space-between;
17
+ }
18
+ }
19
+
20
+ .title {
21
+ font-size: 1.875rem;
22
+ font-weight: 700;
23
+ color: var(--text-primary);
24
+ letter-spacing: -0.025em;
25
+ }
26
+
27
+ .downloadButton {
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ gap: 0.5rem;
32
+ padding: 0.625rem 1.5rem;
33
+ background-color: var(--text-primary);
34
+ color: var(--background);
35
+ border-radius: var(--border-radius-lg);
36
+ font-weight: 700;
37
+ font-size: 0.875rem;
38
+ width: 100%;
39
+ transition: background-color var(--timing-quick) var(--ease-out-expo);
40
+ }
41
+
42
+ @media (min-width: 768px) {
43
+ .downloadButton {
44
+ width: auto;
45
+ }
46
+ }
47
+
48
+ .downloadButton:hover {
49
+ opacity: 0.9;
50
+ }
51
+
52
+ .timeline {
53
+ position: relative;
54
+ border-left: 1px solid var(--border-highlight);
55
+ margin-left: 0.75rem;
56
+ }
57
+
58
+ .timelineItem {
59
+ position: relative;
60
+ padding-left: 2.5rem;
61
+ padding-bottom: 2.5rem;
62
+ }
63
+
64
+ .timelineItem:last-child {
65
+ padding-bottom: 0;
66
+ }
67
+
68
+ .timelineDot {
69
+ position: absolute;
70
+ left: -5px;
71
+ top: 0.5rem;
72
+ width: 10px;
73
+ height: 10px;
74
+ border-radius: 50%;
75
+ background-color: var(--text-muted);
76
+ border: 4px solid var(--background);
77
+ }
78
+
79
+ .timelineDotCurrent {
80
+ background-color: var(--primary);
81
+ }
82
+
83
+ .timelineHeader {
84
+ display: flex;
85
+ flex-direction: column;
86
+ gap: 0.25rem;
87
+ margin-bottom: 0.25rem;
88
+ }
89
+
90
+ @media (min-width: 640px) {
91
+ .timelineHeader {
92
+ flex-direction: row;
93
+ align-items: baseline;
94
+ justify-content: space-between;
95
+ }
96
+ }
97
+
98
+ .timelineTitle {
99
+ font-size: 1.125rem;
100
+ font-weight: 700;
101
+ color: var(--text-primary);
102
+ }
103
+
104
+ .timelinePeriod {
105
+ font-size: 0.75rem;
106
+ font-family: monospace;
107
+ color: var(--text-muted);
108
+ }
109
+
110
+ .timelineOrg {
111
+ color: var(--primary);
112
+ font-size: 0.875rem;
113
+ font-weight: 500;
114
+ margin-bottom: 0.5rem;
115
+ }
116
+
117
+ .timelineDescription {
118
+ color: var(--text-secondary);
119
+ font-size: 0.875rem;
120
+ line-height: 1.625;
121
+ max-width: 42rem;
122
+ }
@@ -0,0 +1,36 @@
1
+ .footer {
2
+ padding: 0 0 3rem;
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 1rem;
6
+ align-items: center;
7
+ font-size: 0.75rem;
8
+ color: var(--text-muted);
9
+ }
10
+
11
+ @media (min-width: 768px) {
12
+ .footer {
13
+ flex-direction: row;
14
+ justify-content: space-between;
15
+ }
16
+ }
17
+
18
+ .copyright {
19
+ text-align: center;
20
+ }
21
+
22
+ @media (min-width: 768px) {
23
+ .copyright {
24
+ text-align: left;
25
+ }
26
+ }
27
+
28
+ .updated {
29
+ text-align: center;
30
+ }
31
+
32
+ @media (min-width: 768px) {
33
+ .updated {
34
+ text-align: right;
35
+ }
36
+ }
@@ -0,0 +1,242 @@
1
+ .header {
2
+ position: sticky;
3
+ top: 0;
4
+ z-index: 50;
5
+ width: 100%;
6
+ background-color: rgba(var(--surface-rgb, 22, 27, 38), 0.9);
7
+ backdrop-filter: blur(12px);
8
+ -webkit-backdrop-filter: blur(12px);
9
+ border-bottom: 1px solid var(--border);
10
+ transition: background-color var(--timing-standard) var(--ease-out-expo),
11
+ border-color var(--timing-standard) var(--ease-out-expo);
12
+ }
13
+
14
+ [data-theme="light"] .header {
15
+ background-color: rgba(255, 255, 255, 0.9);
16
+ }
17
+
18
+ [data-theme="dark"] .header {
19
+ background-color: rgba(26, 22, 37, 0.9);
20
+ }
21
+
22
+ .container {
23
+ max-width: 1152px;
24
+ margin: 0 auto;
25
+ padding: 0 1.5rem;
26
+ height: 5rem;
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: space-between;
30
+ }
31
+
32
+ .logo {
33
+ display: flex;
34
+ flex-direction: column;
35
+ }
36
+
37
+ .logoName {
38
+ color: var(--text-primary);
39
+ font-weight: 700;
40
+ font-size: 1.125rem;
41
+ line-height: 1.25;
42
+ transition: color var(--timing-quick) var(--ease-out-expo);
43
+ }
44
+
45
+ .logo:hover .logoName {
46
+ color: var(--primary);
47
+ }
48
+
49
+ .logoTitle {
50
+ color: var(--text-muted);
51
+ font-size: 0.75rem;
52
+ font-weight: 400;
53
+ }
54
+
55
+ .nav {
56
+ display: none;
57
+ align-items: center;
58
+ gap: 2rem;
59
+ }
60
+
61
+ @media (min-width: 768px) {
62
+ .nav {
63
+ display: flex;
64
+ }
65
+ }
66
+
67
+ .navLink {
68
+ font-size: 0.875rem;
69
+ font-weight: 500;
70
+ color: var(--text-secondary);
71
+ position: relative;
72
+ transition: color var(--timing-quick) var(--ease-out-expo);
73
+ }
74
+
75
+ .navLink:hover {
76
+ color: var(--text-primary);
77
+ }
78
+
79
+ .navLinkUnderline {
80
+ position: absolute;
81
+ bottom: -4px;
82
+ left: 0;
83
+ width: 0;
84
+ height: 2px;
85
+ background-color: var(--primary);
86
+ transition: width var(--timing-standard) var(--ease-out-expo);
87
+ }
88
+
89
+ .navLink:hover .navLinkUnderline {
90
+ width: 100%;
91
+ }
92
+
93
+ .actions {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 1.25rem;
97
+ }
98
+
99
+ .socialLinks {
100
+ display: none;
101
+ align-items: center;
102
+ gap: 0.75rem;
103
+ padding-right: 1.25rem;
104
+ border-right: 1px solid var(--border-highlight);
105
+ }
106
+
107
+ @media (min-width: 640px) {
108
+ .socialLinks {
109
+ display: flex;
110
+ }
111
+ }
112
+
113
+ .socialLink {
114
+ color: var(--text-muted);
115
+ transition: color var(--timing-quick) var(--ease-out-expo);
116
+ display: flex;
117
+ align-items: center;
118
+ justify-content: center;
119
+ }
120
+
121
+ .socialLink:hover {
122
+ color: var(--text-primary);
123
+ }
124
+
125
+ .socialLink svg {
126
+ width: 1.25rem;
127
+ height: 1.25rem;
128
+ }
129
+
130
+ .themeToggle {
131
+ display: flex;
132
+ align-items: center;
133
+ justify-content: center;
134
+ width: 2.5rem;
135
+ height: 2.5rem;
136
+ border-radius: var(--border-radius-lg);
137
+ color: var(--text-muted);
138
+ transition: color var(--timing-quick) var(--ease-out-expo),
139
+ background-color var(--timing-quick) var(--ease-out-expo);
140
+ }
141
+
142
+ .themeToggle:hover {
143
+ color: var(--text-primary);
144
+ background-color: var(--surface-highlight);
145
+ }
146
+
147
+ .contactButton {
148
+ display: flex;
149
+ align-items: center;
150
+ gap: 0.5rem;
151
+ padding: 0.5rem 1.25rem;
152
+ background-color: var(--primary);
153
+ color: white;
154
+ font-size: 0.875rem;
155
+ font-weight: 700;
156
+ border-radius: var(--border-radius-lg);
157
+ letter-spacing: 0.025em;
158
+ box-shadow: 0 10px 15px -3px var(--shadow);
159
+ transition: background-color var(--timing-quick) var(--ease-out-expo),
160
+ transform var(--timing-quick) var(--ease-out-expo);
161
+ }
162
+
163
+ .contactButton:hover {
164
+ background-color: var(--primary-hover);
165
+ }
166
+
167
+ .contactButton:active {
168
+ transform: scale(0.95);
169
+ }
170
+
171
+ .contactButtonIcon {
172
+ font-size: 1.125rem;
173
+ }
174
+
175
+ .contactButtonText {
176
+ display: none;
177
+ }
178
+
179
+ @media (min-width: 640px) {
180
+ .contactButtonText {
181
+ display: inline;
182
+ }
183
+ }
184
+
185
+ .mobileMenuButton {
186
+ display: flex;
187
+ align-items: center;
188
+ justify-content: center;
189
+ width: 2.5rem;
190
+ height: 2.5rem;
191
+ color: var(--text-secondary);
192
+ border-radius: var(--border-radius-lg);
193
+ transition: color var(--timing-quick) var(--ease-out-expo),
194
+ background-color var(--timing-quick) var(--ease-out-expo);
195
+ }
196
+
197
+ .mobileMenuButton:hover {
198
+ color: var(--text-primary);
199
+ background-color: var(--surface-highlight);
200
+ }
201
+
202
+ @media (min-width: 768px) {
203
+ .mobileMenuButton {
204
+ display: none;
205
+ }
206
+ }
207
+
208
+ .mobileNav {
209
+ position: fixed;
210
+ top: 5rem;
211
+ left: 0;
212
+ right: 0;
213
+ background-color: var(--surface);
214
+ border-bottom: 1px solid var(--border);
215
+ padding: 1rem 1.5rem;
216
+ display: flex;
217
+ flex-direction: column;
218
+ gap: 0.5rem;
219
+ z-index: 40;
220
+ }
221
+
222
+ @media (min-width: 768px) {
223
+ .mobileNav {
224
+ display: none;
225
+ }
226
+ }
227
+
228
+ .mobileNavLink {
229
+ display: block;
230
+ padding: 0.75rem 1rem;
231
+ font-size: 0.875rem;
232
+ font-weight: 500;
233
+ color: var(--text-secondary);
234
+ border-radius: var(--border-radius-lg);
235
+ transition: color var(--timing-quick) var(--ease-out-expo),
236
+ background-color var(--timing-quick) var(--ease-out-expo);
237
+ }
238
+
239
+ .mobileNavLink:hover {
240
+ color: var(--text-primary);
241
+ background-color: var(--surface-highlight);
242
+ }
@@ -0,0 +1,239 @@
1
+ .hero {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 3rem;
5
+ scroll-margin-top: 7rem;
6
+ }
7
+
8
+ .content {
9
+ display: flex;
10
+ flex-direction: column;
11
+ gap: 2.5rem;
12
+ }
13
+
14
+ @media (min-width: 768px) {
15
+ .content {
16
+ flex-direction: row;
17
+ gap: 2.5rem;
18
+ }
19
+ }
20
+
21
+ @media (min-width: 1024px) {
22
+ .content {
23
+ gap: 4rem;
24
+ }
25
+ }
26
+
27
+ .imageWrapper {
28
+ flex-shrink: 0;
29
+ width: 100%;
30
+ display: flex;
31
+ align-items: center;
32
+ gap: 1.5rem;
33
+ }
34
+
35
+ @media (min-width: 768px) {
36
+ .imageWrapper {
37
+ width: auto;
38
+ flex-direction: column;
39
+ align-items: flex-start;
40
+ }
41
+ }
42
+
43
+ .profileImage {
44
+ width: 8rem;
45
+ height: 8rem;
46
+ border-radius: var(--border-radius-2xl);
47
+ background-size: cover;
48
+ background-position: center;
49
+ background-repeat: no-repeat;
50
+ box-shadow: 0 25px 50px -12px var(--shadow);
51
+ border: 4px solid var(--border-highlight);
52
+ }
53
+
54
+ @media (min-width: 768px) {
55
+ .profileImage {
56
+ width: 14rem;
57
+ height: 14rem;
58
+ }
59
+ }
60
+
61
+ .mobileInfo {
62
+ display: block;
63
+ text-align: left;
64
+ }
65
+
66
+ @media (min-width: 768px) {
67
+ .mobileInfo {
68
+ display: none;
69
+ }
70
+ }
71
+
72
+ .mobileInfoName {
73
+ color: var(--text-primary);
74
+ font-size: 1.5rem;
75
+ font-weight: 700;
76
+ line-height: 1.25;
77
+ }
78
+
79
+ .mobileInfoTitle {
80
+ color: var(--text-muted);
81
+ font-weight: 500;
82
+ margin-top: 0.25rem;
83
+ }
84
+
85
+ .textContent {
86
+ flex: 1;
87
+ display: flex;
88
+ flex-direction: column;
89
+ gap: 2rem;
90
+ }
91
+
92
+ .badge {
93
+ display: inline-flex;
94
+ align-items: center;
95
+ border-radius: var(--border-radius-full);
96
+ background-color: var(--tag-bg);
97
+ padding: 0.25rem 0.75rem;
98
+ font-size: 0.75rem;
99
+ font-weight: 500;
100
+ color: var(--primary);
101
+ width: fit-content;
102
+ border: 1px solid var(--border-highlight);
103
+ margin-bottom: 1.5rem;
104
+ }
105
+
106
+ .headline {
107
+ font-size: 2.25rem;
108
+ font-weight: 700;
109
+ color: var(--text-primary);
110
+ line-height: 1.1;
111
+ letter-spacing: -0.025em;
112
+ }
113
+
114
+ @media (min-width: 768px) {
115
+ .headline {
116
+ font-size: 3rem;
117
+ }
118
+ }
119
+
120
+ @media (min-width: 1024px) {
121
+ .headline {
122
+ font-size: 3.75rem;
123
+ }
124
+ }
125
+
126
+ .highlight {
127
+ color: var(--primary);
128
+ }
129
+
130
+ .description {
131
+ max-width: 48rem;
132
+ color: var(--text-secondary);
133
+ font-size: 1.125rem;
134
+ line-height: 1.75;
135
+ }
136
+
137
+ .description p {
138
+ margin-bottom: 1rem;
139
+ }
140
+
141
+ .description p:last-child {
142
+ margin-bottom: 0;
143
+ }
144
+
145
+ .description strong {
146
+ color: var(--text-primary);
147
+ font-weight: 600;
148
+ }
149
+
150
+ .underline {
151
+ color: var(--text-primary);
152
+ text-decoration: underline;
153
+ text-decoration-color: var(--primary);
154
+ text-underline-offset: 4px;
155
+ }
156
+
157
+ .links {
158
+ display: flex;
159
+ flex-wrap: wrap;
160
+ gap: 1rem;
161
+ }
162
+
163
+ .link {
164
+ display: inline-flex;
165
+ align-items: center;
166
+ gap: 0.5rem;
167
+ font-size: 0.875rem;
168
+ font-weight: 500;
169
+ color: var(--text-primary);
170
+ transition: color var(--timing-quick) var(--ease-out-expo);
171
+ }
172
+
173
+ .link:hover {
174
+ color: var(--primary);
175
+ }
176
+
177
+ .linkIcon {
178
+ font-size: 1.25rem;
179
+ }
180
+
181
+ /* Updates Section */
182
+ .updates {
183
+ border-radius: var(--border-radius-xl);
184
+ padding: 1.5rem;
185
+ }
186
+
187
+ @media (min-width: 768px) {
188
+ .updates {
189
+ padding: 2rem;
190
+ }
191
+ }
192
+
193
+ .updatesHeader {
194
+ display: flex;
195
+ align-items: center;
196
+ gap: 0.5rem;
197
+ font-size: 1.125rem;
198
+ font-weight: 700;
199
+ color: var(--text-primary);
200
+ margin-bottom: 1.5rem;
201
+ }
202
+
203
+ .updatesIcon {
204
+ color: var(--primary);
205
+ }
206
+
207
+ .updatesList {
208
+ display: flex;
209
+ flex-direction: column;
210
+ gap: 1.5rem;
211
+ }
212
+
213
+ .updateItem {
214
+ display: flex;
215
+ gap: 1rem;
216
+ align-items: flex-start;
217
+ }
218
+
219
+ .updateDate {
220
+ margin-top: 0.25rem;
221
+ font-size: 0.75rem;
222
+ font-weight: 500;
223
+ color: var(--text-muted);
224
+ text-transform: uppercase;
225
+ letter-spacing: 0.05em;
226
+ flex-shrink: 0;
227
+ width: 6rem;
228
+ }
229
+
230
+ .updateContent h4 {
231
+ color: var(--text-primary);
232
+ font-weight: 500;
233
+ }
234
+
235
+ .updateContent p {
236
+ color: var(--text-secondary);
237
+ font-size: 0.875rem;
238
+ margin-top: 0.25rem;
239
+ }