aidxnCC/app/components/pages/About.tsx

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import GitHubFeatured from '../GitHubFeatured'

export default function About() {
    return (
        <div className="max-w-2xl mx-auto text-center">
            <FontAwesomeIcon icon={faUser} className="text-6xl mb-6" />
            <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
                About Me
            </h1>
            <div className="p-6">
                <p className="text-gray-300 mb-4">
                    Hey there! I&apos;m Aidan, a web developer and student, and this is my website. I&apos;m passionate about web development (although I&apos;m not great with design) and I love building things with Node.js and Express.
                </p>
                <p className="text-gray-300 mb-4">
                    In terms of my academic background, I am currently pursuing a degree in computer science at SNHU. I really enjoy learning, though it depends on the subject. I am mostly self-taught when it comes to programming. I prefer this style of learning, especially with programming, as it lets me learn faster and apply creativity much more.
                </p>
                <p className="text-gray-300 mb-4">
                    When I&apos;m not programming, I can typically be found installing another Linux distro on my laptop or flashing a new ROM to my phone. I am also a passionate writer and I like to write creatively in my free time.
                </p>
                <p className="text-gray-300">
                    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>
    )
}