Add Skills component and SectionLine component

src/App.tsx

@@ -3,6 +3,8 @@ import "@styles/App.scss";
 import Header from "@components/Header";
 import About from "@components/About";
 import ScrollToTop from "@components/ScrollToTop";
+import Skills from "@components/Skills";
+import SectionLine from "@components/SectionLine";
 
 export default function App() {
 	const aboutRef = useRef(null);
@@ -45,13 +47,16 @@ export default function App() {
 				<About />
 			</div>
 
+			<SectionLine />
 			<div id="skills" ref={skillsRef}>
-				<h4>Skills</h4>
+				<Skills />
 			</div>
+			<SectionLine />
 
 			<div id="projects" ref={projectsRef} style={{ textAlign: "center" }}>
 				<h4>Projects</h4>
 			</div>
+
 			<h4>Website under construction 🚧👷</h4>
 			<ScrollToTop />
 		</div>

src/components/SectionLine.tsx

@@ -0,0 +1,9 @@
+import "@styles/SectionLine.scss";
+
+export default function SectionLine() {
+	return (
+		<div className="sectionLine">
+			<hr />
+		</div>
+	);
+}

src/components/Skills.tsx

@@ -0,0 +1,5 @@
+import "@styles/Skills.scss";
+
+export default function Skills() {
+	return <div className="skills">Skills</div>;
+}

src/styles/SectionLine.scss

@@ -0,0 +1,23 @@
+.sectionLine {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	hr {
+		width: 60%;
+		border: 1px solid var(--color-border);
+	}
+
+	@media screen and (max-width: 768px) {
+		hr {
+			width: 80%;
+		}
+	}
+
+	@media screen and (max-width: 480px) {
+		hr {
+			width: 90%;
+		}
+	}
+}

src/styles/Skills.scss

@@ -0,0 +1,2 @@
+.skills {
+}

src/styles/variables_colors.scss

@@ -8,7 +8,7 @@
 	--color-font: #ffffff;
 	--color-font-muted: #a0a0a0;
 
-	--color-border: #1c1c1c;
+	--color-border: #2b2b2b;
 
 	--color-danger: #cf000f;
 	--color-success: #009944;