95 lines
2.2 KiB
Svelte
95 lines
2.2 KiB
Svelte
<script>
|
|
import Navbar from "$components/navbar.svelte";
|
|
import Footer from "$components/footer.svelte";
|
|
import Header from "$components/header.svelte";
|
|
import Head from "$components/head.svelte";
|
|
import Card from "$components/card.svelte";
|
|
|
|
import { locale, _ } from "$lib/locale.js";
|
|
|
|
let { data } = $props();
|
|
|
|
// return list of projects that have decriptions for the given locale
|
|
function projects() {
|
|
return data.projects.filter(p => {
|
|
return (
|
|
p.desc[$locale.code] !== "" &&
|
|
p.desc[$locale.code] !== null &&
|
|
p.desc[$locale.code] !== undefined
|
|
);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<Head title="home" desc="home page of my personal website" />
|
|
<Navbar />
|
|
<Header picture="tired" title={$_("home.title")} />
|
|
<main>
|
|
<!-- welcome -->
|
|
<Card>
|
|
<p>{@html $_("home.welcome.desc")}</p>
|
|
<br />
|
|
<p>{$_("home.welcome.thanks")}</p>
|
|
</Card>
|
|
|
|
<!-- projects -->
|
|
<Card title={$_("home.projects.title")} id="projects">
|
|
<p>{$_("home.projects.desc")}:</p>
|
|
<br />
|
|
<ul>
|
|
{#each projects() as project}
|
|
<li class="project">
|
|
<a href={project.url}>{project.name}</a>: {project.desc[$locale.code]}
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</Card>
|
|
|
|
<!-- services -->
|
|
<Card title={$_("home.services.title")} id="services">
|
|
<p>{$_("home.services.desc")}:</p>
|
|
<br />
|
|
<ul>
|
|
<li>{@html $_("home.services.speed")}</li>
|
|
<li>{@html $_("home.services.security")}</li>
|
|
<li>{@html $_("home.services.blocks")}</li>
|
|
<li>{@html $_("home.services.bullshit")}</li>
|
|
</ul>
|
|
<br />
|
|
<a class="services" href="/services" data-sveltekit-preload-data>
|
|
{$_("home.services.link")}
|
|
</a>
|
|
</Card>
|
|
|
|
<!-- contact -->
|
|
<Card title={$_("home.contact.title")} id="contact">
|
|
<p>{@html $_("home.contact.desc")}</p>
|
|
<br />
|
|
<p>{@html $_("home.contact.mastodon")}</p>
|
|
</Card>
|
|
</main>
|
|
<Footer />
|
|
|
|
<style>
|
|
main {
|
|
background: var(--black-1);
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
padding: 40px;
|
|
}
|
|
|
|
.services {
|
|
color: var(--color);
|
|
text-decoration-color: var(--color);
|
|
}
|
|
|
|
.project a {
|
|
color: var(--color);
|
|
text-decoration-color: var(--color);
|
|
}
|
|
</style>
|