Update About component and styles for responsive design

src/components/About.tsx

@@ -7,7 +7,7 @@ export default function About() {
 			<h1 className="name">Janis Meister</h1>
 			<br />
 			<h3 className="job">Software Developer.</h3>
-			<h3 className="interest">With an interest for modern technology.</h3>
+			<h3 className="interest">With an interest for modern technologies.</h3>
 			<div className="social-links">
 				<a href="https://github.com/DerTyp7" target="_blank">
 					<svg

src/styles/About.scss

@@ -33,4 +33,20 @@
 			}
 		}
 	}
+
+	@media (max-width: 1150px) {
+		padding: 5rem 2rem;
+	}
+
+	@media (max-width: 600px) {
+		.social-links {
+			flex-direction: column;
+			align-items: stretch;
+
+			a {
+				width: 100%;
+				text-align: center;
+			}
+		}
+	}
 }

src/styles/index.scss

@@ -28,16 +28,40 @@ html {
 h1 {
 	font-size: 8rem;
 	font-weight: 700;
+
+	@media screen and (max-width: 900px) {
+		font-size: 6rem;
+	}
+
+	@media screen and (max-width: 480px) {
+		font-size: 4rem;
+	}
 }
 
 h2 {
 	font-size: 4rem;
 	font-weight: 700;
+
+	@media screen and (max-width: 900px) {
+		font-size: 3rem;
+	}
+
+	@media screen and (max-width: 480px) {
+		font-size: 2rem;
+	}
 }
 
 h3 {
 	font-size: 2rem;
 	font-weight: 700;
+
+	@media screen and (max-width: 900px) {
+		font-size: 1.5rem;
+	}
+
+	@media screen and (max-width: 480px) {
+		font-size: 1rem;
+	}
 }
 
 body,