Add animation

static/index.js

@@ -1,37 +1,43 @@
-let language = 'en';
+function simulateCommandPrompt(element, texts, speed, wait) {
+  const outputElement = document.getElementById(element);
+  const cursor = document.createElement('span');
+  cursor.classList.add('cursor');
+  cursor.textContent = '█';
 
-function loadPage(navButton) {
-	const selected = document.getElementsByClassName('selected')[0];
+  let currentIndex = 0;
 
-	if (selected != navButton) {
-		const xhttp = new XMLHttpRequest();
-		const content = document.getElementById('content');
-		const page = navButton.id;
+  function typeText() {
+    const text = texts[currentIndex];
+    let i = 0;
 
-		if(page != 'index') {
-			window.location.hash = page;
-			window.document.title = `Augusto Gunsch | ${navButton.innerHTML}`;
+    function typeCharacter() {
+      if (i <= text.length) {
+        outputElement.textContent = text.slice(0, i);
+        outputElement.appendChild(cursor);
+        i++;
+        setTimeout(typeCharacter, speed);
       } else {
-			history.replaceState(null, null, ' ');
-			window.document.title = 'Augusto Gunsch';
-		}
-
-		xhttp.onload = function() {
-			content.innerHTML = this.responseText;
-		}
-		xhttp.open('GET', `${language}/${page}`, true);
-
-		selected.classList.remove('selected');
-		navButton.classList.add('selected');
-		content.innerHTML = '<p>Loading...</p>';
-
-		xhttp.send();
+        setTimeout(() => {
+          currentIndex = (currentIndex + 1) % texts.length;
+          outputElement.textContent = '';
+          outputElement.appendChild(cursor);
+          typeText();
+        }, wait);
       }
     }
 
-if(window.location.hash) {
-	const page = window.location.hash.split('#')[1];
-	const navButton = document.getElementById(page);
-	console.log(navButton);
-	loadPage(navButton);
+    typeCharacter();
   }
+
+  typeText();
+}
+
+const texts = [
+  'software',
+  'reality',
+  'solutions',
+  'innovation',
+  'technology'
+];
+
+simulateCommandPrompt('typing', texts, 100, 3000);

static/stylesheet.css

@@ -11,15 +11,12 @@
 
 #body {
 	background-color: #F2F2FF;
-	background-image: url("duck.png");
-	background-size: 50%;
-	background-repeat: no-repeat;
-	background-position: right bottom;
 	display: flex;
 	margin: 0;
 	width: 100%;
 	font-family: "Noto Sans Mono", "Monaco", serif;
 	flex-direction: column;
+	position: relative;
 }
 
 #header {
@@ -44,7 +41,6 @@
 #links {
 	display: flex;
 	align-items: center;
-	flex-wrap: wrap;
 	justify-content: center;
 }
 
@@ -65,8 +61,7 @@
 
 #page {
 	display: flex;
-	margin: 1rem;
-	margin-bottom: 4rem;
+	padding: 0 1rem 1rem;
 }
 
 #social {
@@ -105,6 +100,7 @@
 #slogan {
 	text-align: right;
 	font-size: 3rem;
+	position: relative;
 }
 
 #slogan mark {
@@ -114,9 +110,105 @@
 	position: relative;
 }
 
+#circle {
+	top: 0;
+	left: -20%;
+	position: absolute;
+	width: 140%;
+	aspect-ratio: 1 / 1;
+	background-color: #EDAF1F;
+	border-radius: 100%;
+	animation: pulse-circle 30s ease-in-out -2s infinite alternate;
+	z-index: -1;
+}
+
+#circle-behind {
+	top: 0;
+	left: -20%;
+	position: absolute;
+	width: 140%;
+	aspect-ratio: 1 / 1;
+	z-index: -2;
+	animation: rotate-circle 60s linear -2s infinite normal;
+}
+
+#circle-behind::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	animation: pulse-circle 30s ease-in-out -2s infinite alternate;
+	background-color: #d49a11;
+	border-radius: 100%;
+}
+
+@keyframes pulse-circle {
+	0% {
+		transform: scale(.9);
+	}
+
+	50% {
+		transform: scale(1);
+	}
+
+	100% {
+		transform: scale(.9);
+	}
+}
+
+@keyframes rotate-circle {
+	0% {
+		transform: translateX(5%);
+	}
+
+	25% {
+		transform: translateY(-5%);
+	}
+
+	50% {
+		transform: translateX(-5%);
+	}
+
+	75% {
+		transform: translateY(5%);
+	}
+
+	100% {
+		transform: translateX(5%);
+	}
+}
+
+.cursor {
+  animation: blink 0.8s infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+
 @media only screen and (max-width: 600px) {
-	#body {
-		background-image: none;
+	#page {
+		flex-wrap: wrap-reverse;
+	}
+
+	#social {
+		flex-direction: row;
+		width: 100%;
+		gap: 1rem;
+		height: 50px;
+		margin-bottom: 1rem;
+	}
+
+	#social img {
+		height: 100%;
+	}
+
+	#circle, #circle-behind {
+		display: none;
 	}
 
 	#main {
@@ -145,6 +237,7 @@
 
 	#links a {
 		margin: 0.3rem;
+		flex-wrap: wrap;
 	}
 }
 
@@ -155,10 +248,6 @@
 }
 
 @media only screen and (max-width: 390px) {
-	#social {
-		display: none;
-	}
-
 	#links .button {
 		border-radius: 7px;
 	}
@@ -181,6 +270,7 @@
 
 	#page {
 		height: 100%;
+		overflow-y: hidden;
 	}
 }
 
@@ -189,6 +279,16 @@
 	#quote {
 		max-width: 50%;
 	}
+
+	#circle, #circle-behind {
+		top: -70%;
+	}
+
+	#page {
+		padding-top: 3rem;
+		padding-bottom: 3rem;
+		overflow: hidden;
+	}
 }
 
 @media only screen and (min-width: 992px) {

templates/index_en.html

@@ -37,10 +37,13 @@
 					</blockquote>
 					<figcaption>{{ author }}</figcaption>
 				</figure>
-				<span id="slogan">
-					I turn <mark>ideas</mark><br>into<br><mark>software</mark>.
-				</span>
+				<div id="slogan">
+					<div id="circle"></div>
+					<div id="circle-behind"></div>
+					I turn <mark>ideas</mark><br>into<br><mark id="typing"></mark>.
+				</div>
 			</main>
 		</div>
 	</body>
+	<script src="{{ url_for('static', filename='index.js') }}"></script>
 </html>