branding

8 files changed, 26 insertions, 127 deletions

diff --git a/src/lib/assets/banner.png b/src/lib/assets/banner.png
new file mode 100644
index 0000000..9dd50bf
--- /dev/null
+++ b/src/lib/assets/banner.png
diff --git a/src/lib/assets/favicon.ico b/src/lib/assets/favicon.ico
index 6c4fa09..1a5f054 100644
--- a/src/lib/assets/favicon.ico
+++ b/src/lib/assets/favicon.ico
diff --git a/src/lib/assets/kitty.svg b/src/lib/assets/kitty.svg
deleted file mode 100644
index 5e8a5be..0000000
--- a/src/lib/assets/kitty.svg
+++ /dev/null
@@ -1,114 +0,0 @@
-<?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/assets/kitty.png b/src/lib/assets/logo.png
index a68fa01..fd36099 100644
--- a/src/lib/assets/kitty.png
+++ b/src/lib/assets/logo.png
diff --git a/src/lib/components/Attributions.svelte b/src/lib/components/Attributions.svelte
index 7cdc5cc..f0edcdc 100644
--- a/src/lib/components/Attributions.svelte
+++ b/src/lib/components/Attributions.svelte
@@ -44,11 +44,6 @@
     <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>
diff --git a/src/lib/components/Banner.svelte b/src/lib/components/Banner.svelte
new file mode 100644
index 0000000..7d93aa9
--- /dev/null
+++ b/src/lib/components/Banner.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import banner from "$lib/assets/banner.png";
+</script>
+
+<div class="flex flex-row place-items-center place-content-center">
+  <img
+    src={banner}
+    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>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index ab47dbe..61ba194 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import kitty from "$lib/assets/kitty.png";
+  import logo from "$lib/assets/logo.png";
   import Link from "./Link.svelte";
 </script>
 
@@ -9,17 +9,19 @@
 >
   <div class="flex flex-row place-items-center place-content-center">
     <img
-      src={kitty}
+      src={logo}
       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"
+      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."
     />
-    <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
+    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"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ee6bdd5..1a3a0b6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,6 +5,7 @@
   import Keys from "$lib/components/Keys.svelte";
   import Services from "$lib/components/Services.svelte";
   import Projects from "$lib/components/Projects.svelte";
+  import Banner from "$lib/components/Banner.svelte";
 </script>
 
 <div class="flex flex-col w-full place-content-center place-items-center">
@@ -23,5 +24,7 @@
     <Socials />
     <div class="divider"></div>
     <Attributions />
+    <div class="h-12.5"></div>
+    <Banner />
   </div>
 </div>