Compare commits

...

2 Commits

Author SHA1 Message Date
850d5f64e1 Ye
Some checks failed
Build and Deploy Nuxt / build (push) Failing after 1m16s
2026-06-09 01:12:58 +02:00
09b3a19a33 holy 2026-06-09 01:10:40 +02:00
7 changed files with 147 additions and 108 deletions

View File

@@ -33,17 +33,16 @@ onMounted(() => {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 1300px; width: 1300px;
margin-left: 20px;
@media screen and (max-width: 1200px) and (min-width: 900px) { @media screen and (max-width: 1200px) and (min-width: 900px) {
width: 975px; width: 975px;
margin-top: 210px;
margin-left: 75px;
} }
@media screen and (max-width: 900px) and (min-width: 600px) { @media screen and (max-width: 900px){
width: 650px; display: none;
}
@media screen and (max-width: 600px){
width: 425px;
} }
} }
</style> </style>

View File

@@ -7,13 +7,13 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@media screen and (min-width: 1200px){ @media screen and (min-width: 1200px){
.fixed-layout { .fixed-layout {
width: 1100px; width: 1150px;
} }
} }
@media screen and (max-width: 1200px){ @media screen and (max-width: 1200px){
.fixed-layout { .fixed-layout {
max-width: 1100px; max-width: 1150px;
} }
} }
</style> </style>

View File

@@ -2,7 +2,6 @@
import HeaderLinks from './HeaderLinks.vue'; import HeaderLinks from './HeaderLinks.vue';
import SiteOptions from './site_options/SiteOptions.vue'; import SiteOptions from './site_options/SiteOptions.vue';
import StickyHeader from './StickyHeader.vue'; import StickyHeader from './StickyHeader.vue';
import { accent } from '~/composables/theme' import { accent } from '~/composables/theme'
const spritePath = computed(() => { const spritePath = computed(() => {
return `/sprites/${accent.value}/${accent.value}.gif` return `/sprites/${accent.value}/${accent.value}.gif`
@@ -16,7 +15,12 @@ const asciiArt = [
]; ];
const fullText = asciiArt.join('\n'); const fullText = asciiArt.join('\n');
const displayedArt = ref(""); interface ArtChar {
char: string;
done: boolean;
}
const displayedArt = ref<ArtChar[]>([]);
let charIndex = 0; let charIndex = 0;
let intervalId: ReturnType<typeof setInterval> | null = null; let intervalId: ReturnType<typeof setInterval> | null = null;
@@ -36,36 +40,69 @@ const preloadImages = (imageArray) => {
) )
} }
onMounted(() => { onMounted(() => {
preloadImages(sprite_names); preloadImages(sprite_names);
if (hasAnimated.value || displayedArt.value === fullText) { if (hasAnimated.value || displayedArt.value.length === fullText.length) {
displayedArt.value = fullText; for (let i = 0; i < fullText.length; i++) {
return; displayedArt.value.push({ char: fullText[i], done: true });
} }
return;
}
intervalId = setInterval(() => { intervalId = setInterval(() => {
if (charIndex < fullText.length) { if (charIndex < fullText.length) {
displayedArt.value += fullText[charIndex]; displayedArt.value[charIndex] = { char: fullText[charIndex], done: true };
charIndex++; charIndex++;
} else { } else {
clearInterval(intervalId!); clearInterval(intervalId!);
intervalId = null; intervalId = null;
hasAnimated.value = true; hasAnimated.value = true;
} }
}, 5); }, 5);
}); });
onBeforeUnmount(() => { const getGridPos = (idx: number) => {
if (intervalId) clearInterval(intervalId); let x = 0, y = 0;
}); for (let j = 0; j < idx; j++) {
if (fullText[j] === '\n') { y++; x = 0; }
else { x++; }
}
return { x, y };
};
const onCharClick = (index: number, spanEl: HTMLElement) => {
for (let i = 0; i < fullText.length; i++) {
if (fullText[i] === '\n') continue;
const indexGrid = getGridPos(index);
const charGrid = getGridPos(i);
let manhattanDistance = Math.abs(indexGrid.x - charGrid.x) + Math.abs(indexGrid.y - charGrid.y);
let delay = manhattanDistance * 20;
setTimeout(() => {
displayedArt.value[i] = { char: fullText[i], done: true };
const targetSpan = document.querySelector(`.ascii-art span[index="${i}"]`) as HTMLElement;
if (targetSpan) {
targetSpan.style.transition = 'color 80ms ease-out';
targetSpan.style.color = 'var(--color-link)';
requestAnimationFrame(() => {
setTimeout(() => {
targetSpan.style.color = '';
}, 150);
});
}
}, delay);
}
};
onBeforeUnmount(() => {
if (intervalId) clearInterval(intervalId);
});
</script> </script>
<template> <template>
<div class="header"> <div class="header">
<div class="header-container website"> <div class="header-container website">
<pre v-html="displayedArt + (displayedArt.length < fullText.length ? '_' : '')" class="title ascii-art" aria-label="ARANROIG.COM"></pre> <pre class="title ascii-art" aria-label="ARANROIG.COM"><span v-for="(c, i) in displayedArt" :key="i" :index="i.toString()" :class="{ 'char-done': c.done }" @click="onCharClick(i, $event.target as HTMLElement)">{{ c.char }}</span><span class="cursor" :class="{ 'blink': displayedArt.length < fullText.length }" v-if="displayedArt.length < fullText.length">_</span></pre>
<HeaderLinks></HeaderLinks> <HeaderLinks></HeaderLinks>
</div> </div>
<div class="header-container right"> <div class="header-container right">
@@ -144,6 +181,23 @@ onMounted(() => {
color: var(--color-text); color: var(--color-text);
min-height: clamp(1.59rem, 6.38vw, 3.01rem); min-height: clamp(1.59rem, 6.38vw, 3.01rem);
min-width: clamp(11rem, 44vw, 23rem); min-width: clamp(11rem, 44vw, 23rem);
span:not(.char-done) {
color: transparent;
}
}
.char-done {
opacity: 1;
}
.cursor {
font-weight: bold;
color: var(--color-text);
&.blink {
animation: blink 1s step-end infinite;
}
} }
@keyframes blink { @keyframes blink {

View File

@@ -23,6 +23,7 @@ const { data: post } = await useAsyncData(`art-${slug}`, () =>
.extended-container { .extended-container {
width: 100%; width: 100%;
margin: auto; margin: auto;
margin-top: 32px;
} }
.art { .art {

View File

@@ -318,7 +318,6 @@ const sectionTargets = {
<style lang="scss" scoped> <style lang="scss" scoped>
.intro-section { .intro-section {
margin-top: 290px;
> div:first-child { > div:first-child {
margin-top: 0; margin-top: 0;
@@ -328,16 +327,16 @@ const sectionTargets = {
margin-bottom: 0; margin-bottom: 0;
} }
@media screen and (min-width: 1200px) {
margin-top: 290px;
}
@media screen and (max-width: 1200px) and (min-width: 900px) { @media screen and (max-width: 1200px) and (min-width: 900px) {
margin-top: 380px; margin-top: 380px;
} }
@media screen and (max-width: 900px) and (min-width: 600px) { @media screen and (max-width: 900px) {
margin-top: 280px; margin-top: 60px;
}
@media screen and (max-width: 600px) {
margin-top: 280px;
} }
} }

View File

@@ -27,5 +27,5 @@ export default defineNuxtConfig({
vueI18n: './i18n.config.ts', vueI18n: './i18n.config.ts',
langDir: 'locales/' langDir: 'locales/'
}, },
modules: ['@nuxtjs/i18n', '@nuxt/content', '@nuxt/image'] modules: ['@nuxtjs/i18n', '@nuxt/content', '@nuxt/image', 'motion-v/nuxt']
}) })

View File

@@ -2071,14 +2071,6 @@
"resolved": "https://registry.npmjs.org/citty/-/citty-0.2.1.tgz", "resolved": "https://registry.npmjs.org/citty/-/citty-0.2.1.tgz",
"integrity": "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg==" "integrity": "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg=="
}, },
"node_modules/@nuxt/cli/node_modules/giget": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/giget/-/giget-3.1.2.tgz",
"integrity": "sha512-T2qUpKBHeUTwHcIhydgnJzhL0Hj785ms+JkxaaWQH9SDM/llXeewnOkfJcFShAHjWI+26hOChwUfCoupaXLm8g==",
"bin": {
"giget": "dist/cli.mjs"
}
},
"node_modules/@nuxt/cli/node_modules/std-env": { "node_modules/@nuxt/cli/node_modules/std-env": {
"version": "3.10.0", "version": "3.10.0",
"resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz", "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
@@ -5970,22 +5962,23 @@
} }
}, },
"node_modules/c12": { "node_modules/c12": {
"version": "3.3.3", "version": "3.3.4",
"resolved": "https://registry.npmjs.org/c12/-/c12-3.3.3.tgz", "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.4.tgz",
"integrity": "sha512-750hTRvgBy5kcMNPdh95Qo+XUBeGo8C7nsKSmedDmaQI+E0r82DwHeM6vBewDe4rGFbnxoa4V9pw+sPh5+Iz8Q==", "integrity": "sha512-cM0ApFQSBXuourJejzwv/AuPRvAxordTyParRVcHjjtXirtkzM0uK2L9TTn9s0cXZbG7E55jCivRQzoxYmRAlA==",
"license": "MIT",
"dependencies": { "dependencies": {
"chokidar": "^5.0.0", "chokidar": "^5.0.0",
"confbox": "^0.2.2", "confbox": "^0.2.4",
"defu": "^6.1.4", "defu": "^6.1.6",
"dotenv": "^17.2.3", "dotenv": "^17.3.1",
"exsolve": "^1.0.8", "exsolve": "^1.0.8",
"giget": "^2.0.0", "giget": "^3.2.0",
"jiti": "^2.6.1", "jiti": "^2.6.1",
"ohash": "^2.0.11", "ohash": "^2.0.11",
"pathe": "^2.0.3", "pathe": "^2.0.3",
"perfect-debounce": "^2.0.0", "perfect-debounce": "^2.1.0",
"pkg-types": "^2.3.0", "pkg-types": "^2.3.0",
"rc9": "^2.1.2" "rc9": "^3.0.1"
}, },
"peerDependencies": { "peerDependencies": {
"magicast": "*" "magicast": "*"
@@ -5996,15 +5989,6 @@
} }
} }
}, },
"node_modules/c12/node_modules/rc9": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
"integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
"dependencies": {
"defu": "^6.1.4",
"destr": "^2.0.3"
}
},
"node_modules/cac": { "node_modules/cac": {
"version": "6.7.14", "version": "6.7.14",
"resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz", "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -6696,9 +6680,10 @@
} }
}, },
"node_modules/defu": { "node_modules/defu": {
"version": "6.1.4", "version": "6.1.7",
"resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz", "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
"integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==" "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
"license": "MIT"
}, },
"node_modules/denque": { "node_modules/denque": {
"version": "2.1.0", "version": "2.1.0",
@@ -7710,17 +7695,10 @@
} }
}, },
"node_modules/giget": { "node_modules/giget": {
"version": "2.0.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz", "resolved": "https://registry.npmjs.org/giget/-/giget-3.2.0.tgz",
"integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==", "integrity": "sha512-GvHTWcykIR/fP8cj8dMpuMMkvaeJfPvYnhq0oW+chSeIr+ldX21ifU2Ms6KBoyKZQZmVaUAAhQ2EZ68KJF8a7A==",
"dependencies": { "license": "MIT",
"citty": "^0.1.6",
"consola": "^3.4.0",
"defu": "^6.1.4",
"node-fetch-native": "^1.6.6",
"nypm": "^0.6.0",
"pathe": "^2.0.3"
},
"bin": { "bin": {
"giget": "dist/cli.mjs" "giget": "dist/cli.mjs"
} }
@@ -8784,9 +8762,10 @@
} }
}, },
"node_modules/jiti": { "node_modules/jiti": {
"version": "2.6.1", "version": "2.7.0",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz", "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==", "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
"license": "MIT",
"bin": { "bin": {
"jiti": "lib/jiti-cli.mjs" "jiti": "lib/jiti-cli.mjs"
} }
@@ -10389,9 +10368,10 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/mlly": { "node_modules/mlly": {
"version": "1.8.1", "version": "1.8.2",
"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.1.tgz", "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
"integrity": "sha512-SnL6sNutTwRWWR/vcmCYHSADjiEesp5TGQQ0pXyLhW5IoeibRlF/CbSLailbB3CNqJUk9cVJ9dUDnbD7GrcHBQ==", "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
"license": "MIT",
"dependencies": { "dependencies": {
"acorn": "^8.16.0", "acorn": "^8.16.0",
"pathe": "^2.0.3", "pathe": "^2.0.3",
@@ -12546,9 +12526,10 @@
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==" "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
}, },
"node_modules/picomatch": { "node_modules/picomatch": {
"version": "4.0.3", "version": "4.0.4",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
"license": "MIT",
"engines": { "engines": {
"node": ">=12" "node": ">=12"
}, },
@@ -12566,12 +12547,13 @@
} }
}, },
"node_modules/pkg-types": { "node_modules/pkg-types": {
"version": "2.3.0", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz", "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
"integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==", "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
"license": "MIT",
"dependencies": { "dependencies": {
"confbox": "^0.2.2", "confbox": "^0.2.4",
"exsolve": "^1.0.7", "exsolve": "^1.0.8",
"pathe": "^2.0.3" "pathe": "^2.0.3"
} }
}, },
@@ -13199,11 +13181,12 @@
"license": "ISC" "license": "ISC"
}, },
"node_modules/rc9": { "node_modules/rc9": {
"version": "3.0.0", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.0.tgz", "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.1.tgz",
"integrity": "sha512-MGOue0VqscKWQ104udASX/3GYDcKyPI4j4F8gu/jHHzglpmy9a/anZK3PNe8ug6aZFl+9GxLtdhe3kVZuMaQbA==", "integrity": "sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ==",
"license": "MIT",
"dependencies": { "dependencies": {
"defu": "^6.1.4", "defu": "^6.1.6",
"destr": "^2.0.5" "destr": "^2.0.5"
} }
}, },
@@ -13823,9 +13806,10 @@
"integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==" "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
}, },
"node_modules/semver": { "node_modules/semver": {
"version": "7.7.4", "version": "7.8.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.3.tgz",
"integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", "integrity": "sha512-wnilbGyMxzbY7dNOl7jpKbLSjcfeweJWU5j4+u5qW+6/wuGD9KzIGOyZnQVSBM9E7DtWaaH3CyHkppYrKYoxwg==",
"license": "ISC",
"bin": { "bin": {
"semver": "bin/semver.js" "semver": "bin/semver.js"
}, },
@@ -14666,12 +14650,13 @@
} }
}, },
"node_modules/tinyglobby": { "node_modules/tinyglobby": {
"version": "0.2.15", "version": "0.2.17",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
"integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
"license": "MIT",
"dependencies": { "dependencies": {
"fdir": "^6.5.0", "fdir": "^6.5.0",
"picomatch": "^4.0.3" "picomatch": "^4.0.4"
}, },
"engines": { "engines": {
"node": ">=12.0.0" "node": ">=12.0.0"
@@ -14857,9 +14842,10 @@
} }
}, },
"node_modules/ufo": { "node_modules/ufo": {
"version": "1.6.3", "version": "1.6.4",
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz", "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
"integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==" "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
"license": "MIT"
}, },
"node_modules/ultrahtml": { "node_modules/ultrahtml": {
"version": "1.6.0", "version": "1.6.0",