added link to bigfoot tracker

src/app/routing.tsx

@@ -11,6 +11,7 @@ import {
   PIXIJS_URL,
   BABYLONJS_URL,
   PLAIN_WEBGL_URL,
+  BIGFOOT_MAP_URL,
 } from "src/utilities/constants";
 
 import Homepage from "src/features/homepage/homepage.component";
@@ -49,6 +50,9 @@ const HexTiles = () => (
 const PlainWebGL = () => (
   <IFrame aspect={16 / 10} url={PLAIN_WEBGL_URL} title={"hex tiles"} />
 );
+const BigfootMap = () => (
+  <IFrame aspect={16 / 10} url={BIGFOOT_MAP_URL} title={"bigfoot sightings"} />
+);
 
 export type RouteDefinition = {
   path: string;
@@ -76,6 +80,7 @@ export const ROUTES: RouteDefinition[] = [
       { path: "platformer", Component: Platformer },
       { path: "hex_tiles", Component: HexTiles },
       { path: "webgl", Component: PlainWebGL },
+      { path: "bigfoot", Component: BigfootMap },
       {
         path: "shaders",
         Component: Shaders,

src/features/projects/projects.component.tsx

@@ -12,6 +12,7 @@ import pixijs from "src/assets/svg/pixijs.svg";
 import babylonjs from "src/assets/svg/babylonjs.svg";
 import arrow from "src/assets/svg/arrow.svg";
 import webgl from "src/assets/svg/webgl.svg";
+import bigfoot from "src/assets/svg/bigfoot.svg";
 
 import styles from "./projects.module.scss";
 
@@ -21,7 +22,7 @@ const PROJECTS: ProjectCard[] = [
   {
     svg: figrid,
     primary: "figrid.io",
-    secondary: "remix, mysql, radix ui",
+    secondary: "remix, radix ui",
     route: "/projects/figrid",
   },
   {
@@ -30,6 +31,12 @@ const PROJECTS: ProjectCard[] = [
     secondary: "webgl, regl.js, GLSL",
     route: "/projects/shaders/assorted",
   },
+  {
+    svg: bigfoot,
+    primary: "bigfoot",
+    secondary: "deck.gl, maplibreGL",
+    route: "/projects/bigfoot",
+  },
   {
     svg: hex_tiles,
     primary: "hex tiles",
@@ -87,7 +94,12 @@ const ProjectList = (projects: ProjectCard[]) => {
     <section className={styles.projects}>
       {projects.map(({ route, ...props }, index) =>
         route === "/projects" ? (
-          <CardAction key={index} onClick={() => navigate(route)} {...props} />
+          <CardAction
+            className={styles.see_more}
+            key={index}
+            onClick={() => navigate(route)}
+            {...props}
+          />
         ) : (
           <Card key={index} onClick={() => navigate(route)} {...props} />
         )
@@ -97,7 +109,7 @@ const ProjectList = (projects: ProjectCard[]) => {
 };
 
 export const ProjectsMini = () =>
-  ProjectList([...PROJECTS.slice(0, 3), MORE_PROJECTS]);
+  ProjectList([...PROJECTS.slice(0, 4), MORE_PROJECTS]);
 
 const Projects = () => ProjectList(PROJECTS);
 

src/features/projects/projects.module.scss

@@ -11,17 +11,16 @@
   }
 
   @include is_larger_than($md-breakpoint) {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   }
 }
 
 .see_more {
-  @include themed() {
-    box-shadow: 0 0 0 2px rgba(t($color-quaternary), 0.2);
+  @include is_larger_than($sm_breakpoint) {
+    grid-column: span 2;
   }
 
-  h4 {
-    text-align: center;
-    font-size: 1rem;
+  @include is_larger_than($md-breakpoint) {
+    grid-column: span 1;
   }
 }

src/utilities/constants.ts

@@ -11,6 +11,7 @@ export const BREAKOUT_URL = `${SITE_BASE_URL}breakout`;
 export const PLATFORMER_URL = `${SITE_BASE_URL}platformer`;
 export const HEX_TILES_URL = `${SITE_BASE_URL}hex_tiles`;
 export const PLAIN_WEBGL_URL = `${SITE_BASE_URL}plain_webgl`;
+export const BIGFOOT_MAP_URL = `${SITE_BASE_URL}deckgl_experiment`;
 export const PIXIJS_URL = `${SITE_BASE_URL}pixijs_runner`;
 export const BABYLONJS_URL = `${SITE_BASE_URL}babylonjs_runner`;
 export const BEVY_SKETCHES_URL = `${SITE_BASE_URL}bevy_sketches`;