Update

src/lib/Avatar.svelte

@@ -55,10 +55,16 @@
 
 </script>
 
+{#if size === 'big'}
+<div class="w-64 text-center pb-4">
+  <img src={currentImg} class="w-64 rounded-full m-auto shadow-xl" alt={speaker.name} />
+</div>
+{/if}
+
 {#if size === 'normal'}
 <div class="w-44 text-center pb-4">
-  <a href="/speakers/{speaker.id}" on:mouseover={mouseOver} on:mouseleave={mouseLeave}><img src={currentImg} class="w-40 rounded-full m-auto shadow-xl" alt={speaker.name} /></a>
-  <div class="mt-4 text-sm text-blue-web uppercase font-bold">{speaker.name} {country}</div>
+  <a href="/prednasejici/{speaker.id}" on:mouseover={mouseOver} on:mouseleave={mouseLeave}><img src={currentImg} class="w-40 rounded-full m-auto shadow-xl" alt={speaker.name} /></a>
+  <div class="mt-4 text-sm text-blue-web uppercase font-bold"><a href="/prednasejici/{speaker.id}">{speaker.name}</a> {country}</div>
   {#if speaker.bio}
     <div class="mt-1 text-xs text-blue-web italic"><SvelteMarkdown source={speaker.bio} /></div>
   {/if}

src/routes/prednasejici/[id].svelte

@@ -0,0 +1,43 @@
+<script context="module">
+	export const prerender = true;
+</script>
+
+<script>
+  import SvelteMarkdown from 'svelte-markdown';
+
+	import { page } from '$app/stores';
+  import { bundle } from '$lib/stores.js';
+  import Avatar from '$lib/Avatar.svelte';
+
+  $: s = $bundle ? $bundle.spec.speakers.find(s => s.id === $page.params.id) : null
+
+  function trackRender (trackId) {
+    const track = $bundle.spec.tracks.find(t => t.id === trackId)
+    return track.shortname || track.name
+  }
+
+</script>
+
+<section class="relative mx-auto py-10 px-6 max-w-6xl mb-10 text-blue-web">
+  {#if $bundle}
+    <div class="sm:flex gap-10 mt-4">
+      <div><Avatar speaker={s} size="big" /></div>
+      <div class="mt-4">
+        <h1 class="uppercase text-2xl font-bold">{s.name}</h1>
+        {#if s.bio}
+          <div class="mt-4 text-blue-web italic"><SvelteMarkdown source={s.bio} /></div>
+        {/if}
+        {#if s.orgs}
+          <div class="mt-2 text-blue-web links"><SvelteMarkdown source={s.orgs} /></div>
+        {/if}
+        <div class="mt-4">Sekce: {s.tracks.map(t => trackRender(t)).join(', ')}</div>
+        {#if s.twitter}
+          <div class="mt-2">Twitter: <a href="https://twitter.com/{s.twitter}" target="_blank">@{s.twitter}</a></div>
+        {/if}
+        {#if s.web && s.web.url}
+          <div class="mt-2">Web: <a href="{s.web.url}" target="_blank">{s.web.name || s.web.url}</a></div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</section>

src/routes/program.svelte

@@ -57,7 +57,7 @@
 
   <div class="mt-6">
     {#each $bundle.spec.events.filter(e => !e.parent) as e}
-      <div class="transition-all mb-4 border px-3 py-2 rounded-md shadow {$userData.favoriteEvents.includes(e.id) ? 'bg-yellow-100' : '' }">
+      <div class="transition-all mb-4 border px-3 py-2 rounded-md shadow {$userData.favoriteEvents.includes(e.id) ? 'bg-yellow-100' : '' }" >
         <div class="float-right"><i class="fa-star {$userData.favoriteEvents.includes(e.id) ? 'fa-solid' : 'fa-regular'} cursor-pointer" utxo-event-id="{e.id}" on:click={handleFavorite}></i></div>
         <div class="text-lg font-semibold">{e.name}</div>
         {#if e.speakers && e.speakers.length > 0}
@@ -65,7 +65,7 @@
             {#each speakersMap(e.speakers) as s}
               <div class="flex gap-1.5">
                 <Avatar speaker={s} size='extra-small' />
-                <div class="m-auto">{s.name}</div>
+                <div class="m-auto"><a href="/prednasejici/{s.id}">{s.name}</a></div>
               </div>
             {/each}
           </div>