Add section styling and skills grid

src/styles/About.scss

@@ -1,6 +1,6 @@
 .about {
 	height: 100vh;
-	padding: 5rem 10rem;
+	padding: 0rem 10rem;
 	.greeting {
 		color: var(--color-accent);
 	}

src/styles/App.scss

@@ -3,4 +3,9 @@
 	flex-direction: column;
 	background-color: var(--color-background-body);
 	min-height: auto;
+
+	.section {
+		min-height: 100vh;
+		padding: 80px 0;
+	}
 }

src/styles/Skills.scss

@@ -1,2 +1,65 @@
 .skills {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 30px;
+
+	.title {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		grid-gap: 20px 100px;
+
+		.skill {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			background-color: var(--color-background-foreground);
+			border-radius: 5px;
+			padding: 5px;
+			font-weight: 600;
+			border: 2px solid transparent;
+			transition: all 50ms ease-in-out;
+			gap: 10px;
+			// cursor: pointer;
+
+			// &:hover {
+			// 	border-color: var(--color-accent-background);
+			// }
+
+			img {
+				width: 32px;
+				height: 32px;
+			}
+		}
+
+		@media (max-width: 768px) {
+			.skill {
+				img {
+					width: 24px;
+					height: 24px;
+				}
+			}
+			grid-gap: 10px;
+		}
+
+		@media (max-width: 480px) {
+			.skill {
+				justify-content: center;
+				flex-direction: column;
+				gap: 5px;
+
+				img {
+					width: 50px;
+					height: 50px;
+				}
+			}
+		}
+	}
 }

src/styles/index.scss

@@ -66,10 +66,11 @@ h3 {
 	@media screen and (max-width: 900px) {
 		font-size: 1.5rem;
 	}
+}
 
-	@media screen and (max-width: 480px) {
-		font-size: 1rem;
-	}
+h4 {
+	font-size: 1rem;
+	font-weight: 700;
 }
 
 body,

src/styles/variables_colors.scss

@@ -2,6 +2,7 @@
 	/* Colors: General */
 
 	--color-background-body: #000000;
+	--color-background-foreground: #0e0e0e;
 	--color-background-header: transparent;
 	--color-background-sidebar: #1a1a1a;