fix: 🐛 incorrect nesting when run through lightningcss

Separate functions would work almost identical, so might as well merge into single function and generalize it

eleventy.config.js

@@ -7,13 +7,11 @@ import markdownIt from 'markdown-it';
 
 const MARKDOWNIT_OPTIONS = { html: true, linkify: true, typographer: true };
 const IMAGE_TRANSFORM_OPTS = {
-  // Set global default options
   formats: ['avif', 'webp', 'auto'],
   sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
   sharpPngOptions: { compressionLevel: 9 },
   urlPath: '/img/',
-  // Notably `outputDir` is resolved automatically
-  // to the project output directory
+  outputDir: './public/img/',
   defaultAttributes: {
     loading: 'lazy',
     decoding: 'async',
@@ -21,23 +19,37 @@ const IMAGE_TRANSFORM_OPTS = {
   }
 };
 
-const BASE = env.ELEVENTY_PRODUCTION ? 'https://ref.sebin-nyshkim.net' : 'http://localhost:8080';
+const BASE = env.ELEVENTY_PRODUCTION ? 'https://ref-beta.sebin-nyshkim.net' : 'http://localhost:8080';
 
 // source: https://notes.jays.net/blog/11ty/
-async function getOgImage(src, key) {
-  const stats = await Image(src, {
-    width: [1200],
-    formats: ['webp'],
-    urlPath: '/img/',
-    outputDir: './public/img/',
-    filenameFormat: (hash, src, width, format) => `${hash}-${width}.${format}`
-  });
+async function getImage(type, src, key) {
+  let widths, formats;
 
-  if (key === 'url') {
-    return BASE + stats.webp[0][key];
+  switch (type) {
+    case 'og':
+      widths = [1200];
+      formats = ['webp'];
+      break;
+    case 'favicon':
+      widths = [200];
+      formats = ['png'];
+      break;
   }
 
-  return stats.webp[0][key];
+  const opts = {
+    ...IMAGE_TRANSFORM_OPTS,
+    widths,
+    formats
+  };
+
+  const stats = await Image(src, opts);
+  const [format] = formats;
+
+  if (key === 'url') {
+    return BASE + stats[format][0][key];
+  }
+
+  return stats[format][0][key];
 }
 
 export default async function (eleventyConfig) {
@@ -72,7 +84,7 @@ export default async function (eleventyConfig) {
     return content;
   });
 
-  eleventyConfig.addFilter('getOgImage', getOgImage);
+  eleventyConfig.addFilter('getImage', getImage);
 
   eleventyConfig.addPlugin(eleventyPluginWebc, {
     components: ['src/components/**/*.webc', 'npm:@11ty/eleventy-img/*.webc'],

src/components/head/page-head-meta.webc

@@ -7,11 +7,18 @@
     return 'Choose Your Character!';
   };
 
-  const getImageUrl = (char) => (char ? `src/img/${char.toLowerCase()}/og.png` : 'src/img/og.png');
+  const getImageUrl = (char, type = 'og') =>
+    char ? `src/img/${char.toLowerCase()}/${type}.png` : `src/img/${type}.png`;
 </script>
 
 <title @text="getTitle($data.fullName)"></title>
 
+<link
+  rel="shortcut icon"
+  :href="getImage('favicon', getImageUrl($data.firstName, 'avatar'), 'url')"
+  :type="getImage('favicon', getImageUrl($data.firstName, 'avatar'), 'sourceType')"
+/>
+
 <meta webc:if="$data.description" name="description" :content="$data.description" />
 <meta name="generator" :content="$data.eleventy.generator" />
 
@@ -24,13 +31,13 @@
 <meta property="og:description" :content="$data.description" />
 <meta property="og:locale" :content="$data.language" />
 
-<meta property="og:image" :content="getOgImage(getImageUrl($data.firstName), 'url')" />
-<meta property="og:image:type" :content="getOgImage(getImageUrl($data.firstName), 'sourceType')" />
-<meta property="og:image:width" :content="getOgImage(getImageUrl($data.firstName), 'width')" />
-<meta property="og:image:height" :content="getOgImage(getImageUrl($data.firstName), 'height')" />
+<meta property="og:image" :content="getImage('og', getImageUrl($data.firstName), 'url')" />
+<meta property="og:image:type" :content="getImage('og', getImageUrl($data.firstName), 'sourceType')" />
+<meta property="og:image:width" :content="getImage('og', getImageUrl($data.firstName), 'width')" />
+<meta property="og:image:height" :content="getImage('og', getImageUrl($data.firstName), 'height')" />
 
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:url" :content="$data.base + $data.page.url" />
 <meta name="twitter:title" :content="getTitle($data.fullName)" />
 <meta name="twitter:description" :content="$data.description" />
-<meta name="twitter:image" :content="getOgImage(getImageUrl($data.firstName), 'url')" />
+<meta name="twitter:image" :content="getImage('og', getImageUrl($data.firstName), 'url')" />

src/components/head/page-head-style.webc

@@ -29,7 +29,21 @@
     font-family: var(--font-family-headings);
   }
 
-  ::selection {
+  a:not([class]) {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 0.1875em;
+    text-decoration-thickness: 0.125em;
+    text-decoration-skip-ink: all;
+    text-decoration-color: var(--clr-link-underline);
+    transition: color 0.2s ease;
+  }
+
+  a:not([class]):hover {
+    color: var(--clr-link);
+  }
+
+  :where(.sebin, .viktor, .jarek) ::selection {
     color: var(--clr-selection-text);
     background-color: var(--clr-selection);
   }

src/components/job.webc

@@ -1,19 +1,19 @@
-<ul webc:root="override">
-  <li class="job" webc:for="job of jobs">
-    <div class="icon"><icon :@icon="job.icon"></icon></div>
-    <p class="title" @text="job.title"></p>
-    <p class="text" @text="job.desc"></p>
-  </li>
-</ul>
+<section webc:root="override">
+  <div class="icon"><icon :@icon="icon"></icon></div>
+  <p class="title" @text="title"></p>
+  <p class="text" webc:type="11ty" @11ty:type="md" webc:keep>
+    <slot></slot>
+  </p>
+</section>
 
-<style webc:scoped="timeline">
+<style webc:scoped="job">
   :host {
     --timeline-circle-size: 3rem;
     --timeline-circle-background: var(--clr-box-background);
     --timeline-stroke-color: var(--clr-timeline-stroke);
     --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
 
-    margin-block: 1em;
+    margin: 0;
     padding: 0;
 
     @media (min-width: 32em) {
@@ -21,7 +21,7 @@
     }
   }
 
-  :host .job {
+  :host {
     display: grid;
     grid-template-areas:
       'icon title'
@@ -29,7 +29,7 @@
     column-gap: 1em;
   }
 
-  :host .job::before {
+  :host::before {
     content: '';
 
     grid-row: icon / line;
@@ -42,18 +42,18 @@
     background-color: var(--timeline-stroke-color);
   }
 
-  :host .job:first-child::before {
+  :host:first-of-type::before {
     align-self: end;
     height: calc(100% - var(--timeline-circle-size));
   }
 
-  :host .job:last-child::before {
+  :host:last-of-type::before {
     grid-row: icon;
     align-self: start;
     height: 50%;
   }
 
-  :host .job > .icon {
+  :host > .icon {
     grid-area: icon;
     align-self: center;
 

src/components/page-content.webc

@@ -6,6 +6,8 @@
 
 <style webc:scoped="page-content">
   :host {
+    grid-area: content;
+
     width: 100%;
     max-width: 65ch;
 
@@ -51,18 +53,4 @@
   :host p {
     text-align: justify;
   }
-
-  :host article a {
-    color: inherit;
-    text-decoration: underline;
-    text-underline-offset: 0.1875em;
-    text-decoration-thickness: 0.125em;
-    text-decoration-skip-ink: all;
-    text-decoration-color: var(--clr-link-underline);
-    transition: color 0.2s ease;
-  }
-
-  :host article a:hover {
-    color: var(--clr-link);
-  }
 </style>

src/components/profile.webc

@@ -23,6 +23,8 @@
     position: var(--sidebar-position);
     top: var(--page-spacing);
 
+    grid-area: info;
+
     display: grid;
     grid-template-columns: var(--sidebar-grid-columns);
     grid-template-areas: var(--sidebar-grid-areas);

src/layouts/character.webc

@@ -3,9 +3,7 @@ layout: base.webc
 ---
 
 <popup-modal id="nsfw-warning" :open="isOpen">
-  <template webc:nokeep slot="heading">
-    🔞 Whoa, Nelly! 🔞
-  </template>
+  <template webc:nokeep slot="heading"> 🔞 Whoa, Nelly! 🔞 </template>
   <template webc:nokeep slot="message">
     <p>Entering the kinky zone!</p>
     <p>You confirm that you are of legal age to view adult content!</p>
@@ -32,12 +30,18 @@ layout: base.webc
     <article @raw="content"></article>
   </page-content>
 
-  <footer>&copy; Sebin Nyshkim 2025</footer>
+  <footer>
+    <p>
+      Made with <a href="https://11ty.dev" target="_blank">11ty</a><br />
+      Icons by <a href="https://fontawesome.com/">Font Awesome</a>
+    </p>
+    <p>&copy; Sebin Nyshkim 2025</p>
+  </footer>
 </main>
 
 <style>
   main {
-    --inbox-margin: 1rem;
+    --inbox-spacing: 1rem;
 
     display: grid;
     justify-content: center;
@@ -56,7 +60,7 @@ layout: base.webc
     margin-block: var(--page-spacing);
 
     @media (min-width: 64em) {
-      --inbox-margin: 1.5rem;
+      --inbox-spacing: 1.5rem;
 
       grid-auto-columns: revert;
       grid-template-columns: 18em minmax(0, 65ch);
@@ -67,25 +71,55 @@ layout: base.webc
   }
 
   h1 {
-    margin-inline: var(--inbox-margin);
+    margin-inline: var(--inbox-spacing);
   }
 
   article {
-    margin-block: var(--inbox-margin);
-    margin-inline: var(--inbox-margin);
+    margin-block: var(--inbox-spacing);
+    margin-inline: var(--inbox-spacing);
     hyphens: auto;
   }
 
-  aside {
-    grid-area: info;
-  }
-
-  section {
-    grid-area: content;
-  }
-
   footer {
-    text-align: end;
+    --columns: 1fr;
+
     grid-area: footer;
+    display: grid;
+    grid-template-columns: var(--columns);
+    gap: 1em;
+    width: 100%;
+    max-width: 65ch;
+    padding-inline: var(--inbox-spacing);
+
+    @media (min-width: 35em) {
+      --columns: repeat(2, 1fr);
+    }
+  }
+
+  footer p {
+    --text-align: center;
+
+    margin: 0;
+    text-align: var(--text-align);
+
+    @media (min-width: 35em) {
+      margin: revert;
+    }
+  }
+
+  footer p:first-child {
+    text-align: var(--text-align);
+
+    @media (min-width: 35em) {
+      --text-align: start;
+    }
+  }
+
+  footer p:last-child {
+    text-align: var(--text-align);
+
+    @media (min-width: 35em) {
+      --text-align: end;
+    }
   }
 </style>

src/sebin/abilities.md

@@ -8,18 +8,18 @@ As a fire dragon, Sebin possesses a myriad of abilities that he can unleash upon
 
 ## Attacks
 
-<ability :@src="`attack-fire-breath.png`" name="Fire Breath">
+<ability :@src="`attack-fire-breath.png`" @name="Fire Breath">
   The signature move of any fire dragon. Special glands in his mouth together with a deep, deliberate breath to enrich his lungs create a combustible cocktail. The resulting jet of fire upon exhaling is a torrent of several hundred degrees Celsius, scorching everything in its wake.
 </ability>
 
-<ability :@src="`attack-flame-toss.png`" name="Flame Toss">
+<ability :@src="`attack-flame-toss.png`" @name="Flame Toss">
   When there isn't a direct line of sight between Sebin and his opponent, he can spit fire into his hands and shape it into a throwable projectile. His scales are naturally fireproof, allowing him to withstand the intense heat without flinching. Even if he misses his target, the resulting blast upon impact is enough to cause considerable damage alone—especially when he combines two projectiles to increase the explosion radius.
 </ability>
 
-<ability :@src="`attack-kindled-fist.png`" name="Kindled Fist">
+<ability :@src="`attack-kindled-fist.png`" @name="Kindled Fist">
   Sebin's fists become instruments of destruction when he engulfs them in his flames. Targeted blows are capable of inflicting agonizing burns on his opponents. He can also release controlled blasts of fire from his fists, unleashing smoldering waves of heat to scorch and disorient his foes.
 </ability>
 
-<ability :@src="`attack-burning-twister.png`" name="Burning Twister">
+<ability :@src="`attack-burning-twister.png`" @name="Burning Twister">
   This aerial attack is a masterpiece of Sebin's pyromancy skills. By engulfing himself in flames while spinning at breakneck speeds in mid-air, he creates a whirling vortex of fire that can singe even the most elusive opponents. Those who dare to face him in the skies will soon find themselves caught in the maelstrom of his most fearsome attack.
 </ability>

src/sebin/overdrive.md

@@ -24,34 +24,34 @@ Direct body contact with Sebin during overdrive causes 3rd degree burns as he em
 
 ## Attacks
 
-<ability name="Fire Breath (improved)">
+<ability @name="Fire Breath (improved)">
   The reach of Sebin's Fire Breath increases as well as the frequency at which he can fire shots from his mouth.
 </ability>
 
-<ability name="Flame Toss (improved)">
-  Overdrive Form eliminates the need for Sebin to spit fire into his palms. It instead enables him to fire the shots directly from the palm palm of his hands, as the firey veins crossing his arms act as an orifice to do so. The explosion radius of the burning projectiles that explode on impact is greatly increased.
+<ability @name="Flame Toss (improved)">
+  Overdrive Form eliminates the need for Sebin to spit fire into his palms. It instead enables him to fire the shots directly from the palm palm of his hands, as the fiery veins crossing his arms act as an orifice to do so. The explosion radius of the burning projectiles that explode on impact is greatly increased.
 </ability>
 
-<ability name="Kindled Fist (improved)">
+<ability @name="Kindled Fist (improved)">
   As his arms and legs are infused with fire his punches and kicks exert trails of flames while doing so. Landing a punch or kick sears enemies.
 </ability>
 
-<ability name="Searing Discus">
+<ability @name="Searing Discus">
   Overdrive allows Sebin to form rings of fire by igniting flames from his fingertips and swirling them in a circle motion. He can use them for both close quarters or ranged combat.
 </ability>
 
-<ability name="Combustion Flare">
-  Clinking both of his wrists against each other like flints unleashes a devestating fire blast from both of his fire-infused hands. A secure foothold is needed to prevent Sebin from being thrown back by the recoil of the attack. Using this technique in the air is therefore highly risky.
+<ability @name="Combustion Flare">
+  Clinking both of his wrists against each other like flints unleashes a devastating fire blast from both of his fire-infused hands. A secure foothold is needed to prevent Sebin from being thrown back by the recoil of the attack. Using this technique in the air is therefore highly risky.
 </ability>
 
-<ability name="Blazing Pandemonium">
+<ability @name="Blazing Pandemonium">
   A heavy impact into the ground from a great height with both fists, tearing deep cracks in the ground around the impact crater. Combined with Kindled Fist the heat in Sebin's arms are forced through the newly created furrows, transforming the scene into an inferno.
 </ability>
 
-<ability name="Scorching Edge">
-  A fiery blade towering several meters into the air that Sebin sends careening towards his enemies from his fire-infused legs with a backflip kick, leaving a swath of destruction in its wake. Upon impact the force of the attack is distributed sideways.
+<ability @name="Scorching Edge">
+  A fiery blade towering several meters into the air that Sebin sends careening towards his enemies from his fire-infused legs with a back-flip kick, leaving a swath of destruction in its wake. Upon impact the force of the attack is distributed sideways.
 </ability>
 
-<ability name="Circling Fire Shield">
+<ability @name="Circling Fire Shield">
   A rather defensive technique. By spinning around with stretched out arms Sebin creates fire balls, which he usually hurls towards enemies, that circle around his body diagonally. They act as a shield while he can still move his arms relatively freely. Enemies would be well advised to keep their distance to this spinning shield, as the fire balls will still explode on contact.
 </ability>

src/viktor/anatomy.md

@@ -16,11 +16,9 @@ eleventyNavigation:
 
 <colors :@colors="$data.colors"></colors>
 
-Viktor is a bipedal plantigrade Ankylosaurus. His skin is mostly bicolored, with several shades of brown.
+Viktor is a bipedal plantigrade Ankylosaurus with bicolored skin. The majority of his body features several shades of brown. A distinctive strip of deep dark cedar brown runs along the back of his head, down his spine, and across the top of his tail. His cheeks, shoulders, back, and thighs showcase a rich walnut brown color, which runs along the sides of his tail. These deep rich browns are complimented with the light earthy browns of his arms and legs.
 
-His forehead, nose, chest, belly and crotch are of light desert sand colors that run through the underside of his tail.
-
-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.
+His forehead, nose, chest, belly, and crotch contrast this with a distinguished light desert sand color that continues down the underside of his tail.
 
 <ref-img
     :@src="`ref-front.png`"
@@ -32,10 +30,10 @@ His cheeks, shoulders, back and thighs, in contrast, stand out with a rich walnu
     :@nsfw="true"
 ></ref-img>
 
-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.
+Viktor's body is a canvas of colorful markings, speckled with scattered aquamarine spots, often appearing in pairs—one large spot next to a small one. The spots next to the horns on his cheeks are the only exception, which come in sets of three. The top side of his snout boasts a single, prominent spot. Other areas of his body, including his mouth, tongue, nostrils, and any other tissue also share this color.
 
-His eyes shine with a mixture of light sea green and electric blue.
+In contrast to his earthy colors, his eyes stand out with a mix of light sea green and electric blue. Viktor knows his eye color is a striking feature that draws looks, and he uses this to his advantage in social encounters.
 
-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.
+A row of bone white horns runs along the top of his head in a parallel line down his back, with additional horns adorning his shoulders and thighs. His tail is no exception, with smaller horns running along both sides. At its tip, Viktor's tail boasts a sturdy cudgel-like ossification, which he uses to defend himself against less well-meaning fellows.
 
-He owes his strong, stocky physique to years of hard physical labor.
+Viktor's rugged physique reflects years of working in physically demanding fields. His broad shoulders, muscular chest, and bulky arms and legs speak to a body honed by many hours of hard work. What he lacks in agility or nimbleness, he makes up for with a formidable resiliency—you'd have to deal him a serious blow before he'd even consider staggering.

src/viktor/career.md

@@ -4,7 +4,26 @@ eleventyNavigation:
   order: 3
 ---
 
-Viktor's had many different jobs in the past, some of which where very formative, other's just
-paid the bills.
+Viktor has taken on a variety of jobs in his life. He's not particularly picky about the type of work, but he's anything but a 9to5 paper pusher. He vastly prefers manual labor that keeps his hands busy. Some of his past jobs have been more formative than others, allowing him to develop skills that have served him well even outside of work. Others were more focused solely on simply putting food on the table.
 
-<timeline :@jobs="jobs"></timeline>
+<job @title="Bartender" @icon="fa6-solid:whiskey-glass">
+  Viktor worked his first job as a bartender, helping out his uncle at the local pub. Initially he served drinks from the tap behind the counter and cleaning dishes. A pivotal moment during his time there came when someone who had a few too many drinks climbed over the counter and threatened him with a broken bottle. In a do-or-die moment, Viktor reacted on instinct, flung the cudgel at the end of his tail and landed a decisive blow to knock them down. This harrowing experience hardened him up and landed him a double role as the bar's bouncer. He garnered a reputation as the guy you don't mess around with, lest you left with less teeth than you came with.
+</job>
+<job @title="Lumberjack" @icon="fa6-solid:tree">
+  After leaving his hometown, Viktor embarked on a new career as a lumberjack, where his unique physiology proved to be a valuable asset. The club at the tip of his tail served as a counterweight for each swing of his axe, enabling him to land precise and powerful strikes. His body's naturally tough scales also protected him from flying splinters, while the hard physical work helped to toughen his physique over time. Viktor enjoyed to take breaks in the forest's peaceful solitude before hauling the cut logs to the sawmill. He grew to enjoy the seclusion of the rural life the work brought with it, but over time he realized he missed the connectedness a city or suburb provided. This ultimately led him to seek out new ventures.
+</job>
+<job @title="Car Mechanic" @icon="fa6-solid:car">
+  Moving to a suburban town, Viktor landed a job at an auto repair shop, where he learned the ins and outs of fixing cars. He quickly became adept at breathing new life into broken-down vehicles and he enjoyed it thoroughly. However, as time went on, the shop faced significant challenges, including a dwindling supply of spare parts. Automobile manufacturers started to only distribute these parts to certified repair partners—which was a costly and time-consuming process. As the financial struggles mounted, Viktor witnessed the business gradually deteriorate. He saw skilled coworkers get laid off as the shop's revenue declined, until it ultimately had to close down for good.
+</job>
+<job @title="Construction Worker" @icon="fa6-solid:helmet-safety">
+  Realizing he quite enjoyed physically demanding work, Viktor went on to work at construction sites, where his unique skills were put to good use. With his hard hat firmly in place and belt tool at the ready, he was always prepared to lend a hand–or tail, if walls or boulders needed a good teardown. Given that previous ventures honed his body thoroughly, Viktor was often tasked with heavy lifting, clearing sites, and hauling building materials. The highlight of his day was the daily get-together with coworkers after work. One of those nights he got a little reckless, however: when Viktor and a coworker stepped out and didn't come back for quite a while, both were caught in the act of fooling around with each other on the construction site. After that, coworkers kept their distance to Viktor, and evenings spent together became increasingly brief once Viktor joined them. As ostracism continued to mount, Viktor realized it was time to explore new opportunities.
+</job>
+<job @title="Welder" @icon="fa6-solid:industry">
+  Viktor proved to have a hand as a welder and spent his days working shifts in a workshop, where he utilized his unique combination of tools and techniques to create precise, high-quality work. His powerful tail club proved particularly useful for shaping metal parts, while gaining knowledge on how to work with various alloys. However, a jealous coworker saw a rival in Viktor and began to sabotage his work, secretly tampering with the equipment or undermining his techniques. After enough jobs Viktor worked on were botched and him not able to give any explanation, he was ultimately let go after a customer sued the welding shop for damages—an event that still weighs heavily on him.
+</job>
+<job @title="Delivery Driver" @icon="fa6-solid:truck">
+  When Viktor was strapped for cash, he found himself turning to the gig economy, working as a delivery driver for a major online delivery service. It wasn't the most challenging work, but at least he had no significant trouble hauling hauling heavy packages to their destinations. If only the supervisors hadn't been constantly breathing down his neck, he might've even kept the job for longer. But after one of the shift managers tried to show him up in front of the whole team, Viktor finally snapped and shattered one of the manager's kneecaps with the club on the tip of his tail. Of course, he didn't have to report for duty the next day, or ever for that matter.
+</job>
+<job @title="Docks Werehouse Worker" @icon="fa6-solid:boxes-stacked">
+  Currently, Viktor works at the docks in the port town where he relocated. Among his responsibilities is the loading and unloading of cargo to and from ships via forklift and other transport vehicles. He's also responsible for checking that cargo arrived intact and consumables didn't spoil on the way. The hustle and bustle of the port sometimes gets on his nerves, but he manages. At least until the crew members from docking ships arrive ashore after extended periods at sea and start strutting around all high and mighty. Viktor finds himself butting heads with them a lot due to their tendency to look down on "landlubbers" and his low tolerance for their bullshit. Over time, however, he established his status somewhat and the crew members dialed back their attitude around him.
+</job>

src/viktor/index.md

@@ -4,13 +4,21 @@ eleventyNavigation:
   order: 1
 ---
 
-Viktor is not a man of many words. His manner of expression is simple and direct, sometimes to the point that it becomes a little blunt. His brash manner doesn't go down well with everyone and regularly gets him into trouble.
+Viktor is a man who speaks from his heart, but rarely over it. His straightforward nature can sometimes come across as blunt, earning him a few raised eyebrows and even more trouble than he bargained for.
 
-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.
+Yet, this kind of honesty is also a reflection of his unwavering self-confidence. He stands up for what he believes in, never backing down from giving someone a piece of his mind, even if it means ruffling a few feathers along the way—those who know him can attest to that.
 
-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 enjoys some face time with buddies, preferably over a few beers at his favorite bar.
+People often mistake this gruff nature for indifference and that he's just not the most sociable. Nothing could be further from the truth: Once you do make an honest attempt to get to know Viktor a little better, he warms up to you rather quickly and you'd be hard-pressed to find a more dependable guy than him.
 
-Viktor prefers to keep it simple. He's not particularly fond of the dependence on tech these days and how everything shifts into online spaces. His 10 year old phone is on silent most of the time.
+He values when people are honest with him, just as he is with them. Don't try to butter him up with empty flattery or pretend to be someone you're not just to impress him. Not only will this fall flat, but it'll also score you zero points on the popularity scale. Viktor has a sixth sense for try-hards, and he will not hesitate to call you out on your bullshit.
+
+Viktor is someone who values community and belonging deeply, and he'll go out of his way to support those around him. He is, however, very selective about who he lets into his inner circle. People need to earn their place in his close-knit group of friends.
+
+He much rather meets those friends face-to-face, too. Catching up with friends over a few beers at his favorite bar or outdoors in the sunset after work beats typing away on a screen for him any day.
+
+Which also aptly describes his relationship to technology: Viktor isn't exactly tech-savvy, preferring not to rely on digital communication methods that often feel impersonal or fleeting. He's not one for gadgets or gizmos with all the bells and whistles. He uses something until it irreparably breaks and even if he has to replace something, he has no issue with hand-me-downs.
+
+He greatly dislikes the dependence on tech of the modern age, which is why he's hard to get a hold of on his trusty 10-year-old phone—which he has on silent almost all the time. Get used to hearing back from him maybe a day or two later. That is, if he remembers to charge it. However, this is less of an issue than it might seem. Due to his aforementioned preference for face time, he's out and about most of the time, so you're bound to run into him sooner or later anyways.
 
 ## Sexuality
 
@@ -18,8 +26,12 @@ Viktor prefers to keep it simple. He's not particularly fond of the dependence o
   <traits :@traits="$data.getTraits('naughty')"></traits>
 </quick-info>
 
-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.
+Viktor noticed early on that he felt a bit differently about other boys in school. He frequently sought out the camaraderie of his male peers, even when they were getting to the age where most of them started taking an increased interest in dating girls. Every time they asked Viktor when he's going to introduce them to "his girl" he avoided the question or made up reasons why he hadn't found the right one yet.
 
-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.
+At first he tried to brush these emotions aside, yet he frequently found himself eyeing up his buddies rough-housing in the lockers before and after gym class. Over time, however, he slowly came to terms with how he felt, even though he still kept a low profile.
 
-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.
+That is, until one late night at a party in his early twenties. One of his buddies, who Viktor has had a crush on for quite a while at this point, would not shut up about how he wasn't hitting it up with the ladies as he'd like. Viktor, already pretty sloshed from one too many drinks, rambled on about how they all had no idea what they were missing out on. Were it up to him, he would've let a "handsome hunk" like his buddy take him "anywhere, anytime."
+
+After making his buddy do a spit-take, Viktor kept reiterating his slurred proposal that he and his buddy had been bros for so long, he would help him out with anything. Viktor emptied his drink, grabbed his buddy by his arm and dragged him through the crowd into one of the bedrooms at the host's place. His buddy kept asking if this was all an elaborate prank, but as soon as Viktor got to work there was no more need for words.
+
+Viktor wouldn't remember much of the party, but what he didn't forget was how exhilarating and liberating it felt to finally give in to his desires and share this level of intimacy with another guy.

src/viktor/viktor.11tydata.json

@@ -1,41 +1,4 @@
 {
   "layout": "character.webc",
-  "language": "en_US",
-  "jobs": [
-    {
-      "title": "Bartender",
-      "icon": "fa6-solid:whiskey-glass",
-      "desc": "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."
-    },
-    {
-      "title": "Lumberjack",
-      "icon": "fa6-solid:tree",
-      "desc": "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."
-    },
-    {
-      "title": "Car Mechanic",
-      "icon": "fa6-solid:car",
-      "desc": "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."
-    },
-    {
-      "title": "Construction Worker",
-      "icon": "fa6-solid:helmet-safety",
-      "desc": "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."
-    },
-    {
-      "title": "Welder",
-      "icon": "fa6-solid:industry",
-      "desc": "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."
-    },
-    {
-      "title": "Delivery Driver",
-      "icon": "fa6-solid:truck",
-      "desc": "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."
-    },
-    {
-      "title": "Docks Werehouse Worker",
-      "icon": "fa6-solid:boxes-stacked",
-      "desc": "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."
-    }
-  ]
+  "language": "en_US"
 }