cv-site/src/lib/elements/JobElement.svelte

80 lines
1.7 KiB
Svelte

<script lang="ts">
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt({
html: true,
xhtmlOut: true,
typographer: true,
breaks: true,
linkify: true
});
import type { Job } from '$lib/model/job';
import type { CurrentLanguage } from '$lib/types';
export let job: Job;
export let currentLanguage: CurrentLanguage = 'it';
</script>
<div class="job-container">
<h3>{job.title[currentLanguage]}</h3>
<div class="image-container">
{#each job.images as image}
<img src={image} alt={image} loading="lazy" />
{/each}
</div>
<div class="text-content">
{@html md.render(job.content[currentLanguage])}
</div>
<div class="added-info">
{#if job.year}
Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if}
{/if}
<div>
{#if job.collaborators.length != 0}
Collab:
{/if}
{#each job.collaborators as collaborator, index}
<a href={collaborator.ref}>{collaborator.name} {collaborator.surname}</a>{index !=
job.collaborators.length - 1
? ', '
: ''}
{/each}
</div>
<div>
{#if job.languages.length != 0}
Lang:
{/if}
{#each job.languages as language, index}
{language}{index != job.languages.length - 1 ? ', ' : ''}
{/each}
</div>
<div>
{#if job.tecnologies.length != 0}
Tech:
{/if}
{#each job.tecnologies as tecnology, index}
{tecnology}{index != job.tecnologies.length - 1 ? ', ' : ''}
{/each}
</div>
</div>
</div>
<style lang="scss">
@import '../../app.scss';
.text-content {
margin: auto;
text-align: justify;
}
.added-info {
text-align: left;
font-size: smaller;
}
.job-container {
width: 100%;
img {
background-color: $text-color;
}
display: flex;
flex-direction: column;
height: 100%;
}
</style>