feat: new website

src/ui/Tech/Tech.ts

@@ -0,0 +1,48 @@
+import Layout from "ui/Layout"
+import Window from "ui/Layout/Window"
+import Markdown from "ui/shared/Markdown"
+import * as Sections from "./Sections"
+
+const title = "Dan Finch - Expertise"
+
+export default function Expertise() {
+  return Layout(
+    { title, url: "/tech" },
+    Window(
+      { title, flat: true },
+      div(
+        [
+          display.flex,
+          flexWrap.wrap,
+          marginRight("8px"),
+          paddingBottom("16px"),
+          gap("8px"),
+        ],
+        Skillset("Core Languages", Sections.languages),
+        Skillset("Platforms", Sections.platforms),
+        Skillset("Frontend", Sections.frontend),
+        Skillset("Backend", Sections.backend),
+        Skillset("Data", Sections.data),
+        Skillset("Principles", Sections.principles),
+        Skillset("Architecture", Sections.architecture),
+        Skillset("Delivery", Sections.delivery),
+        Skillset("Quality", Sections.quality),
+        Skillset("Collaboration", Sections.collaboration),
+      ),
+    ),
+  )
+}
+
+function Skillset(title: string, markdown: Content) {
+  return div(
+    [
+      flex(1),
+      minWidth("250px"),
+      display.flex,
+      flexDirection.column,
+      gap("4px"),
+    ],
+    h2(title),
+    div.fieldBorder(flex(1), Markdown(markdown)),
+  )
+}