From 9b487cab472a7751c12cc0d38a83c93ed5c19e7b Mon Sep 17 00:00:00 2001
From: dertyp7 <dertyp7@tealfire.de>
Date: Sat, 13 Jan 2024 17:42:17 +0100
Subject: [PATCH] Update About component and styles for responsive design

---
 src/components/About.tsx |  2 +-
 src/styles/About.scss    | 16 ++++++++++++++++
 src/styles/index.scss    | 24 ++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/About.tsx b/src/components/About.tsx
index 1fc66b8..87dfa77 100644
--- a/src/components/About.tsx
+++ b/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
diff --git a/src/styles/About.scss b/src/styles/About.scss
index f2cd28a..5f011db 100644
--- a/src/styles/About.scss
+++ b/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;
+			}
+		}
+	}
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f6e431c..e75aa06 100644
--- a/src/styles/index.scss
+++ b/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,