Streamer272/svitan.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔨 Refactors terminal rendering algorithm

Browse Source
This commit is contained in:
Daniel Svitan
2025-06-30 16:02:44 +02:00
parent 8992f7bbc3
commit 4c2f096a18
1 changed files with 27 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/Terminal.vue
View File

@@ -28,76 +28,46 @@ import {onMounted, ref} from "vue";
const text = ref("")
interface Part {
pre?: string;
content: string;
post?: string;
}
const prompt: Part[] = [
{
pre: `<span class="s-white">`,
content: `╭─`,
post: `</span>`
},
{
pre: `<span class="s-green font-bold">`,
content: `guest@svitan.dev`,
post: `</span>`
},
{
content: ` `
},
{
pre: `<span class="s-blue">`,
content: `~`,
post: `</span><br>`
},
{
pre: `<span class="s-white">`,
content: `╰─$ `,
post: `</span>`
}
]
const target: Part[] = [
...prompt,
{
content: "./portfolio",
post: `<br>`
},
{
content: `
const prompt = `<span class="s-white">╭─</span><span class="s-green font-bold">guest@svitan.dev</span> <span class="s-blue">~</span>
<span class="s-white">╰─$</span>`
const target = `${prompt} ./portfolio
____ _ _ ____ _ _ \\\\//
| _ \\ __ _ _ __ (_) ___| | / ___|_ _(_) |_ __ _ _\\/_
| | | |/ _\` | '_ \\| |/ _ \\ | \\___ \\ \\ / / | __/ _\` | '_ \\
| |_| | (_| | | | | | __/ | ___) \\ V /| | || (_| | | | |
|____/ \\__,_|_| |_|_|\\___|_| |____/ \\_/ |_|\\__\\__,_|_| |_|
<h1 class="text-xl">Hi, I'm <span class="font-bold">Daniel Svitaň</span>, {a} {years} year-old aspiring engineer</h1>
<p>Residence: Bratislava, Slovakia</p><p>Contacts:
<a href="mailto:selfsigned-ash@proton.me" target="_blank" class="underline">selfsigned-ash@proton.me</a>
<a href="tel:+421948309804" target="_blank" class="underline">+421 948 309 804</a>
<span>@selfsigned-ash:svitan.dev (Matrix)</span>
</p><p>Socials:
<a href="https://github.com/Streamer272" target="_blank" class="underline">GitHub</a>
<a href="https://gitea.svitan.dev/Streamer272" target="_blank" class="underline">Gitea</a>
<span>Signal</span>
<a href="https://mastodon.social/@selfsigned_ash" rel="me" target="_blank" class="underline">Mastodon</a>
</p>
`
}
]
onMounted(() => {
let i = 0;
let j = 0;
const id = setInterval(() => {
if (i === target[j].content.length) {
text.value += target[j].post ?? "";
i = 0;
j++;
text.value += target[j].pre ?? "";
}
if (i === 0 && j === 0) {
text.value += target[j].pre ?? "";
if (i === target.length) {
clearInterval(id);
return;
}
text.value += target[j].content[i]
.replaceAll("\n", "<br>")
.replaceAll(" ", "&nbsp;");
if (j === target.length - 1 && i === target[j].content.length - 1) {
text.value += target[j].post ?? "";
clearTimeout(id);
let next = "";
if (target[i] === "<") {
do {
next += target[i++]
} while(target[i] !== ">");
}
next += target[i]
.replace("\n", "<br>")
.replace(" ", "&nbsp;");
text.value += next;
i++;
}, 5)
})