add about component

src/App.tsx

@@ -1,10 +1,12 @@
 import "@styles/App.scss";
 import Header from "@components/Header";
+import About from "@components/About";
 
 export default function App() {
 	return (
 		<div id="app">
 			<Header />
+			<About />
 		</div>
 	);
 }

src/components/About.tsx

@@ -0,0 +1,26 @@
+import "@styles/About.scss";
+
+export default function About() {
+	return (
+		<div className="about">
+			<div className="text">
+				<div className="badge">Hey There! I'm Janis Meister</div>
+				<h1>
+					A software <span>developer</span>. I develop and plan
+					<span> software</span> solutions.
+				</h1>
+				<p>
+					Over 3 years of experience in software development. I have worked on a
+					variety of projects, from small to large scale. I have experience in
+					both frontend and backend development.
+				</p>
+			</div>
+			<div className="image">
+				<img
+					src="https://st4.depositphotos.com/14903220/22197/v/450/depositphotos_221970610-stock-illustration-abstract-sign-avatar-icon-profile.jpg"
+					loading="lazy"
+				/>
+			</div>
+		</div>
+	);
+}

src/styles/About.scss

@@ -0,0 +1,82 @@
+.about {
+	display: flex;
+	flex-direction: row;
+	margin-top: 100px;
+
+	.text {
+		flex: 1;
+		padding: 0 100px;
+
+		.badge {
+			border: 3px solid var(--color-accent);
+			background-color: var(--color-accent-background);
+			padding: 5px 10px;
+			border-radius: 5px;
+			text-align: center;
+			width: 50%;
+			font-weight: bold;
+			font-size: 0.8rem;
+		}
+
+		h1 {
+			margin: 20px 0px;
+			line-height: 1;
+			letter-spacing: 0.2rem;
+
+			span {
+				color: var(--color-accent);
+				text-decoration: underline;
+			}
+		}
+
+		p {
+			color: #2727279f;
+			font-size: 0.9rem;
+			font-weight: bold;
+		}
+	}
+
+	.image {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		img {
+			width: 70%;
+			aspect-ratio: 1/1;
+		}
+	}
+
+	@media (max-width: 1100px) {
+		gap: 10px;
+
+		.text {
+			padding: 0 50px;
+
+			.badge {
+				width: 60%;
+			}
+		}
+	}
+
+	@media (max-width: 900px) {
+		flex-direction: column;
+
+		.image {
+			display: none;
+		}
+		.text {
+			.badge {
+				width: 40%;
+			}
+		}
+	}
+
+	@media (max-width: 700px) {
+		.text {
+			.badge {
+				width: 100%;
+			}
+		}
+	}
+}

src/styles/App.scss

@@ -3,5 +3,4 @@
 	flex-direction: column;
 	background-color: var(--color-background-body);
 	min-height: auto;
-	flex: 1;
 }

src/styles/variables_colors.scss

@@ -20,6 +20,8 @@
 	--color-svg-header: #363636;
 
 	--color-accent: #22eb97;
+	--color-accent-background: #85f2c631;
+
 	--color-font-link: var(--color-accent);
 	--color-font-link-hover: #7dffc9;