Add presentations to the portfolio

TODO

@@ -1,21 +0,0 @@
-
-Todo:
-  ✔ Redox article @created(20-04-06 12:14) @done(20-04-10 17:16)
-    ✔ Publish to dev @created(20-04-06 12:16) @done(20-04-06 15:13)
-    ✔ Proof read Redox article @created(20-04-06 12:09) @done(20-04-10 17:16)
-      ✔ Marika @created(20-04-06 12:13) @started(20-04-06 15:14) @done(20-04-10 17:16) @lasted(4d2h2m15s)
-      ✔ Michal @created(20-04-06 12:13) @done(20-04-06 15:14)
-    ✔ Publish @created(20-04-06 12:14) @done(20-04-10 17:17)
-      ✔ Change publish date @created(20-04-07 13:59) @done(20-04-10 17:17)
-      
-    ☐ Little enhancments @created(20-04-06 12:01)
-      ☐ Separate tags with commas @created(20-04-06 12:02)
-  
-  ☐ SVG Logo with dark mode @created(20-04-06 12:03)
-  ☐ Latest post widget while reading blog @created(20-04-06 12:15)
-
-  ☐ Image compression tool @created(20-04-06 12:03)
-  ☐ Image preprocessor @created(20-04-06 12:03)
-    Check https://github.com/matyunya/svelte-image if it supports absolute paths
-  
-  ☐ Setup RSS feed @created(20-04-10 17:42)

_pages/portfolio.md

@@ -2,9 +2,9 @@
 title: Portfolio - Michal Vanko
 work_history_prelude: >-
   I've started learning web development when I was 14 years old. My very first
-  web site was for promotion web of my own Counter-Strike clan.
+  website was a presentation site for my own _Counter-Strike_ clan.
 
-  Then I had an opportunity to create an important registration system for marathon runners for the Europe's oldest marathon event. That basically started off my career as a web developer. I've worked on some projects while I was studying in high school and university. After that I started to work full-time as a web developer and gained more experience in developing real-time web applications.
+  Then I had an opportunity to create a registration system for marathon runners for Europe's oldest marathon event. That basically started off my career as a web developer. I've worked on some projects while I was studying in high school and university. After that, I've started to work full-time as a web developer and gained more experience in developing real-time web applications.
 work_history:
   - description: >-
       _sudolabs_ is a company focused on building products and software
@@ -78,8 +78,8 @@ work_history:
       city: Košice
       country: Slovakia
   - description: >-
-      I worked in _eSOLUTIONS_ as an **extern web developer** for part-time
-      while I was studying in high school and at University.
+      I worked in _eSOLUTIONS_ as a **web developer** part-time while I was
+      studying in high school and at University.
 
 
       I was building front-end and back-end services for websites and web applications. Mostly using _PHP_, _MySQL_, _JavaScript_, _HTML_, _CSS_.
@@ -117,29 +117,26 @@ projects:
       source: /images/uploads/the-expert-logo.svg
       image_description: The Expert logo
   - description: >-
-      _Manualogic_ is a **single page application** for product manual creators.
-      It contains **custom web editor** and management system of **translatable
-      pages, books** and **products.** It's main goal is to enable customers to
-      get manuals of their products in digital form.
+      *Panoramic* is a company focused on building a web application for data
+      scientists to be able to create and share models and graphs in between
+      each other.
 
+      I've been working as a **team lead** of a small team that was focused on building a **rich-text collaboration** feature into the web application.
 
-      It's bulit on top of modern web technologies such as **Angular,** **RxJS,** and the content is synchronized through **Websockets**. The back-end part is built on top of **Spring framework**.
-
-
-      The team consisted of 3-4 front-end developers, 2-3 back-end developers and 2 testers.
+      The application was built on top of modern web technologies such as **React, node.js with GraphQL, and TypeScript**. We have successfully built this feature by integrating *[Mattermost](https://mattermost.com/)* into the existing back-end. After that, we have been helping another team by enhancing existing features for importing data sources.
     displayed: true
     name: Panoramic
   - description: >-
-      _Manualogic_ is a **single page application** for product manual creators.
+      _Manualogic_ is a **single-page application** for product manual creators.
       It contains **custom web editor** and management system of **translatable
-      pages, books** and **products.** It's main goal is to enable customers to
+      pages, books** and **products.** Its main goal is to enable customers to
       get manuals of their products in digital form.
 
 
-      It's bulit on top of modern web technologies such as **Angular,** **RxJS,** and the content is synchronized through **Websockets**. The back-end part is built on top of **Spring framework**.
+      It's built on top of modern web technologies such as **Angular**, **RxJS**, and the content is synchronized through **Websockets**. The back-end part is built on top of **Spring framework**.
 
 
-      The team consisted of 3-4 front-end developers, 2-3 back-end developers and 2 testers.
+      The team consisted of 3-4 front-end developers, 2-3 back-end developers, and 2 testers.
     displayed: true
     name: Manualogic
   - description: >-
@@ -288,6 +285,30 @@ projects:
       I worked on this project alone.
     displayed: false
     name: CK Vive
+presentations:
+  - displayed: true
+    link: https://michalvankodev.github.io/unstoppable-growth-of-frontend-frameworks/
+    name: Unstoppable growth of front-end frameworks
+    description: >
+      A simple summary of the web front-end evolution, which will try to
+      describe how and why tools improve & why there is still something to
+      explore.
+  - displayed: true
+    name: WebAssembly
+    link: https://michalvankodev.github.io/presentation-webassembly/#/
+    description: A presentation about what WebAssembly is about and how it might
+      affect the future of the world.
+  - displayed: true
+    name: Spreading the web
+    description: A presentation about the rising number of use cases for utilizing
+      web technologies outside of the web platform such as native mobile
+      applications and robotics.
+    link: https://michalvankodev.github.io/spreading-the-web/#/
+  - displayed: true
+    name: Docker
+    link: http://michalvankodev.github.io/dockerpresentation/#/
+    description: An introduction to Docker containerization technology and how it
+      differs from virtualization.
 education:
   - description: |-
       Faculty of Electrical Engineering and Informatics - Intelligent Systems
@@ -315,34 +336,40 @@ education:
 ---
 ## Personal Information
 
-I was born on the 26th of May in Košice, Slovakia and I still live here.
+I was born in Košice, Slovakia and I still live here. I like to drink tea and cook my own recipes.
 
 ### Hobbies
 
-I enjoy playing basketball with my friends. I also like to play other team sports like football and hockey. I also play squash and table tennis. Once I've won a competition in squash at my university. During summer I love water skiing and swimming in a nearby lake.  
-I am very passionate about music. I've also tried some software for composing music but I am not really hooked into that yet. From time to time I enjoy playing board games with my friends.
+I enjoy playing basketball with my friends. I also like to play other team sports like football and hockey. I also play squash and table tennis. Once I've won a competition in squash at my university. During summer, I love to go water skiing or swimming in a nearby lake.
+
+I am very passionate about music. I've also tried to use some digital workstations to compose my own music.
+
+I enjoy playing board games with my friends and family.
 
 ### Interests
 
-I like to explore new technologies and I'm passionate about _Open Source movement_, _Internet of Things_ applications and _Linux desktop evolution_.  
+I like to explore new technologies and _Open-source_ software.
 I am interested in modern software architecture and _reactive programming_.
-I've attended various **tech conferences and hackathons**. I like them for all of the fascinating ideas that might be invented.  
+I've attended several **tech conferences and hackathons**, where I can meet interesting people and explore fascinating ideas.
+
 I've given presentations on various topics related to _web development_. You can [take a look at some of them here](#presentations).
-I enjoy **teaching and explaining** how various technologies and techniques work to my colleagues for their better understanding.  
-I take advantage of **test driven development**.
+
+I enjoy **teaching and explaining** how technologies and techniques work to my colleagues or students for their better understanding.  
+I take advantage of **test-driven development**.
 
 ## Skills
 
-Slovak is my mother tongue and I've learned English as my second language. I speak English on advanced level.
+Slovak is my mother tongue and I've learned English as my second language. I speak English on an advanced level.
 
-I'm an experienced _Linux Desktop_ user. I prefer to use open source libraries and technologies while I develop solutions.  
-I'm in good command of Office Tools and I've experience with image manipulation programs like _GIMP_ and _Inkscape_.  
-I can also compose music and sounds in _digital audio workstation_.
+I'm an experienced _Linux Desktop_ user. I prefer to use open-source libraries and technologies while I develop solutions.
 
-I'm passionate about _software architecture_. My goal is to be able to design suitable solution for any kind of product. From small _presentation sites_, _IOT devices_, to large _enterprise applications running on cloud_.
+I'm in good command of Office Tools and I have experience with image manipulation programs like _GIMP_ and _Inkscape_.  
+I can also compose music and sounds on _digital audio workstation_.
 
-I do _public speaking_ and I am not afraid to share my knowledge and passion about technology.
+I'm passionate about _software architecture_. My goal is not only to be able to design a suitable solution for any kind of product but also to be able to architect the processes behind building a team. From small _presentation sites_, _IOT devices_, to large _enterprise applications running on cloud_.
 
-I'm advanced user of source code management tools _git_ and _svn_.
+I practice **public speaking** and I am not afraid to share my knowledge and passion about technology.
 
-I've a driving license for category B 🚗.
+I'm an advanced user of source code management tools _git_ and _svn_.
+
+I've got a driving license for category B 🚗.

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}>

static/admin/config.yml

@@ -102,6 +102,19 @@ collections:
                       widget: string,
                       required: false,
                     }
+          - label: Presentations
+            name: presentations
+            widget: list
+            fields:
+              - { label: Name, name: name, widget: string }
+              - {
+                  label: Displayed,
+                  name: displayed,
+                  widget: boolean,
+                  default: true,
+                }
+              - { label: Description, name: description, widget: markdown }
+              - { label: Link, name: link, widget: string }
           - label: Education
             name: education
             widget: list