Add resume page

app/(main)/resume/Date.tsx

@@ -0,0 +1,7 @@
+export interface DateProps {
+  children: React.ReactNode
+}
+
+export default function Date({ children }: DateProps) {
+  return <p className="-mt-3 text-sm text-zinc-500">{children}</p>
+}

app/(main)/resume/Skills.tsx

@@ -0,0 +1,27 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid"
+import { cloneElement } from "react"
+import { skills } from "./Skills.meta"
+
+export default function Skills() {
+  return (
+    <div className="not-prose grid grid-cols-[repeat(auto-fill,minmax(148px,1fr))] gap-3 text-sm">
+      {skills.map(({ icon, name, url }) => {
+        return (
+          <a
+            key={name}
+            className="group relative flex aspect-video flex-col items-center justify-center gap-2 rounded-md border border-zinc-200/50 bg-zinc-100/50 text-white outline-none transition-all hover:bg-zinc-200 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-zinc-700/50 dark:bg-zinc-800/50 dark:hover:bg-zinc-800"
+            href={url}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            {cloneElement(icon, {
+              className: icon.props?.className ?? "h-6 w-6",
+            })}
+            {name}
+            <ArrowTopRightOnSquareIcon className="absolute right-2 top-2 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100 group-focus:opacity-100" />
+          </a>
+        )
+      })}
+    </div>
+  )
+}

app/(main)/resume/content.mdx

@@ -0,0 +1,76 @@
+import Skills from "./Skills"
+import Date from "./Date"
+
+I'm a front-end software engineer with a strong passion for delivering impactful
+and scalable solutions to customers, improving developer experience, and
+mentoring other developers to achieve success.
+
+## Skills
+
+Languages, frameworks, and tools that I use professionally on a regular basis.
+This is not the list of everything I've ever used at some point in my career,
+but those with which I have worked extensively.
+
+<Skills />
+
+## Experience
+
+### Senior Software Engineer — [Federato](https://federato.ai)
+
+<Date>March 2023 - Present</Date>
+
+- Built and maintained a significant portion of an internal component library
+- Architected and implemented an admin portal to allow for customer
+  configuration of the product
+- Major improvements to code quality by better leveraging TypeScript, ESLint,
+  and other tools in CI
+- Collaboration with the user experience and product teams throughout the
+  engineering process
+- Working directly with customers to plan and develop feature requirements
+- Mentoring developers, knowledge sharing, and teaching techniques for improving
+  engineering skills
+
+### Staff Software Engineer — [Widen, an Acquia Company](https://www.acquia.com/products/acquia-dam)
+
+<Date>January 2019 - February 2023</Date>
+
+- Building scalable web applications to replace a legacy monolithic application
+- Developing frontend React applications in collaboration with the user
+  experience team
+- Leading the development of shared component and utility libraries used
+  throughout the company
+- Subject matter expert on subjects including TypeScript, end-to-end testing,
+  and build tooling
+- Implemented a distributed frontend architecture using module federation
+- Leading front-end development as a member of the technical leadership team
+- Contributing to open source both personally and professionally
+- Developing a internal browser extension to simplify common development tasks
+- Architecting and developing a Java based, bulk data import tool
+- Participating in Agile meetings including standups, sprint planning, story
+  pointing, and retrospectives
+
+### Web Developer — [CKH Consulting](https://ckhconsulting.com)
+
+<Date>August 2016 - January 2019</Date>
+
+- Consulting with customers to define their technical needs, then designing and
+  executing a solution to meet them
+- Leading development for an enterprise level Single Sign-On application
+  including reporting and analytics functionality, using Node.js and Vue.js
+- Architecting a time tracking application that integrates seamlessly with
+  QuickBooks using Node.js on the back-end, Angular/Ionic on the front-end,
+  deployed with Docker
+- Creating a payment processing API with bi-directional support for multiple
+  payment gateways, transforming data from disparate sources into a unified
+  format
+- Traveling onsite to customers for at-the-elbow troubleshooting for development
+  issues
+- Communicating effectively with customers and cross-role internal stakeholders
+- Participating and/or leading the entire development life cycle from
+  requirement elicitation sessions to design, development, testing, and support
+
+## Education
+
+Earned a BA in Computer Science from
+[Thomas Edison State University](https://www.tesu.edu/) in late 2019 while
+working nearly full-time. Completed 90 credits before age 19 with a 4.0 GPA.

app/(main)/resume/page.tsx

@@ -0,0 +1,22 @@
+import { Metadata } from "next"
+import { Container } from "components/Container"
+import { PageTitle } from "components/PageTitle"
+import { Prose } from "components/Prose"
+import Content from "./content.mdx"
+
+export const metadata: Metadata = {
+  description: `Results oriented front-end software engineer with a strong passion for delivering impactful and scalable solutions to customers, improving developer experience, and mentoring other developers to achieve success.`,
+  title: "Resume | Mark Skelton",
+}
+
+export default function Projects() {
+  return (
+    <Container className="mx-auto mt-16 max-w-4xl sm:mt-20">
+      <PageTitle>Hi, I’m Mark 👋</PageTitle>
+
+      <Prose className="prose-h2:mt-3 prose-li:my-2">
+        <Content />
+      </Prose>
+    </Container>
+  )
+}

app/page.tsx

@@ -1,4 +1,4 @@
-import { ArrowDownTrayIcon, ChevronRightIcon } from "@heroicons/react/20/solid"
+import { ChevronRightIcon } from "@heroicons/react/20/solid"
 import Link from "next/link"
 import type { SocialLinkProps } from "./(main)/about/page"
 import type { PostProps } from "./(main)/blog/page"
@@ -124,14 +124,13 @@ function Resume() {
       </ol>
 
       <Button
-        as="a"
+        as={Link}
         className="group mt-6 w-full"
-        download
-        href="/mark-skelton.pdf"
+        href="/resume"
         variant="secondary"
       >
-        Download resume
-        <ArrowDownTrayIcon className="h-4 w-4 stroke-current" />
+        View Resume
+        <ChevronRightIcon className="h-5 w-5" />
       </Button>
     </div>
   )

config/remark-auto-image-path.mjs

@@ -8,7 +8,9 @@ export default function remarkAutoImagePath() {
     const slug = path.basename(path.dirname(filename))
 
     visit(ast, "image", (node) => {
-      node.url = path.join(slug, node.url)
+      if (!node.url.startsWith("https://")) {
+        node.url = path.join(slug, node.url)
+      }
     })
 
     visit(ast, "mdxJsxFlowElement", (node) => {