67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { Node, Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
|
|
import { beginSlide, createRef, all } from "@motion-canvas/core";
|
|
|
|
import me from "../../public/img/me.jpg";
|
|
import { theme } from "../theme";
|
|
|
|
export default makeScene2D(function* (view) {
|
|
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}
|
|
fontSize={40}
|
|
>
|
|
<Node ref={node} opacity={0}>
|
|
<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 {"<3"} Functional Programming λ
|
|
</Txt>
|
|
<Txt fontFamily={theme.font} fill={theme.text.hex}>
|
|
{"=>"} I'm a soon to be SDE at AWS in {"\n"}Seattle.
|
|
</Txt>
|
|
<Txt fontFamily={theme.font} fill={theme.text.hex}>
|
|
{"=>"} 20, president of FSLC from 2021{"\n "} - 2024, grad this
|
|
semester
|
|
</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 = 320;
|
|
yield* all(
|
|
img().size([450, 450], 1),
|
|
img().radius(50, 1),
|
|
img().alpha(1, 1),
|
|
img().position.x(-1.3 * diff, 1),
|
|
node().opacity(1, 1),
|
|
layout().position.x(diff, 1),
|
|
src().opacity(1, 1),
|
|
src().position.y(290, 1),
|
|
);
|
|
|
|
yield* beginSlide("About Me");
|
|
});
|