feat: replace hard-coded content with i18n translation keys
This commit is contained in:
Sebin Nyshkim
parent
7fe9cdeef3
commit
eefc4cc8d4
9 changed files with 80 additions and 272 deletions
|
|
@ -24,8 +24,12 @@ defineProps<Props>();
|
|||
<table class="attribution-table">
|
||||
<thead class="attribution-table__head">
|
||||
<tr class="attribution-table__row">
|
||||
<th class="attribution-table__heading artwork">Artwork</th>
|
||||
<th class="attribution-table__heading artist">Artist</th>
|
||||
<th class="attribution-table__heading artwork">
|
||||
{{ $t("attributions.artwork.headings[0]") }}
|
||||
</th>
|
||||
<th class="attribution-table__heading artist">
|
||||
{{ $t("attributions.artwork.headings[1]") }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="attribution-table__body">
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ defineProps<Props>();
|
|||
<table class="color-table">
|
||||
<thead class="color-table__head">
|
||||
<tr class="color-table__row">
|
||||
<th class="color-table__heading name">Body part</th>
|
||||
<th class="color-table__heading value">Value</th>
|
||||
<th class="color-table__heading color">Color</th>
|
||||
<th class="color-table__heading name">{{ $t("data.colors.headings[0]") }}</th>
|
||||
<th class="color-table__heading value">{{ $t("data.colors.headings[1]") }}</th>
|
||||
<th class="color-table__heading color">{{ $t("data.colors.headings[2]") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="color-table__body">
|
||||
<tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
|
||||
<td class="color-table__cell name">{{ color.name }}</td>
|
||||
<td class="color-table__cell name">{{ $t(color.name) }}</td>
|
||||
<td class="color-table__cell value">{{ color.value }}</td>
|
||||
<td
|
||||
class="color-table__cell color"
|
||||
|
|
|
|||
|
|
@ -16,14 +16,14 @@ defineProps<Props>();
|
|||
v-for="(heading, idx) in headings"
|
||||
:key="idx"
|
||||
>
|
||||
{{ heading }}
|
||||
{{ $t(heading) }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="data-table__body">
|
||||
<tr class="data-table__row" v-for="(row, idx) in data" :key="idx">
|
||||
<td class="data-table__cell" v-for="(cell, idx) in row" :key="idx">
|
||||
{{ cell }}
|
||||
{{ $t(cell) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const router = createRouter({
|
|||
name: "home",
|
||||
component: HomeView,
|
||||
meta: {
|
||||
title: "Home",
|
||||
title: "nav.home",
|
||||
icon: HomeIcon,
|
||||
},
|
||||
},
|
||||
|
|
@ -27,7 +27,7 @@ const router = createRouter({
|
|||
name: "general",
|
||||
component: () => import("@/views/GeneralView.vue"),
|
||||
meta: {
|
||||
title: "General",
|
||||
title: "nav.general",
|
||||
icon: IdCardIcon,
|
||||
},
|
||||
},
|
||||
|
|
@ -36,7 +36,7 @@ const router = createRouter({
|
|||
name: "anatomy",
|
||||
component: () => import("@/views/AnatomyView.vue"),
|
||||
meta: {
|
||||
title: "Anatomy",
|
||||
title: "nav.anatomy",
|
||||
icon: PaletteIcon,
|
||||
},
|
||||
},
|
||||
|
|
@ -45,7 +45,7 @@ const router = createRouter({
|
|||
name: "career-path",
|
||||
component: () => import("@/views/CareerPathView.vue"),
|
||||
meta: {
|
||||
title: "Career Path",
|
||||
title: "nav.careerPath",
|
||||
icon: BriefcaseIcon,
|
||||
},
|
||||
},
|
||||
|
|
@ -54,7 +54,7 @@ const router = createRouter({
|
|||
name: "attributions",
|
||||
component: () => import("@/views/AttributionsView.vue"),
|
||||
meta: {
|
||||
title: "Attributions",
|
||||
title: "nav.attributions",
|
||||
icon: CircleInfoIcon,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,20 +3,20 @@ import RefImage from "@/components/RefImage.vue";
|
|||
import ColorTable from "@/components/ColorTable.vue";
|
||||
|
||||
const colors = [
|
||||
{ name: "Front", value: "#e7c7b1" },
|
||||
{ name: "Arms, legs", value: "#493428" },
|
||||
{ name: "Back Main", value: "#422322" },
|
||||
{ name: "Back Spine", value: "#341c1c" },
|
||||
{ name: "Highlight scales, tissue", value: "#6bb9db" },
|
||||
{ name: "Spikes, tail club", value: "#f8ebdd" },
|
||||
{ name: "Eyes primary", value: "#a7eef1" },
|
||||
{ name: "Eyes secondary", value: "#6dabd1" },
|
||||
{ name: "data.colors.front", value: "#e7c7b1" },
|
||||
{ name: "data.colors.limbs", value: "#493428" },
|
||||
{ name: "data.colors.back", value: "#422322" },
|
||||
{ name: "data.colors.spine", value: "#341c1c" },
|
||||
{ name: "data.colors.tissue", value: "#6bb9db" },
|
||||
{ name: "data.colors.spikes", value: "#f8ebdd" },
|
||||
{ name: "data.colors.eyesPrimary", value: "#a7eef1" },
|
||||
{ name: "data.colors.eyesSecondary", value: "#6dabd1" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $route.meta.title }}</h1>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
</section>
|
||||
|
||||
<RefImage dropshadow>
|
||||
|
|
@ -65,36 +65,20 @@ const colors = [
|
|||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
alt="Viktor Ref by sabertoofs"
|
||||
:alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #caption>
|
||||
Viktor Ref © <a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
{{ $t('anatomy.images.back.caption') }} © <a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
</template>
|
||||
</RefImage>
|
||||
|
||||
<ColorTable :colors="colors"></ColorTable>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Viktor is a bipedal plantigrade Ankylosaurus. His skin is mostly
|
||||
bicolored, with several shades of brown.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
His forehead, nose, chest, belly and crotch are of light desert sand
|
||||
colors that run through the underside of his tail.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
His cheeks, shoulders, back and thighs, in contrast, stand out with a rich
|
||||
walnut brown, which is also found on the sides of his tail. From the back
|
||||
of his head, down his spine and across the top of his tail is a continuous
|
||||
strip of deep dark cedar brown. Arms and legs are distinguished by a light
|
||||
earthy brown.
|
||||
</p>
|
||||
<p v-for="p in $tm('anatomy.paragraphs[0]')">{{ p }}</p>
|
||||
</section>
|
||||
|
||||
<RefImage dropshadow>
|
||||
|
|
@ -161,36 +145,18 @@ const colors = [
|
|||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
alt="Viktor frontal shot by sabertoofs"
|
||||
:alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #caption>
|
||||
Viktor frontal shot ©
|
||||
{{ $t("anatomy.images.front.caption") }} ©
|
||||
<a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
</template>
|
||||
</RefImage>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
His entire body is speckled with scattered aquamarine spots, which come in
|
||||
pairs of one large and one small spot. The only exceptions are the spots
|
||||
on his cheeks and behind his lower cheek horns, which come in threes and
|
||||
his the top side of his snout, which sports a big single spot. Mouth,
|
||||
tongue, nostrils and any other tissue of his body also feature this color.
|
||||
</p>
|
||||
|
||||
<p>His eyes shine with a mixture of light sea green and electric blue.</p>
|
||||
|
||||
<p>
|
||||
Horns and claws are of a typical bone white. Starting with the double pair
|
||||
of horns on his head, a parallel line of horns continues down his back,
|
||||
with additional horns adorning his shoulders and thighs. His tail is also
|
||||
armed with horns on both sides along its entire length. At the tip of the
|
||||
tail is a club-like ossification that he can use for fending off foes.
|
||||
</p>
|
||||
|
||||
<p>He owes his strong, stocky physique to years of hard physical labor.</p>
|
||||
<p v-for="p in $tm('anatomy.paragraphs[1]')">{{ p }}</p>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -26,23 +26,23 @@ const attributions = [
|
|||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $route.meta.title }}</h1>
|
||||
<h2>Artwork</h2>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
<h2>{{ $t("attributions.artwork.heading") }}</h2>
|
||||
</section>
|
||||
<AttributionTable :attributions="attributions" />
|
||||
<section>
|
||||
<h2>Other</h2>
|
||||
<h2>{{ $t("attributions.other.heading") }}</h2>
|
||||
</section>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Source</th>
|
||||
<th>{{ $t("attributions.other.headings[0]") }}</th>
|
||||
<th>{{ $t("attributions.other.headings[1]") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Icons</td>
|
||||
<td>{{ $t("attributions.other.icons[0]") }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://fontawesome.com/license/free"
|
||||
|
|
@ -54,7 +54,7 @@ const attributions = [
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Heading Font</td>
|
||||
<td>{{ $t("attributions.other.headingFont[0]") }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://github.com/MichalSahar/Secular"
|
||||
|
|
@ -63,7 +63,7 @@ const attributions = [
|
|||
>
|
||||
Secular One
|
||||
</a>
|
||||
by
|
||||
{{ $t("attributions.other.headingFont[1]") }}
|
||||
<a
|
||||
href="https://github.com/MichalSahar"
|
||||
target="_blank"
|
||||
|
|
@ -74,7 +74,7 @@ const attributions = [
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Copy Font</td>
|
||||
<td>{{ $t("attributions.other.copyFont[0]") }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://antonkoovit.com/typefaces/arvo"
|
||||
|
|
@ -83,7 +83,7 @@ const attributions = [
|
|||
>
|
||||
Arvo
|
||||
</a>
|
||||
by
|
||||
{{ $t("attributions.other.copyFont[1]") }}
|
||||
<a
|
||||
href="https://antonkoovit.com/"
|
||||
target="_blank"
|
||||
|
|
@ -94,9 +94,9 @@ const attributions = [
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Background</td>
|
||||
<td>{{ $t("attributions.other.background[0]") }}</td>
|
||||
<td>
|
||||
Layered Waves from
|
||||
{{ $t("attributions.other.background[1][0]") }}
|
||||
<a
|
||||
href="https://haikei.app/"
|
||||
target="_blank"
|
||||
|
|
@ -104,7 +104,7 @@ const attributions = [
|
|||
>
|
||||
Haikei
|
||||
</a>
|
||||
by
|
||||
{{ $t("attributions.other.background[1][1]") }}
|
||||
<a
|
||||
href="https://zcreativelabs.com/"
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -8,144 +8,32 @@ import HelmetSafetyIcon from "@/assets/icons/HelmetSafetyIcon.vue";
|
|||
import IndustryIcon from "@/assets/icons/IndustryIcon.vue";
|
||||
import TruckIcon from "@/assets/icons/TruckIcon.vue";
|
||||
import BoxesIcon from "@/assets/icons/BoxesIcon.vue";
|
||||
|
||||
const jobIcons = [
|
||||
WhiskeyGlassIcon,
|
||||
TreeIcon,
|
||||
CarIcon,
|
||||
HelmetSafetyIcon,
|
||||
IndustryIcon,
|
||||
TruckIcon,
|
||||
BoxesIcon,
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $route.meta.title }}</h1>
|
||||
<p>
|
||||
Viktor's had many different jobs in the past, some of which where very
|
||||
formative, other's just paid the bills.
|
||||
</p>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
<p v-for="p in $tm('career.paragraphs')">{{ p }}</p>
|
||||
</section>
|
||||
|
||||
<TimelineList>
|
||||
<TimelineItem>
|
||||
<template #icon><WhiskeyGlassIcon /></template>
|
||||
<template #headline>Bartender</template>
|
||||
<template #content>
|
||||
<p>
|
||||
Viktor's professional career began as a bartender at a pub in his
|
||||
hometown. There he often doubled as a bouncer when a few guests got
|
||||
too drunk and started making a fuss. A defining moment of that job was
|
||||
when someone climbed over the counter and threatened him with a broken
|
||||
bottle. Wrestled to the ground and with a broken bottle in front of
|
||||
his face, he had to make a split-second decision. With a powerful
|
||||
swing of his tail bone, he knocked the attacker down. This experience
|
||||
taught him the importance of effectively defending himself against
|
||||
unpleasant fellows and to eliminate threats before they get close to
|
||||
him ever again.
|
||||
</p>
|
||||
<TimelineItem v-for="(job, idx) in $tm('career.jobs')">
|
||||
<template #icon>
|
||||
<component :is="jobIcons[idx as number]"></component>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
<TimelineItem>
|
||||
<template #icon><TreeIcon /></template>
|
||||
<template #headline>Lumberjack</template>
|
||||
<template #headline>{{ job.title }}</template>
|
||||
<template #content>
|
||||
<p>
|
||||
After leaving his hometown, Viktor started working as a lumberjack.
|
||||
The club at the end of his tail came very much in handy as a
|
||||
counterweight for each swing of his axe, allowing him to strike
|
||||
efficiently and powerfully, felling even the largest trees with
|
||||
relative ease. His naturally tough scales protected him from splinters
|
||||
from the felled wood. The long-lasting hard physical work toughened
|
||||
his body over the years. Before taking the cut logs to the sawmill,
|
||||
Viktor always took a break to rest in the peace and quiet of the
|
||||
forest. Although he enjoyed the seclusion of the country life for a
|
||||
while, he was longing for the sociability of city life again.
|
||||
</p>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
<TimelineItem>
|
||||
<template #icon><CarIcon /></template>
|
||||
<template #headline>Car Mechanic</template>
|
||||
<template #content>
|
||||
<p>
|
||||
Moving into a suburban town, Viktor applied at an auto repair shop,
|
||||
where he learned the ins and outs of fixing cars. He became really
|
||||
good at it and enjoyed breathing new mechanical life into broken down
|
||||
vehicles. However, as time went on, the repair shop faced financial
|
||||
troubles, as it became increasingly difficult to come by spare parts
|
||||
as auto makers would only deal them to certified repair partners and
|
||||
certifications were prohibitively expensive. Viktor had to watch
|
||||
business slowly deteriorate, as skilled coworkers kept getting laid
|
||||
off, until the repair shop closed down for good.
|
||||
</p>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
<TimelineItem>
|
||||
<template #icon><HelmetSafetyIcon /></template>
|
||||
<template #headline>Construction Worker</template>
|
||||
<template #content>
|
||||
<p>
|
||||
Having taken a liking in physically demanding work, Viktor took on a
|
||||
job as a construction worker. Hard hat perched atop his head and belt
|
||||
tool slung around his waist, he was always ready to lend a hand (or
|
||||
tail if walls or boulders needed a good teardown). Since he had more
|
||||
than enough strength training from his previous jobs, he was often
|
||||
assigned carrying jobs to clear the site and haul building materials.
|
||||
After work was done, Viktor enjoyed the company of his colleagues over
|
||||
an after-work beer until late in the evenings. On one of these
|
||||
evenings, he got a little reckless with a colleague under the veil of
|
||||
the night and both were caught in the act of fooling around with each
|
||||
other on the construction site. In the following weeks, the colleagues
|
||||
kept their distance from Viktor and the evenings together also
|
||||
dissolved very quickly when he joined them. The continued
|
||||
ostracization ultimately prompted him to look for something new.
|
||||
</p>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
<TimelineItem>
|
||||
<template #icon><IndustryIcon /></template>
|
||||
<template #headline>Welder</template>
|
||||
<template #content>
|
||||
<p>
|
||||
In his job as a welder, Viktor spent his days working shifts in a
|
||||
workshop. In addition to special tools and plasma welders, he also
|
||||
used his powerful tail club to hammer metal parts into shape. He
|
||||
acquired a wide variety of welding techniques to join or repair metal
|
||||
structures. He worked with a wide variety of alloys such as steel,
|
||||
aluminum and titanium. Viktor showed extreme skill in his work with
|
||||
great precision and attention to detail. However, this dedication was
|
||||
a thorn in the side of a jealous colleague who saw Viktor as a rival
|
||||
and schemed against him, sabotaging his work, which ultimately ended
|
||||
in his termination after a customer sued the welding shop for botching
|
||||
the job. Viktor never found out who the culprit was, and the loss of
|
||||
that job still hangs over him.
|
||||
</p>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
<TimelineItem>
|
||||
<template #icon><TruckIcon /></template>
|
||||
<template #headline>Delivery Driver</template>
|
||||
<template #content>
|
||||
<p>
|
||||
When Viktor was strapped for cash, he took on a job in the gig economy
|
||||
as a driver delivering packages for a large online delivery service.
|
||||
His previous physically demanding jobs allowed him to haul even bulky
|
||||
deliveries to their destination with relative ease. If the shipping
|
||||
center managers hadn't been breathing down his neck constantly, he
|
||||
might have held this job even longer. But after one of the managers
|
||||
tried to show him up in front of the whole team, he snapped and broke
|
||||
their leg with his tail club. Of course, he didn't have to report for
|
||||
duty the next day.
|
||||
</p>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
<TimelineItem>
|
||||
<template #icon><BoxesIcon /></template>
|
||||
<template #headline>Docks Werehouse Worker</template>
|
||||
<template #content>
|
||||
<p>
|
||||
Currently Viktor works at the docks in the port town he moved to. His
|
||||
main responsibilities include loading and unloading cargo from ships
|
||||
and transporting it to and from warehousing. The hustle and bustle of
|
||||
the port sometimes gets on his nerves. Especially when the crew of
|
||||
docking ships come ashore again after a long time and make it clear
|
||||
that they don't have much contact with "landlubbers". Viktor doesn't
|
||||
get particularly impressed by this and foul mouths them right back if
|
||||
he gets the impression they're looking for trouble.
|
||||
</p>
|
||||
<p>{{ job.desc }}</p>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
</TimelineList>
|
||||
|
|
|
|||
|
|
@ -31,90 +31,41 @@ const toLbs = (kg: number): number => {
|
|||
return lbs;
|
||||
};
|
||||
|
||||
const heads = ["Key", "Value"];
|
||||
const heads = ["data.general.heading[0]", "data.general.heading[1]"];
|
||||
const data = [
|
||||
["Full Name", "Viktor Kraastav"],
|
||||
["Date of Birth", dateFormat.format(dob)],
|
||||
["Sex/Gender", "male ♂️"],
|
||||
["Height", `${height} cm (${toImperial(height)})`],
|
||||
["Weight", `${weight} kg (${toLbs(weight)} lbs)`],
|
||||
["data.general.fullName[0]", "data.general.fullName[1]"],
|
||||
["data.general.dob[0]", dateFormat.format(dob)],
|
||||
["data.general.gender[0]", "data.general.gender[1]"],
|
||||
["data.general.height[0]", `${height} cm (${toImperial(height)})`],
|
||||
["data.general.weight[0]", `${weight} kg (${toLbs(weight)} lbs)`],
|
||||
];
|
||||
|
||||
const sexHeads = ["Key", "Value"];
|
||||
const sexHeads = ["data.sexuality.heading[0]", "data.sexuality.heading[1]"];
|
||||
const sexData = [
|
||||
["Sexuality", "Gay"],
|
||||
["Preferred position", "Bottom"],
|
||||
["data.sexuality.identifiesAs[0]", "data.sexuality.identifiesAs[1]"],
|
||||
["data.sexuality.preferredRole[0]", "data.sexuality.preferredRole[1]"],
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $route.meta.title }}</h1>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
</section>
|
||||
|
||||
<DataTable :headings="heads" :data="data"></DataTable>
|
||||
|
||||
<section>
|
||||
<h2>Personality</h2>
|
||||
<p>
|
||||
Viktor is not a man of many words, his manner of expression is simple and
|
||||
direct, and sometimes a little blunt. This brash manner doesn't go down
|
||||
well with everyone and regularly gets him into trouble.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
At the same time, this is also an expression of his exuberant
|
||||
self-confidence. He won't take any crap from anyone and doesn't hesitate
|
||||
to give someone a piece of his mind. If that results in fisticuffs, he'll
|
||||
deal with them.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
All this may make him look like a really unpleasant fellow, but he greatly
|
||||
appreciates the company of people he trusts. He is very selective about
|
||||
whom he counts among this group of people, though. He appreciates personal
|
||||
contact, preferably over a few beers at his favorite bar.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
He likes things to be simple, which is why he is not a big fan of
|
||||
high-tech. He does have a smartphone, but he hates using it as much as he
|
||||
dislikes the fact he's dependent on owning one.
|
||||
</p>
|
||||
<h2>{{ $t("general.personality.heading") }}</h2>
|
||||
<p v-for="p in $tm('general.personality.paragraphs')">{{ p }}</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Sexuality</h2>
|
||||
<h2>{{ $t("general.sexuality.heading") }}</h2>
|
||||
</section>
|
||||
|
||||
<DataTable :headings="sexHeads" :data="sexData"></DataTable>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
As a teenager, Viktor noticed that he felt a bit differently about the
|
||||
boys in his class. Especially in gym class, his eyes tended to linger
|
||||
longer on his classmates as they rough-housed in the locker room, as
|
||||
pubescent boys do. However, he could never quite come to terms with the
|
||||
idea that he might be a little different from his friends, who were all
|
||||
beginning to take an interest in girls, unlike him, who was more
|
||||
interested in his buddies.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
As he got older, he slowly learned to come to terms with the fact that he
|
||||
saw more in his buddies than just friends. However, he still kept a low
|
||||
profile.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Until one evening at a party, when one of his friends complained that he
|
||||
wouldn't get any from his girlfriend. Both of them were already well
|
||||
intoxicated and Viktor made him the slurred proposal that he would help
|
||||
him out as his bro. At first his buddy was irritated by the offer, but
|
||||
eventually agreed. The two snuck into a bedroom at the host's place, where
|
||||
Viktor would let his buddy unload all the pent-up pressure inside him. He
|
||||
wouldn't remember much of the party, but what he didn't forget how good it
|
||||
felt to give himself to another man.
|
||||
</p>
|
||||
<p v-for="p in $tm('general.sexuality.paragraphs')">{{ p }}</p>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,13 @@ import WelcomeHeader from "@/components/WelcomeHeader.vue";
|
|||
|
||||
<template>
|
||||
<WelcomeHeader>
|
||||
<template #main>Viktor Kraastav</template>
|
||||
<template #sub>Character Reference Page</template>
|
||||
<template #main>{{ $t("welcomeHeader.mainTitle") }}</template>
|
||||
<template #sub>{{ $t("welcomeHeader.subTitle") }}</template>
|
||||
</WelcomeHeader>
|
||||
|
||||
<section>
|
||||
<h3>Welcome to Viktor's Ref Page</h3>
|
||||
<h3>{{ $t("home.heading") }}</h3>
|
||||
|
||||
<p>Here you can learn all about the ankylosaurus named Viktor.</p>
|
||||
<p>Pick an item from the navigation to dive in!</p>
|
||||
<p v-for="p in $tm('home.paragraphs')">{{ p }}</p>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue