96 lines
2.0 KiB
Svelte

<script lang="ts" context="module">
/**
* @type {import('@sveltejs/kit').Load}
*/
export async function load({ fetch }) {
const res = await fetch('portfolio.json')
const content = await res.json()
return {
props: {
content,
},
}
}
</script>
<script lang="ts">
import Work from '../../components/portfolio/work.svelte'
import Project from '../../components/portfolio/project.svelte'
import Presentation from '../../components/portfolio/presentation.svelte'
import type { PortfolioContent } from './index.json'
import { listClass, listItemClass, nameTagClass } from './index.css'
export let content: PortfolioContent
</script>
<svelte:head>
<title>{content.title}</title>
</svelte:head>
<h1 class="name-tag {nameTagClass}">Michal Vanko</h1>
<h2 class="name-tag {nameTagClass}">
Software Architect and Engineering Manager
</h2>
<section id="personal-information">
{@html content.body}
</section>
<section id="work-history">
<h2>Work experience</h2>
<section class="work-history-prelude">
{@html content.workHistoryPrelude}
</section>
<ul class={listClass}>
{#each content.workHistory as work}
<li class={listItemClass}>
<Work {work} />
</li>
{/each}
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<ul class={listClass}>
{#each content.projects as project}
<li class={listItemClass}>
<Project {project} />
</li>
{/each}
</ul>
</section>
<section id="presentations">
<h2>Presentations</h2>
<ul class="">
{#each content.presentations as presentation}
<li class="">
<Presentation {presentation} />
</li>
{/each}
</ul>
</section>
<section id="education">
<h2>Education</h2>
<ul class={listClass}>
{#each content.education as work}
<li class={listItemClass}>
<Work {work} />
</li>
{/each}
</ul>
</section>
<style>
:global([id])::before {
content: '';
display: block;
height: 5em;
margin-top: -5em;
visibility: hidden;
}
</style>