major: statically-generated resume with Vike

2025-08-24 15:13:02 -04:00
parent 0d820466d0
commit 3b47596a57
21 changed files with 6108 additions and 394 deletions
@@ -0,0 +1,17 @@
+import type { Config } from "vike/types";
+import vikeReact from "vike-react/config";
+import Layout from "../layouts/LayoutDefault.js";
+
+// Default config (can be overridden by pages)
+// https://vike.dev/config
+
+export default {
+  // https://vike.dev/Layout
+  Layout,
+
+  // https://vike.dev/head-tags
+  title: "Brian Sakal | Resume",
+  description: "Resume Auto-Generated from Metadata",
+
+  extends: vikeReact,
+} satisfies Config;
@@ -0,0 +1,19 @@
+import { usePageContext } from "vike-react/usePageContext";
+
+export default function Page() {
+  const { is404 } = usePageContext();
+  if (is404) {
+    return (
+      <>
+        <h1>404 Page Not Found</h1>
+        <p>This page could not be found.</p>
+      </>
+    );
+  }
+  return (
+    <>
+      <h1>500 Internal Server Error</h1>
+      <p>Something went wrong.</p>
+    </>
+  );
+}
@@ -0,0 +1,222 @@
+import { useData } from "vike-react/useData";
+import type { Data } from "./+data";
+import "../../styles.css";
+
+export default function Page() {
+  return (
+    <div
+      css={{
+        fontFamily: '"EB Garamond", serif',
+        fontOpticalSizing: "auto",
+        fontWeight: 400,
+        fontStyle: "normal",
+        fontSize: "0.9em",
+
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "start",
+      }}
+    >
+      <div
+        css={{
+          display: "flex",
+          flexDirection: "column",
+          width: "30%",
+          backgroundColor: "lavender",
+          padding: "1em",
+          gap: "1em",
+        }}
+      >
+        <Header />
+        <MainSkills />
+        <ExposedSkills />
+      </div>
+      <div
+        css={{
+          display: "flex",
+          flexDirection: "column",
+          width: "70%",
+          padding: "1em",
+        }}
+      >
+        <Employment />
+        <ProjectsHobbies />
+        <Education />
+      </div>
+    </div>
+  );
+}
+
+function Header() {
+  const { contactInfo } = useData<Data>();
+  return (
+    <div
+      css={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <section>
+        <div>
+          <img
+            src="/assets/resume-image.jpg"
+            alt="headshot"
+            css={{ width: "14em", borderRadius: "50%", objectFit: "contain" }}
+          />
+        </div>
+      </section>
+      <section>
+        <h2 css={{ marginBottom: "0.3em" }} className="lg bold">
+          {contactInfo.name}
+        </h2>
+      </section>
+      <section css={{ textAlign: "center" }}>
+        <ul className="inline">
+          <li>{contactInfo.phone}</li>
+          <li>{contactInfo.email}</li>
+        </ul>
+        <ul className="inline">
+          <li>{contactInfo.location}</li>
+          <li>
+            <a href={contactInfo.website}>{contactInfo.website}</a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}
+
+function MainSkills() {
+  const { mainSkills } = useData<Data>();
+  return (
+    <section className="relevant-skills">
+      <h3>Main Skills/Technologies</h3>
+      <div>
+        <ul className="inline">
+          {mainSkills.map((skill) => (
+            <li>{skill}</li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+function ExposedSkills() {
+  const { exposedSkills } = useData<Data>();
+  return (
+    <section className="relevant-skills">
+      <h3>Have Used</h3>
+      <div>
+        <ul className="inline">
+          {exposedSkills.map((skill) => (
+            <li>{skill}</li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+function Employment() {
+  const { employment } = useData<Data>();
+  return (
+    <section className="employment">
+      <h1>
+        <div className="fit-content">
+          <span className="bold">Employment </span>
+          <span css={{ fontWeight: 300 }} className="sm italic right">
+            (Most recent)
+          </span>
+        </div>
+      </h1>
+      <div>
+        <ul className="no-bullet">
+          {employment.map((employment) => (
+            <li>
+              <div className="space-between">
+                <div>
+                  <span className="bold">{employment.title},</span>
+                  <span>
+                    {employment.company}, {employment.location}
+                  </span>
+                </div>
+                <div className="italic right">
+                  {employment.start}-{employment.end}
+                </div>
+              </div>
+              <div>
+                <ul>
+                  {employment.highlights.map((highlight) => (
+                    <li>{highlight}</li>
+                  ))}
+                </ul>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+function ProjectsHobbies() {
+  const { projectsHobbies } = useData<Data>();
+  return (
+    <section className="projects-hobbies">
+      <h1>
+        <div className="fit-content">
+          <div className="bold">Projects/Hobbies</div>
+        </div>
+      </h1>
+      <div>
+        <ul className="no-bullet">
+          {projectsHobbies.map((projectHobby) => (
+            <li>
+              <div>
+                <span className="bold">{projectHobby.title}</span>
+                <span>
+                  <ul className="inline">
+                    {projectHobby.highlights.map((highlight) => (
+                      <li>{highlight}</li>
+                    ))}
+                  </ul>
+                </span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+function Education() {
+  const { education } = useData<Data>();
+  return (
+    <section className="education">
+      <h1>
+        <span className="bold">Education</span>
+      </h1>
+      <div>
+        <ul className="no-bullet">
+          {education.map((education) => (
+            <li>
+              <div className="space-between">
+                <div>
+                  <span className="bold">{education.title},</span>
+                  <span>{education.location}</span>
+                </div>
+                <div className="italic right">
+                  {education.start}–{education.end}
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,7 @@
+import * as resumeData from "../../database/resume.js";
+
+export default function data() {
+  return resumeData;
+}
+
+export type Data = ReturnType<typeof data>;