feat: revamped styling and content of home page

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -1,10 +1,8 @@
 import type { NextConfig } from "next";
 import createMDX from "@next/mdx";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
-import rehypeKatex from "rehype-katex";
 
 const nextConfig: NextConfig = {
+  typedRoutes: true,
   /* config options here */
   experimental: {
     typedEnv: true,

package.json

@@ -19,13 +19,15 @@
     "@mdx-js/react": "^3.1.1",
     "@mesh-gradient/react": "^1.5.0",
     "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
+    "@mui/lab": "^7.0.1-beta.22",
+    "@mui/material": "^7.3.8",
     "@mui/material-nextjs": "^7.3.0",
     "@next/mdx": "^16.1.6",
     "@types/mdx": "^2.0.13",
     "@vercel/analytics": "^1.5.0",
     "@vercel/speed-insights": "^1.2.0",
     "markdown-to-jsx": "^9.7.6",
+    "motion": "^12.34.3",
     "mui-markdown": "^2.1.1",
     "next": "^16.1.6",
     "octokit": "^5.0.5",

src/api/github/commits.ts

@@ -38,3 +38,27 @@ const getNumCommitsFn = async (
 };
 
 export const getNumCommits = cache(getNumCommitsFn);
+
+const getTotalNumCommitsFn = async (owner: string): Promise<number> => {
+  try {
+    const res = await octokit.request("GET /search/commits", {
+      q: `author:${owner}`,
+      headers: {
+        "X-GitHub-Api-Version": "2022-11-28",
+      },
+    });
+
+    if (res.status > 299) {
+      throw new Error(
+        `Failed to fetch total number of commits. Status: ${res.status}`
+      );
+    }
+
+    return res.data.total_count;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export const getTotalNumCommits = cache(getTotalNumCommitsFn);

src/api/github/index.ts

@@ -1,5 +1,7 @@
 export * from "./commits";
+export * from "./issues";
 export * from "./languages";
+export * from "./pullRequests";
 export * from "./readme";
 export * from "./repo";
 export * from "./tags";

src/api/github/issues.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import { cache } from "react";
+
+import octokit from "./entry";
+
+const getTotalIssuesCreatedFn = async (owner: string): Promise<number> => {
+  try {
+    const response = await octokit.request("GET /search/issues", {
+      q: `type:issue author:${owner}`,
+      per_page: 1,
+      headers: {
+        "X-GitHub-Api-Version": "2022-11-28",
+      },
+    });
+
+    if (response.status > 299) {
+      throw new Error(
+        `Failed to fetch number of issues created. Status: ${response.status}`
+      );
+    }
+
+    return response.data.total_count;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export const getTotalIssuesCreated = cache(getTotalIssuesCreatedFn);

src/api/github/pullRequests.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import { cache } from "react";
+
+import octokit from "./entry";
+
+const getTotalPRsCreatedFn = async (owner: string): Promise<number> => {
+  try {
+    const response = await octokit.request("GET /search/issues", {
+      q: `type:pr author:${owner}`,
+      per_page: 1,
+      headers: {
+        "X-GitHub-Api-Version": "2022-11-28",
+      },
+    });
+
+    if (response.status > 299) {
+      throw new Error(
+        `Failed to fetch number of pull requests. Status: ${response.status}`
+      );
+    }
+
+    return response.data.total_count;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export const getTotalPRsCreated = cache(getTotalPRsCreatedFn);

src/api/github/repo.ts

@@ -59,3 +59,28 @@ const getReposFn = async (
 };
 
 export const getRepos = cache(getReposFn);
+
+const getTotalNumReposFn = async (owner: string): Promise<number> => {
+  try {
+    const response = await octokit.request("GET /search/repositories", {
+      q: `user:${owner}`,
+      per_page: 1,
+      headers: {
+        "X-GitHub-Api-Version": "2022-11-28",
+      },
+    });
+
+    if (response.status > 299) {
+      throw new Error(
+        `Failed to fetch number of repositories for owner "${owner}". Status: ${response.status}`
+      );
+    }
+
+    return response.data.total_count;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export const getTotalNumRepos = cache(getTotalNumReposFn);

src/app/layout.tsx

@@ -1,15 +1,19 @@
 import "./globals.css";
 
 import CssBaseline from "@mui/material/CssBaseline";
+import Grid from "@mui/material/Grid";
 import InitColorSchemeScript from "@mui/material/InitColorSchemeScript";
 import { ThemeProvider } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import type { Metadata, Viewport } from "next";
 
+import CopyButton from "~/components/CopyButton";
 import Footer from "~/components/layout/Footer";
 import Nav from "~/components/layout/Nav";
+import SocialLinks from "~/components/SocialLinks";
 import { roboto } from "~/style/font";
 import theme from "~/style/theme";
 
@@ -67,6 +71,13 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const contactInfo = [
+    {
+      text: "george.madeley@outlook.com",
+      id: "email",
+    },
+    { text: "+44 7830 979199", id: "phone" },
+  ];
   return (
     <html className={roboto.className} lang="en" suppressHydrationWarning>
       <body>
@@ -80,7 +91,69 @@ export default function RootLayout({
             <CssBaseline />
             <Nav />
             <main>{children}</main>
-            <Footer />
+            <Footer
+              sections={[
+                {
+                  title: "Jobs",
+                  gridProps: { size: { xs: 12, sm: 6 } },
+                  items: [
+                    {
+                      title: "Atlantic Technology Ltd",
+                      link: "https://www.atlantictechnology.co.uk/",
+                    },
+                    {
+                      title: "Biodevices Without Borders",
+                      link: "https://bathbiodevices.com/",
+                    },
+                    {
+                      title: "British Telecommunications",
+                      link: "https://www.bt.com/",
+                    },
+                  ],
+                },
+                {
+                  title: "Projects",
+                  gridProps: { size: { xs: 12, sm: 6 } },
+                  items: [
+                    {
+                      title: "EE40140-Magnetic-Induction-Tomography",
+                      link: "/projects/EE40140-Magnetic-Induction-Tomography?owner=George-Madeley",
+                    },
+                    {
+                      title: "GameDevTV-Unity3D-RealmRush",
+                      link: "/projects/GameDevTV-Unity3D-RealmRush?owner=George-Madeley",
+                    },
+                    {
+                      title: "Biodevices App",
+                      link: "/projects/App?owner=Bath-Biodevices-Without-Borders",
+                    },
+                  ],
+                },
+              ]}
+              socials={<SocialLinks />}
+              title="George Madeley"
+              usefulLinks={contactInfo.map((info) => (
+                <Grid alignItems="center" container gap={1} key={info.id}>
+                  <Grid size="auto">
+                    <CopyButton
+                      color="inherit"
+                      label={info.id}
+                      size="small"
+                      text={info.text}
+                    />
+                  </Grid>
+                  <Grid size="grow">
+                    <Typography
+                      color="textSecondary"
+                      noWrap
+                      textOverflow="ellipsis"
+                    >
+                      {info.text}
+                    </Typography>
+                  </Grid>
+                </Grid>
+              ))}
+            />
           </ThemeProvider>
         </AppRouterCacheProvider>
         <Analytics />