Add presentations to the portfolio

src/components/portfolio/presentation.css.ts

@@ -0,0 +1,18 @@
+import { sprinkles } from '$lib/styles/sprinkles.css'
+
+export const presentationFrameClass = sprinkles({
+  width: 'image',
+  height: 'image',
+})
+
+export const presentationPreviewLinksClass = sprinkles({
+  fontSize: 'sm',
+})
+
+export const presentationDescriptionClass = sprinkles({
+  paddingLeft: '1x',
+})
+
+export const presentationNameClass = sprinkles({
+  fontSize: 'base',
+})

src/components/portfolio/presentation.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { PresentationAttributes } from 'src/routes/portfolio/index.json'
+  import {
+    presentationDescriptionClass,
+    presentationFrameClass,
+    presentationNameClass,
+    presentationPreviewLinksClass,
+  } from './presentation.css'
+
+  export let presentation: PresentationAttributes
+  export let previewVisible = false
+
+  function togglePreviewVisible() {
+    previewVisible = !previewVisible
+  }
+</script>
+
+<article>
+  <a href={presentation.link} target="_blank">
+    <h3 class={presentationNameClass}>{presentation.name}</h3>
+  </a>
+
+  <section class="description {presentationDescriptionClass}">
+    {@html presentation.description}
+  </section>
+
+  <section class="preview">
+    <div class={presentationPreviewLinksClass}>
+      <a href="#presentation" on:click|preventDefault={togglePreviewVisible}
+        >{previewVisible ? 'Close' : 'Open'} preview</a
+      >
+    </div>
+    {#if previewVisible}
+      <iframe
+        class={presentationFrameClass}
+        src={presentation.link}
+        title="Presentation of {presentation.name}"
+      />
+    {/if}
+  </section>
+</article>

src/lib/styles/sprinkles.css.ts

@@ -52,7 +52,7 @@ const responsiveProperties = defineProperties({
     whiteSpace: ['normal', 'nowrap'],
     width: vars.width,
     maxWidth: vars.width,
-    height: ['100vh', '100&'],
+    height: vars.height,
     listStyle: ['none'],
     overflow: ['auto'],
   },

src/routes/portfolio/index.css.ts

@@ -15,5 +15,5 @@ export const listClass = sprinkles({
 
 export const listItemClass = sprinkles({
   marginX: 'none',
-  marginY: '3x',
+  marginY: '4x',
 })

src/routes/portfolio/index.json.ts

@@ -27,12 +27,17 @@ export interface WorkAttributes extends RecordAttributes {
   }
 }
 
+export interface PresentationAttributes extends RecordAttributes {
+  link: string
+}
+
 export interface PortfolioAttributes {
   title: string
   work_history: WorkAttributes[]
   work_history_prelude: string
   projects: ProjectAttributes[]
   education: RecordAttributes[]
+  presentations: PresentationAttributes[]
 }
 
 export type PortfolioContent = {
@@ -41,6 +46,7 @@ export type PortfolioContent = {
   workHistoryPrelude: string
   projects: ProjectAttributes[]
   education: RecordAttributes[]
+  presentations: PresentationAttributes[]
   body: string
 }
 
@@ -65,6 +71,9 @@ export async function get() {
   const education = (parsed.attributes.education || [])
     .filter((education) => education.displayed)
     .map(parseField('description'))
+  const presentations = (parsed.attributes.presentations || []).filter(
+    (education) => education.displayed
+  )
 
   const response: PortfolioContent = {
     title: parsed.attributes.title,
@@ -73,6 +82,7 @@ export async function get() {
     workHistory,
     projects,
     education,
+    presentations,
   }
 
   return {

src/routes/portfolio/index.svelte

@@ -16,6 +16,7 @@
 <script lang="ts">
   import Work from '../../components/portfolio/work.svelte'
   import Project from '../../components/portfolio/project.svelte'
+  import Presentation from '../../components/portfolio/presentation.svelte'
   import type { PortfolioContent } from './index.json'
   import { listClass, listItemClass, nameTagClass } from './index.css'
 
@@ -28,7 +29,9 @@
 
 <h1 class="name-tag {nameTagClass}">Michal Vanko</h1>
 
-<h2 class="name-tag {nameTagClass}">Software Architect and Consultant</h2>
+<h2 class="name-tag {nameTagClass}">
+  Software Architect and Engineering Manager
+</h2>
 
 <section id="personal-information">
   {@html content.body}
@@ -59,6 +62,17 @@
   </ul>
 </section>
 
+<section id="presentations">
+  <h2>Presentations</h2>
+  <ul class="">
+    {#each content.presentations as presentation}
+      <li class="">
+        <Presentation {presentation} />
+      </li>
+    {/each}
+  </ul>
+</section>
+
 <section id="education">
   <h2>Education</h2>
   <ul class={listClass}>