add info about github to about page

This commit is contained in:
Aidan 2025-01-06 09:51:04 -05:00
parent 2e34715d19
commit 9d07bedc70
3 changed files with 77 additions and 0 deletions

View File

@ -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>
)
}

View File

@ -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>
)
}

34
app/data/featured.json Normal file
View File

@ -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
}
]