Update portfolio, roles and photo

src/lib/components/ui/ProfileIntro.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
 	import { profile } from '#lib/content';
 
-	let { heading, subheading, text }: { heading: string; subheading: string; text: string } = $props();
+	let {
+		heading,
+		subheading,
+		text,
+		image = profile.avatar
+	}: { heading: string; subheading: string; text: string; image?: string } = $props();
+
+	const isPixelAvatar = $derived(image === profile.avatar);
 </script>
 
 <div class="profile-intro">
-	<img src={profile.avatar} alt={profile.displayName} />
+	<img src={image} alt={profile.displayName} class:pixelated={isPixelAvatar} />
 	<div class="details">
 		<h1>{heading}</h1>
 		<div class="subheading">{subheading}</div>
@@ -24,10 +31,15 @@
 
 	img {
 		width: 160px;
-		image-rendering: pixelated;
+		aspect-ratio: 1;
+		object-fit: cover;
 		border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
 	}
 
+	img.pixelated {
+		image-rendering: pixelated;
+	}
+
 	.details {
 		flex: 1;
 		min-width: 240px;