barrett/barrettruth.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: handle multiple clicks on typing animations;

Browse source
This commit is contained in:
Barrett Ruth 2024-06-15 13:58:23 -05:00
parent 1cb8e8ab2c
commit 2571771f70
4 changed files with 32 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -8,7 +8,7 @@
<link rel="icon" type="image/webp" href="/public/logo.webp" />
<title>Barrett Ruth</title>
</head>
<body>
<body class="graph">
<header>
<a href="/" onclick="refresh(event)">
<div class="terminal-prompt">

16
posts/from-github-pages-to-aws.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../styles/index.css" />
<link rel="icon" type="image/webp" href="../public/logo.webp" />
<title>Barrett Ruth</title>
</head>
<body>
<main class="main">main</main>
<footer>foot</footer>
<script src="../scripts/index.js"></script>
</body>
</html>

14
scripts/index.js
View file

@ -62,14 +62,25 @@ function renderPosts(topic) {
postMapping.get(topic).forEach((postName) => {
const post = document.createElement("div");
post.classList.add("post");
post.textContent = postName;
const link = document.createElement("a");
post.classList.add("post");
link.href = `/posts/${postName.replace(/\s+/g, "-").toLowerCase()}.html`;
link.textContent = postName;
post.appendChild(link);
posts.appendChild(post);
});
}
let typing = false;
function typechars(e) {
e.preventDefault();
if (typing) return;
typing = true;
const topic = e.target.textContent;
const terminalText = ` ${topic.toLowerCase()}/`;
const terminalPrompt = document.querySelector(".prompt");
@ -84,6 +95,7 @@ function typechars(e) {
setTimeout(typechar, delay / terminalText.length);
} else {
renderPosts(topic);
typing = false;
}
}

2
styles/index.css
View file

@ -35,6 +35,8 @@ body {
height: 100%;
display: flex;
flex-direction: column;
}
.graph {
background-image: linear-gradient(
to right,
rgba(200, 200, 200, 0.4) 1px,