From 16ae42f04b6eaad61e2928742962bf927349efeb Mon Sep 17 00:00:00 2001
From: dertyp7 <dertyp7@tealfire.de>
Date: Sat, 13 Jan 2024 22:37:57 +0100
Subject: [PATCH] Add Skills component and SectionLine component

---
 src/App.tsx                      |  7 ++++++-
 src/components/SectionLine.tsx   |  9 +++++++++
 src/components/Skills.tsx        |  5 +++++
 src/styles/SectionLine.scss      | 23 +++++++++++++++++++++++
 src/styles/Skills.scss           |  2 ++
 src/styles/variables_colors.scss |  2 +-
 6 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SectionLine.tsx
 create mode 100644 src/styles/SectionLine.scss
 create mode 100644 src/styles/Skills.scss

diff --git a/src/App.tsx b/src/App.tsx
index 75c22e4..fe858ed 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/SectionLine.tsx b/src/components/SectionLine.tsx
new file mode 100644
index 0000000..a9aa131
--- /dev/null
+++ b/src/components/SectionLine.tsx
@@ -0,0 +1,9 @@
+import "@styles/SectionLine.scss";
+
+export default function SectionLine() {
+	return (
+		<div className="sectionLine">
+			<hr />
+		</div>
+	);
+}
diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx
index e69de29..40278a3 100644
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -0,0 +1,5 @@
+import "@styles/Skills.scss";
+
+export default function Skills() {
+	return <div className="skills">Skills</div>;
+}
diff --git a/src/styles/SectionLine.scss b/src/styles/SectionLine.scss
new file mode 100644
index 0000000..16df9ee
--- /dev/null
+++ b/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%;
+		}
+	}
+}
diff --git a/src/styles/Skills.scss b/src/styles/Skills.scss
new file mode 100644
index 0000000..9e754d3
--- /dev/null
+++ b/src/styles/Skills.scss
@@ -0,0 +1,2 @@
+.skills {
+}
diff --git a/src/styles/variables_colors.scss b/src/styles/variables_colors.scss
index 418ce0d..192ca13 100644
--- a/src/styles/variables_colors.scss
+++ b/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;