Add About component and update styles

src/styles/About.scss

@@ -0,0 +1,36 @@
+.about {
+	padding: 5rem 10rem;
+	.greeting {
+		color: var(--color-accent);
+	}
+	.interest {
+		color: var(--color-font-muted);
+	}
+
+	.social-links {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		margin-top: 2rem;
+		gap: 2rem;
+		a {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 5px;
+			color: var(--color-font);
+			text-decoration: none;
+			font-size: 1.2rem;
+			font-weight: 500;
+			border-radius: 5px;
+			padding: 10px 15px;
+			background-color: #1d1d1d;
+			transition: all 50ms ease-in-out;
+			border: 2px solid transparent;
+			&:hover {
+				background-color: #2d2d2d;
+				border-color: var(--color-accent);
+			}
+		}
+	}
+}

src/styles/index.scss

@@ -25,6 +25,21 @@ html {
 	scroll-behavior: smooth;
 }
 
+h1 {
+	font-size: 8rem;
+	font-weight: 700;
+}
+
+h2 {
+	font-size: 4rem;
+	font-weight: 700;
+}
+
+h3 {
+	font-size: 2rem;
+	font-weight: 700;
+}
+
 body,
 #root {
 	display: flex;

src/styles/variables_colors.scss

@@ -6,6 +6,7 @@
 	--color-background-sidebar: #1a1a1a;
 
 	--color-font: #ffffff;
+	--color-font-muted: #a0a0a0;
 
 	--color-border: #1c1c1c;