pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): i18nize everything

Browse Source
This commit is contained in:
Stevan
2026-01-30 22:58:07 +01:00
parent 861f76c55a
commit 8e7895ae59
16 changed files with 142 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/pages/gallery.vue
View File

@@ -68,10 +68,9 @@ const FADE_IN_DURATION = 1.5;
const FADE_IN_X_FACTOR = 0.15;
const FADE_IN_Y_FACTOR = 0.075;
const TITLE = "Pihkaal's Gallery";
const DESCRIPTION =
"Started on March 2025. I love taking photos of plants, insects, and arachnids.";
const BACK_BUTTON = "Back to Home";
const title = computed(() => $t("gallery.title"));
const description = computed(() => $t("gallery.description"));
const backButton = computed(() => $t("gallery.backToHome"));
const typeText = (
target: Ref<string>,
@@ -98,14 +97,14 @@ const animateIntro = async () => {
isAnimating.value = true;
typeText(backButtonText, BACK_BUTTON, BACK_BUTTON_DURATION, false, {
typeText(backButtonText, backButton.value, BACK_BUTTON_DURATION, false, {
onStart: () => (showBackButtonIcon.value = true),
}).delay(ANIMATION_SLEEP + FADE_IN_DELAY);
typeText(titleText, TITLE, TITLE_DURATION).delay(
typeText(titleText, title.value, TITLE_DURATION).delay(
ANIMATION_SLEEP + FADE_IN_DELAY,
);
typeText(descriptionText, DESCRIPTION, DESCRIPTION_DURATION).delay(
typeText(descriptionText, description.value, DESCRIPTION_DURATION).delay(
ANIMATION_SLEEP + FADE_IN_DELAY,
);
@@ -149,13 +148,13 @@ const animateOutro = async () => {
ease: "power2.out",
});
typeText(backButtonText, BACK_BUTTON, BACK_BUTTON_DURATION, true, {
typeText(backButtonText, backButton.value, BACK_BUTTON_DURATION, true, {
onComplete: () => (showBackButtonIcon.value = false),
});
typeText(titleText, TITLE, TITLE_DURATION, true);
typeText(titleText, title.value, TITLE_DURATION, true);
typeText(descriptionText, DESCRIPTION, DESCRIPTION_DURATION, true, {
typeText(descriptionText, description.value, DESCRIPTION_DURATION, true, {
onComplete: async () => {
await sleep(ANIMATION_SLEEP * 1000);
galleryStore.shouldAnimateOutro = true;
@@ -200,11 +199,11 @@ onMounted(() => {
>
<h1 class="text-3xl mt-3 font-bold relative">
<span class="invisible">{{ TITLE }}</span>
<span class="invisible">{{ title }}</span>
<span class="absolute inset-0">{{ titleText }}</span>
</h1>
<p class="text-neutral-600 text-sm mt-2 w-4/5 relative">
<span class="invisible">{{ DESCRIPTION }}</span>
<span class="invisible">{{ description }}</span>
<span class="absolute inset-0">{{ descriptionText }}</span>
</p>
</header>