v2

components/Layout.tsx

@@ -0,0 +1,23 @@
+import Projects from "./Projects";
+
+export default function Layout() {
+  return (
+    <>
+      <h1 className="lg:tracking-[-1rem] tracking-[-0.5rem] lg:text-[10rem] text-[5rem]">
+        NINE4
+      </h1>
+      <Projects />
+      <h2 className="font-semibold text-2xl mb-3 ml-3">
+        Made by{" "}
+        <a
+          href="https://jacklatimer.dev"
+          target="_blank"
+          rel="noreferrer"
+          className="underline"
+        >
+          Jack Latimer
+        </a>
+      </h2>
+    </>
+  );
+}

components/LayoutGA.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { initGA, logPageView } from "../utils/analytics";
+
+declare global {
+  interface Window {
+    GA_INITIALIZED: any;
+  }
+}
+
+export default class Layout extends React.Component<any, any> {
+  componentDidMount() {
+    if (!window.GA_INITIALIZED) {
+      initGA();
+      window.GA_INITIALIZED = true;
+    }
+    logPageView();
+  }
+  render() {
+    return <div>{this.props.children}</div>;
+  }
+}

components/ProjectList.tsx

@@ -0,0 +1,32 @@
+export const projectData = [
+  {
+    title: "#5",
+    image: "/images/nine4-5",
+    github: "https://github.com/r1/nine4-5",
+    link: "https://nine4-5.vercel.app/",
+  },
+  {
+    title: "#4",
+    image: "/images/nine4-4",
+    github: "https://github.com/r1/nine4-4",
+    link: "https://nine4-4.vercel.app/",
+  },
+  {
+    title: "#3",
+    image: "/images/nine4-3",
+    github: "https://github.com/r1/nine4-3",
+    link: "https://nine4-3.vercel.app/",
+  },
+  {
+    title: "#2",
+    image: "/images/nine4-2",
+    github: "https://github.com/r1/nine4-2",
+    link: "https://nine4-2.vercel.app/",
+  },
+  {
+    title: "#1",
+    image: "/images/nine4-1",
+    github: "https://github.com/r1/nine4-1",
+    link: "https://nine4-1.vercel.app/",
+  },
+];

components/Projects.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable react/jsx-key */
+/* eslint-disable @next/next/no-img-element */
+import { useState } from "react";
+import { projectData } from "./ProjectList";
+import Image from "next/image";
+
+function cn(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function Projects() {
+  const [isLoading, setLoading] = useState(true);
+
+  const RenderProjects = (
+    ProjectData: {
+      title: string;
+      image: string;
+      github: string;
+      link: string;
+    }[]
+  ) => {
+    return ProjectData.map((ProjectData) => {
+      return (
+        <>
+          <div className="mx-3 font-semibold">
+            <div className="inline-block overflow-hidden">
+              <a target="_blank" rel="noreferrer" href={ProjectData.link}>
+                <Image
+                  src={`${ProjectData.image}.png`}
+                  alt={ProjectData.title}
+                  width={944}
+                  height={550}
+                  className={cn(
+                    "shadow-sm duration-700 ease-in-out",
+                    isLoading
+                      ? "scale-110 blur-2xl grayscale"
+                      : "scale-100 blur-0 grayscale-0"
+                  )}
+                  onLoadingComplete={() => setLoading(false)}
+                />
+              </a>
+              <div className="py-4 pr-4">
+                <div className="mb-2 text-3xl text-black">
+                  {ProjectData.title}
+                </div>
+                <div className="flex text-xl text-[#1b1b1b] tracking-[-0.03rem]">
+                  <a target="_blank" rel="noreferrer" href={ProjectData.link}>
+                    Live Site
+                  </a>
+                  <span className="mx-3">/</span>
+                  <a target="_blank" rel="noreferrer" href={ProjectData.github}>
+                    GitHub
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      );
+    });
+  };
+
+  const RenderFinal = (
+    ProjectData: {
+      title: string;
+      image: string;
+      github: string;
+      link: string;
+    }[]
+  ) => {
+    return (
+      <div>
+        <div className="mb-4 grid grid-cols-1 sm:grid-cols-2">
+          {RenderProjects(ProjectData)}
+        </div>
+      </div>
+    );
+  };
+
+  return <>{RenderFinal(projectData)}</>;
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.