Add projects to about page and contact methods

Author: Rikthepixel

package-lock.json

@@ -11,9 +11,6 @@
     "@heroicons/react": "^2.0.16",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^2.9.11",
-    "@types/node": "18.15.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
     "class-variance-authority": "^0.4.0",
     "framer-motion": "^9.1.7",
     "next": "13.2.4",
@@ -29,6 +26,9 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
+    "@types/node": "18.15.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "autoprefixer": "^10.4.14",
     "cross-env": "^7.0.3",
     "cssnano": "^5.1.15",
@@ -37,4 +37,4 @@
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7"
   }
-}
+}

package.json

@@ -0,0 +1,19 @@
+import React, { SVGProps, forwardRef, ForwardedRef } from "react";
+
+const DiscordIcon = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="-10.63 -.07077792 823.87 610.06955549"
+    height="1em"
+    width="1em"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="m678.27 51.62c90.35 132.84 134.97 282.68 118.29 455.18-.07.73-.45 1.4-1.05 1.84-68.42 50.24-134.71 80.73-200.07 100.95a2.55 2.55 0 0 1 -2.81-.95c-15.1-21.01-28.82-43.16-40.84-66.42-.69-1.37-.06-3.02 1.36-3.56 21.79-8.21 42.51-18.05 62.44-29.7 1.57-.92 1.67-3.17.22-4.25-4.23-3.14-8.42-6.44-12.43-9.74-.75-.61-1.76-.73-2.61-.32-129.39 59.75-271.13 59.75-402.05 0-.85-.38-1.86-.25-2.59.35-4 3.3-8.2 6.57-12.39 9.71-1.45 1.08-1.33 3.33.25 4.25 19.93 11.43 40.65 21.49 62.41 29.74 1.41.54 2.08 2.15 1.38 3.52-11.76 23.29-25.48 45.44-40.86 66.45-.67.85-1.77 1.24-2.81.92-65.05-20.22-131.34-50.71-199.76-100.95-.57-.44-.98-1.14-1.04-1.87-13.94-149.21 14.47-300.29 118.18-455.18.25-.41.63-.73 1.07-.92 51.03-23.42 105.7-40.65 162.84-50.49 1.04-.16 2.08.32 2.62 1.24 7.06 12.5 15.13 28.53 20.59 41.63 60.23-9.2 121.4-9.2 182.89 0 5.46-12.82 13.25-29.13 20.28-41.63a2.47 2.47 0 0 1 2.62-1.24c57.17 9.87 111.84 27.1 162.83 50.49.45.19.82.51 1.04.95zm-339.04 283.7c.63-44.11-31.53-80.61-71.9-80.61-40.04 0-71.89 36.18-71.89 80.61 0 44.42 32.48 80.6 71.89 80.6 40.05 0 71.9-36.18 71.9-80.6zm265.82 0c.63-44.11-31.53-80.61-71.89-80.61-40.05 0-71.9 36.18-71.9 80.61 0 44.42 32.48 80.6 71.9 80.6 40.36 0 71.89-36.18 71.89-80.6z"
+    />
+  </svg>
+));
+
+export default DiscordIcon;

src/assets/images/content/projects/react-router-sitemap-maker.webp

@@ -0,0 +1,43 @@
+import NewsIcon from "@heroicons/react/24/solid/NewspaperIcon";
+import EnvelopeIcon from "@heroicons/react/24/solid/EnvelopeIcon";
+import PencilSquareIcon from "@heroicons/react/24/solid/PencilSquareIcon";
+
+import DiscordIcon from "@/assets/images/icons/discord";
+
+
+import { ReactNode } from "react";
+
+interface IContactMethod {
+  title: ReactNode;
+  href?: string;
+  icon: React.ForwardRefExoticComponent<any>;
+}
+
+const contactMethods: IContactMethod[] = [
+  {
+    title: "Newsletter Signup",
+    href: "/#sign-up",
+    icon: NewsIcon
+  },
+  {
+    title: "feedback@commitrocket.com",
+    href: "mailto:feedback@commitrocket.com",
+    icon: EnvelopeIcon
+  },
+  {
+    title: "Feedback Form",
+    href: "/contribute#feedback",
+    icon: PencilSquareIcon
+  },
+  {
+    title: <>
+      Discord <br />
+      <span className="text-sm font-semibold text-neutral-700">
+        (Coming Soon™)
+      </span>
+    </>,
+    icon: DiscordIcon
+  }
+];
+
+export default contactMethods;

src/assets/images/content/projects/thenewoil.webp

@@ -0,0 +1,53 @@
+import { ReactNode } from "react";
+import { StaticImageData } from "next/image";
+
+import TheNewOilThumbnail from "@/assets/images/content/projects/thenewoil.webp";
+import ReactRouterSitemapMakerThumbnail from "@/assets/images/content/projects/react-router-sitemap-maker.webp";
+
+
+export interface IProject {
+  title: ReactNode;
+  description: ReactNode,
+  thumbnailAlt: string;
+  thumbnail: StaticImageData;
+  href: string;
+  linkText?: string;
+  linkRel?: string;
+}
+
+const projects: IProject[] = [
+  {
+    title: "The New Oil (Redesign)",
+    description: <>
+      <p>
+        We recently worked on redesigning The New Oil's website, which was an already existing website.
+        Our design proposals impressed the website owner and they agreed to let us redesign the website with a unique requirement - no javascript.
+        We utilized Astro's static site generation capabilities to develop a website that doesn't load any JavaScript once it's built.
+      </p>
+      <p>
+        We completed the project in February 2023 and handed it over to the website owner,
+        who was extremely pleased with the outcome.
+      </p>
+    </>,
+    thumbnailAlt: "The New Oil redesigned frontpage",
+    thumbnail: TheNewOilThumbnail,
+    href: "https://www.thenewoil.org/",
+  },
+  {
+    title: "React Router Sitemap Maker",
+    description: <>
+      <p>
+        React Router Sitemap Maker is a JavaScript library we developed and posted on NPM.
+        This library was born out of the necessity to build a portfolio website using React and React-Router.
+        We found that existing solutions for generating sitemaps with React Router were lacking, so we decided to create our own.
+        Our library has a large amount of code coverage, ensuring reliability and ease of use.
+      </p>
+    </>,
+    thumbnailAlt: "React Router Sitemap Maker npm-page",
+    thumbnail: ReactRouterSitemapMakerThumbnail,
+    href: "https://github.com/Rikthepixel/react-router-sitemap-maker",
+    linkText: "View Source"
+  }
+];
+
+export default projects;

src/assets/images/icons/discord.tsx

@@ -4,7 +4,6 @@ import RikPicture from "@/assets/images/people/rik.webp";
 export interface IMember {
   name: string;
   title: string;
-  text: string;
   image: StaticImageData;
   links: {
     name: string;
@@ -17,7 +16,6 @@ const members: IMember[] = [
     image: RikPicture,
     name: "Rik",
     title: "Lead Developer & Founder",
-    text: "As the creator of the project, I am passionate about delivering a top-quality Git client that meets the needs of developers everywhere.",
     links: [
       {
         href: "https://github.com/Rikthepixel",

src/assets/state/contactMethods.tsx

@@ -53,14 +53,14 @@ const Footer = () => {
             >
               Roadmap
             </Link>
-            <Link
+            {/* <Link
               color="white"
               href="/blog/2/planned-features"
               title="Planned Features"
               underline
             >
               Planned Features
-            </Link>
+            </Link> */}
             {/* <Link
               color="white"
               href="/blog/3/designs"
@@ -108,7 +108,7 @@ const Footer = () => {
               title="About the creators of Commit Rocket"
               underline
             >
-              About Us
+              About
             </Link>
             <Link
               color="white"

src/assets/state/projects.tsx

@@ -52,15 +52,18 @@ const Header = () => {
         <NavLink href="/" currentHref={router.pathname}>
           Home
         </NavLink>
-        <NavLink href="/about" currentHref={router.pathname}>
-          About
-        </NavLink>
         <NavLink href="/contribute" currentHref={router.pathname}>
           Contribute
         </NavLink>
         <NavLink href="/blog" currentHref={router.pathname}>
           Blog
         </NavLink>
+        <NavLink href="/about" currentHref={router.pathname}>
+          About
+        </NavLink>
+        <NavLink href="/contact" currentHref={router.pathname}>
+          Contact
+        </NavLink>
       </div>
     </header>
   );

src/assets/state/team.tsx

@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 import { IMember } from "@/assets/state/team";
 import LinkButton from "@/components/controls/LinkButton";
 
-const Member = ({ image, name, title, text, links, animate }: IMember & { animate: boolean; }) => (
+const Member = ({ image, name, title, links }: IMember) => (
   <li
     className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-md border-primary-light motion-safe:transition-all sm:p-6 md:w-fit"
     aria-label="Member"
@@ -20,7 +20,6 @@ const Member = ({ image, name, title, text, links, animate }: IMember & { animat
       <div className="flex flex-col max-w-full gap-2 py-4 text-center w-72">
         <p className="text-2xl font-semibold text-secondary" aria-label="Name">{name}</p>
         <p className="font-semibold text-secondary" aria-label="Title / Role">{title}</p>
-        <p className="text-fill-contrast " aria-label="Text">{text}</p>
       </div>
     </div>
     <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2" aria-label="Links">