Add work page

src/Client/src/components/NavBar.tsx

@@ -32,6 +32,7 @@ export default function NavBar() {
           </button>
         </div>
         <Popover.Group className="hidden lg:flex lg:gap-x-12">
+          <NavLink to="/work">Work</NavLink>
           <NavLink to="/about">This App</NavLink>
         </Popover.Group>
       </nav>
@@ -60,6 +61,12 @@ export default function NavBar() {
           <div className="mt-6 flow-root">
             <div className="-my-6 divide-y divide-gray-200/10">
               <div className="space-y-2 py-6">
+                <NavLink
+                  to="/work"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7"
+                >
+                  Work
+                </NavLink>
                 <NavLink
                   to="/about"
                   className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7"

src/Client/src/components/WorkTimeline.tsx

@@ -0,0 +1,76 @@
+import AnchorLink from "./AnchorLink";
+import Text from "./Text";
+
+interface WorkTimelineItem {
+  startDate: string;
+  endDate?: string | null;
+  title: string;
+  companyName: string;
+  companyUrl: string;
+  content: string[];
+}
+
+const workTimelineItems: WorkTimelineItem[] = [
+  {
+    startDate: "September 2021",
+    title: "CTO",
+    companyName: "un:hurd music",
+    companyUrl: "https://unhurdmusic.com",
+    content: [
+      "As one of the founding developers at un:hurd music and now Chief Technology Officer, I built and scaled un:hurd's back-end and cloud infrastructure that serves automated marketing soloutions for tens-of-thousands of artists and musicians.",
+      "I lead a small but incredibly talented multi-diciplinary team building on the Azure cloud using a .NET backend, React web front-end and a Swift native iOS app.",
+    ],
+  },
+  {
+    startDate: "August 2020",
+    endDate: "September 2021",
+    title: "Software Development Lead",
+    companyName: "Vouch",
+    companyUrl: "https://vouch.co.uk/",
+    content: [
+      "At Vouch I lead the backend build of a new version of their tenant referencing software - an AI enhanced chat-bot based system utlising Azure Cognitive Services and various supporting serverless APIs written in .NET Core and hosted on Microsoft Azure.",
+    ],
+  },
+  {
+    startDate: "May 2020",
+    endDate: "July 2020",
+    title: "Software Developer",
+    companyName: "Paragon ID",
+    companyUrl: "https://www.paragon-id.com/en",
+    content: [
+      "I joined Paragon ID on a short-term contract where I wrote and deployed two key projects: A complex dashboard for a large construction equipment manufacturer to track assets across various manufacturing stages and a medical assets tracking dashboard deployed and used in multiple hospitals across the UK.",
+    ],
+  },
+  {
+    startDate: "July 2019",
+    endDate: "May 2020",
+    title: "Software Developer",
+    companyName: "Osborne Technologies",
+    companyUrl: "https://www.osbornetechnologies.co.uk/",
+    content: [
+      "I joined Osborne Technologies as the only cloud cloud-specialist and lead a project creating the first web-based version of their flag ship visitor management software utilising ASP.NET Core MVC and Microsoft SQL Server on the Microsoft Azure cloud.",
+    ],
+  },
+];
+
+export default function WorkTimeline() {
+  return (
+    <ol className="relative border-s border-gray-600">
+      {workTimelineItems.map((item, index) => (
+        <li key={index} className="mb-10 ms-4">
+          <div className="absolute w-3 h-3 rounded-full mt-1.5 -start-1.5 borderborder-gray-900 bg-gray-600"></div>
+          <time className="mb-1 text-sm font-normal leading-none text-gray-400">
+            {item.startDate} - {item.endDate ? item.endDate : "Present"}
+          </time>
+          <h3 className="text-2xl font-semibold text-gray-900 dark:text-white">
+            {item.title} @{" "}
+            <AnchorLink href={item.companyUrl}>{item.companyName}</AnchorLink>
+          </h3>
+          {item.content.map((content, index) => (
+            <Text key={index}>{content}</Text>
+          ))}
+        </li>
+      ))}
+    </ol>
+  );
+}

src/Client/src/pages/HomePage.tsx

@@ -1,6 +1,4 @@
-import { FaRegPaperPlane } from "react-icons/fa6";
 import AnchorLink from "../components/AnchorLink";
-import Subtitle from "../components/Subtitle";
 import TechIcons from "../components/TechIcons";
 import Text from "../components/Text";
 import Title from "../components/Title";
@@ -8,7 +6,7 @@ import Title from "../components/Title";
 export default function HomePage() {
   return (
     <>
-      <Title>Hi, I'm Beau.</Title>
+      <Title className="text-center mb-6">Hi, I'm Beau.</Title>
       <Text>
         I'm a UK-based software engineer and I love building cool stuff.
       </Text>
@@ -22,17 +20,7 @@ export default function HomePage() {
         <AnchorLink href="https://unhurdmusic.com">un:hurd music</AnchorLink>.
       </Text>
 
-      <TechIcons className="mt-20" />
-
-      <div className="mt-24 mb-10 text-center">
-        <Text>If you think I can help with your project...</Text>
-        <a
-          href="mailto:me@beaufindlay.com"
-          className="inline-flex items-center border-0 ring-1 ring-inset ring-gray-300 bg-black px-3.5 py-2.5 mt-2 text-sm font-semibold text-white shadow hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
-        >
-          Get in touch <FaRegPaperPlane className="ml-2" />
-        </a>
-      </div>
+      <TechIcons className="mt-28" />
     </>
   );
 }

src/Client/src/pages/WorkPage.tsx

@@ -0,0 +1,25 @@
+import { FaRegPaperPlane } from "react-icons/fa6";
+import Text from "../components/Text";
+import Title from "../components/Title";
+import WorkTimeline from "../components/WorkTimeline";
+
+export default function WorkPage() {
+  return (
+    <>
+      <Title className="text-center mb-4">Work</Title>
+      <p className="text-center text-2xl font-semibold mb-10">
+        Freelance Software Engineer since 2018
+      </p>
+      <WorkTimeline />
+      <div className="mb-10 mt-12 text-center">
+        <Text>If you think I can help with your project...</Text>
+        <a
+          href="mailto:me@beaufindlay.com"
+          className="inline-flex items-center border-0 ring-1 ring-inset ring-gray-300 bg-black px-3.5 py-2.5 mt-2 text-sm font-semibold text-white shadow hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
+        >
+          Get in touch <FaRegPaperPlane className="ml-2" />
+        </a>
+      </div>
+    </>
+  );
+}

src/Client/src/routes.tsx

@@ -3,6 +3,7 @@ import AboutPage from "./pages/AboutPage";
 import ErrorPage from "./pages/ErrorPage";
 import HomePage from "./pages/HomePage";
 import Layout from "./pages/Layout";
+import WorkPage from "./pages/WorkPage";
 
 const router = createBrowserRouter([
   {
@@ -11,6 +12,7 @@ const router = createBrowserRouter([
     errorElement: <ErrorPage />,
     children: [
       { index: true, element: <HomePage /> },
+      { path: "work", element: <WorkPage /> },
       { path: "about", element: <AboutPage /> },
     ],
   },