About tabs wip

src/Client/src/components/AboutTabs.tsx

@@ -0,0 +1,68 @@
+import { Tab } from "@headlessui/react";
+import { Fragment } from "react";
+import Subtitle from "./Subtitle";
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function AboutTabs() {
+  return (
+    <Tab.Group as="div" className="mt-4">
+      <div className="-mx-4 flex overflow-x-auto sm:mx-0">
+        <div className="flex-auto border-b border-gray-200 px-4 sm:px-0">
+          <Tab.List className="-mb-px flex space-x-10">
+            <Tab
+              className={({ selected }) =>
+                classNames(
+                  selected
+                    ? "border-indigo-500 text-indigo-600"
+                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                  "whitespace-nowrap border-b-2 py-6 text-sm font-medium"
+                )
+              }
+            >
+              Front-end
+            </Tab>
+            <Tab
+              className={({ selected }) =>
+                classNames(
+                  selected
+                    ? "border-indigo-500 text-indigo-600"
+                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                  "whitespace-nowrap border-b-2 py-6 text-sm font-medium"
+                )
+              }
+            >
+              Back-end
+            </Tab>
+            <Tab
+              className={({ selected }) =>
+                classNames(
+                  selected
+                    ? "border-indigo-500 text-indigo-600"
+                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                  "whitespace-nowrap border-b-2 py-6 text-sm font-medium"
+                )
+              }
+            >
+              Hosting
+            </Tab>
+          </Tab.List>
+        </div>
+      </div>
+
+      <Tab.Panels as={Fragment}>
+        <Tab.Panel className="space-y-16 pt-10">
+          <Subtitle>Front-end</Subtitle>
+        </Tab.Panel>
+        <Tab.Panel className="space-y-16 pt-10">
+          <Subtitle>Back-end</Subtitle>
+        </Tab.Panel>
+        <Tab.Panel className="space-y-16 pt-10">
+          <Subtitle>Hosting</Subtitle>
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+}

src/Client/src/components/Link.tsx

@@ -1,16 +1,16 @@
 interface Props {
   children: string;
-  href: string;
+  href?: string;
   target?: "_blank" | "";
+  className?: string | null;
 }
 
-export default function Link({ children, href, target }: Props) {
+export default function Link({ children, href, target, className }: Props) {
+  const defaultStyles = "underline underline-offset-2 hover:underline-offset-4";
+  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+
   return (
-    <a
+    <a href={href} target={target} className={styles}>
-      href={href}
-      target={target}
-      className="underline underline-offset-2 hover:underline-offset-4"
-    >
       {children}
     </a>
   );

src/Client/src/pages/AboutPage.tsx

@@ -0,0 +1,24 @@
+import AboutTabs from "../components/AboutTabs";
+import Link from "../components/Link";
+import Text from "../components/Text";
+import Title from "../components/Title";
+
+export default function AboutPage() {
+  return (
+    <>
+      <Title className="text-center pb-4">This App</Title>
+      <Text>
+        Below is an overview of how this simple app is made and what
+        technologies are used. If you'd like to dive straight in, the full
+        project is available on my{" "}
+        <Link href="https://github.com/bdfin/my-portfolio">GitHub</Link>.
+      </Text>
+      <Text>
+        I'm planning to integrate a simple blog as part of this app that will
+        dive into more specific implementation details so check back soon for
+        more!
+      </Text>
+      <AboutTabs />
+    </>
+  );
+}

src/Client/src/routes.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter } from "react-router-dom";
 import Layout from "./pages/Layout";
 import HomePage from "./pages/HomePage";
 import ContactPage from "./pages/ContactPage";
+import AboutPage from "./pages/AboutPage";
 
 const router = createBrowserRouter([
   {
@@ -10,6 +11,7 @@ const router = createBrowserRouter([
     children: [
       { index: true, element: <HomePage /> },
       { path: "contact", element: <ContactPage /> },
+      { path: "about", element: <AboutPage /> },
     ],
   },
 ]);