summaryrefslogtreecommitdiff
path: root/src/lib/components/Header.svelte
blob: a6a77f7c0ccdff4dd6cbf8b62592feb1b3591540 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script lang="ts">
  import banner from "$lib/assets/banner.png";
  import Link from "./Link.svelte";
</script>

<div
  class="flex flex-col my-4 p-4 card shadow-lg bg-base-200
	place-items-center place-content-center w-full text-center"
>
  <div class="flex flex-row place-items-center place-content-center">
    <img
      src={banner}
      class="max-h-10 md:max-h-25"
      alt="a cartoonish light pink cat face, with big eyes and sharp ears. 
		the eyes are white with dark pink pupils.
		the cat is happy, sticking its tongue out.
		next to the cat face is the word 'toufy' in the 'Lilita One' font."
    />
  </div>
  <p class="text-lg md:text-2xl">
    i'm a <Link href="https://en.wikipedia.org/wiki/Palestinians"
      >palestinian</Link
    > software engineer, tinkerer, linux enjoyer, privacy & security enthusiast, and
    free software advocate <Link
      href="https://en.wikipedia.org/wiki/Palestinian_refugees">refuged</Link
    > in <Link href="https://en.wikipedia.org/wiki/Lebanon">lebanon</Link>
    <br />
    <span class="badge badge-sm md:badge-lg p-4 m-2 badge-dash"
      ><Link href="https://en.wikipedia.org/wiki/Anarchist_communism"
        >anarcho-communist</Link
      ><span class="divider"></span>
      <Link href="https://en.wikipedia.org/wiki/Straight_ally">ally</Link></span
    >
  </p>
</div>