Feat/update pfp (#26)

* chore: update profile picture

* feat(About): add tooltip to image

* chore: update profile picture

* chore: update profile picture description

config.json

@@ -34,7 +34,8 @@
 		"about": {
 			"about": {
 				"text": "Hey, I’m Daan. 16 year-old full-stack developer from the Netherlands. The “hacker” of the family since the age of 10 😅. I wrote my first lines of code when I was 14 and I haven’t stopped ever since. I love open-source projects, that’s why I always try to open-source as many of my projects as possible to show progammers and interested users how the code behind a certain button works.",
-				"picture": "https://static.daangamesdg.xyz/discord/pfp.gif"
+				"picture": "https://avatars.githubusercontent.com/u/65551719",
+				"picture_tooltip": "Yep, that's me. Probably the only picture of me you will see in your entire life."
 			},
 			"cards": [
 				{

src/pages/about.tsx

@@ -4,6 +4,7 @@ import Page from "../components/general/Page";
 import Title from "../components/general/Title";
 import type { NextPageWithLanyard } from "../lib/types";
 import config from "../../config.json";
+import ToolTip from "../components/general/Tooltip";
 
 const About: NextPageWithLanyard = () => {
 	return (
@@ -16,7 +17,9 @@ const About: NextPageWithLanyard = () => {
 						<p className="about-text">{config.pages.about.about.text}</p>
 					</div>
 					<div className="about-picture-wrapper">
-						<img className="about-picture" src={config.pages.about.about.picture} alt="picture" />
+						<ToolTip content={config.pages.about.about.picture_tooltip}>
+							<img className="about-picture" src={config.pages.about.about.picture} alt="picture" />
+						</ToolTip>
 					</div>
 				</div>
 				<div className="about-list-container">