traxxx-web/pages/actors/@actorId/+Page.vue

<template>
	<div class="page">
		<div class="bio">
			<img
				v-if="actor.avatar"
				:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
				:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
				class="avatar"
			>

			<h2 class="name">{{ actor.name }}</h2>
		</div>

		<Scenes />
	</div>
</template>

<script setup>
import { inject } from 'vue';

import Scenes from '#/components/scenes/scenes.vue';

const pageContext = inject('pageContext');
const { pageProps } = pageContext;

const { actor } = pageProps;
</script>

<style scoped>
.bio {
	display: flex;
	padding: 1rem;
	background: var(--grey-dark-40);
	color: var(--text-light);
}

.name {
	margin: 0;
}

.avatar {
	height: 10rem;
	margin-right: 1rem;
}
</style>