initial commit

9 files changed, 355 insertions, 0 deletions

diff --git a/src/lib/components/Attributions.svelte b/src/lib/components/Attributions.svelte
new file mode 100644
index 0000000..7cdc5cc
--- /dev/null
+++ b/src/lib/components/Attributions.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import Link from "./Link.svelte";
+  import SectionTitle from "./SectionTitle.svelte";
+</script>
+
+<SectionTitle title="attributions"
+  >credits and sources for the content in this page</SectionTitle
+>
+
+<div
+  class="grid grid-cols-1 md:grid-cols-3 w-full gap-4
+  place-items-stretch place-content-stretch"
+>
+  <fieldset
+    class="fieldset bg-base-200 border-neutral
+	rounded-box border-2 p-4"
+  >
+    <legend class="text-xl md:text-2xl">stack</legend>
+    <ul class="text-md md:text-lg">
+      <li><Link href="https://svelte.dev">Svelte</Link></li>
+      <li>
+        <Link href="https://daisyui.com">daisyUI</Link>
+      </li>
+      <li><Link href="https://tailwindcss.com">tailwindcss</Link></li>
+    </ul>
+  </fieldset>
+  <fieldset
+    class="fieldset bg-base-200 border-neutral
+	rounded-box border-2 p-4"
+  >
+    <legend class="text-xl md:text-2xl">fonts</legend>
+    <ul class="text-md md:text-lg">
+      <li><Link href="https://www.departuremono.com">DEPARTURE MONO</Link></li>
+      <li>
+        <Link href="https://www.jetbrains.com/lp/mono">JetBrains Mono</Link>
+      </li>
+      <li><Link href="https://github.com/IBM/plex">IBM Plex Mono</Link></li>
+    </ul>
+  </fieldset>
+  <fieldset
+    class="fieldset bg-base-200 border-neutral
+	rounded-box border-2 p-4"
+  >
+    <legend class="text-xl md:text-2xl">assets</legend>
+    <ul class="text-md md:text-lg">
+      <li>
+        <Link href="https://www.emoji.family/api/emojis/1f431/noto/svg"
+          >Noto cat emoji</Link
+        >
+      </li>
+      <li>
+        <Link href="https://iconify.design">iconify</Link>
+      </li>
+    </ul>
+  </fieldset>
+</div>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
new file mode 100644
index 0000000..ab47dbe
--- /dev/null
+++ b/src/lib/components/Header.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import kitty from "$lib/assets/kitty.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={kitty}
+      class="w-15 md:w-25"
+      alt="the smiling noto cat emoji, with the colors modified such that the face and ears are a dark shade of pink, and the whiskers, eyes, mouth, inside of the ears, and nose, are a light shade of pink"
+    />
+    <h1 class="text-4xl md:text-6xl text-primary">toufy</h1>
+  </div>
+  <p class="text-lg md:text-2xl">
+    <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>
diff --git a/src/lib/components/Keys.svelte b/src/lib/components/Keys.svelte
new file mode 100644
index 0000000..9663cc1
--- /dev/null
+++ b/src/lib/components/Keys.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import SectionTitle from "./SectionTitle.svelte";
+  const ssh: string =
+    "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIN8CKkq7m/FPTqjAO3yGWhH7y+9flDjyNC9hQFenvbKs toufy";
+  const pgp: string = `-----BEGIN PGP PUBLIC KEY BLOCK-----
+mDMEaXaizxYJKwYBBAHaRw8BAQdARrftn56656s3XyW15b3DBMTcrvCvcRjOs53P
+tVsrsGC0EXRvdWZpYyBhciAodG91ZnkpiJAEExYKADgWIQRKDkdYNWjksRtcJVm7
+ozAX4p50+wUCaXaizwIbAwULCQgHAgYVCgkICwIEFgIDAQIeAQIXgAAKCRC7ozAX
+4p50+2gTAP9pFdyrNoOsOkdkcaBzIs9CZfkf38ZQsdi8vZsdXtquSAEAyaqVsXCN
+tpMn3/ax/034uY0wAVa9WluqWcvGK+jb7we4OARpdqLPEgorBgEEAZdVAQUBAQdA
+YQqEaD8/QXfS9rU471nhxbB1bHANd/NAG8TG1mJeLFkDAQgHiHgEGBYKACAWIQRK
+DkdYNWjksRtcJVm7ozAX4p50+wUCaXaizwIbDAAKCRC7ozAX4p50+3PEAP0abVGS
+7KLZCqJRjsRfhNP0IrveTuKrW5hckVu4GNgkCQEAtXHhO8Kj6l41m6v36AWddSUz
+iv6s3F2Wfm3pjizriQc=
+=w8/B
+-----END PGP PUBLIC KEY BLOCK-----`;
+</script>
+
+<SectionTitle title="keys">my public keys</SectionTitle>
+<div
+  class="flex flex-col w-auto max-w-full bg-base-300 p-4 rounded-md
+  self-start"
+>
+  <h3 class="flex flex-row place-items-center text-xl">
+    <span class="font-extrabold text-accent">SSH</span>
+    <button
+      title="copy"
+      id="sshCopyBtn"
+      class="font-extrabold text-secondary cursor-pointer
+	  active:text-primary"><span class="iconify-[fa7-regular--copy]"></span></button
+    >
+    <input type="hidden" id="sshKeyValue" value={ssh} />
+  </h3>
+  <pre class="bg-neutral p-2 my-2 rounded-md overflow-scroll"><code>{ssh}</code
+    ></pre>
+  <h3 class="flex flex-row place-items-center text-xl">
+    <span class="font-extrabold text-accent">PGP</span>
+    <button
+      title="copy"
+      id="pgpCopyBtn"
+      class="font-extrabold text-secondary cursor-pointer
+	  active:text-primary"><span class="iconify-[fa7-regular--copy]"></span></button
+    >
+    <input type="hidden" id="pgpKeyValue" value={pgp} />
+  </h3>
+  <pre class="bg-neutral p-2 my-2 rounded-md overflow-scroll"><code>{pgp}</code
+    ></pre>
+  <script>
+    function copyKey(key) {
+      navigator.clipboard.writeText(key);
+    }
+    document.getElementById("sshCopyBtn").onclick = () =>
+      copyKey(document.getElementById("sshKeyValue").value);
+    document.getElementById("pgpCopyBtn").onclick = () =>
+      copyKey(document.getElementById("pgpKeyValue").value);
+  </script>
+</div>
diff --git a/src/lib/components/Link.svelte b/src/lib/components/Link.svelte
new file mode 100644
index 0000000..97f976f
--- /dev/null
+++ b/src/lib/components/Link.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  const { href, children }: { href: string; children: any } = $props();
+</script>
+
+<a
+  class="text-accent hover:bg-accent hover:text-accent-content
+  selection:bg-accent! selection:text-accent-content!"
+  {href}
+  target="_blank">{@render children()}</a
+>
diff --git a/src/lib/components/SectionTitle.svelte b/src/lib/components/SectionTitle.svelte
new file mode 100644
index 0000000..4550050
--- /dev/null
+++ b/src/lib/components/SectionTitle.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  const { title, children }: { title: string; children: any } = $props();
+</script>
+
+<div class="w-full self-start">
+  <h2 class="text-2xl md:text-4xl text-primary">{title}</h2>
+  <p class="text-sm md:text-lg text-base-content m-2">
+    {@render children()}
+  </p>
+</div>
diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte
new file mode 100644
index 0000000..86cf2ed
--- /dev/null
+++ b/src/lib/components/ServiceCard.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import Link from "./Link.svelte";
+
+  const { service }: { service: App.ServiceItem } = $props();
+</script>
+
+<div
+  class="card bg-base-200 card-md md:card-lg shadow-md
+	border border-neutral my-1 md:mx-1"
+>
+  <div class="card-body">
+    <div class="card-title text-secondary">
+      <span class={service.icon}></span>
+      <h3>{service.name}</h3>
+    </div>
+    <div class="divider m-0 p-0"></div>
+    <p>{service.description}</p>
+    <div class="flex flex-row w-full h-full">
+      {#each service.references as reference}
+        <span class="mx-1"
+          ><Link href={reference.url}
+            >{reference.name}
+            <span class="iconify-[fa7-solid--arrow-up-right-from-square]"
+            ></span></Link
+          ></span
+        >
+      {/each}
+    </div>
+    <div class="divider m-0 p-0 invisible"></div>
+    <div class="card-actions justify-start">
+      <a
+        href={service.url}
+        target="_blank"
+        class="btn btn-outline btn-secondary"
+        >check <span class="iconify-[fa7-solid--chevron-right]"></span></a
+      >
+      <a
+        href={service.source}
+        target="_blank"
+        class="btn btn-ghost btn-secondary"
+        ><span class="iconify-[fa7-regular--file-code]"></span> source code</a
+      >
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/Services.svelte b/src/lib/components/Services.svelte
new file mode 100644
index 0000000..d291599
--- /dev/null
+++ b/src/lib/components/Services.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import ServiceCard from "./ServiceCard.svelte";
+  import SectionTitle from "./SectionTitle.svelte";
+
+  const services: App.ServiceItem[] = [
+    {
+      icon: "iconify-[fa7-brands--git-alt]",
+      name: "git",
+      description:
+        "cgit instance, all project repositories are accessible and available under free licenses",
+      source: "https://git.toufy.me/servers/tree/aphrodite/devops/git.nix",
+      url: "https://git.toufy.me",
+      references: [
+        { name: "git", url: "https://git-scm.com" },
+        { name: "cgit", url: "https://git.zx2c4.com/cgit/about" },
+        { name: "gitolite", url: "https://gitolite.com/gitolite" },
+      ],
+    },
+    {
+      icon: "iconify-[fa7-solid--search]",
+      name: "search",
+      description:
+        "my public searxng instance. no usage metrics. opinionated selection of engines; no LLMs, captchas, or censorship/far-right engines",
+      source: "https://git.toufy.me/servers/tree/aphrodite/search",
+      url: "https://search.toufy.me",
+      references: [{ name: "searxng", url: "https://searxng.org" }],
+    },
+    {
+      icon: "iconify-[fa7-brands--tor-browser]",
+      name: "tor",
+      description:
+        "a tor relay node and an embedded snowflake. open this page and keep the tab running in the background to spin up your own snowflake instance",
+      source: "https://git.toufy.me/servers/tree/adonis/tor",
+      url: "https://tor.toufy.me",
+      references: [
+        { name: "tor project", url: "https://torproject.org" },
+        { name: "snowflake", url: "https://snowflake.torproject.org" },
+      ],
+    },
+    {
+      icon: "iconify-[fa7-brands--arch-linux]",
+      name: "aur",
+      description:
+        "weekly builds of AUR packages (mostly for development) that i use, but if someone requests a package i might add it",
+      source: "https://git.toufy.me/taur",
+      url: "https://aur.toufy.me",
+      references: [{ name: "aur", url: "https://aur.archlinux.org" }],
+    },
+    {
+      icon: "iconify-[fa7-solid--wifi]",
+      name: "captive portal",
+      description:
+        "a telemetry-free captive portal check as an alternative to android's default 'connectivitycheck.gstatic.com' by google",
+      source:
+        "https://git.toufy.me/servers/tree/adonis/captiveportal/default.nix",
+      url: "https://cpc.toufy.me",
+      references: [
+        {
+          name: "captive portal detection",
+          url: "https://developer.android.com/about/versions/11/features/captive-portal#detection",
+        },
+      ],
+    },
+  ];
+</script>
+
+<SectionTitle title="public service">
+  a list of my public services;<br />
+  everything you can access/use is free (as in free speech and free beer)
+</SectionTitle>
+<div class="flex place-content-center place-items-center w-full">
+  <div class="grid grid-cols-1 md:grid-cols-3 w-fit">
+    {#each services as service}
+      <ServiceCard {service} />
+    {/each}
+  </div>
+</div>
diff --git a/src/lib/components/SocialCard.svelte b/src/lib/components/SocialCard.svelte
new file mode 100644
index 0000000..f34eb75
--- /dev/null
+++ b/src/lib/components/SocialCard.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  const {
+    name,
+    icon,
+    href,
+    rel,
+  }: {
+    name: string;
+    icon: string;
+    href: string;
+    rel?: string | null | undefined;
+  } = $props();
+</script>
+
+<a
+  class="card shadow-md border border-neutral my-1 mx-1 socialhover p-2"
+  {rel}
+  {href}
+  target="_blank"
+  title={name}
+>
+  <span class="text-3xl md:text-6xl {icon}"></span>
+</a>
+
+<style>
+  .socialhover {
+    span {
+      color: var(--color-fg);
+    }
+  }
+  .socialhover:hover,
+  .socialhover:active {
+    background-color: var(--color-fg);
+    span {
+      color: var(--color-bg);
+    }
+  }
+</style>
diff --git a/src/lib/components/Socials.svelte b/src/lib/components/Socials.svelte
new file mode 100644
index 0000000..c616405
--- /dev/null
+++ b/src/lib/components/Socials.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import SectionTitle from "./SectionTitle.svelte";
+  import SocialCard from "./SocialCard.svelte";
+</script>
+
+<SectionTitle title="socials">places you can find me</SectionTitle>
+<div class="flex place-content-start place-items-start w-full">
+  <SocialCard
+    name="mastodon"
+    icon="iconify-[fa7-brands--mastodon]"
+    rel="me"
+    href="https://beige.party/@toufy"
+    --color-fg="#6364ff"
+    --color-bg="#ffffff"
+  />
+  <SocialCard
+    name="email"
+    icon="iconify-[fa7-solid--envelope]"
+    href="mailto:contact@toufy.me"
+    --color-fg="gray"
+    --color-bg="#ffffff"
+  />
+  <SocialCard
+    name="tmdb"
+    icon="iconify-[cib--the-movie-database]"
+    href="https://www.themoviedb.org/u/toufy"
+    --color-fg="#0177d2"
+    --color-bg="#ffffff"
+  />
+</div>