summaryrefslogtreecommitdiff
path: root/src/lib/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/components')
-rw-r--r--src/lib/components/Attributions.svelte56
-rw-r--r--src/lib/components/Header.svelte32
-rw-r--r--src/lib/components/Keys.svelte57
-rw-r--r--src/lib/components/Link.svelte10
-rw-r--r--src/lib/components/SectionTitle.svelte10
-rw-r--r--src/lib/components/ServiceCard.svelte45
-rw-r--r--src/lib/components/Services.svelte77
-rw-r--r--src/lib/components/SocialCard.svelte38
-rw-r--r--src/lib/components/Socials.svelte30
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>
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-16 15:40:52 +0000