fixed member cards

Author: SimonPhumin

apps/blog/src/routes/+error.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { animate } from '@a11y.cool/utils';
 	import { Warning } from 'phosphor-svelte';
+	import { resolve } from '$app/paths';
 
 	let { errors } = $props<{ errors?: Error }>();
 
@@ -45,7 +46,7 @@
 		<!-- Navigation back to home -->
 		<div class="text-center">
 			<a
-				href="/"
+				href={resolve('/')}
 				class="inline-flex items-center px-6 py-3 bg-foreground text-background rounded-lg hover:bg-foreground/90 transition-colors focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2"
 			>
 				Go back home

apps/blog/src/routes/about/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Card } from '@a11y.cool/ui';
+	import { MemberCard } from '@a11y.cool/ui';
 	import { animate } from '@a11y.cool/utils';
 	import type { PageData } from './$types';
 	import { PersonSimpleCircle } from 'phosphor-svelte';
@@ -43,7 +43,7 @@
 				<div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
 					{#each about.members as member, index (member.name)}
 						<div use:animate={{ delay: 300 + index * 100 }}>
-							<Card title={member.name} description={member.description}></Card>
+							<MemberCard {member} />
 						</div>
 					{/each}
 				</div>

packages/data/src/directus/directus.api.ts

@@ -62,6 +62,8 @@ export const dataQueryAbout: string = `query {
             name
 			certification
 			description
+			website
+			linkedin
             image {
                 id
                 description

packages/data/src/types/about.type.ts

@@ -3,6 +3,8 @@ export interface Member {
 	certification: string | null;
 	description: string;
 	image: Image | null;
+	website: string | null;
+	linkedin: string | null;
 }
 
 export interface Image {

packages/ui/index.ts

@@ -4,6 +4,7 @@ export { default as Footer } from './src/components/Footer.svelte';
 export { default as Avatar } from './src/components/Avatar.svelte';
 export { default as Navigation } from './src/components/Navigation.svelte';
 export { default as Card } from './src/components/Card.svelte';
+export { default as MemberCard } from './src/components/MemberCard.svelte';
 export { default as HtmlRender } from './src/components/HtmlRender.svelte';
 export { default as Eyes } from './src/components/Eyes.svelte';
 export { default as PostInfo } from './src/components/PostInfo.svelte';

packages/ui/src/components/MemberCard.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { Member } from '@a11y.cool/data';
+	import { Globe, LinkedinLogo } from 'phosphor-svelte';
+
+	let { member }: { member: Member } = $props();
+</script>
+
+<article
+	class="rounded-3xl shadow-card border border-border-input bg-background-alt p-6 flex flex-col items-start gap-4 min-h-[320px]"
+>
+	<!-- Circular member image -->
+	{#if member.image}
+		<div
+			class="w-24 h-24 rounded-full overflow-hidden border-2 border-border-input mb-2 self-center"
+		>
+			<img
+				src={member.image.id}
+				alt={member.image.description || `${member.name} profile picture`}
+				class="w-full h-full object-cover"
+			/>
+		</div>
+	{/if}
+
+	<!-- Member name -->
+	<h3 class="text-xl md:text-2xl font-semibold text-left mb-2">
+		{member.name}
+	</h3>
+
+	<!-- Certification if available -->
+	{#if member.certification}
+		<p class="text-sm text-muted-foreground text-left mb-3">
+			{member.certification}
+		</p>
+	{/if}
+
+	<!-- Description -->
+	<p class="text-base mb-4 w-full text-left">
+		{member.description}
+	</p>
+
+	<!-- URL links at the bottom -->
+	<div class="flex gap-4 mt-auto">
+		{#if member.website}
+			<a
+				href={member.website}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="flex items-center gap-2 px-3 py-2 rounded-lg bg-background border border-border-input hover:bg-muted transition-colors"
+				aria-label="Visit {member.name}'s website"
+			>
+				<Globe size={16} />
+				<span class="text-sm">Website</span>
+			</a>
+		{/if}
+
+		{#if member.linkedin}
+			<a
+				href={member.linkedin}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="flex items-center gap-2 px-3 py-2 rounded-lg bg-background border border-border-input hover:bg-muted transition-colors"
+				aria-label="Visit {member.name}'s LinkedIn profile"
+			>
+				<LinkedinLogo size={16} />
+				<span class="text-sm">LinkedIn</span>
+			</a>
+		{/if}
+	</div>
+</article>