feat: add cv components and styling

bbtgnn · Mar 1, 2024 · d8b1059 · d8b1059
1 parent 3b88799
commit d8b1059
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 50 deletions.
diff --git a/src/app.pcss b/src/app.pcss
@@ -10,3 +10,11 @@
 .button {
 	@apply inline-block rounded-xl bg-blue-500 p-4 text-white;
 }
+
+h1 {
+	@apply text-3xl;
+}
+
+h2 {
+	@apply text-xl font-medium;
+}
diff --git a/src/lib/components/CvCard.svelte b/src/lib/components/CvCard.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	export let title: string | undefined = undefined;
+	export let subtitle: string | undefined = undefined;
+
+	export let date_start: string | undefined = undefined;
+	export let date_end: string | undefined = undefined;
+	export let current: boolean | undefined = undefined;
+</script>
+
+<div>
+	{#if title}
+		<p class="font-semibold">{title}</p>
+	{/if}
+	{#if subtitle}
+		<p>{subtitle}</p>
+	{/if}
+	{#if date_start || date_end}
+		<p>
+			{#if date_start}
+				<span>{date_start}</span>
+			{/if}
+			{#if date_start && (date_end || current)}
+				<span>→</span>
+			{/if}
+			{#if date_end}
+				<span>{date_end}</span>
+			{/if}
+			{#if current}
+				<span>oggi</span>
+			{/if}
+		</p>
+	{/if}
+
+	<slot />
+</div>
diff --git a/src/routes/cv/+page.svelte b/src/routes/cv/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import CvCard from '$lib/components/CvCard.svelte';
 	import Collection from '$modules/components/Collection.svelte';
 	import Document from '$modules/components/Document.svelte';
 	import Relation from '$modules/components/Relation.svelte';
@@ -8,53 +9,48 @@
 
 <a href={href('/')} class="button">Home</a>
 
-<Collection name="work_experiences" sort={['date_start', 'desc']} let:documents>
-	<!--  -->
-
-	<h1>Esperienze lavorative attuali</h1>
-
-	{#each documents as document}
-		{#if document.current}
-			<div class="rounded-xl border border-stone-300 p-4">
-				<p>{document.roles.join(', ')}</p>
-				<Document
-					collection={document.employer.collection}
-					name={document.employer.document}
-					let:doc
-				>
-					<p>{doc.name}</p>
-				</Document>
-				<p>
-					<span>
-						{formatDate(document.date_start, 'MM / yyyy')}
-					</span>
-					<span>-></span>
-					<span> oggi </span>
-				</p>
-			</div>
-		{/if}
-	{/each}
-
-	<!--  -->
-
-	<h1>Esperienze lavorative passate</h1>
-
-	{#each documents as document}
-		{#if document.date_end}
-			<div class="rounded-xl border border-stone-300 p-4">
-				<p>{document.roles.join(', ')}</p>
-				<Relation to={document.employer} let:doc>
-					<p>{doc.location}</p>
-				</Relation>
-
-				<p>
-					<span>
-						{formatDate(document.date_start, 'MM / yyyy')}
-					</span>
-					<span>-></span>
-					<span> oggi </span>
-				</p>
-			</div>
-		{/if}
-	{/each}
-</Collection>
+<div class="mx-auto max-w-xl space-y-6">
+	<h1>Curriculum Vitae</h1>
+
+	<hr />
+
+	<Collection name="work_experiences" sort={['date_start', 'desc']} let:documents>
+		<!--  -->
+
+		<div class="space-y-4">
+			<h2>Esperienze lavorative attuali</h2>
+
+			{#each documents as document}
+				{#if document.current}
+					<Relation to={document.employer} let:doc>
+						<CvCard
+							title={document.roles.join(', ')}
+							subtitle={doc.name}
+							date_start={formatDate(document.date_start, 'MM/yyyy')}
+							current={document.current}
+						/>
+					</Relation>
+				{/if}
+			{/each}
+		</div>
+
+		<hr />
+
+		<div class="space-y-4">
+			<h2>Esperienze lavorative passate</h2>
+
+			{#each documents as document}
+				{#if document.date_end}
+					<Relation to={document.employer} let:doc={employer}>
+						<CvCard
+							title={document.roles.join(', ')}
+							subtitle={employer.name}
+							date_start={formatDate(document.date_start, 'MM/yyyy')}
+							date_end={formatDate(document.date_end, 'MM/yyyy')}
+						/>
+					</Relation>
+				{/if}
+			{/each}
+		</div>
+	</Collection>
+</div>