From d19084665195cb20e62ba77ab9cf46d800b3975b Mon Sep 17 00:00:00 2001
From: Lizzy Hunt <elizabeth.hunt@simponic.xyz>
Date: Thu, 1 Feb 2024 22:11:05 -0700
Subject: add xkcd and basic transitions

---
 src/scenes/example.meta |  5 ---
 src/scenes/example.tsx  | 23 --------------
 src/scenes/index.ts     |  4 +++
 src/scenes/me.tsx       | 83 ++++++++++++++++++++++++++++++++++++++++---------
 src/scenes/title.meta   |  5 +++
 src/scenes/title.tsx    | 36 +++++++++++++++++++++
 6 files changed, 114 insertions(+), 42 deletions(-)
 delete mode 100644 src/scenes/example.meta
 delete mode 100644 src/scenes/example.tsx
 create mode 100644 src/scenes/index.ts
 create mode 100644 src/scenes/title.meta
 create mode 100644 src/scenes/title.tsx

(limited to 'src/scenes')

diff --git a/src/scenes/example.meta b/src/scenes/example.meta
deleted file mode 100644
index 011b988..0000000
--- a/src/scenes/example.meta
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "version": 0,
-  "timeEvents": [],
-  "seed": 3229939754
-}
\ No newline at end of file
diff --git a/src/scenes/example.tsx b/src/scenes/example.tsx
deleted file mode 100644
index 8e38187..0000000
--- a/src/scenes/example.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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) {
-  const node = createRef<Node>();
-
-  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/index.ts b/src/scenes/index.ts
new file mode 100644
index 0000000..9d08ec5
--- /dev/null
+++ b/src/scenes/index.ts
@@ -0,0 +1,4 @@
+import title from "./title?scene";
+import me from "./me?scene";
+
+export const scenes = [title, me];
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");
 });
diff --git a/src/scenes/title.meta b/src/scenes/title.meta
new file mode 100644
index 0000000..011b988
--- /dev/null
+++ b/src/scenes/title.meta
@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 3229939754
+}
\ No newline at end of file
diff --git a/src/scenes/title.tsx b/src/scenes/title.tsx
new file mode 100644
index 0000000..775e9ec
--- /dev/null
+++ b/src/scenes/title.tsx
@@ -0,0 +1,36 @@
+import { Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
+import { beginSlide } from "@motion-canvas/core";
+import { theme } from "../theme";
+
+import xkcd from "../../public/img/xkcd.png";
+
+export default makeScene2D(function* (view) {
+  yield view.add(
+    <>
+      <Layout
+        layout
+        direction="column"
+        textAlign="center"
+        alignItems="center"
+        gap={100}
+      >
+        <Txt fontFamily={theme.font} fill={theme.text.hex}>
+          Compiling The Lambda Calculus{" "}
+          <Txt fontFamily={theme.font} fill={theme.blue.hex}>
+            {"=> λ"}
+          </Txt>
+        </Txt>
+        <Img scale={1.4} src={xkcd}></Img>
+        <Txt
+          fontFamily={theme.font}
+          fill={theme.flamingo.hex}
+          fontStyle="italic"
+          fontSize={40}
+        >
+          #2453
+        </Txt>
+      </Layout>
+    </>
+  );
+  yield* beginSlide("Title");
+});
-- 
cgit v1.2.3-70-g09d2