@ansiversa/components 0.0.123 → 0.0.125

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/resume-templates/ResumeTemplateClassic.astro +9 -9
  3. package/src/resume-templates/ResumeTemplateExecutiveTimeline.astro +5 -5
  4. package/src/resume-templates/ResumeTemplateMinimal.astro +45 -24
  5. package/src/resume-templates/ResumeTemplateModernTwoTone.astro +20 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ansiversa/components",
3
- "version": "0.0.123",
3
+ "version": "0.0.125",
4
4
  "description": "Shared UI components and layouts for the Ansiversa ecosystem",
5
5
  "type": "module",
6
6
  "exports": {
package/src/resume-templates/ResumeTemplateClassic.astro CHANGED
@@ -30,17 +30,17 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
30
30
  <div class="resume-template av-print-white bg-slate-100 text-slate-900 print:bg-white">
31
31
  <main class="mx-auto max-w-4xl p-4 sm:p-6">
32
32
  <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-10 print:shadow-none print:ring-0">
33
- <header class="av-print-avoid-break flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
34
- <div>
35
- <h1 class="text-3xl font-bold tracking-tight">{basics.fullName}</h1>
36
- <p class="mt-1 text-base font-medium text-slate-700">{basics.headline}</p>
33
+ <header class="av-print-avoid-break flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
34
+ <div class="sm:max-w-[70%]">
35
+ <h1 class="text-4xl font-extrabold tracking-tight text-slate-950">{basics.fullName}</h1>
36
+ <p class="mt-1 text-sm font-semibold uppercase tracking-[0.14em] text-slate-700">{basics.headline}</p>
37
37
  {basics.summary && (
38
38
  <p class="mt-3 text-sm leading-6 text-slate-600">{basics.summary}</p>
39
39
  )}
40
40
  </div>
41
41
 
42
42
  {contactItems.length > 0 && (
43
- <div class="text-sm text-slate-700 sm:text-right">
43
+ <div class="text-sm text-slate-700 sm:max-w-[18rem] sm:border-l sm:border-slate-200 sm:pl-4 sm:text-right">
44
44
  <div class="flex flex-col gap-1 sm:items-end">
45
45
  {contactItems.map((item) =>
46
46
  item.href ? (
@@ -252,21 +252,21 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
252
252
  {hasDeclaration && (
253
253
  <>
254
254
  <div class="my-8 h-0 border-t border-slate-200"></div>
255
- <section class="av-print-avoid-break space-y-4">
255
+ <section class="av-print-avoid-break space-y-3">
256
256
  <h2 class="text-sm font-bold tracking-widest text-slate-900">DECLARATION</h2>
257
257
  {declaration.text && (
258
258
  <p class="text-sm leading-6 text-slate-700">{declaration.text}</p>
259
259
  )}
260
260
  {(declaration.place || declaration.name) && (
261
- <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
261
+ <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-3 text-sm text-slate-700">
262
262
  {declaration.place && (
263
- <div>
263
+ <div class="text-xs uppercase tracking-[0.12em] text-slate-600">
264
264
  <span class="font-semibold text-slate-900">Place:</span>{" "}
265
265
  {declaration.place}
266
266
  </div>
267
267
  )}
268
268
  {declaration.name && (
269
- <div class="font-semibold text-slate-900">{declaration.name}</div>
269
+ <div class="text-base font-bold tracking-wide text-slate-950">{declaration.name}</div>
270
270
  )}
271
271
  </div>
272
272
  )}
package/src/resume-templates/ResumeTemplateExecutiveTimeline.astro CHANGED
@@ -93,7 +93,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
93
93
  )}
94
94
 
95
95
  {projects.length > 0 && (
96
- <div class="mt-10">
96
+ <div class="mt-8">
97
97
  <h2 class="text-sm font-bold tracking-widest text-slate-900">PROJECTS</h2>
98
98
  <div class="mt-5 space-y-4">
99
99
  {projects.map((project) => (
@@ -174,21 +174,21 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
174
174
  {hasDeclaration && (
175
175
  <>
176
176
  <div class="my-8 h-px bg-slate-200"></div>
177
- <section class="av-print-avoid-break space-y-4">
177
+ <section class="av-print-avoid-break space-y-3">
178
178
  <h2 class="text-sm font-bold tracking-widest text-slate-900">DECLARATION</h2>
179
179
  {declaration.text && (
180
180
  <p class="text-sm leading-6 text-slate-700">{declaration.text}</p>
181
181
  )}
182
182
  {(declaration.place || declaration.name) && (
183
- <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
183
+ <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-3 text-sm text-slate-700">
184
184
  {declaration.place && (
185
- <div>
185
+ <div class="text-xs uppercase tracking-[0.12em] text-slate-600">
186
186
  <span class="font-semibold text-slate-900">Place:</span>{" "}
187
187
  {declaration.place}
188
188
  </div>
189
189
  )}
190
190
  {declaration.name && (
191
- <div class="font-semibold text-slate-900">{declaration.name}</div>
191
+ <div class="text-base font-bold tracking-wide text-slate-950">{declaration.name}</div>
192
192
  )}
193
193
  </div>
194
194
  )}
package/src/resume-templates/ResumeTemplateMinimal.astro CHANGED
@@ -14,6 +14,8 @@ const locationLabel =
14
14
  [basics.location?.city, basics.location?.country].filter(Boolean).join(", ");
15
15
 
16
16
  const contactLinks = buildContactEntries(basics, locationLabel);
17
+ const primaryContacts = contactLinks.filter((item) => item.kind === "email" || item.kind === "phone");
18
+ const secondaryContacts = contactLinks.filter((item) => item.kind !== "email" && item.kind !== "phone");
17
19
 
18
20
  const headlineLine = [basics.headline, locationLabel].filter(Boolean).join(" · ");
19
21
  const experienceItems = data.experience ?? [];
@@ -28,20 +30,37 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
28
30
  <div class="resume-template av-print-white bg-slate-100 text-slate-900 print:bg-white">
29
31
  <main class="mx-auto max-w-4xl p-4 sm:p-6">
30
32
  <section class="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-slate-200 sm:p-12 print:shadow-none print:ring-0">
31
- <header class="space-y-4">
32
- <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
33
+ <header class="space-y-3">
34
+ <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
33
35
  <div>
34
- <h1 class="text-4xl font-semibold tracking-tight">{basics.fullName}</h1>
36
+ <h1 class="text-4xl font-bold tracking-tight text-slate-950">{basics.fullName}</h1>
35
37
  {headlineLine && <p class="mt-2 text-sm text-slate-600">{headlineLine}</p>}
36
38
  </div>
37
39
  {contactLinks.length > 0 && (
38
- <div class="text-sm text-slate-700 sm:text-right">
39
- <div class="flex flex-col gap-1">
40
- {contactLinks.map((item) => (
41
- <a class="underline underline-offset-4 hover:text-slate-900 print:no-underline" href={item.href}>
42
- {item.label}
43
- </a>
40
+ <div class="text-sm text-slate-700 sm:max-w-[18rem] sm:border-l sm:border-slate-200 sm:pl-4 sm:text-right">
41
+ <div class="flex flex-col gap-1.5">
42
+ {primaryContacts.map((item) => (
43
+ item.href ? (
44
+ <a class="font-semibold text-slate-900 underline underline-offset-4 hover:text-slate-900 print:no-underline" href={item.href}>
45
+ {item.label}
46
+ </a>
47
+ ) : (
48
+ <div class="font-semibold text-slate-900">{item.label}</div>
49
+ )
44
50
  ))}
51
+ {secondaryContacts.length > 0 && (
52
+ <div class="pt-1 text-xs text-slate-600">
53
+ {secondaryContacts.map((item) => (
54
+ item.href ? (
55
+ <a class="underline underline-offset-4 hover:text-slate-800 print:no-underline" href={item.href}>
56
+ {item.label}
57
+ </a>
58
+ ) : (
59
+ <div>{item.label}</div>
60
+ )
61
+ ))}
62
+ </div>
63
+ )}
45
64
  </div>
46
65
  </div>
47
66
  )}
@@ -52,10 +71,10 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
52
71
  )}
53
72
  </header>
54
73
 
55
- <div class="my-10 h-px bg-slate-200"></div>
74
+ <div class="my-8 h-px bg-slate-200"></div>
56
75
 
57
- <div class="grid gap-10 lg:grid-cols-12">
58
- <div class="space-y-10 lg:col-span-8">
76
+ <div class="grid gap-8 lg:grid-cols-12">
77
+ <div class="space-y-8 lg:col-span-8">
59
78
  {experienceItems.length > 0 && (
60
79
  <section>
61
80
  <h2 class="text-xs font-semibold tracking-[0.25em] text-slate-500">EXPERIENCE</h2>
@@ -90,9 +109,9 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
90
109
  {projects.length > 0 && (
91
110
  <section>
92
111
  <h2 class="text-xs font-semibold tracking-[0.25em] text-slate-500">PROJECTS</h2>
93
- <div class="mt-6 space-y-5">
112
+ <div class="mt-5 space-y-4">
94
113
  {projects.map((project) => (
95
- <article class="rounded-xl border border-slate-200 p-5">
114
+ <article class="rounded-xl border border-slate-200 p-4">
96
115
  <div class="flex items-baseline justify-between gap-3">
97
116
  {project.link ? (
98
117
  <a class="text-base font-semibold underline underline-offset-4" href={project.link}>
@@ -128,18 +147,20 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
128
147
  )}
129
148
  </div>
130
149
 
131
- <aside class="space-y-10 lg:col-span-4">
150
+ <aside class="space-y-8 lg:col-span-4">
132
151
  {skills.length > 0 && (
133
152
  <section>
134
153
  <h2 class="text-xs font-semibold tracking-[0.25em] text-slate-500">SKILLS</h2>
135
154
  {showSkillsAs === "chips" ? (
136
- <div class="mt-5 flex flex-wrap gap-2 text-sm text-slate-700">
137
- {skills.map((skill) => (
138
- <span class="rounded-full bg-slate-100 px-3 py-1 text-xs">{skill.name}</span>
155
+ <div class="mt-4 text-sm text-slate-700 leading-6">
156
+ {skills.map((skill, index) => (
157
+ <span>
158
+ {skill.name}{index < skills.length - 1 ? " · " : ""}
159
+ </span>
139
160
  ))}
140
161
  </div>
141
162
  ) : (
142
- <div class="mt-5 space-y-3 text-sm text-slate-700">
163
+ <div class="mt-4 space-y-2 text-sm text-slate-700">
143
164
  {skills.map((skill) => (
144
165
  <div class="flex items-center justify-between">
145
166
  <span>{skill.name}</span>
@@ -190,22 +211,22 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
190
211
 
191
212
  {hasDeclaration && (
192
213
  <>
193
- <div class="my-10 h-px bg-slate-200"></div>
194
- <section class="space-y-4">
214
+ <div class="my-8 h-px bg-slate-200"></div>
215
+ <section class="av-print-avoid-break space-y-3">
195
216
  <h2 class="text-xs font-semibold tracking-[0.25em] text-slate-500">DECLARATION</h2>
196
217
  {declaration.text && (
197
218
  <p class="text-sm leading-7 text-slate-700">{declaration.text}</p>
198
219
  )}
199
220
  {(declaration.place || declaration.name) && (
200
- <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
221
+ <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-3 text-sm text-slate-700">
201
222
  {declaration.place && (
202
- <div>
223
+ <div class="text-xs uppercase tracking-[0.12em] text-slate-600">
203
224
  <span class="font-semibold text-slate-900">Place:</span>{" "}
204
225
  {declaration.place}
205
226
  </div>
206
227
  )}
207
228
  {declaration.name && (
208
- <div class="font-semibold text-slate-900">{declaration.name}</div>
229
+ <div class="text-base font-bold tracking-wide text-slate-950">{declaration.name}</div>
209
230
  )}
210
231
  </div>
211
232
  )}
package/src/resume-templates/ResumeTemplateModernTwoTone.astro CHANGED
@@ -38,12 +38,12 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
38
38
  <main class="mx-auto max-w-4xl p-4 sm:p-6">
39
39
  <section class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 print:shadow-none print:ring-0">
40
40
  <div class="grid lg:grid-cols-12 print:grid-cols-1">
41
- <aside class="bg-slate-900 p-7 text-slate-100 sm:p-10 lg:col-span-4 print:order-2 print:bg-white print:text-slate-900">
41
+ <aside class="bg-slate-800 p-7 text-slate-100 sm:p-10 lg:col-span-4 print:order-2 print:bg-white print:text-slate-900">
42
42
  <div class="space-y-6">
43
43
  <div>
44
44
  <h1 class="text-3xl font-bold tracking-tight">{firstName}</h1>
45
45
  {lastName && <h1 class="-mt-1 text-3xl font-bold tracking-tight">{lastName}</h1>}
46
- <p class="mt-2 text-sm text-slate-200 print:text-slate-700">{basics.headline}</p>
46
+ <p class="mt-2 text-sm text-slate-100/90 print:text-slate-700">{basics.headline}</p>
47
47
  </div>
48
48
 
49
49
  <div class="h-px bg-slate-700 print:bg-slate-200"></div>
@@ -227,26 +227,26 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
227
227
  </div>
228
228
  </section>
229
229
 
230
- {hasDeclaration && (
231
- <section class="av-print-avoid-break">
232
- <div class="my-8 h-px bg-slate-200"></div>
233
- <h2 class="text-xs font-bold tracking-widest text-slate-500">DECLARATION</h2>
234
- {declaration.text && (
235
- <p class="mt-3 text-sm leading-6 text-slate-700">{declaration.text}</p>
236
- )}
237
- {(declaration.place || declaration.name) && (
238
- <div class="mt-3 flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
239
- {declaration.place && (
240
- <div>
241
- <span class="font-semibold text-slate-900">Place:</span>{" "}
242
- {declaration.place}
243
- </div>
244
- )}
245
- {declaration.name && (
246
- <div class="font-semibold text-slate-900">{declaration.name}</div>
247
- )}
230
+ {hasDeclaration && (
231
+ <section class="av-print-avoid-break">
232
+ <div class="my-8 h-px bg-slate-200"></div>
233
+ <h2 class="text-xs font-bold tracking-widest text-slate-500">DECLARATION</h2>
234
+ {declaration.text && (
235
+ <p class="mt-3 text-sm leading-6 text-slate-700">{declaration.text}</p>
236
+ )}
237
+ {(declaration.place || declaration.name) && (
238
+ <div class="mt-3 flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-3 text-sm text-slate-700">
239
+ {declaration.place && (
240
+ <div class="text-xs uppercase tracking-[0.12em] text-slate-600">
241
+ <span class="font-semibold text-slate-900">Place:</span>{" "}
242
+ {declaration.place}
248
243
  </div>
249
244
  )}
245
+ {declaration.name && (
246
+ <div class="text-base font-bold tracking-wide text-slate-950">{declaration.name}</div>
247
+ )}
248
+ </div>
249
+ )}
250
250
  </section>
251
251
  )}
252
252
  </div>