Add p tag typing effect
This commit is contained in:
parent
eb57cc04f4
commit
f6caea99db
@ -1,4 +1,20 @@
|
||||
{
|
||||
"About": {
|
||||
"Content": [
|
||||
{
|
||||
"value": "Software developer with a passion for literally just about everything."
|
||||
},
|
||||
{
|
||||
"value": "Aspiring postmath; Jack of all trades, master of few."
|
||||
},
|
||||
{
|
||||
"value": "Full stack developer at Etactics Inc, with a focus on back end development and system architecture."
|
||||
},
|
||||
{
|
||||
"value": "Passion for low level software, embedded systems, software architecture, and machine learning."
|
||||
}
|
||||
|
||||
],
|
||||
"Hobbies": [
|
||||
{
|
||||
"value": "Software Architecture"
|
||||
@ -10,4 +26,5 @@
|
||||
"value": "Back End Development"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -4,6 +4,24 @@
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="homepage-card">
|
||||
<h1 data-show="about-description" data-value="uname -a" class="typewriter card-title">~ $ </h1>
|
||||
<div class="about-grid">
|
||||
<div id="about-description" class="about-description">
|
||||
{{ range .Site.Data.index.About.Content }}
|
||||
<p data-value="{{ .value }}"></p>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="hobbies">
|
||||
<p data-show="about-hobbies" data-value="cat hobbies.txt | less" class="typewriter">~ $ </p>
|
||||
<div id="about-hobbies">
|
||||
{{ range .Site.Data.index.About.Hobbies }}
|
||||
<p data-value="{{ .value }}"></p>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homepage-card">
|
||||
<h1 to-show="about-description" data-value="uname -a" class="typewriter">~ $ </h1>
|
||||
<div class="about-grid">
|
||||
@ -12,6 +30,8 @@
|
||||
everything.</p>
|
||||
<p>Aspiring postmath; Jack of all trades, master of few.</p>
|
||||
<p>Full stack developer at Etactics Inc.</p>
|
||||
<p>Passion for low level software, embedded systems, software
|
||||
architecture, and machine learning.</p>
|
||||
</div>
|
||||
<div class="hobbies">
|
||||
<p data-value="cat hobbies.txt | less" class="typewriter">~ $ </p>
|
||||
|
@ -5,7 +5,7 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 150%;
|
||||
height: 200%;
|
||||
overflow-y: hidden;
|
||||
z-index: -1;
|
||||
|
||||
|
@ -91,12 +91,30 @@ html {
|
||||
background-color: rgba(11,11,12,0.4);
|
||||
corner-radius: 10px;
|
||||
margin: 2vh 2vw;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 65% 1fr;
|
||||
grid-template-rows: 1fr max-content;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
margin-right: auto;
|
||||
padding-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.about-description p {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.hobbies {
|
||||
|
@ -1,6 +1,6 @@
|
||||
{{ define "main" }}
|
||||
<div class="page-header dashed-bottom">
|
||||
<h1 data-value="Posts" class="scramble">Posts</h1>
|
||||
<h1 data-value="Posts" class="typewriter scramble"></h1>
|
||||
<p>Ideas, projects, and other musings.</p>
|
||||
</div>
|
||||
{{ range.Pages }}
|
||||
|
@ -21,6 +21,11 @@ function sleep(milliseconds) {
|
||||
return new Promise(resolve => setTimeout(resolve, milliseconds));
|
||||
}
|
||||
|
||||
function replaceSpacesWithNbsp(string) {
|
||||
if (string == null) return;
|
||||
return string.replace(/ /g, "\xa0");
|
||||
}
|
||||
|
||||
function scramble(event){
|
||||
scrambleLetters(event.target);
|
||||
}
|
||||
@ -51,6 +56,7 @@ async function typeWriter(element) {
|
||||
let typeWriterText = element.getAttribute("data-value");
|
||||
let output = element.innerText;
|
||||
|
||||
// write the main text
|
||||
for(let i = 0; i < typeWriterText.length; ++i){
|
||||
output += typeWriterText.charAt(i);
|
||||
// sleep for typeWriterSpeed milliseconds
|
||||
@ -58,6 +64,27 @@ async function typeWriter(element) {
|
||||
element.innerText = output;
|
||||
}
|
||||
|
||||
//try and do the paragraphs associated
|
||||
let hiddenElementId = element.getAttribute("data-show");
|
||||
|
||||
if(hiddenElementId == null) return;
|
||||
|
||||
let hiddenElement = document.getElementById(hiddenElementId);
|
||||
let hiddenElementSpeed = 5;
|
||||
|
||||
let paragraphs = hiddenElement.querySelectorAll("p");
|
||||
for (let p of paragraphs){
|
||||
let hiddenElementText = p.getAttribute("data-value");
|
||||
//hiddenElementText = replaceSpacesWithNbsp(hiddenElementText);
|
||||
p.innerHtml = "";
|
||||
|
||||
for (let i = 0; i < hiddenElementText.length; ++i){
|
||||
p.innerText += hiddenElementText.charAt(i);
|
||||
await sleep(hiddenElementSpeed);
|
||||
}
|
||||
|
||||
await sleep(50);
|
||||
}
|
||||
}
|
||||
|
||||
let observer = new IntersectionObserver(function(entries) {
|
||||
|
Loading…
Reference in New Issue
Block a user