feat: move to next.js (!14)

Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/14
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/app/work/page.tsx

@@ -0,0 +1,93 @@
+import { Job } from "@/components/job";
+import { Rule } from "@/components/rule";
+import { Social } from "@/components/social";
+import { Jobs } from "@/config/Jobs";
+import { Donate, HireMe, Socials } from "@/config/Socials";
+import { Volunteer } from "@/icons/Volunteer";
+import { faCalendar, faTasks } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const Work = (): JSX.Element => {
+  return (
+    <>
+      <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+        <h1 className="text-5xl">Our Work</h1>
+        <p>
+          We run a software engineering and community management firm known as
+          nhcarrigan.
+        </p>
+        <Rule />
+        <section>
+          <h2 className="text-3xl">Legend</h2>
+          <p>
+            Our work is listed here in reverse chronological order. The symbols
+            and colours have a specific meaning:
+          </p>
+          <table className="m-auto w-1/2">
+            <thead>
+              <tr>
+                <th>Symbol</th>
+                <th>Meaning</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <FontAwesomeIcon className="h-14" icon={faCalendar} />
+                </td>
+                <td>Fixed-Rate Contract (hourly/salary)</td>
+              </tr>
+              <tr>
+                <td>
+                  <FontAwesomeIcon className="h-14" icon={faTasks} />
+                </td>
+                <td>Project-based Contract</td>
+              </tr>
+              <tr>
+                <td>
+                  <FontAwesomeIcon className="h-14" icon={Volunteer} />
+                </td>
+                <td>Planned</td>
+              </tr>
+              <tr>
+                <td>
+                  <p className="h-14 w-14 border-[--current] border-solid border-2"></p>
+                </td>
+                <td className="text-[--current]">Current Contract</td>
+              </tr>
+              <tr>
+                <td>
+                  <p className="h-14 w-14 border-[--former] border-dashed border-2"></p>
+                </td>
+                <td className="text-[--former]">Former Contract</td>
+              </tr>
+            </tbody>
+          </table>
+          <Rule />
+        </section>
+        <section>
+          <h2 className="text-3xl">Timeline</h2>
+          <ol className="relative border-s border-[--primary] w-4/5 m-auto">
+            {Jobs.sort((a, b) => b.start.getTime() - a.start.getTime()).map(
+              (job) => (
+                <Job
+                  key={job.title + " - " + job.company}
+                  title={job.title}
+                  company={job.company}
+                  start={job.start}
+                  end={job.end}
+                  link={job.link}
+                  type={job.type}
+                  description={job.description}
+                  logo={job.logo}
+                />
+              ),
+            )}
+          </ol>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default Work;