chore: use our configs, update dependencies (#34)

### Explanation

This gets us in line with our other project standards, and allows us to start testing!

### Issue

Closes #18

### Attestations

- [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [x] I have pinned the dependencies to a specific patch version.

### Style

- [x] I have run the linter and resolved any errors.
- [x] My pull request uses an appropriate title, matching the conventional commit standards.
- [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

Major - My pull request introduces a breaking change.

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

src/app/work/page.tsx

@@ -1,92 +1,103 @@
-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";
+/**
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
 import { faCalendar, faTasks } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Job } from "../../components/job";
+import { Rule } from "../../components/rule";
+import { Jobs } from "../../config/Jobs";
+import { Volunteer } from "../../icons/Volunteer";
+import type { JSX } from "react";
 
+/**
+ * Renders the /work page.
+ * @returns A React Component.
+ */
 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>
+    <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>
-          We run a software engineering and community management firm known as
-          nhcarrigan.
+          {`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-double border-4"></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>
-          <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-double border-4"></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>
-    </>
+      </section>
+      <section>
+        <h2 className="text-3xl">{`Timeline`}</h2>
+        <ol className="relative border-s border-[--primary] w-4/5 m-auto">
+          {Jobs.toSorted((a, b) => {
+            return b.start.getTime() - a.start.getTime();
+          }).map(
+            (job) => {
+              return <Job
+                company={job.company}
+                description={job.description}
+                end={job.end}
+                key={`${job.title} - ${job.company}`}
+                link={job.link}
+                logo={job.logo}
+                start={job.start}
+                title={job.title}
+                type={job.type}
+              />;
+            }
+            ,
+          )}
+        </ol>
+      </section>
+    </main>
   );
 };