Add retry button to notfound and make another easter egg!

manifest.json

@@ -10,7 +10,7 @@
   "theme_color": "#120f1d",
   "icons": [
     {
-      "src": "public/android-chrome-192x192.png",
+      "src": "/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any"
@@ -22,7 +22,7 @@
       "purpose": "any"
     },
     {
-      "src": "public/android-chrome-192x192.png",
+      "src": "/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"

src/assets/locales/en.json

@@ -177,6 +177,7 @@
   "notFound": {
     "badge": "Not found",
     "goHome": "Back to home",
+    "reloadButton": "Try again",
     "message": "We looked everywhere: under the bins, in the closet, behind the proxy but ultimately couldn't find the page you are looking for. (ಥ﹏ಥ)",
     "title": "Couldn't find that page"
   },

src/components/utils/Lightbar.tsx

@@ -32,7 +32,7 @@ class Particle {
     canvas: HTMLCanvasElement,
     options: LightbarOptions = {
       horizontalMotion: false,
-      sizeRange: [10, 10],
+      sizeRange: [10, 15],
     },
   ) {
     if (options.imgSrc) {
@@ -54,7 +54,7 @@ class Particle {
     this.direction = (Math.random() * Math.PI) / 2 + Math.PI / 4;
     this.speed = 0.02 + Math.random() * 0.085;
 
-    const second = 60;
+    const second = 75;
     this.lifetime = second * 3 + Math.random() * (second * 30);
 
     this.size = this.options.sizeRange
@@ -220,7 +220,7 @@ function ParticlesCanvas() {
     }
 
     // Kitty easter egg
-    const shouldShowCat = Math.random() < 0.3; // 30%
+    const shouldShowCat = Math.random() < 0.25; // 25%
     if (shouldShowCat) {
       imageOverride = [
         {
@@ -244,7 +244,7 @@ function ParticlesCanvas() {
           sizeRange: [18, 27] as [number, number],
         },
       ];
-      imageParticleCount = particleCount / 7.5;
+      imageParticleCount = particleCount / 7.85;
     }
 
     // Chicken easter egg
@@ -267,6 +267,22 @@ function ParticlesCanvas() {
       imageParticleCount = particleCount / 9;
     }
 
+    // Dev easter egg
+    const shouldShowCode = Math.random() < 0.9; // 25%
+    if (shouldShowCode) {
+      imageOverride = [
+        {
+          image: "/lightbar-images/ts.png",
+          sizeRange: [20, 32] as [number, number],
+        },
+        {
+          image: "/lightbar-images/git.png",
+          sizeRange: [20, 28] as [number, number],
+        },
+      ];
+      imageParticleCount = particleCount / 9;
+    }
+
     // HOIST THE SAIL (of particles)!
     for (let i = 0; i < particleCount; i += 1) {
       const isImageParticle = imageOverride && i <= imageParticleCount;

src/pages/parts/errors/NotFoundPart.tsx

@@ -24,14 +24,24 @@ export function NotFoundPart() {
             <IconPill icon={Icons.EYE_SLASH}>{t("notFound.badge")}</IconPill>
             <Title>{t("notFound.title")}</Title>
             <Paragraph>{t("notFound.message")}</Paragraph>
-            <Button
+            <div className="flex gap-3">
-              href="/"
+              <Button
-              theme="purple"
+                href="/"
-              padding="md:px-12 p-2.5"
+                theme="secondary"
-              className="mt-6"
+                padding="md:px-12 p-2.5"
-            >
+                className="mt-6"
-              {t("notFound.goHome")}
+              >
-            </Button>
+                {t("notFound.goHome")}
+              </Button>
+              <Button
+                onClick={() => window.location.reload()}
+                theme="purple"
+                padding="md:px-12 p-2.5"
+                className="mt-6"
+              >
+                {t("notFound.reloadButton")}
+              </Button>
+            </div>
           </ErrorContainer>
         </ErrorLayout>
       </div>