integrate into git

components/GitGallery/GitGallery.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Head from "next/head";
+import Image from "next/image";
+import ProjectCard from "../ProjectCard";
+import styles from "./GitGallery.module.sass";
+
+export function GitGallery(props) {
+  var links = [];
+
+  props.publicGiteaRepos.forEach((repo) => {
+    links.push(
+      <ProjectCard
+        classNames={styles.card_gitea}
+        url={repo.html_url}
+        fullName={repo.full_name}
+        name={repo.name}
+        description={repo.description}
+        avatarUrl={repo.avatar_url}
+      />
+    );
+  });
+
+  props.publicGithubRepos.forEach((repo) => {
+    links.push(
+      <ProjectCard
+        classNames={styles.card_github}
+        url={repo.html_url}
+        fullName={repo.full_name}
+        name={repo.name}
+        description={repo.description}
+        avatarUrl={repo.avatar_url}
+      />
+    );
+  });
+
+  return (
+    <div className={styles.cardContainer}>
+      <h2>These are my public repositories:</h2>
+      {links}
+    </div>
+  );
+}

components/GitGallery/GitGallery.module.sass

@@ -0,0 +1,11 @@
+.cardContainer
+    // border: 1px solid gray
+    width: 90vw
+    max-width: 1000px
+    display: flex
+    flex-wrap: wrap
+    justify-content: center
+
+    h2
+        width: 100%
+        text-align: center

components/GitGallery/index.js

@@ -0,0 +1,3 @@
+import { GitGallery } from "./GitGallery";
+
+export default GitGallery;