summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/assets/favicon.icobin0 -> 302430 bytes
-rw-r--r--src/lib/assets/kitty.pngbin0 -> 8013884 bytes
-rw-r--r--src/lib/assets/kitty.svg114
-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
-rw-r--r--src/lib/index.ts1
13 files changed, 470 insertions, 0 deletions
diff --git a/src/lib/assets/favicon.ico b/src/lib/assets/favicon.ico
new file mode 100644
index 0000000..6c4fa09
--- /dev/null
+++ b/src/lib/assets/favicon.ico
Binary files differ
diff --git a/src/lib/assets/kitty.png b/src/lib/assets/kitty.png
new file mode 100644
index 0000000..a68fa01
--- /dev/null
+++ b/src/lib/assets/kitty.png
Binary files differ
diff --git a/src/lib/assets/kitty.svg b/src/lib/assets/kitty.svg
new file mode 100644
index 0000000..5e8a5be
--- /dev/null
+++ b/src/lib/assets/kitty.svg
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ version="1.1"
+ id="Layer_2"
+ x="0px"
+ y="0px"
+ viewBox="0 0 128 128"
+ style="enable-background:new 0 0 128 128;"
+ xml:space="preserve"
+ sodipodi:docname="kitty.svg"
+ inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+ inkscape:export-filename="kitty.png"
+ inkscape:export-xdpi="750"
+ inkscape:export-ydpi="750"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+ id="namedview1"
+ pagecolor="#505050"
+ bordercolor="#eeeeee"
+ borderopacity="1"
+ inkscape:showpageshadow="0"
+ inkscape:pageopacity="0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#505050"
+ showgrid="false"
+ inkscape:zoom="4.0834165"
+ inkscape:cx="55.713151"
+ inkscape:cy="77.875965"
+ inkscape:window-width="1534"
+ inkscape:window-height="841"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Layer_2" /><defs
+ id="defs17" />
+<path
+ style="fill:#ffa1ad;fill-opacity:1"
+ d="M114.67,70.19C112.71,44.22,94.44,26.3,64,26.3S15.25,45.33,13.45,71.31 c-1.05,15.14,4.58,28.63,15.91,36.32c7.46,5.07,17.88,7.88,34.77,7.88c17.18,0,27.03-3.71,34.49-8.73 C111.05,98.43,115.8,85.11,114.67,70.19z"
+ id="path1" />
+
+<path
+ style="enable-background:new 0 0 128 128;fill:#ffa1ad;fill-opacity:1"
+ d="M53.72,42.6C46.3,23.4,30.1,10.34,23.87,8.39c-2.35-0.74-5.3-0.81-6.63,1.35 c-3.36,5.45-7.66,22.95,1.85,47.78L53.72,42.6z"
+ id="path2" /><path
+ style="enable-background:new 0 0 128 128;fill:#feccd2;fill-opacity:1"
+ d="M36.12,34.21c1.54-1.29,2.29-2.55,0.6-5.16c-2.62-4.05-7.33-8.78-9.16-10.23 c-3-2.38-5.32-3.18-6.21,0.65c-1.65,7.08-1.52,16.69,0.25,21.99c0.62,1.87,2.54,2.86,4.02,1.57L36.12,34.21z"
+ id="path3" /><path
+ style="fill:#feccd2;fill-opacity:1"
+ d="M54.12,45.02c1.13,0.96,3.42,0.82,4.75-0.72c1.61-1.87,3.29-8.17,2.24-17.91 c-4.67,0.17-9.09,0.84-13.21,1.97C51.23,33.82,52.03,43.24,54.12,45.02z"
+ id="path4" />
+<path
+ style="fill:#feccd2;fill-opacity:1"
+ d="M73.88,45.02c-1.13,0.96-3.42,0.82-4.75-0.72c-1.61-1.87-3.29-8.17-2.24-17.91 c4.67,0.17,9.09,0.84,13.21,1.97C76.77,33.82,75.97,43.24,73.88,45.02z"
+ id="path5" />
+
+
+<path
+ style="enable-background:new 0 0 128 128;fill:#ffa1ad;fill-opacity:1"
+ d="M79.9,29.22c8.08-12.41,19.38-20.75,24.07-22.24c2.32-0.74,5.02-0.62,6.34,1.55 c3.32,5.45,6.13,22.24-0.42,45.75L85.96,42.74L79.9,29.22z"
+ id="path6" /><path
+ style="enable-background:new 0 0 128 128;fill:#feccd2;fill-opacity:1"
+ d="M97.55,38.23c2.43,2.43,4.41,4.06,5.84,5.61c0.95,1.03,2.69,0.56,2.97-0.82 c2.45-11.8,1.67-21.86,0-24.5c-0.8-1.26-2.29-1.59-3.65-1.13c-2.44,0.81-8.66,5.45-13.05,12.22c-0.51,0.79-0.32,1.85,0.46,2.38 C91.7,33.06,94.46,35.13,97.55,38.23z"
+ id="path7" />
+
+<g
+ id="g11"
+ style="enable-background:new 0 0 128 128;fill:none;stroke:#feccd2;stroke-opacity:1">
+ <path
+ style="fill:none;stroke:#feccd2;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;stroke-opacity:1"
+ d="M6.7,71.03 c0.34,0.41,4.41,0.35,14.36,5.07"
+ id="path9" />
+ <path
+ style="fill:none;stroke:#feccd2;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;stroke-opacity:1"
+ d="M2.9,82.86 c0,0,6.42-2.24,17.46-0.28"
+ id="path10" />
+ <path
+ style="fill:none;stroke:#feccd2;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;stroke-opacity:1"
+ d="M8.81,92.29 c0,0,2.74-1.38,12.67-2.25"
+ id="path11" />
+ </g><g
+ id="g14"
+ style="enable-background:new 0 0 128 128;fill:none;stroke:#feccd2;stroke-opacity:1">
+ <path
+ style="fill:none;stroke:#feccd2;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;stroke-opacity:1"
+ d="M120.87,67.51 c0,0-3.41,0.33-13.94,6.34"
+ id="path12" />
+ <path
+ style="fill:none;stroke:#feccd2;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;stroke-opacity:1"
+ d="M122.42,78.49 c0,0-5.09-0.36-16.05,1.97"
+ id="path13" />
+ <path
+ style="fill:none;stroke:#feccd2;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;stroke-opacity:1"
+ d="M120.45,89.05 c0,0-4.83-1.71-14.78-2.25"
+ id="path14" />
+ </g><path
+ style="fill:#feccd2;fill-opacity:1"
+ d="M96.09,66.37c-0.34,5.51-3.76,8.54-7.65,8.54s-7.04-3.88-7.04-8.66c0-4.78,3.28-8.71,7.65-8.47 C94.12,58.07,96.37,61.87,96.09,66.37z"
+ id="path15" />
+<path
+ style="fill:#feccd2;fill-opacity:1"
+ d="M46,65.81c0.78,5.61-1.58,9.03-5.49,9.82c-3.91,0.79-7.26-1.84-8.23-6.64 c-0.98-4.81,0.9-9.32,5.34-9.97C42.77,58.27,45.36,61.22,46,65.81z"
+ id="path16" />
+<path
+ d="m 44.989996,85.160003 c -2.57,1.67 0.47,5.54 2.25,6.85 1.78,1.31 4.98,2.92 9.670005,2.44 5.54,-0.56 7.13,-4.69 7.13,-4.69 0,0 1.97,4.6 8.82,4.79 6.950002,0.19 9.100002,-3.57 10.040002,-4.69 0.94,-1.13 1.88,-4.04 0.28,-5.16 -1.6,-1.13 -2.72,0.28 -4.41,2.63 -1.69,2.35 -5.160002,3.66 -8.540002,2.06 -3.38,-1.6 -3.57,-7.04 -3.57,-7.04 l -4.79,0.28 c 0,0 -0.75,4.69 -2.91,6.19 -2.16,1.5 -7.320005,1.88 -9.480005,-1.41 -0.95,-1.46 -2.33,-3.66 -4.49,-2.25 z"
+ id="path17"
+ style="display:inline;fill:#feccd2;fill-opacity:1;stroke:none" /><path
+ d="M55.67,77.75c-0.05-3.08,4.37-4.55,8.54-4.62c4.18-0.07,8.68,1.29,8.73,4.37c0.05,3.08-5.22,7.13-8.54,7.13 C61.09,84.63,55.73,80.82,55.67,77.75z"
+ id="path8"
+ style="enable-background:new 0 0 128 128;stroke-width:1.0015748;stroke-dasharray:none;stroke:none;fill:#feccd2;fill-opacity:1;stroke-opacity:1" />
+</svg>
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>
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..856f2b6
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-16 15:40:52 +0000