function About() {
  return (
    <div className="about page-outer">
      <div>
        <h2 className="text-xl text-[var(--color-secondaryTextDark)]">
          This app uses the following components:
        </h2>
        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">
          Frontend:
        </h2>
        <ul>
          <li>React</li>
          <li>TypeScript</li>
        </ul>
        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">
          Backend:
        </h2>
        <ul>
          <li>NestJS</li>
          <li>PostgreSQL</li>
          <li>Prisma</li>
        </ul>
        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">
          Containerization:
        </h2>
        <ul>
          <li>Docker</li>
        </ul>
        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">
          Styling/UI:
        </h2>
        <ul>
          <li>Tailwind CSS</li>
        </ul>
        <p className="mt-4 text-[var(--color-secondaryTextDark)]">
          More about me{" "}
          <a
            className="text-[var(--color-textLink)]"
            target="_blank"
            href="https://fredzernia.com"
          >
            here
          </a>{" "}
          | Code for this app{" "}
          <a
            className="text-[var(--color-textLink)]"
            target="_blank"
            href="https://forgejo.fredzernia.com/fred/recipe_app"
          >
            here
          </a>
        </p>
      </div>
    </div>
  );
}

export default About;