lume: new index page

Signed-off-by: Xe Iaso <me@xeiaso.net>

1 files changed, 76 insertions, 0 deletions

diff --git a/lume/src/index.jsx b/lume/src/index.jsx
new file mode 100644
index 0000000..1f7f85a
--- /dev/null
+++ b/lume/src/index.jsx
@@ -0,0 +1,76 @@
+export const layout = "base.njk";
+export const date = "2012-12-21";
+
+export default ({ search, resume, notableProjects, contactLinks }, { date }) => {
+    const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
+
+    return (
+        <>
+            <h1 class="text-3xl mb-4">{resume.name}</h1>
+            <p class="text-xl mb-4">{resume.tagline} - {resume.location.city}, {resume.location.country}</p>
+            <div className="my-4 flex space-x-4 rounded-md border border-solid border-fg-4 bg-bg-2 p-3 dark:border-fgDark-4 dark:bg-bgDark-2 max-w-full min-h-fit">
+                <div className="flex max-h-16 shrink-0 items-center justify-center self-center">
+                    <img
+                        style="max-height:6rem"
+                        alt="A pink haired orca character"
+                        loading="lazy"
+                        src="/static/img/avatar.png"
+                    />
+                </div>
+                <div className="convsnippet min-w-0 self-center">
+                    <p className="prose">
+                        I'm Xe Iaso, I'm a technical educator, <a href="/talks/">conference speaker</a>, <a href="https://twitch.tv/princessxen">twitch streamer</a>, vtuber, and philosopher that focuses on ways to help make technology easier to understand and do cursed things in the process. I live in {resume.location.city} with my husband and I do developer relations professionally. I am an avid writer for my <a href="/blog">blog</a>, where I have over 400 articles. I regularly experiment with new technologies and find ways to mash them up with old technologies for my own amusement.
+                    </p>
+                </div>
+            </div>
+
+            <h2 class="text-2xl mb-4">Recent Articles</h2>
+            <ul class="list-disc ml-4 mb-4">
+                {search.pages("type=blog", "order date=desc", 5).map((post) => {
+                    const url = post.redirect_to ? post.redirect_to : post.url;
+                    return (
+                        <li>
+                            <time datetime={date(post.date)} className="font-mono">{post.date.toLocaleDateString("en-US", dateOptions)}</time> -{" "}
+                            <a href={url}>{post.title}</a>
+                        </li>
+                    );
+                })}
+            </ul>
+
+            <h2 class="text-2xl mb-4">Notable Publications</h2>
+            <ul class="list-disc ml-4 mb-4">
+                {resume.notablePublications.map((publication) => (
+                    <li>
+                        <a href={publication.url}>{publication.title}</a><br />{publication.description}
+                    </li>
+                ))}
+            </ul>
+
+            <h2 class="text-2xl mb-4">Highlighted Projects</h2>
+            <ul class="list-disc ml-4 mb-4">
+                {notableProjects.map((project) => (
+                    <li>
+                        <a href={project.url}>{project.title}</a> - {project.description}
+                    </li>
+                ))}
+            </ul>
+
+            <h2 class="text-2xl mb-4">Quick Links</h2>
+            <ul class="list-disc ml-4 mb-4">
+                {contactLinks.map((link) => (
+                    <li>
+                        <a rel="me" target="_blank" href="{link.url}">{link.title}</a>
+                    </li>
+                ))}
+            </ul>
+
+            <p class="mb-4">Looking for someone for your team? Check <a href="/signalboost">here</a>.</p>
+
+            <div class="flex flex-wrap items-start justify-center p-5">
+                {resume.buzzwords.map((buzzword) => (
+                    <span class="m-2 p-2 text-sm bg-bg-1 dark:bg-bgDark-1 text-fg-1 dark:text-fgDark-1 rounded-lg">{buzzword}</span>
+                ))}
+            </div>
+        </>
+    );
+}
\ No newline at end of file