Remove contact page

src/Client/src/components/AboutTabs.tsx

@@ -1,11 +1,8 @@
 import { Tab } from "@headlessui/react";
 import { Fragment, ReactNode } from "react";
-import { SiAzurefunctions, SiMicrosoftazure, SiReact } from "react-icons/si";
-import { Link } from "react-router-dom";
+import { SiMicrosoftazure, SiReact } from "react-icons/si";
 import buildClassNames from "../helpers/cssClassFormatter";
 import AnchorLink from "./AnchorLink";
-import List from "./List";
-import ListItem from "./ListItem";
 import Subtitle from "./Subtitle";
 import Text from "./Text";
 
@@ -57,61 +54,6 @@ const tabs: AboutTab[] = [
       </Text>,
     ],
   },
-  {
-    tabName: "Back-end",
-    title: (
-      <Subtitle>
-        Back-end <SiAzurefunctions className="ml-2" />
-      </Subtitle>
-    ),
-    subtitle: ".NET Azure Functions API",
-    content: [
-      <Text>
-        There is a very minimal API used as the back-end of this app to allow
-        users to contact me directly via the{" "}
-        <Link
-          to="/contact"
-          className="underline underline-offset-2 hover:underline-offset-4"
-        >
-          contact
-        </Link>{" "}
-        page. This will be expanded to serve the technical blog I'm building as
-        a new feature that will be available soon.
-      </Text>,
-      <Text>The contact API endpoint currently:</Text>,
-      <List className="pb-4 pt-2">
-        <ListItem>
-          Validates a{" "}
-          <AnchorLink href="https://www.google.com/recaptcha/about/">
-            Google reCAPTCHA
-          </AnchorLink>{" "}
-          token to protect against fraudulent submissions.
-        </ListItem>
-        <ListItem>
-          Builds a HTML email from the information provided in the form.
-        </ListItem>
-        <ListItem>
-          Sends an email directly to my inbox using the{" "}
-          <AnchorLink href="https://sendgrid.com/en-us">SendGrid</AnchorLink>{" "}
-          API.
-        </ListItem>
-      </List>,
-      <Text>
-        The API is written in .NET 8 using{" "}
-        <AnchorLink href="https://azure.microsoft.com/en-gb/products/functions">
-          Azure Serverless Functions
-        </AnchorLink>{" "}
-        with a HTTP trigger to act as an API endpoint. For larger scale projects
-        I would almost always opt for a fully-featured{" "}
-        <AnchorLink href="https://dotnet.microsoft.com/en-us/apps/aspnet/apis">
-          Web API
-        </AnchorLink>
-        , however Azure Functions provide automatic elastic scaling with
-        consumption-based billing and a generous free-tier, making them perfect
-        for smaller projects like this.
-      </Text>,
-    ],
-  },
   {
     tabName: "Hosting",
     title: (
@@ -141,9 +83,9 @@ const tabs: AboutTab[] = [
       </Text>,
       <Text>
         Using Static Web Apps on Azure has meant that I have been able to build,
-        deploy and serve this site and API completely free (with the exception
-        of the domain name). The next thing on the roadmap is building a simple
-        blog using an{" "}
+        deploy and serve this site completely free (with the exception of the
+        domain name). The next thing on the roadmap is building a simple blog
+        using an{" "}
         <AnchorLink href="https://azure.microsoft.com/en-gb/products/azure-sql/database">
           Azure SQL database
         </AnchorLink>{" "}

src/Client/src/components/ContactForm.tsx

@@ -1,64 +0,0 @@
-import { FaRegPaperPlane } from "react-icons/fa6";
-import AnchorLink from "./AnchorLink";
-import TextInput from "./TextInput";
-import TextAreaInput from "./TextAreaInput";
-import Button from "./Button";
-import Label from "./Label";
-
-export default function ContactForm() {
-  return (
-    <div className="mx-auto max-w-xl py-4">
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          console.log("Submitted");
-        }}
-      >
-        <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
-          <div className="sm:col-span-2">
-            <Label htmlFor="name">Name</Label>
-            <div className="mt-2.5">
-              <TextInput id="name" type="text" />
-            </div>
-          </div>
-          <div className="sm:col-span-2">
-            <Label htmlFor="email">Email</Label>
-            <div className="mt-2.5">
-              <TextInput id="email" type="email" />
-            </div>
-          </div>
-          <div className="sm:col-span-2">
-            <Label htmlFor="message">Message</Label>
-            <div className="mt-2.5">
-              <TextAreaInput id="message" />
-            </div>
-          </div>
-        </div>
-        <div className="mt-4">
-          <small>
-            This site is protected by reCAPTCHA and the Google{" "}
-            <AnchorLink
-              href="https://policies.google.com/privacy"
-              target="_blank"
-            >
-              Privacy Policy
-            </AnchorLink>{" "}
-            and{" "}
-            <AnchorLink
-              href="https://policies.google.com/terms"
-              target="_blank"
-            >
-              Terms of Service
-            </AnchorLink>{" "}
-            apply.
-          </small>
-        </div>
-        <div className="mt-4 flex items-center justify-center">
-          <Button type="submit">
-            <FaRegPaperPlane className="mr-2" /> Send
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}

src/Client/src/components/NavBar.tsx

@@ -32,7 +32,6 @@ export default function NavBar() {
           </button>
         </div>
         <Popover.Group className="hidden lg:flex lg:gap-x-12">
-          <NavLink to="/contact">Contact</NavLink>
           <NavLink to="/about">This App</NavLink>
         </Popover.Group>
       </nav>
@@ -61,12 +60,6 @@ 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="/contact"
-                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7"
-                >
-                  Contact
-                </NavLink>
                 <NavLink
                   to="/about"
                   className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7"

src/Client/src/pages/ContactPage.tsx

@@ -1,16 +0,0 @@
-import ContactForm from "../components/ContactForm";
-import Text from "../components/Text";
-import Title from "../components/Title";
-
-export default function ContactPage() {
-  return (
-    <>
-      <Title className="text-center">Contact</Title>
-      <Text className="text-center pb-8">
-        If you think I can help with your project or you'd just like to talk
-        tech, send me a message!
-      </Text>
-      <ContactForm />
-    </>
-  );
-}

src/Client/src/routes.tsx

@@ -4,7 +4,6 @@ import Layout from "./pages/Layout";
 import ErrorPage from "./pages/ErrorPage";
 
 const HomePage = React.lazy(() => import("./pages/HomePage"));
-const ContactPage = React.lazy(() => import("./pages/ContactPage"));
 const AboutPage = React.lazy(() => import("./pages/AboutPage"));
 
 const router = createBrowserRouter([
@@ -14,7 +13,6 @@ const router = createBrowserRouter([
     errorElement: <ErrorPage />,
     children: [
       { index: true, element: <HomePage /> },
-      { path: "contact", element: <ContactPage /> },
       { path: "about", element: <AboutPage /> },
     ],
   },