intro to me slide

8 files changed, 408 insertions, 1481 deletions

diff --git a/public/img/me.png b/public/img/me.png
new file mode 100644
index 0000000..7090360
--- /dev/null
+++ b/public/img/me.png
diff --git a/src/global.css b/src/global.css
new file mode 100644
index 0000000..b271252
--- /dev/null
+++ b/src/global.css
@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap");
diff --git a/src/palette.ts b/src/palette.ts
index 4315132..af1017b 100644
--- a/src/palette.ts
+++ b/src/palette.ts
@@ -1,1483 +1,367 @@
 /* https://raw.githubusercontent.com/catppuccin/palette/main/palette.json */
 export const palette = {
-  latte: {
-    name: "Latte",
-    dark: false,
-    colors: {
-      rosewater: {
-        hex: "#dc8a78",
-        rgb: {
-          r: 220,
-          g: 138,
-          b: 120,
-        },
-        hsl: {
-          h: 10.799999999999995,
-          s: 0.5882352941176472,
-          l: 0.6666666666666667,
-        },
-        accent: true,
-      },
-      flamingo: {
-        hex: "#dd7878",
-        rgb: {
-          r: 221,
-          g: 120,
-          b: 120,
-        },
-        hsl: {
-          h: 0,
-          s: 0.5976331360946746,
-          l: 0.6686274509803922,
-        },
-        accent: true,
-      },
-      pink: {
-        hex: "#ea76cb",
-        rgb: {
-          r: 234,
-          g: 118,
-          b: 203,
-        },
-        hsl: {
-          h: 316.0344827586207,
-          s: 0.7341772151898731,
-          l: 0.6901960784313725,
-        },
-        accent: true,
-      },
-      mauve: {
-        hex: "#8839ef",
-        rgb: {
-          r: 136,
-          g: 57,
-          b: 239,
-        },
-        hsl: {
-          h: 266.0439560439561,
-          s: 0.8504672897196262,
-          l: 0.5803921568627451,
-        },
-        accent: true,
-      },
-      red: {
-        hex: "#d20f39",
-        rgb: {
-          r: 210,
-          g: 15,
-          b: 57,
-        },
-        hsl: {
-          h: 347.0769230769231,
-          s: 0.8666666666666666,
-          l: 0.4411764705882353,
-        },
-        accent: true,
-      },
-      maroon: {
-        hex: "#e64553",
-        rgb: {
-          r: 230,
-          g: 69,
-          b: 83,
-        },
-        hsl: {
-          h: 354.78260869565213,
-          s: 0.76303317535545,
-          l: 0.5862745098039216,
-        },
-        accent: true,
-      },
-      peach: {
-        hex: "#fe640b",
-        rgb: {
-          r: 254,
-          g: 100,
-          b: 11,
-        },
-        hsl: {
-          h: 21.975308641975307,
-          s: 0.9918367346938776,
-          l: 0.5196078431372549,
-        },
-        accent: true,
-      },
-      yellow: {
-        hex: "#df8e1d",
-        rgb: {
-          r: 223,
-          g: 142,
-          b: 29,
-        },
-        hsl: {
-          h: 34.948453608247426,
-          s: 0.7698412698412698,
-          l: 0.49411764705882355,
-        },
-        accent: true,
-      },
-      green: {
-        hex: "#40a02b",
-        rgb: {
-          r: 64,
-          g: 160,
-          b: 43,
-        },
-        hsl: {
-          h: 109.23076923076923,
-          s: 0.5763546798029556,
-          l: 0.39803921568627454,
-        },
-        accent: true,
-      },
-      teal: {
-        hex: "#179299",
-        rgb: {
-          r: 23,
-          g: 146,
-          b: 153,
-        },
-        hsl: {
-          h: 183.23076923076923,
-          s: 0.7386363636363636,
-          l: 0.34509803921568627,
-        },
-        accent: true,
-      },
-      sky: {
-        hex: "#04a5e5",
-        rgb: {
-          r: 4,
-          g: 165,
-          b: 229,
-        },
-        hsl: {
-          h: 197.0666666666667,
-          s: 0.965665236051502,
-          l: 0.45686274509803926,
-        },
-        accent: true,
-      },
-      sapphire: {
-        hex: "#209fb5",
-        rgb: {
-          r: 32,
-          g: 159,
-          b: 181,
-        },
-        hsl: {
-          h: 188.85906040268458,
-          s: 0.6995305164319249,
-          l: 0.4176470588235294,
-        },
-        accent: true,
-      },
-      blue: {
-        hex: "#1e66f5",
-        rgb: {
-          r: 30,
-          g: 102,
-          b: 245,
-        },
-        hsl: {
-          h: 219.90697674418607,
-          s: 0.9148936170212768,
-          l: 0.5392156862745098,
-        },
-        accent: true,
-      },
-      lavender: {
-        hex: "#7287fd",
-        rgb: {
-          r: 114,
-          g: 135,
-          b: 253,
-        },
-        hsl: {
-          h: 230.93525179856115,
-          s: 0.9720279720279721,
-          l: 0.7196078431372549,
-        },
-        accent: true,
-      },
-      text: {
-        hex: "#4c4f69",
-        rgb: {
-          r: 76,
-          g: 79,
-          b: 105,
-        },
-        hsl: {
-          h: 233.79310344827587,
-          s: 0.16022099447513813,
-          l: 0.3549019607843137,
-        },
-        accent: false,
-      },
-      subtext1: {
-        hex: "#5c5f77",
-        rgb: {
-          r: 92,
-          g: 95,
-          b: 119,
-        },
-        hsl: {
-          h: 233.33333333333334,
-          s: 0.1279620853080569,
-          l: 0.4137254901960784,
-        },
-        accent: false,
-      },
-      subtext0: {
-        hex: "#6c6f85",
-        rgb: {
-          r: 108,
-          g: 111,
-          b: 133,
-        },
-        hsl: {
-          h: 232.79999999999998,
-          s: 0.10373443983402494,
-          l: 0.4725490196078431,
-        },
-        accent: false,
-      },
-      overlay2: {
-        hex: "#7c7f93",
-        rgb: {
-          r: 124,
-          g: 127,
-          b: 147,
-        },
-        hsl: {
-          h: 232.17391304347825,
-          s: 0.09623430962343092,
-          l: 0.5313725490196078,
-        },
-        accent: false,
-      },
-      overlay1: {
-        hex: "#8c8fa1",
-        rgb: {
-          r: 140,
-          g: 143,
-          b: 161,
-        },
-        hsl: {
-          h: 231.42857142857144,
-          s: 0.10047846889952144,
-          l: 0.5901960784313726,
-        },
-        accent: false,
-      },
-      overlay0: {
-        hex: "#9ca0b0",
-        rgb: {
-          r: 156,
-          g: 160,
-          b: 176,
-        },
-        hsl: {
-          h: 228.00000000000003,
-          s: 0.11235955056179768,
-          l: 0.6509803921568628,
-        },
-        accent: false,
-      },
-      surface2: {
-        hex: "#acb0be",
-        rgb: {
-          r: 172,
-          g: 176,
-          b: 190,
-        },
-        hsl: {
-          h: 226.6666666666667,
-          s: 0.12162162162162159,
-          l: 0.7098039215686275,
-        },
-        accent: false,
-      },
-      surface1: {
-        hex: "#bcc0cc",
-        rgb: {
-          r: 188,
-          g: 192,
-          b: 204,
-        },
-        hsl: {
-          h: 225.00000000000003,
-          s: 0.13559322033898308,
-          l: 0.7686274509803922,
-        },
-        accent: false,
-      },
-      surface0: {
-        hex: "#ccd0da",
-        rgb: {
-          r: 204,
-          g: 208,
-          b: 218,
-        },
-        hsl: {
-          h: 222.85714285714292,
-          s: 0.1590909090909089,
-          l: 0.8274509803921568,
-        },
-        accent: false,
-      },
-      base: {
-        hex: "#eff1f5",
-        rgb: {
-          r: 239,
-          g: 241,
-          b: 245,
-        },
-        hsl: {
-          h: 220.00000000000009,
-          s: 0.23076923076923136,
-          l: 0.9490196078431372,
-        },
-        accent: false,
-      },
-      mantle: {
-        hex: "#e6e9ef",
-        rgb: {
-          r: 230,
-          g: 233,
-          b: 239,
-        },
-        hsl: {
-          h: 220.00000000000006,
-          s: 0.21951219512195116,
-          l: 0.919607843137255,
-        },
-        accent: false,
-      },
-      crust: {
-        hex: "#dce0e8",
-        rgb: {
-          r: 220,
-          g: 224,
-          b: 232,
-        },
-        hsl: {
-          h: 220.00000000000006,
-          s: 0.20689655172413762,
-          l: 0.8862745098039215,
-        },
-        accent: false,
-      },
+  rosewater: {
+    hex: "#f5e0dc",
+    rgb: {
+      r: 245,
+      g: 224,
+      b: 220,
     },
+    hsl: {
+      h: 9.599999999999968,
+      s: 0.555555555555556,
+      l: 0.911764705882353,
+    },
+    accent: true,
+  },
+  flamingo: {
+    hex: "#f2cdcd",
+    rgb: {
+      r: 242,
+      g: 205,
+      b: 205,
+    },
+    hsl: {
+      h: 0,
+      s: 0.587301587301587,
+      l: 0.8764705882352941,
+    },
+    accent: true,
+  },
+  pink: {
+    hex: "#f5c2e7",
+    rgb: {
+      r: 245,
+      g: 194,
+      b: 231,
+    },
+    hsl: {
+      h: 316.4705882352941,
+      s: 0.7183098591549301,
+      l: 0.8607843137254902,
+    },
+    accent: true,
+  },
+  mauve: {
+    hex: "#cba6f7",
+    rgb: {
+      r: 203,
+      g: 166,
+      b: 247,
+    },
+    hsl: {
+      h: 267.4074074074074,
+      s: 0.8350515463917528,
+      l: 0.8098039215686275,
+    },
+    accent: true,
+  },
+  red: {
+    hex: "#f38ba8",
+    rgb: {
+      r: 243,
+      g: 139,
+      b: 168,
+    },
+    hsl: {
+      h: 343.2692307692308,
+      s: 0.8124999999999998,
+      l: 0.7490196078431373,
+    },
+    accent: true,
+  },
+  maroon: {
+    hex: "#eba0ac",
+    rgb: {
+      r: 235,
+      g: 160,
+      b: 172,
+    },
+    hsl: {
+      h: 350.4,
+      s: 0.6521739130434779,
+      l: 0.7745098039215685,
+    },
+    accent: true,
+  },
+  peach: {
+    hex: "#fab387",
+    rgb: {
+      r: 250,
+      g: 179,
+      b: 135,
+    },
+    hsl: {
+      h: 22.95652173913043,
+      s: 0.92,
+      l: 0.7549019607843137,
+    },
+    accent: true,
+  },
+  yellow: {
+    hex: "#f9e2af",
+    rgb: {
+      r: 249,
+      g: 226,
+      b: 175,
+    },
+    hsl: {
+      h: 41.35135135135135,
+      s: 0.8604651162790699,
+      l: 0.8313725490196078,
+    },
+    accent: true,
+  },
+  green: {
+    hex: "#a6e3a1",
+    rgb: {
+      r: 166,
+      g: 227,
+      b: 161,
+    },
+    hsl: {
+      h: 115.45454545454544,
+      s: 0.5409836065573769,
+      l: 0.7607843137254902,
+    },
+    accent: true,
+  },
+  teal: {
+    hex: "#94e2d5",
+    rgb: {
+      r: 148,
+      g: 226,
+      b: 213,
+    },
+    hsl: {
+      h: 170.00000000000003,
+      s: 0.5735294117647057,
+      l: 0.7333333333333334,
+    },
+    accent: true,
+  },
+  sky: {
+    hex: "#89dceb",
+    rgb: {
+      r: 137,
+      g: 220,
+      b: 235,
+    },
+    hsl: {
+      h: 189.18367346938774,
+      s: 0.7101449275362316,
+      l: 0.7294117647058823,
+    },
+    accent: true,
+  },
+  sapphire: {
+    hex: "#74c7ec",
+    rgb: {
+      r: 116,
+      g: 199,
+      b: 236,
+    },
+    hsl: {
+      h: 198.5,
+      s: 0.759493670886076,
+      l: 0.6901960784313725,
+    },
+    accent: true,
+  },
+  blue: {
+    hex: "#89b4fa",
+    rgb: {
+      r: 137,
+      g: 180,
+      b: 250,
+    },
+    hsl: {
+      h: 217.1681415929203,
+      s: 0.9186991869918699,
+      l: 0.7588235294117647,
+    },
+    accent: true,
+  },
+  lavender: {
+    hex: "#b4befe",
+    rgb: {
+      r: 180,
+      g: 190,
+      b: 254,
+    },
+    hsl: {
+      h: 231.89189189189187,
+      s: 0.9736842105263159,
+      l: 0.8509803921568628,
+    },
+    accent: true,
+  },
+  text: {
+    hex: "#cdd6f4",
+    rgb: {
+      r: 205,
+      g: 214,
+      b: 244,
+    },
+    hsl: {
+      h: 226.15384615384616,
+      s: 0.6393442622950825,
+      l: 0.8803921568627451,
+    },
+    accent: false,
+  },
+  subtext1: {
+    hex: "#bac2de",
+    rgb: {
+      r: 186,
+      g: 194,
+      b: 222,
+    },
+    hsl: {
+      h: 226.66666666666669,
+      s: 0.35294117647058837,
+      l: 0.8,
+    },
+    accent: false,
   },
-  frappe: {
-    name: "Frappé",
-    dark: true,
-    colors: {
-      rosewater: {
-        hex: "#f2d5cf",
-        rgb: {
-          r: 242,
-          g: 213,
-          b: 207,
-        },
-        hsl: {
-          h: 10.2857142857143,
-          s: 0.5737704918032784,
-          l: 0.8803921568627451,
-        },
-        accent: true,
-      },
-      flamingo: {
-        hex: "#eebebe",
-        rgb: {
-          r: 238,
-          g: 190,
-          b: 190,
-        },
-        hsl: {
-          h: 0,
-          s: 0.5853658536585367,
-          l: 0.8392156862745098,
-        },
-        accent: true,
-      },
-      pink: {
-        hex: "#f4b8e4",
-        rgb: {
-          r: 244,
-          g: 184,
-          b: 228,
-        },
-        hsl: {
-          h: 316,
-          s: 0.7317073170731713,
-          l: 0.8392156862745098,
-        },
-        accent: true,
-      },
-      mauve: {
-        hex: "#ca9ee6",
-        rgb: {
-          r: 202,
-          g: 158,
-          b: 230,
-        },
-        hsl: {
-          h: 276.66666666666663,
-          s: 0.5901639344262294,
-          l: 0.7607843137254902,
-        },
-        accent: true,
-      },
-      red: {
-        hex: "#e78284",
-        rgb: {
-          r: 231,
-          g: 130,
-          b: 132,
-        },
-        hsl: {
-          h: 358.8118811881188,
-          s: 0.6778523489932885,
-          l: 0.7078431372549019,
-        },
-        accent: true,
-      },
-      maroon: {
-        hex: "#ea999c",
-        rgb: {
-          r: 234,
-          g: 153,
-          b: 156,
-        },
-        hsl: {
-          h: 357.77777777777777,
-          s: 0.6585365853658534,
-          l: 0.7588235294117647,
-        },
-        accent: true,
-      },
-      peach: {
-        hex: "#ef9f76",
-        rgb: {
-          r: 239,
-          g: 159,
-          b: 118,
-        },
-        hsl: {
-          h: 20.33057851239669,
-          s: 0.7908496732026143,
-          l: 0.7,
-        },
-        accent: true,
-      },
-      yellow: {
-        hex: "#e5c890",
-        rgb: {
-          r: 229,
-          g: 200,
-          b: 144,
-        },
-        hsl: {
-          h: 39.52941176470588,
-          s: 0.6204379562043796,
-          l: 0.7313725490196079,
-        },
-        accent: true,
-      },
-      green: {
-        hex: "#a6d189",
-        rgb: {
-          r: 166,
-          g: 209,
-          b: 137,
-        },
-        hsl: {
-          h: 95.83333333333331,
-          s: 0.4390243902439024,
-          l: 0.6784313725490196,
-        },
-        accent: true,
-      },
-      teal: {
-        hex: "#81c8be",
-        rgb: {
-          r: 129,
-          g: 200,
-          b: 190,
-        },
-        hsl: {
-          h: 171.5492957746479,
-          s: 0.3922651933701657,
-          l: 0.6450980392156862,
-        },
-        accent: true,
-      },
-      sky: {
-        hex: "#99d1db",
-        rgb: {
-          r: 153,
-          g: 209,
-          b: 219,
-        },
-        hsl: {
-          h: 189.09090909090907,
-          s: 0.47826086956521735,
-          l: 0.7294117647058823,
-        },
-        accent: true,
-      },
-      sapphire: {
-        hex: "#85c1dc",
-        rgb: {
-          r: 133,
-          g: 193,
-          b: 220,
-        },
-        hsl: {
-          h: 198.62068965517244,
-          s: 0.5541401273885351,
-          l: 0.692156862745098,
-        },
-        accent: true,
-      },
-      blue: {
-        hex: "#8caaee",
-        rgb: {
-          r: 140,
-          g: 170,
-          b: 238,
-        },
-        hsl: {
-          h: 221.6326530612245,
-          s: 0.7424242424242424,
-          l: 0.7411764705882353,
-        },
-        accent: true,
-      },
-      lavender: {
-        hex: "#babbf1",
-        rgb: {
-          r: 186,
-          g: 187,
-          b: 241,
-        },
-        hsl: {
-          h: 238.90909090909093,
-          s: 0.6626506024096385,
-          l: 0.8372549019607842,
-        },
-        accent: true,
-      },
-      text: {
-        hex: "#c6d0f5",
-        rgb: {
-          r: 198,
-          g: 208,
-          b: 245,
-        },
-        hsl: {
-          h: 227.2340425531915,
-          s: 0.7014925373134333,
-          l: 0.8686274509803922,
-        },
-        accent: false,
-      },
-      subtext1: {
-        hex: "#b5bfe2",
-        rgb: {
-          r: 181,
-          g: 191,
-          b: 226,
-        },
-        hsl: {
-          h: 226.66666666666669,
-          s: 0.43689320388349495,
-          l: 0.7980392156862746,
-        },
-        accent: false,
-      },
-      subtext0: {
-        hex: "#a5adce",
-        rgb: {
-          r: 165,
-          g: 173,
-          b: 206,
-        },
-        hsl: {
-          h: 228.29268292682926,
-          s: 0.2949640287769784,
-          l: 0.7274509803921569,
-        },
-        accent: false,
-      },
-      overlay2: {
-        hex: "#949cbb",
-        rgb: {
-          r: 148,
-          g: 156,
-          b: 187,
-        },
-        hsl: {
-          h: 227.69230769230768,
-          s: 0.22285714285714275,
-          l: 0.6568627450980392,
-        },
-        accent: false,
-      },
-      overlay1: {
-        hex: "#838ba7",
-        rgb: {
-          r: 131,
-          g: 139,
-          b: 167,
-        },
-        hsl: {
-          h: 226.66666666666669,
-          s: 0.16981132075471703,
-          l: 0.584313725490196,
-        },
-        accent: false,
-      },
-      overlay0: {
-        hex: "#737994",
-        rgb: {
-          r: 115,
-          g: 121,
-          b: 148,
-        },
-        hsl: {
-          h: 229.0909090909091,
-          s: 0.13360323886639683,
-          l: 0.515686274509804,
-        },
-        accent: false,
-      },
-      surface2: {
-        hex: "#626880",
-        rgb: {
-          r: 98,
-          g: 104,
-          b: 128,
-        },
-        hsl: {
-          h: 228.00000000000003,
-          s: 0.1327433628318584,
-          l: 0.44313725490196076,
-        },
-        accent: false,
-      },
-      surface1: {
-        hex: "#51576d",
-        rgb: {
-          r: 81,
-          g: 87,
-          b: 109,
-        },
-        hsl: {
-          h: 227.14285714285714,
-          s: 0.14736842105263157,
-          l: 0.37254901960784315,
-        },
-        accent: false,
-      },
-      surface0: {
-        hex: "#414559",
-        rgb: {
-          r: 65,
-          g: 69,
-          b: 89,
-        },
-        hsl: {
-          h: 230.00000000000003,
-          s: 0.15584415584415584,
-          l: 0.30196078431372547,
-        },
-        accent: false,
-      },
-      base: {
-        hex: "#303446",
-        rgb: {
-          r: 48,
-          g: 52,
-          b: 70,
-        },
-        hsl: {
-          h: 229.0909090909091,
-          s: 0.18644067796610175,
-          l: 0.23137254901960785,
-        },
-        accent: false,
-      },
-      mantle: {
-        hex: "#292c3c",
-        rgb: {
-          r: 41,
-          g: 44,
-          b: 60,
-        },
-        hsl: {
-          h: 230.52631578947367,
-          s: 0.18811881188118806,
-          l: 0.19803921568627453,
-        },
-        accent: false,
-      },
-      crust: {
-        hex: "#232634",
-        rgb: {
-          r: 35,
-          g: 38,
-          b: 52,
-        },
-        hsl: {
-          h: 229.41176470588238,
-          s: 0.19540229885057467,
-          l: 0.17058823529411765,
-        },
-        accent: false,
-      },
+  subtext0: {
+    hex: "#a6adc8",
+    rgb: {
+      r: 166,
+      g: 173,
+      b: 200,
+    },
+    hsl: {
+      h: 227.6470588235294,
+      s: 0.23611111111111102,
+      l: 0.7176470588235294,
     },
+    accent: false,
   },
-  macchiato: {
-    name: "Macchiato",
-    dark: true,
-    colors: {
-      rosewater: {
-        hex: "#f4dbd6",
-        rgb: {
-          r: 244,
-          g: 219,
-          b: 214,
-        },
-        hsl: {
-          h: 9.999999999999963,
-          s: 0.5769230769230775,
-          l: 0.8980392156862745,
-        },
-        accent: true,
-      },
-      flamingo: {
-        hex: "#f0c6c6",
-        rgb: {
-          r: 240,
-          g: 198,
-          b: 198,
-        },
-        hsl: {
-          h: 0,
-          s: 0.5833333333333333,
-          l: 0.8588235294117648,
-        },
-        accent: true,
-      },
-      pink: {
-        hex: "#f5bde6",
-        rgb: {
-          r: 245,
-          g: 189,
-          b: 230,
-        },
-        hsl: {
-          h: 316.0714285714286,
-          s: 0.7368421052631583,
-          l: 0.8509803921568628,
-        },
-        accent: true,
-      },
-      mauve: {
-        hex: "#c6a0f6",
-        rgb: {
-          r: 198,
-          g: 160,
-          b: 246,
-        },
-        hsl: {
-          h: 266.51162790697674,
-          s: 0.8269230769230772,
-          l: 0.7960784313725491,
-        },
-        accent: true,
-      },
-      red: {
-        hex: "#ed8796",
-        rgb: {
-          r: 237,
-          g: 135,
-          b: 150,
-        },
-        hsl: {
-          h: 351.1764705882353,
-          s: 0.7391304347826088,
-          l: 0.7294117647058824,
-        },
-        accent: true,
-      },
-      maroon: {
-        hex: "#ee99a0",
-        rgb: {
-          r: 238,
-          g: 153,
-          b: 160,
-        },
-        hsl: {
-          h: 355.05882352941177,
-          s: 0.7142857142857143,
-          l: 0.7666666666666666,
-        },
-        accent: true,
-      },
-      peach: {
-        hex: "#f5a97f",
-        rgb: {
-          r: 245,
-          g: 169,
-          b: 127,
-        },
-        hsl: {
-          h: 21.355932203389827,
-          s: 0.8550724637681162,
-          l: 0.7294117647058824,
-        },
-        accent: true,
-      },
-      yellow: {
-        hex: "#eed49f",
-        rgb: {
-          r: 238,
-          g: 212,
-          b: 159,
-        },
-        hsl: {
-          h: 40.253164556962034,
-          s: 0.6991150442477877,
-          l: 0.7784313725490196,
-        },
-        accent: true,
-      },
-      green: {
-        hex: "#a6da95",
-        rgb: {
-          r: 166,
-          g: 218,
-          b: 149,
-        },
-        hsl: {
-          h: 105.21739130434783,
-          s: 0.4825174825174825,
-          l: 0.7196078431372549,
-        },
-        accent: true,
-      },
-      teal: {
-        hex: "#8bd5ca",
-        rgb: {
-          r: 139,
-          g: 213,
-          b: 202,
-        },
-        hsl: {
-          h: 171.08108108108107,
-          s: 0.46835443037974706,
-          l: 0.6901960784313725,
-        },
-        accent: true,
-      },
-      sky: {
-        hex: "#91d7e3",
-        rgb: {
-          r: 145,
-          g: 215,
-          b: 227,
-        },
-        hsl: {
-          h: 188.78048780487802,
-          s: 0.5942028985507245,
-          l: 0.7294117647058823,
-        },
-        accent: true,
-      },
-      sapphire: {
-        hex: "#7dc4e4",
-        rgb: {
-          r: 125,
-          g: 196,
-          b: 228,
-        },
-        hsl: {
-          h: 198.64077669902912,
-          s: 0.6560509554140128,
-          l: 0.692156862745098,
-        },
-        accent: true,
-      },
-      blue: {
-        hex: "#8aadf4",
-        rgb: {
-          r: 138,
-          g: 173,
-          b: 244,
-        },
-        hsl: {
-          h: 220.188679245283,
-          s: 0.8281250000000003,
-          l: 0.7490196078431373,
-        },
-        accent: true,
-      },
-      lavender: {
-        hex: "#b7bdf8",
-        rgb: {
-          r: 183,
-          g: 189,
-          b: 248,
-        },
-        hsl: {
-          h: 234.46153846153848,
-          s: 0.8227848101265824,
-          l: 0.8450980392156863,
-        },
-        accent: true,
-      },
-      text: {
-        hex: "#cad3f5",
-        rgb: {
-          r: 202,
-          g: 211,
-          b: 245,
-        },
-        hsl: {
-          h: 227.4418604651163,
-          s: 0.6825396825396831,
-          l: 0.8764705882352941,
-        },
-        accent: false,
-      },
-      subtext1: {
-        hex: "#b8c0e0",
-        rgb: {
-          r: 184,
-          g: 192,
-          b: 224,
-        },
-        hsl: {
-          h: 228,
-          s: 0.39215686274509803,
-          l: 0.8,
-        },
-        accent: false,
-      },
-      subtext0: {
-        hex: "#a5adcb",
-        rgb: {
-          r: 165,
-          g: 173,
-          b: 203,
-        },
-        hsl: {
-          h: 227.36842105263156,
-          s: 0.2676056338028167,
-          l: 0.7215686274509804,
-        },
-        accent: false,
-      },
-      overlay2: {
-        hex: "#939ab7",
-        rgb: {
-          r: 147,
-          g: 154,
-          b: 183,
-        },
-        hsl: {
-          h: 228.33333333333331,
-          s: 0.2000000000000001,
-          l: 0.6470588235294117,
-        },
-        accent: false,
-      },
-      overlay1: {
-        hex: "#8087a2",
-        rgb: {
-          r: 128,
-          g: 135,
-          b: 162,
-        },
-        hsl: {
-          h: 227.6470588235294,
-          s: 0.1545454545454545,
-          l: 0.5686274509803921,
-        },
-        accent: false,
-      },
-      overlay0: {
-        hex: "#6e738d",
-        rgb: {
-          r: 110,
-          g: 115,
-          b: 141,
-        },
-        hsl: {
-          h: 230.32258064516128,
-          s: 0.12350597609561753,
-          l: 0.49215686274509807,
-        },
-        accent: false,
-      },
-      surface2: {
-        hex: "#5b6078",
-        rgb: {
-          r: 91,
-          g: 96,
-          b: 120,
-        },
-        hsl: {
-          h: 229.65517241379308,
-          s: 0.13744075829383887,
-          l: 0.4137254901960784,
-        },
-        accent: false,
-      },
-      surface1: {
-        hex: "#494d64",
-        rgb: {
-          r: 73,
-          g: 77,
-          b: 100,
-        },
-        hsl: {
-          h: 231.11111111111114,
-          s: 0.15606936416184972,
-          l: 0.3392156862745098,
-        },
-        accent: false,
-      },
-      surface0: {
-        hex: "#363a4f",
-        rgb: {
-          r: 54,
-          g: 58,
-          b: 79,
-        },
-        hsl: {
-          h: 230.4,
-          s: 0.1879699248120301,
-          l: 0.2607843137254902,
-        },
-        accent: false,
-      },
-      base: {
-        hex: "#24273a",
-        rgb: {
-          r: 36,
-          g: 39,
-          b: 58,
-        },
-        hsl: {
-          h: 231.8181818181818,
-          s: 0.23404255319148934,
-          l: 0.1843137254901961,
-        },
-        accent: false,
-      },
-      mantle: {
-        hex: "#1e2030",
-        rgb: {
-          r: 30,
-          g: 32,
-          b: 48,
-        },
-        hsl: {
-          h: 233.33333333333334,
-          s: 0.23076923076923075,
-          l: 0.15294117647058825,
-        },
-        accent: false,
-      },
-      crust: {
-        hex: "#181926",
-        rgb: {
-          r: 24,
-          g: 25,
-          b: 38,
-        },
-        hsl: {
-          h: 235.71428571428572,
-          s: 0.22580645161290322,
-          l: 0.12156862745098039,
-        },
-        accent: false,
-      },
+  overlay2: {
+    hex: "#9399b2",
+    rgb: {
+      r: 147,
+      g: 153,
+      b: 178,
     },
+    hsl: {
+      h: 228.38709677419354,
+      s: 0.16756756756756758,
+      l: 0.6372549019607843,
+    },
+    accent: false,
   },
-  mocha: {
-    name: "Mocha",
-    dark: true,
-    colors: {
-      rosewater: {
-        hex: "#f5e0dc",
-        rgb: {
-          r: 245,
-          g: 224,
-          b: 220,
-        },
-        hsl: {
-          h: 9.599999999999968,
-          s: 0.555555555555556,
-          l: 0.911764705882353,
-        },
-        accent: true,
-      },
-      flamingo: {
-        hex: "#f2cdcd",
-        rgb: {
-          r: 242,
-          g: 205,
-          b: 205,
-        },
-        hsl: {
-          h: 0,
-          s: 0.587301587301587,
-          l: 0.8764705882352941,
-        },
-        accent: true,
-      },
-      pink: {
-        hex: "#f5c2e7",
-        rgb: {
-          r: 245,
-          g: 194,
-          b: 231,
-        },
-        hsl: {
-          h: 316.4705882352941,
-          s: 0.7183098591549301,
-          l: 0.8607843137254902,
-        },
-        accent: true,
-      },
-      mauve: {
-        hex: "#cba6f7",
-        rgb: {
-          r: 203,
-          g: 166,
-          b: 247,
-        },
-        hsl: {
-          h: 267.4074074074074,
-          s: 0.8350515463917528,
-          l: 0.8098039215686275,
-        },
-        accent: true,
-      },
-      red: {
-        hex: "#f38ba8",
-        rgb: {
-          r: 243,
-          g: 139,
-          b: 168,
-        },
-        hsl: {
-          h: 343.2692307692308,
-          s: 0.8124999999999998,
-          l: 0.7490196078431373,
-        },
-        accent: true,
-      },
-      maroon: {
-        hex: "#eba0ac",
-        rgb: {
-          r: 235,
-          g: 160,
-          b: 172,
-        },
-        hsl: {
-          h: 350.4,
-          s: 0.6521739130434779,
-          l: 0.7745098039215685,
-        },
-        accent: true,
-      },
-      peach: {
-        hex: "#fab387",
-        rgb: {
-          r: 250,
-          g: 179,
-          b: 135,
-        },
-        hsl: {
-          h: 22.95652173913043,
-          s: 0.92,
-          l: 0.7549019607843137,
-        },
-        accent: true,
-      },
-      yellow: {
-        hex: "#f9e2af",
-        rgb: {
-          r: 249,
-          g: 226,
-          b: 175,
-        },
-        hsl: {
-          h: 41.35135135135135,
-          s: 0.8604651162790699,
-          l: 0.8313725490196078,
-        },
-        accent: true,
-      },
-      green: {
-        hex: "#a6e3a1",
-        rgb: {
-          r: 166,
-          g: 227,
-          b: 161,
-        },
-        hsl: {
-          h: 115.45454545454544,
-          s: 0.5409836065573769,
-          l: 0.7607843137254902,
-        },
-        accent: true,
-      },
-      teal: {
-        hex: "#94e2d5",
-        rgb: {
-          r: 148,
-          g: 226,
-          b: 213,
-        },
-        hsl: {
-          h: 170.00000000000003,
-          s: 0.5735294117647057,
-          l: 0.7333333333333334,
-        },
-        accent: true,
-      },
-      sky: {
-        hex: "#89dceb",
-        rgb: {
-          r: 137,
-          g: 220,
-          b: 235,
-        },
-        hsl: {
-          h: 189.18367346938774,
-          s: 0.7101449275362316,
-          l: 0.7294117647058823,
-        },
-        accent: true,
-      },
-      sapphire: {
-        hex: "#74c7ec",
-        rgb: {
-          r: 116,
-          g: 199,
-          b: 236,
-        },
-        hsl: {
-          h: 198.5,
-          s: 0.759493670886076,
-          l: 0.6901960784313725,
-        },
-        accent: true,
-      },
-      blue: {
-        hex: "#89b4fa",
-        rgb: {
-          r: 137,
-          g: 180,
-          b: 250,
-        },
-        hsl: {
-          h: 217.1681415929203,
-          s: 0.9186991869918699,
-          l: 0.7588235294117647,
-        },
-        accent: true,
-      },
-      lavender: {
-        hex: "#b4befe",
-        rgb: {
-          r: 180,
-          g: 190,
-          b: 254,
-        },
-        hsl: {
-          h: 231.89189189189187,
-          s: 0.9736842105263159,
-          l: 0.8509803921568628,
-        },
-        accent: true,
-      },
-      text: {
-        hex: "#cdd6f4",
-        rgb: {
-          r: 205,
-          g: 214,
-          b: 244,
-        },
-        hsl: {
-          h: 226.15384615384616,
-          s: 0.6393442622950825,
-          l: 0.8803921568627451,
-        },
-        accent: false,
-      },
-      subtext1: {
-        hex: "#bac2de",
-        rgb: {
-          r: 186,
-          g: 194,
-          b: 222,
-        },
-        hsl: {
-          h: 226.66666666666669,
-          s: 0.35294117647058837,
-          l: 0.8,
-        },
-        accent: false,
-      },
-      subtext0: {
-        hex: "#a6adc8",
-        rgb: {
-          r: 166,
-          g: 173,
-          b: 200,
-        },
-        hsl: {
-          h: 227.6470588235294,
-          s: 0.23611111111111102,
-          l: 0.7176470588235294,
-        },
-        accent: false,
-      },
-      overlay2: {
-        hex: "#9399b2",
-        rgb: {
-          r: 147,
-          g: 153,
-          b: 178,
-        },
-        hsl: {
-          h: 228.38709677419354,
-          s: 0.16756756756756758,
-          l: 0.6372549019607843,
-        },
-        accent: false,
-      },
-      overlay1: {
-        hex: "#7f849c",
-        rgb: {
-          r: 127,
-          g: 132,
-          b: 156,
-        },
-        hsl: {
-          h: 229.65517241379308,
-          s: 0.12775330396475776,
-          l: 0.5549019607843138,
-        },
-        accent: false,
-      },
-      overlay0: {
-        hex: "#6c7086",
-        rgb: {
-          r: 108,
-          g: 112,
-          b: 134,
-        },
-        hsl: {
-          h: 230.7692307692308,
-          s: 0.10743801652892565,
-          l: 0.4745098039215686,
-        },
-        accent: false,
-      },
-      surface2: {
-        hex: "#585b70",
-        rgb: {
-          r: 88,
-          g: 91,
-          b: 112,
-        },
-        hsl: {
-          h: 232.5,
-          s: 0.12,
-          l: 0.39215686274509803,
-        },
-        accent: false,
-      },
-      surface1: {
-        hex: "#45475a",
-        rgb: {
-          r: 69,
-          g: 71,
-          b: 90,
-        },
-        hsl: {
-          h: 234.2857142857143,
-          s: 0.13207547169811326,
-          l: 0.31176470588235294,
-        },
-        accent: false,
-      },
-      surface0: {
-        hex: "#313244",
-        rgb: {
-          r: 49,
-          g: 50,
-          b: 68,
-        },
-        hsl: {
-          h: 236.84210526315792,
-          s: 0.16239316239316234,
-          l: 0.22941176470588237,
-        },
-        accent: false,
-      },
-      base: {
-        hex: "#1e1e2e",
-        rgb: {
-          r: 30,
-          g: 30,
-          b: 46,
-        },
-        hsl: {
-          h: 240,
-          s: 0.21052631578947367,
-          l: 0.14901960784313725,
-        },
-        accent: false,
-      },
-      mantle: {
-        hex: "#181825",
-        rgb: {
-          r: 24,
-          g: 24,
-          b: 37,
-        },
-        hsl: {
-          h: 240,
-          s: 0.2131147540983607,
-          l: 0.11960784313725491,
-        },
-        accent: false,
-      },
-      crust: {
-        hex: "#11111b",
-        rgb: {
-          r: 17,
-          g: 17,
-          b: 27,
-        },
-        hsl: {
-          h: 240,
-          s: 0.22727272727272727,
-          l: 0.08627450980392157,
-        },
-        accent: false,
-      },
+  overlay1: {
+    hex: "#7f849c",
+    rgb: {
+      r: 127,
+      g: 132,
+      b: 156,
+    },
+    hsl: {
+      h: 229.65517241379308,
+      s: 0.12775330396475776,
+      l: 0.5549019607843138,
+    },
+    accent: false,
+  },
+  overlay0: {
+    hex: "#6c7086",
+    rgb: {
+      r: 108,
+      g: 112,
+      b: 134,
+    },
+    hsl: {
+      h: 230.7692307692308,
+      s: 0.10743801652892565,
+      l: 0.4745098039215686,
+    },
+    accent: false,
+  },
+  surface2: {
+    hex: "#585b70",
+    rgb: {
+      r: 88,
+      g: 91,
+      b: 112,
+    },
+    hsl: {
+      h: 232.5,
+      s: 0.12,
+      l: 0.39215686274509803,
+    },
+    accent: false,
+  },
+  surface1: {
+    hex: "#45475a",
+    rgb: {
+      r: 69,
+      g: 71,
+      b: 90,
+    },
+    hsl: {
+      h: 234.2857142857143,
+      s: 0.13207547169811326,
+      l: 0.31176470588235294,
+    },
+    accent: false,
+  },
+  surface0: {
+    hex: "#313244",
+    rgb: {
+      r: 49,
+      g: 50,
+      b: 68,
+    },
+    hsl: {
+      h: 236.84210526315792,
+      s: 0.16239316239316234,
+      l: 0.22941176470588237,
+    },
+    accent: false,
+  },
+  base: {
+    hex: "#1e1e2e",
+    rgb: {
+      r: 30,
+      g: 30,
+      b: 46,
+    },
+    hsl: {
+      h: 240,
+      s: 0.21052631578947367,
+      l: 0.14901960784313725,
+    },
+    accent: false,
+  },
+  mantle: {
+    hex: "#181825",
+    rgb: {
+      r: 24,
+      g: 24,
+      b: 37,
+    },
+    hsl: {
+      h: 240,
+      s: 0.2131147540983607,
+      l: 0.11960784313725491,
+    },
+    accent: false,
+  },
+  crust: {
+    hex: "#11111b",
+    rgb: {
+      r: 17,
+      g: 17,
+      b: 27,
+    },
+    hsl: {
+      h: 240,
+      s: 0.22727272727272727,
+      l: 0.08627450980392157,
     },
+    accent: false,
   },
 };
diff --git a/src/project.meta b/src/project.meta
index 499e306..c228504 100644
--- a/src/project.meta
+++ b/src/project.meta
@@ -1,7 +1,7 @@
 {
   "version": 0,
   "shared": {
-    "background": null,
+    "background": "rgb(30,30,46)",
     "range": [
       0,
       null
@@ -13,7 +13,7 @@
     "audioOffset": 0
   },
   "preview": {
-    "fps": 30,
+    "fps": 60,
     "resolutionScale": 1
   },
   "rendering": {
diff --git a/src/project.ts b/src/project.ts
index ecfbbeb..82af284 100644
--- a/src/project.ts
+++ b/src/project.ts
@@ -1,7 +1,10 @@
-import {makeProject} from '@motion-canvas/core';
+import { makeProject } from "@motion-canvas/core";
 
-import example from './scenes/example?scene';
+import "./global.css"; // <- import the css
+
+import example from "./scenes/example?scene";
+import me from "./scenes/me?scene";
 
 export default makeProject({
-  scenes: [example],
+  scenes: [example, me],
 });
diff --git a/src/scenes/example.tsx b/src/scenes/example.tsx
index 3e35184..8e38187 100644
--- a/src/scenes/example.tsx
+++ b/src/scenes/example.tsx
@@ -1,8 +1,23 @@
-import { makeScene2D } from "@motion-canvas/2d";
-import { waitFor } from "@motion-canvas/core";
+import { Node, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
+import { beginSlide, waitFor, createRef } from "@motion-canvas/core";
+import { palette } from "../palette";
 
 export default makeScene2D(function* (view) {
-  // Create your animations here
+  const node = createRef<Node>();
 
-  yield* waitFor(5);
+  view.add(
+    <Node ref={node}>
+      <Layout layout direction="column" textAlign="center" gap={80}>
+        <Txt fontFamily={"Fira Code"} fill={palette.text.hex}>
+          Compiling The Lambda Calculus {"=> λ"}
+        </Txt>
+        <Txt fontFamily={"Fira Code"} fill={palette.text.hex}>
+          Elizabeth Hunt (@simponic)
+        </Txt>
+      </Layout>
+    </Node>
+  );
+  yield* beginSlide("Title");
+  yield* node().opacity(0, 1);
+  yield* waitFor(1);
 });
diff --git a/src/scenes/me.meta b/src/scenes/me.meta
new file mode 100644
index 0000000..9dba6ec
--- /dev/null
+++ b/src/scenes/me.meta
@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 3928486110
+}
\ No newline at end of file
diff --git a/src/scenes/me.tsx b/src/scenes/me.tsx
new file mode 100644
index 0000000..9d5740f
--- /dev/null
+++ b/src/scenes/me.tsx
@@ -0,0 +1,19 @@
+import { Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
+import { beginSlide, waitFor } from "@motion-canvas/core";
+
+import me from "../../public/img/me.png";
+
+export default makeScene2D(function* (view) {
+  yield* beginSlide("Title");
+  view.add(
+    <Layout
+      layout
+      direction="row"
+      justifyContent="space-around"
+      alignItems="center"
+      gap={0}
+    >
+      <Img scale={0.5} src={me}></Img>
+    </Layout>
+  );
+});