noob

abhijeetunreal · abhijeetunreal · commit 2b4b977539ac · 2026-01-27T17:20:32.000+05:30
diff --git a/data/history.yaml b/data/history.yaml
@@ -1,4 +1,10 @@
 history:
+  - date: "27 January 2026"
+    title: "Noob FONT"
+    description: "A font generator for people who don't know typography, don't want to learn typography, and just want something that looks fine. "
+    link: "/font/"
+    accent_color: "#0288D5"
+
   - date: "24 January 2026"
     title: "ESP32CAM"
     description: "A WiFi-enabled photo management system for ESP32-CAM with REST API, SD Card storage, live streaming, and web control panel."
diff --git a/data/home.yaml b/data/home.yaml
@@ -7,6 +7,9 @@ categories:
       - name: "ESP32CAM"
         icon: "cfd-esp32cam"
         url: "/Esp32cam/"
+      - name: "Noob FONT"
+        icon: "cfd-font"
+        url: "/font/"
       - name: "Art"
         icon: "cfd-art"
         url: "/designlab/"
diff --git a/static/images/home/cfd-font.svg b/static/images/home/cfd-font.svg
@@ -0,0 +1,52 @@
+<svg width="64" height="64" viewBox="0 0 64 64"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="64" height="64" rx="16" fill="#FFD400"/>
+
+  <!-- RIGHT EYE (static) -->
+  <circle cx="42" cy="26" r="4" fill="#000"/>
+
+  <!-- LEFT EYE -->
+  <circle cx="22" cy="26" r="4" fill="#000">
+    <!-- shrink -->
+    <animate attributeName="r"
+             values="4;0;0;4"
+             keyTimes="0;0.25;0.5;1"
+             dur="2s"
+             repeatCount="indefinite"/>
+    <animate attributeName="opacity"
+             values="1;0;0;1"
+             keyTimes="0;0.25;0.5;1"
+             dur="2s"
+             repeatCount="indefinite"/>
+  </circle>
+
+  <!-- f appears where eye was -->
+  <text x="18" y="32"
+        font-size="20"
+        font-weight="900"
+        fill="#000"
+        font-family="Inter, Arial, sans-serif"
+        opacity="0">
+    f
+    <animate attributeName="opacity"
+             values="0;1;1;0"
+             keyTimes="0;0.25;0.5;1"
+             dur="2s"
+             repeatCount="indefinite"/>
+    <animateTransform
+      attributeName="transform"
+      type="scale"
+      values="0.5;1;1;0.5"
+      keyTimes="0;0.25;0.5;1"
+      dur="2s"
+      repeatCount="indefinite"/>
+  </text>
+
+  <!-- MOUTH -->
+  <path d="M24 40H40"
+        stroke="#000"
+        stroke-width="4"
+        stroke-linecap="round"/>
+
+</svg>
