generated from nhcarrigan/template
105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
/**
|
|
* @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>
|
|
<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>{`Pro-bono Contract`}</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.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>
|
|
);
|
|
};
|
|
|
|
export default Work;
|