84 lines
2.5 KiB
Svelte
84 lines
2.5 KiB
Svelte
<!-- <div id="navbar">
|
|
<button>Home</button>
|
|
<button>About</button>
|
|
<!-- turning ideas into reality with tech -->
|
|
<!-- into gritty hard-scifi games -->
|
|
<!-- <button>Projects</button>
|
|
<button>Hobbies</button>
|
|
<button>Contact</button>
|
|
</div> -->
|
|
|
|
<svelte:head>
|
|
<title>Jeremy Janella | Computer Scientist</title>
|
|
</svelte:head>
|
|
|
|
<div id="name-card" class="align-right card">
|
|
<p id="HeyIm">Hey! My name is</p>
|
|
<span use:animateTyping={["Jeremy Janella"]} id="jeremymaxxing"></span>
|
|
<p>An experienced full stack developer, cybersecurity enthusiast, and computer science student at the University of Toronto active in CTFs, hackathons, programming competitions, and indie developer of the soon-to-be-released game Subterworks</p>
|
|
<p>This site is still being ported!</p>
|
|
<!-- <p>Computer nerd, gamer, mountain biker, adventurer, hard sci-fi enjoyer, ethics enjoyer, swimmer, jumper</p> -->
|
|
</div>
|
|
|
|
<!-- <p>Computer Science Student, Interested in Cyber Security, Networiking, Open source, and always learning something new</p>-->
|
|
|
|
<!-- Game dev, servers experiements, cyberpatriot, linux, ai serversresume-->
|
|
|
|
<script lang="ts">
|
|
export function animateTyping(node: HTMLElement, texts: string[]) {
|
|
let textsToType = texts;
|
|
|
|
let textsIndex = 0;
|
|
let charIndex = 0;
|
|
let currentText = '';
|
|
|
|
const updateInnerHTML = () => {
|
|
// Always include the zero-width space and conditionally add the text and cursor
|
|
node.innerHTML = '​' + currentText;
|
|
};
|
|
|
|
const waitMsec = (delay: number) => {
|
|
setTimeout(() => { updateInnerHTML();}, delay);
|
|
};
|
|
|
|
// Typing animation effect
|
|
const typeEffect = () => {
|
|
const currentString = textsToType[textsIndex];
|
|
const delay = currentString[charIndex] === ' ' ? 25 : 30;
|
|
|
|
if (charIndex < currentString.length) {
|
|
currentText += currentString[charIndex++];
|
|
setTimeout(typeEffect, delay);
|
|
} else {
|
|
waitMsec(3000);
|
|
setTimeout(deleteEffect, 6000); // Wait before starting to delete
|
|
}
|
|
|
|
updateInnerHTML();
|
|
};
|
|
|
|
// Deleting animation effect
|
|
const deleteEffect = () => {
|
|
if (charIndex > 0) {
|
|
currentText = currentText.slice(0, --charIndex);
|
|
setTimeout(deleteEffect, 20);
|
|
} else {
|
|
textsIndex = (textsIndex + 1) % textsToType.length;
|
|
currentText = ''; // Clear text but keep zero-width space
|
|
setTimeout(typeEffect, 1250);
|
|
}
|
|
|
|
updateInnerHTML();
|
|
};
|
|
|
|
// Start typing effect
|
|
setTimeout(typeEffect, 250);
|
|
|
|
return {
|
|
onDestroy() {},
|
|
update(newTexts: string[]) {
|
|
textsToType = newTexts;
|
|
}
|
|
};
|
|
}
|
|
</script> |