From 9d07bedc7091b3b7ac14175be58259c342695eb0 Mon Sep 17 00:00:00 2001
From: Aidan <aidan@p0ntus.com>
Date: Mon, 6 Jan 2025 09:51:04 -0500
Subject: [PATCH] add info about github to about page

---
 app/components/GitHubFeatured.tsx | 28 +++++++++++++++++++++++++
 app/components/pages/About.tsx    | 15 ++++++++++++++
 app/data/featured.json            | 34 +++++++++++++++++++++++++++++++
 3 files changed, 77 insertions(+)
 create mode 100644 app/components/GitHubFeatured.tsx
 create mode 100644 app/data/featured.json

diff --git a/app/components/GitHubFeatured.tsx b/app/components/GitHubFeatured.tsx
new file mode 100644
index 0000000..2869fc3
--- /dev/null
+++ b/app/components/GitHubFeatured.tsx
@@ -0,0 +1,28 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faStar, faCodeBranch } from '@fortawesome/free-solid-svg-icons'
+import featuredProjects from '../data/featured.json'
+
+export default function GitHubFeatured() {
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {featuredProjects.map((project) => (
+                <div key={project.id} className="bg-gray-800 p-6 rounded-lg shadow-md min-h-[200px] flex flex-col">
+                    <div className="flex-1">
+                        <h3 className="text-xl font-bold text-gray-100 mb-3">
+                            <FontAwesomeIcon icon={faGithub} className="mr-2" /> {project.name}
+                        </h3>
+                        <p className="text-gray-300 flex-grow">{project.description}</p>
+                    </div>
+                    <div className="pt-4 border-t border-gray-700 flex justify-between items-center mt-auto">
+                        <a href={project.url} className="text-blue-400 hover:underline">View Repo</a>
+                        <div className="flex items-center text-gray-400">
+                            <FontAwesomeIcon icon={faStar} className="mr-1" /> {project.stars}
+                            <FontAwesomeIcon icon={faCodeBranch} className="ml-4 mr-1" /> {project.forks}
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/components/pages/About.tsx b/app/components/pages/About.tsx
index 48ec56b..f3bbe04 100644
--- a/app/components/pages/About.tsx
+++ b/app/components/pages/About.tsx
@@ -1,5 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
+import GitHubFeatured from '../GitHubFeatured'
 
 export default function About() {
     return (
@@ -22,6 +23,20 @@ export default function About() {
                     I am almost always active on GitHub and make daily contributions to several of my repositories. I am a big fan of open source software and public domain software (which most of my repos are licensed under). In fact, the website you&apos;re currently on is free and open source. It&apos;s even under the public domain!
                 </p>
             </div>
+            <div className="mt-12">
+                <h2 className="text-2xl font-semibold mb-4 text-gray-200">My GitHub Contributions</h2>
+                <div className="flex justify-center gap-4">
+                    <div className="flex flex-col gap-4 w-1/2">
+                        <img src="https://github-readme-stats.vercel.app/api?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&count_private=true" alt="ihatenodejs's Stats" className="w-full" />
+                        <img src="https://github-readme-streak-stats.herokuapp.com/?user=ihatenodejs&theme=dark&hide_border=true" alt="ihatenodejs's Streak" className="w-full" />
+                    </div>
+                    <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&layout=compact" alt="ihatenodejs's Top Languages" className="w-1/3" />
+                </div>
+            </div>
+            <div className="mt-12">
+                <h2 className="text-2xl font-semibold mb-4 text-gray-200">Featured Projects</h2>
+                <GitHubFeatured />
+            </div>
         </div>
     )
 }
\ No newline at end of file
diff --git a/app/data/featured.json b/app/data/featured.json
new file mode 100644
index 0000000..3b3c418
--- /dev/null
+++ b/app/data/featured.json
@@ -0,0 +1,34 @@
+[
+  {
+    "id": 1,
+    "name": "aidxnCC",
+    "description": "aidxnCC is the third version of my personal website",
+    "url": "https://github.com/ihatenodejs/aidxnCC",
+    "stars": 1,
+    "forks": 1
+  },
+  {
+    "id": 2,
+    "name": "pontus-mail",
+    "description": "Landing page for p0ntus mail",
+    "url": "https://github.com/ihatenodejs/pontus-mail",
+    "stars": 7,
+    "forks": 0
+  },
+  {
+    "id": 3,
+    "name": "modules",
+    "description": "An open-source Magisk module and FOSS app store",
+    "url": "https://github.com/ihatenodejs/modules",
+    "stars": 2,
+    "forks": 0
+  },
+  {
+    "id": 4,
+    "name": "AndroidIntegrity/website",
+    "description": "AIA website source code",
+    "url": "https://github.com/AndroidIntegrity/website",
+    "stars": 5,
+    "forks": 1
+  }
+]