Skip to content

Commit

Permalink
Fix flags
Browse files Browse the repository at this point in the history
  • Loading branch information
@v-rogg
v-rogg committed Oct 15, 2023
1 parent 981e263 commit bf54b22
Show file tree
Hide file tree
Showing 4 changed files with 198 additions and 75 deletions.
1 change: 1 addition & 0 deletions src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="utf-8" />
<link rel="icon" href="/favicon/light/favicon-64x64.png" />
<script src="https://kit.fontawesome.com/fb271958c9.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/_i18n/de/bio.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"description": "Hallo, ich bin Valentin, und meine professionelle Leidenschaft ist die Erforschung von neuer Datenerlebnisse.<wbr> Meine Spezialisierung liegt in der automatisierten Datenerfassung, -analyse und interaktiven Datenvisualisierung.<wbr> Privat bin ich leidenschaftlicher Musiker, Globetrotter und Minimalist.",
"description": "Hallo, ich bin Valentin, und meine professionelle Leidenschaft ist die Erforschung von neuen Datenerlebnisse.<wbr> Meine Spezialisierung liegt in der automatisierten Datenerfassung, -analyse und interaktiven Datenvisualisierung.<wbr> Privat bin ich leidenschaftlicher Musiker, Globetrotter und Minimalist.",
"mail": "[email protected]"
}
268 changes: 195 additions & 73 deletions src/lib/components/sections/ShortBio/ShortBio.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,212 @@
<script lang="ts">
import { t } from "$lib/_i18n";
import { sendClientEvent } from "$lib/posthog";
const flags = ["🇦🇹","🇧🇪","🇨🇦","🇨🇿","🇩🇰","🇪🇬","🇪🇪","🇫🇴","🇫🇮","🇫🇷","🇩🇪","🇬🇱","🇮🇸","🇮🇪","🇮🇹","🇱🇻","🇲🇨","🇳🇱","🇳🇴",
"🇵🇱","🇵🇹","🇷🇺","🇪🇸","🇸🇪","🇨🇭","🇹🇷","🏴󠁧󠁢󠁥󠁮󠁧󠁿","🏴󠁧󠁢󠁳󠁣󠁴󠁿","🏴󠁧󠁢󠁷󠁬󠁳󠁿","🇺🇸"];
</script>

<section>
<h1 class="text-4xl text-center font-semibold mb-4 font-sans">Valentin Rogg</h1>
<p class="text-center my-4 flex flex-wrap justify-center max-sm:mx-10">
{#each flags as flag}
<span class="block">{flag}</span>
{/each}
</p>
<p class="text-center font-serif text-md-lg whitespace-pre-wrap max-sm:mx-10 max-w-2xl mx-auto">
{@html $t("bio.description")}
</p>
<h1 class="text-4xl text-center font-semibold mb-4 font-sans">Valentin Rogg</h1>
<p class="text-center my-4 flex flex-wrap gap-0.5 justify-center max-sm:mx-10" id="flags">
<img
class="emoji"
alt="🇦🇹"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1e6-1f1f9.png" />
<img
class="emoji"
alt="🇧🇪"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1e7-1f1ea.png" />
<img
class="emoji"
alt="🇨🇦"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1e8-1f1e6.png" />
<img
class="emoji"
alt="🇨🇿"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1e8-1f1ff.png" />
<img
class="emoji"
alt="🇩🇰"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1e9-1f1f0.png" />
<img
class="emoji"
alt="🇪🇬"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1ea-1f1ec.png" />
<img
class="emoji"
alt="🇪🇪"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1ea-1f1ea.png" />
<img
class="emoji"
alt="🇫🇴"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1eb-1f1f4.png" />
<img
class="emoji"
alt="🇫🇮"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1eb-1f1ee.png" />
<img
class="emoji"
alt="🇫🇷"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1eb-1f1f7.png" />
<img
class="emoji"
alt="🇩🇪"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1e9-1f1ea.png" />
<img
class="emoji"
alt="🇬🇱"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1ec-1f1f1.png" />
<img
class="emoji"
alt="🇮🇸"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1ee-1f1f8.png" />
<img
class="emoji"
alt="🇮🇪"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1ee-1f1ea.png" />
<img
class="emoji"
alt="🇮🇹"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1ee-1f1f9.png" />
<img
class="emoji"
alt="🇱🇻"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1f1-1f1fb.png" />
<img
class="emoji"
alt="🇲🇨"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1f2-1f1e8.png" />
<img
class="emoji"
alt="🇳🇱"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1f3-1f1f1.png" />
<img
class="emoji"
alt="🇳🇴"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1f3-1f1f4.png" />
<img
class="emoji"
alt="🇵🇱"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1f5-1f1f1.png" />
<img
class="emoji"
alt="🇵🇹"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1f5-1f1f9.png" />
<img
class="emoji"
alt="🇷🇺"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1f7-1f1fa.png" />
<img
class="emoji"
alt="🇪🇸"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1ea-1f1f8.png" />
<img
class="emoji"
alt="🇸🇪"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1f8-1f1ea.png" />
<img
class="emoji"
alt="🇨🇭"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1e8-1f1ed.png" />
<img
class="emoji"
alt="🇹🇷"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1f9-1f1f7.png" />
<img
class="emoji"
alt="🏴󠁧󠁢󠁥󠁮󠁧󠁿"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f3f4-e0067-e0062-e0065-e006e-e0067-e007f.png" /><img
class="emoji"
alt="🏴󠁧󠁢󠁳󠁣󠁴󠁿"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f3f4-e0067-e0062-e0073-e0063-e0074-e007f.png" /><img
class="emoji"
alt="🏴󠁧󠁢󠁷󠁬󠁳󠁿"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f3f4-e0067-e0062-e0077-e006c-e0073-e007f.png" /><img
class="emoji"
alt="🇺🇸"
src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1fa-1f1f8.png" />
</p>
<p class="text-center font-serif text-md-lg whitespace-pre-wrap max-sm:mx-10 max-w-2xl mx-auto">
{@html $t("bio.description")}
</p>

<div class="w-max mt-16 mb-6 mx-auto text-2xl">
<div class="flex gap-4">
<a href="https://www.komoot.de/user/2406562570904" rel="noreferrer nofollow"
target="_blank"
aria-label="Komoot" on:click={() => sendClientEvent('open-social', document, {social: 'komoot'})}>
<i class="fa-kit fa-komoot"></i>
</a>
<span class="overflow_hand cv">
<span class="looking_for_cv font-handwriting">{@html $t("common.looking_for_cv")}</span>
<span class="hand_arrow">
<svg
width="9"
height="17"
viewBox="0 0 9 17"
fill="none"
class="arrow"
xmlns="http://www.w3.org/2000/svg">
<path
d="M1.59524 0.236142C2.42858 0.747671 3.30952 1.28245 3.92857 2.00324C6.28572 4.7469 7 8.00209 6.5 11.513C6.33333 12.7221 5.92857 13.8847 5.59524 15.1635C6.7381 14.6055 7.85714 14.2799 9 15.117C7.5 15.303 6.26191 16.0238 5.04762 16.7446C4.90477 16.8143 4.78572 16.8841 4.64286 16.9306C4.04762 17.1166 3.66667 16.9306 3.5 16.3493C3.42858 16.1401 3.42857 15.9075 3.40476 15.6983C3.30952 13.9312 3.07143 12.2106 2.42858 10.5365C2.38096 10.397 2.45238 10.1645 2.47619 9.74594C3.7619 11.234 3.7619 12.9314 4.2619 14.559C5.61905 11.8153 5.92857 9.0949 5.09524 6.28149C4.30952 3.53783 3.07143 1.1662 0 0.236142C0.761905 -0.0428741 1 -0.112628 1.59524 0.236142Z"
fill="var(--c-black)"></path>
</svg>
</span>
<a
href="https://www.linkedin.com/in/vrogg/"
rel="noreferrer nofollow"
target="_blank"
aria-label="LinkedIn" on:click={() => sendClientEvent('open-social', document, {social: 'linkedin'})}><i class="fa-brands fa-linkedin"></i></a>
<div class="w-max mt-16 mb-6 mx-auto text-2xl">
<div class="flex gap-4">
<a
href="https://www.komoot.de/user/2406562570904"
rel="noreferrer nofollow"
target="_blank"
aria-label="Komoot"
on:click="{() => sendClientEvent('open-social', document, { social: 'komoot' })}">
<i class="fa-kit fa-komoot"></i>
</a>
<span class="overflow_hand cv">
<span class="looking_for_cv font-handwriting">{@html $t("common.looking_for_cv")}</span>
<span class="hand_arrow">
<svg width="9" height="17" viewBox="0 0 9 17" fill="none" class="arrow" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.59524 0.236142C2.42858 0.747671 3.30952 1.28245 3.92857 2.00324C6.28572 4.7469 7 8.00209 6.5 11.513C6.33333 12.7221 5.92857 13.8847 5.59524 15.1635C6.7381 14.6055 7.85714 14.2799 9 15.117C7.5 15.303 6.26191 16.0238 5.04762 16.7446C4.90477 16.8143 4.78572 16.8841 4.64286 16.9306C4.04762 17.1166 3.66667 16.9306 3.5 16.3493C3.42858 16.1401 3.42857 15.9075 3.40476 15.6983C3.30952 13.9312 3.07143 12.2106 2.42858 10.5365C2.38096 10.397 2.45238 10.1645 2.47619 9.74594C3.7619 11.234 3.7619 12.9314 4.2619 14.559C5.61905 11.8153 5.92857 9.0949 5.09524 6.28149C4.30952 3.53783 3.07143 1.1662 0 0.236142C0.761905 -0.0428741 1 -0.112628 1.59524 0.236142Z"
fill="var(--c-black)"></path>
</svg>
</span>
<a
href="https://www.instagram.com/valentin_rogg/"
href="https://www.linkedin.com/in/vrogg/"
rel="noreferrer nofollow"
target="_blank"
aria-label="Instagram" on:click={() => sendClientEvent('open-social', document, {social: 'instagram'})}><i class="fa-brands fa-instagram"></i></a>
<a
href="https://www.youtube.com/@roggnroll"
rel="noreferrer nofollow"
target="_blank"
aria-label="YouTube" on:click={() => sendClientEvent('open-social', document, {social: 'youtube'})}><i class="fa-brands fa-youtube"></i></a>
<a
href="mailto:[email protected]"
rel="noreferrer nofollow"
target="_blank"
class="mail"
aria-label="Mail" on:click={() => sendClientEvent('open-social', document, {social: 'mail'})}><i class="fa-solid fa-envelope"></i></a>
</div>
aria-label="LinkedIn"
on:click="{() => sendClientEvent('open-social', document, { social: 'linkedin' })}"
><i class="fa-brands fa-linkedin"></i></a>
</span>
<a
href="https://www.instagram.com/valentin_rogg/"
rel="noreferrer nofollow"
target="_blank"
aria-label="Instagram"
on:click="{() => sendClientEvent('open-social', document, { social: 'instagram' })}"
><i class="fa-brands fa-instagram"></i></a>
<a
href="https://www.youtube.com/@roggnroll"
rel="noreferrer nofollow"
target="_blank"
aria-label="YouTube"
on:click="{() => sendClientEvent('open-social', document, { social: 'youtube' })}"
><i class="fa-brands fa-youtube"></i></a>
<a
href="mailto:[email protected]"
rel="noreferrer nofollow"
target="_blank"
class="mail"
aria-label="Mail"
on:click="{() => sendClientEvent('open-social', document, { social: 'mail' })}"
><i class="fa-solid fa-envelope"></i></a>
</div>
</section>
</div>

<style lang="scss">
.overflow_hand {
position: relative;
}
.overflow_hand {
position: relative;
}
:global(img.emoji) {
height: 1em;
width: 1em;
margin: 0 0.05em 0 0.1em;
vertical-align: -0.1em;
}
.hand_arrow {
position: absolute;
bottom: 100%;
right: 0;
transform: translate(-4px, 0);
}
.hand_arrow {
position: absolute;
bottom: 100%;
right: 0;
transform: translate(-4px, 0);
}
.looking_for_cv {
position: absolute;
width: max-content;
.looking_for_cv {
position: absolute;
width: max-content;
font-size: 1.1rem;
bottom: 100%;
right: 0;
transform: translate(24px, -24px) rotateZ(-4deg);
transform-origin: right;
text-align: center;
line-height: 1;
}
bottom: 100%;
right: 0;
transform: translate(24px, -24px) rotateZ(-4deg);
transform-origin: right;
text-align: center;
line-height: 1;
}
</style>
2 changes: 1 addition & 1 deletion src/routes/+layout.server.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { LayoutServerLoad } from "./$types";
import { sendServerEvent } from "$lib/posthog";
export const load: LayoutServerLoad = ({url, cookies}) => {
if (!url.origin.includes("sveltekit")) sendServerEvent('$pageview', url, cookies);
if (!url.origin.includes("sveltekit") || !url.origin.includes("storyblok")) sendServerEvent('$pageview', url, cookies);
return;
}

0 comments on commit bf54b22

Please sign in to comment.