add xkcd and basic transitions

1 files changed, 69 insertions, 14 deletions

diff --git a/src/scenes/me.tsx b/src/scenes/me.tsx
index 9d5740f..2e36605 100644
--- a/src/scenes/me.tsx
+++ b/src/scenes/me.tsx
@@ -1,19 +1,74 @@
-import { Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
-import { beginSlide, waitFor } from "@motion-canvas/core";
+import { Node, Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
+import { beginSlide, createRef, waitFor, all } from "@motion-canvas/core";
 
-import me from "../../public/img/me.png";
+import me from "../../public/img/me.jpg";
+import { theme } from "../theme";
 
 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>
+  const img = createRef<Img>();
+  const node = createRef<Node>();
+  const layout = createRef<Layout>();
+  const src = createRef<Txt>();
+
+  yield view.add(
+    <>
+      <Layout
+        layout
+        ref={layout}
+        direction="column"
+        justifyContent="center"
+        gap={12}
+        alignItems="start"
+        y={-10}
+      >
+        <Node ref={node} opacity={0}>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            Hello!
+          </Txt>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            My name is Elizabeth{" "}
+            <Txt fontFamily={theme.font} fill={theme.teal.hex}>
+              (@simponic)
+            </Txt>
+            .
+          </Txt>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            I love 😍
+          </Txt>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            {"=>"} Common LISP
+          </Txt>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            {"=>"}{" "}
+            <Txt fontFamily={theme.font} fill={theme.mauve.hex}>
+              Elixir
+            </Txt>
+          </Txt>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            {"=>"} Functional Programming
+          </Txt>
+        </Node>
+      </Layout>
+      <Img y={-10} ref={img} src={me} width={10} alpha={0} radius={20} />{" "}
+      <Txt opacity={0} ref={src} fontFamily={theme.font} fill={theme.green.hex}>
+        git.simponic.xyz/simponic/compiling-the-lambda-calculus
+      </Txt>
+    </>
   );
+
+  yield img().fill(img().getColorAtPoint(0));
+
+  const diff = 370;
+  yield* all(
+    img().size([450, 450], 1),
+    img().radius(50, 1),
+    img().alpha(1, 1),
+    img().position.x(-diff, 1),
+    node().opacity(1, 1),
+    layout().position.x(diff, 1),
+    src().opacity(1, 1),
+    src().position.y(275, 1)
+  );
+
+  yield* beginSlide("About Me");
 });