From 0c05e4273c1e34f7eb2a2995a667eafc0a4a9840 Mon Sep 17 00:00:00 2001
From: dertyp7 <dertyp7@tealfire.de>
Date: Sun, 14 Jan 2024 21:30:53 +0100
Subject: [PATCH] Add typewriter effect to job title in About section

---
 src/sections/About.tsx | 20 ++++++++++++++++-
 src/styles/About.scss  |  8 +++++++
 src/styles/App.scss    | 51 ++++++++++++++++++++++++++++--------------
 3 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/src/sections/About.tsx b/src/sections/About.tsx
index f7f9524..1c1d4b7 100644
--- a/src/sections/About.tsx
+++ b/src/sections/About.tsx
@@ -1,12 +1,30 @@
 import "@styles/About.scss";
+import { useEffect, useState } from "react";
 
 export default function About() {
+	const [job, setJob] = useState("Software Developer");
+	const jobs = ["Software Developer", "Frontend Developer", "Software Planner"];
+
+	useEffect(() => {
+		let jobIndex = 0;
+		const intervalId = setInterval(() => {
+			jobIndex = jobIndex + 1 === jobs.length ? 0 : jobIndex + 1;
+			setJob(jobs[jobIndex]);
+		}, 7000);
+
+		return () => clearInterval(intervalId); // Clean up on unmount
+	}, []);
+
 	return (
 		<div className="about">
 			<h2 className="greeting">Hey there, I'm</h2>
 			<h1 className="name">Janis Meister</h1>
 			<br />
-			<h3 className="job">Software Developer.</h3>
+			<div className="job">
+				<h3 key={job} className={`typewriter-text steps-${job.length}`}>
+					{job}
+				</h3>
+			</div>
 			<h3 className="interest">With an interest for modern technologies.</h3>
 			<div className="social-links">
 				<a href="https://github.com/DerTyp7" target="_blank">
diff --git a/src/styles/About.scss b/src/styles/About.scss
index 5145726..996847e 100644
--- a/src/styles/About.scss
+++ b/src/styles/About.scss
@@ -1,9 +1,17 @@
 .about {
 	height: 100vh;
 	padding: 5rem 10rem;
+	display: flex;
+	flex-direction: column;
+
 	.greeting {
 		color: var(--color-accent);
 	}
+	.job {
+		display: flex;
+		align-self: flex-start;
+		text-align: left;
+	}
 	.interest {
 		color: var(--color-font-muted);
 	}
diff --git a/src/styles/App.scss b/src/styles/App.scss
index bdcdd08..426d4fe 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -1,9 +1,43 @@
+/* The typing effect */
+@keyframes typing {
+	from {
+		width: 0;
+	}
+	to {
+		width: 100%;
+	}
+}
+
+/* The typewriter cursor effect */
+@keyframes blink-caret {
+	from,
+	to {
+		border-color: transparent;
+	}
+	50% {
+		border-color: var(--color-accent);
+	}
+}
+
 #app {
 	display: flex;
 	flex-direction: column;
 	background-color: var(--color-background-body);
 	min-height: auto;
 
+	.typewriter-text {
+		overflow: hidden;
+		border-right: 0.15em solid var(--color-accent);
+		white-space: nowrap;
+		letter-spacing: 0.15em;
+	}
+
+	@for $i from 1 through 30 {
+		.typewriter-text.steps-#{$i} {
+			animation: typing 1s steps($i, start), blink-caret 0.75s step-end infinite;
+		}
+	}
+
 	.section {
 		min-height: 100vh;
 		padding: 80px 0;
@@ -14,22 +48,5 @@
 			align-items: center;
 			justify-content: center;
 		}
-
-		// @keyframes slideIn {
-		// 	from {
-		// 		opacity: 0;
-		// 		transform: translateY(20px);
-		// 	}
-		// 	to {
-		// 		opacity: 1;
-		// 		transform: translateY(0);
-		// 	}
-		// }
-
-		// &.active {
-		// 	animation-name: slideIn;
-		// 	animation-duration: 1s;
-		// 	animation-fill-mode: forwards;
-		// }
 	}
 }