Merge branch 'dev'

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

@@ -1,89 +1,142 @@
 ---
 title: Portfolio - Michal Vanko
 work_history_prelude: >-
-  I am doing web development for approximately 14 years. I've started at very
+  I've started learning web development when I was 14 years old. My very first
-  young age of 14. My very first web site was for promotion web of my own
+  website was a presentation site for my own _Counter-Strike_ clan.
-  Counter-Strike clan.
 
-  Then I had an opportunity to create a important registration system for
+  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.
-  marathon runners for Europe's oldest marathon event. That basically started
-  off my career as a web developer. I had some projects while I was studying in
-  high school and university. After that I started to work full-time as a web
-  developer and gain more experience in developing real-time web applications.
 work_history:
+  - description: >-
+      _sudolabs_ is a company focused on building products and software
+      solutions for start-ups & other clients.
+
+      The company has its own product lab focused on product research and product discovery and an engineering lab focused on the development of high-quality software solutions.
+
+      At _sudolabs_, I've managed to proceed from senior software engineer to **tech lead and an Engineering manager**.
+
+      I am part of one of the most successful projects at _sudolabs_, _The Expert_. I am responsible for the architecture and quality of the proposed feature solutions and for the development processes used.
+
+      As an Engineering manager, I try to **represent people in my team** and help them **achieve the best of their potential**.
+
+
+      I've started to work for _sudolabs_ in October 2019.
+    name: sudolabs s.r.o.
+    address:
+      name: Sudo Labs. s.r.o.
+      location: Námestie osloboditeľov 3/A
+      zipcode: 040 18
+      city: Košice
+      country: Slovakia
+    displayed: true
   - description: >-
       _**Croptech**_ is a start-up company located in Košice focused on smart
       automation of hydroponic systems. Founded in 2014 they've won
       _StartupAwards.sk_ and have been able to find investors.
 
-      I've joined _Croptech_ after the previous team fall apart not being able
+      I've joined _Croptech_ after the previous team fall apart not being able to bring product into the market.
-      to bring product into the market.
 
-      I am main part of the _Croptech_ team. I figure as a **CTO** of the
+      I am main part of the _Croptech_ team. I figure as a **CTO** of the company. I've developed architecture of the main product called _responzIO_.
-      company. I've developed architecture of the main product called
-      _responzIO_.
-
-
-      <span class="location">_CropTech. s.r.o._ Benkova 18 040 18 Košice , 040
-      01 Košice, Slovakia</span>
     name: CropTech. s.r.o.
+    displayed: false
+    address:
+      name: CropTech. s.r.o.
+      location: Benkova 18
+      zipcode: 040 18
+      city: Košice
+      country: Slovakia
   - description: >-
-      localhost.company is a small company which has only around 40 developers
+      _localhost.company_ was a small company that had around 40 developers
-      and most of them are students. I work in _localhost_ as a **Senior front
+      while most of them were students. I worked in _localhost_ as a **Senior
-      end developer**. I am focused on delivering a high quality product and to
+      front end developer**. I was focused on delivering a high-quality product
-      teach and help other colleagues.
+      and to teach and helping other colleagues grow in expertise.
 
 
-      I've started to work there in October 2018.
+      I've started to work there in October 2018 and left after a year.
-
+    name: localhost.company s.r.o.
-
+    displayed: true
-      <span class="location">_localhost.company s.r.o_ Boženy Nemcovej 30, 040
+    address:
-      01 Košice, Slovakia</span>
+      name: localhost.company s.r.o.
-    name: localhost.company s.r.o
+      location: Boženy Nemcovej 30
-  - description: >-
+      zipcode: 040 01
-      I worked in Ness as a **Senior front end developer**. In Ness, I've been
+      city: Košice
+      country: Slovakia
+  - description: >
+      I worked in _Ness_ as a Senior front-end developer. In _Ness_, I've been
       able to work for different clients on various projects.
 
 
-      I joined Ness as a Junior front end developer and I've been able to
+      I joined Ness as a Junior front-end developer and I've been able to quickly proceed to Senior level with my engagement. 
-      quickly proceed to Senior level with my engagement
 
 
       I started to work in March 2013 and left in October 2018.
-
+    name: Ness KE s.r.o.
-
+    displayed: true
-      <span class="location">_Ness KE s.r.o._Moldavská cesta 10/B, 040 11
+    address:
-      Košice, Slovakia</span>
+      name: Ness KE s.r.o.
-    name: Ness KE s.r.o
+      location: Moldavská cesta 10/B
+      zipcode: 040 11
+      city: Košice
+      country: Slovakia
   - description: >-
-      I worked in eSOLUTIONS as a **extern web developer**
+      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 for websites and web applications.
+      I was building front-end and back-end services for websites and web applications. Mostly using _PHP_, _MySQL_, _JavaScript_, _HTML_, _CSS_.
-      Mostly using _PHP_, _MySQL_, _JavaScript_, _HTML_, _CSS_
 
 
       I started to work in 2007 and stopped in 2012.
-
-
-      <span class="location">_eSOLUTIONS s.r.o._ Hroncová 2, Košice,
-      Slovakia</span>
     name: eSOLUTIONS s.r.o.
+    displayed: true
+    address:
+      name: eSOLUTIONS s.r.o.
+      location: Hroncová 2
+      zipcode: 040 01
+      city: Košice
+      country: Slovakia
 projects:
   - description: >-
-      _Manualogic_ is a **single page application** for product manual creators.
+      _The Expert_ is a digital platform that connects clients to interior
+      designers around the world. For experts, it allows **managing** their
+      **portfolio and profile** and **schedule** in which they are open for
+      **consultations**. Clients are able to view their profiles and book
+      consultations.
+
+      The project is **expanding with an e-commerce platform** that should enable these experts to recommend and sell high-value goods.
+
+
+      We have built this platform from scratch as the only technical team. We also managed to design the product itself in-house.
+
+      I am part of the engineering team. I work as an **Engineering manager**. I am also **responsible for the technical architecture** and **development processes** that are being used to deliver new features.
+
+
+      _The Expert_ has been **featured in** numerous **worldwide media** such as [_The New York Times_](https://www.nytimes.com/2021/10/19/business/home-design-zoom.html?smid=url-share), [_Wall Street Journal_](https://www.wsj.com/articles/how-you-can-afford-to-hire-your-dream-interior-designer-11619627877), [_Forbes_](https://www.forbes.com/sites/emmareynolds/2021/02/08/introducing-the-expert-a-new-digital-platform-for-interior-design-founded-by-designer-jake-arnold/?sh=33b274934471), [_TechCrunch_](https://techcrunch.com/2021/04/19/gwyneth-paltrow-invests-in-the-expert-a-video-marketplace-for-high-end-interior-designers/?guccounter=2), and many more.
+    displayed: true
+    name: The Expert
+    image:
+      source: /images/uploads/the-expert-logo.svg
+      image_description: The Expert logo
+  - description: >-
+      *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.
+
+      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.
       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,**
+      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**.
-      **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
+      The team consisted of 3-4 front-end developers, 2-3 back-end developers, and 2 testers.
-      and 2 testers.
     displayed: true
     name: Manualogic
   - description: >-
@@ -92,18 +145,13 @@ projects:
       and gardens.
 
 
-      I worked on _responzIO_ as architect and full-stack developer. I've
+      I worked on _responzIO_ as architect and full-stack developer. I've designed complete software solution for an already created platform and a series of sensors, sockets and other hardware. Designed solution consist of varios parts: Deployment, Microservices, Stateful core back-end application, progressive web application, auto-update over web...
-      designed complete software solution for an already created platform and a
-      series of sensors, sockets and other hardware. Designed solution consist
-      of varios parts: Deployment, Microservices, Stateful core back-end
-      application, progressive web application, auto-update over web...
 
 
-      This project is built with modern web technologies including: **CycleJS**,
+      This project is built with modern web technologies including: **CycleJS**, **Reactive Streams**, **D3**, **Jest**, **Webpack**.
-      **Reactive Streams**, **D3**, **Jest**, **Webpack**.
     displayed: true
     image:
-      image_description: ' responzIO main controller'
+      image_description: " responzIO main controller"
       source: /images/uploads/responzio.png
     name: responzIO
   - description: >-
@@ -113,20 +161,13 @@ projects:
       and in different formats.
 
 
-      I worked on _Signal Hub_ as a front-end developer. Working on the part of
+      I worked on _Signal Hub_ as a front-end developer. Working on the part of the platform called _Workbench_. _Workbench_ is an **IDE for data analyst**. It allows to create and tweak various models and transformations which are then deployed to other parts of the platform. Users are able to create workflows and see the results of his work with pleasant visuals.
-      the platform called _Workbench_. _Workbench_ is an **IDE for data
-      analyst**. It allows to create and tweak various models and
-      transformations which are then deployed to other parts of the platform.
-      Users are able to create workflows and see the results of his work with
-      pleasant visuals.
 
 
-      This project is built with modern web technologies including:
+      This project is built with modern web technologies including: **AngularJS**, **React**, **D3**, **Highcharts**, **Jest**, **Webpack**.
-      **AngularJS**, **React**, **D3**, **Highcharts**, **Jest**, **Webpack**.
 
 
-      I was part of a large distributed team of ~20 developers & ~6 testers
+      I was part of a large distributed team of ~20 developers & ~6 testers which were working on the whole platform.
-      which were working on the whole platform.
     displayed: true
     name: Signal Hub Manager
   - description: >-
@@ -134,34 +175,26 @@ projects:
       offers and bids** on the commodity market.
 
 
-      It was built for a price reporting company _S&P Global Platts_. This
+      It was built for a price reporting company _S&P Global Platts_. This company is a provider of energy and commodities information and a source of benchmark price assessments in the _physical energy markets_.
-      company is a provider of energy and commodities information and a source
-      of benchmark price assessments in the _physical energy markets_.
 
 
       _SHIP_ was suited for a very easy and quick workflow for editors.
 
 
-      Team consisted of 3 front-end and 3 back-end developers. I was a **leader
+      Team consisted of 3 front-end and 3 back-end developers. I was a **leader of the front-end** part of the project.
-      of the front-end** part of the project.
 
 
-      The application was built with **AngularJS and Redux**. The challenging
+      The application was built with **AngularJS and Redux**. The challenging part was working with **Cassandra database**.
-      part was working with **Cassandra database**.
     displayed: true
     name: SHIP (Structured heard input process)
   - description: >-
       [www.caplin.com/business/fx-sales.com](http://www.caplin.com/business/fx-sales)
 
 
-      The main function of _Caplin FX Sales_ is to allow sales users to
+      The main function of _Caplin FX Sales_ is to allow sales users to <string>trade on behalf of their clients</string>. This needs to be an efficient workflow providing all the relevant information to the sales user.
-      <string>trade on behalf of their clients</string>. This needs to be an
-      efficient workflow providing all the relevant information to the sales
-      user.
 
 
-      Main technologies used: **Websockets**, Custom Front-end JavaScript MVVM
+      Main technologies used: **Websockets**, Custom Front-end JavaScript MVVM Framework (based on Knockout, BRJS)
-      Framework (based on Knockout, BRJS)
 
 
       We worked on this project in a team of 6 developers and 3 testers
@@ -172,8 +205,7 @@ projects:
       integration tests** for web sites.
 
 
-      I worked on a _proof of concept_ front-end portion of this application,
+      I worked on a _proof of concept_ front-end portion of this application, which was able to create a list of steps for testing.
-      which was able to create a list of steps for testing.
 
 
       I worked on this project in a team of 2 front-end developers.
@@ -183,13 +215,10 @@ projects:
       [www.livesport.tv](http://www.livesport.tv)
 
 
-      _Livesport.tv_ is a network of premium online sports channels, featuring
+      _Livesport.tv_ is a network of premium online sports channels, featuring all the top sports competitions from around the world.
-      all the top sports competitions from around the world.
 
 
-      I worked on this project as a front-end developer. I maintained all
+      I worked on this project as a front-end developer. I maintained all livesport channels and I worked on new features and enhancements of websites.
-      livesport channels and I worked on new features and enhancements of
-      websites.
 
 
       Project was built on top of **Freemarker** templating language.
@@ -204,10 +233,7 @@ projects:
       Networks_
 
 
-      I worked on this project as a front-end developer. I maintained official
+      I worked on this project as a front-end developer. I maintained official websites of beIN SPORTS France and USA ([www.beinsports.fr](http://www.beinsports.fr), [www.beinsports.tv](http://www.beinsports.tv)).
-      websites of beIN SPORTS France and USA
-      ([www.beinsports.fr](http://www.beinsports.fr),
-      [www.beinsports.tv](http://www.beinsports.tv)).
 
 
       Project was built on top of **Freemarker** templating language.
@@ -232,16 +258,12 @@ projects:
       [www.kosicemarathon.com](http://www.kosicemarathon.com/)
 
 
-      _Košice Peace Marathon_ is the oldest marathon in Europe and the
+      _Košice Peace Marathon_ is the oldest marathon in Europe and the third-oldest in the world.
-      third-oldest in the world.
 
 
-      I worked on this project as a front-end and an back-end developer. I've
+      I worked on this project as a front-end and an back-end developer. I've built a **custom CMS** for website and for registration of participants. Also created an application for actual event for signing participants.  
-      built a **custom CMS** for website and for registration of participants.
-      Also created an application for actual event for signing participants.  
 
-      The application was able to create a start list of all participants and
+      The application was able to create a start list of all participants and provide various statistics about them.
-      provide various statistics about them.
 
 
       I've built this project alone and then one maintainer joined me.
@@ -254,17 +276,39 @@ projects:
       _CK Vive_ is a travel agency.
 
 
-      I worked on this project as a front-end and an back-end developer. I've
+      I worked on this project as a front-end and an back-end developer. I've created new **custom CMS** for adding destinations and apartments into offering.  
-      created new **custom CMS** for adding destinations and apartments into
-      offering.  
 
 
       I've built this project on top of **PHP**, **MySQL** and **JavaScript**.
 
 
       I worked on this project alone.
-    displayed: true
+    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
@@ -286,41 +330,46 @@ education:
       Dates: 1\. 9\. 200 - 1\. 7\. 2010
 
 
-      Title of qualification awarded: Full secondary school education with
+      Title of qualification awarded: Full secondary school education with leaving examination
-      leaving examination
     displayed: true
     name: Secondary school of Electrical Engineering in Košice
 ---
 ## Personal Information
 
-I was born on 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 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 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 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 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've given presentations on various topics related to _web development_. You can [take a look at some of them here](#presentations).
-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 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 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/Footer.css.ts

@@ -1,6 +1,6 @@
 import { globalStyle, style } from '@vanilla-extract/css'
 import { radialGradient, rgba, transparentize } from 'polished'
-import { sprinkles } from '../styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 import {
   breakpoints,
   colors,
@@ -8,7 +8,7 @@ import {
   menuBackground,
   transparent,
   vars,
-} from '../styles/vars.css'
+} from '$lib/styles/vars.css'
 
 export const siteFooterClass = style([
   sprinkles({
@@ -154,6 +154,10 @@ globalStyle(`${siteFooterClass} a`, {
   color: vars.color.menuLink,
 })
 
+globalStyle(`${headerClass} a:link, ${headerClass} a:visited`, {
+  color: vars.color.menuLink,
+})
+
 globalStyle(`${siteFooterClass} a:hover`, {
   color: vars.color.menuLinkHover,
 })

src/components/Nav.css.ts

@@ -1,7 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css'
 import { radialGradient, transparentize } from 'polished'
-import { menuBackground, transparent, vars } from '../styles/vars.css'
+import { menuBackground, transparent, vars } from '$lib/styles/vars.css'
-import { sprinkles } from '../styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const navigationClass = style([
   sprinkles({

src/components/blog/ArticleFooter.css.ts

@@ -1,7 +1,4 @@
-import { style } from '@vanilla-extract/css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
-import { desaturate, transparentize } from 'polished'
-import { colors } from '../../styles/vars.css'
-import { sprinkles } from '../../styles/sprinkles.css'
 
 export const tagsListClass = sprinkles({
   listStyle: 'none',
@@ -24,18 +21,10 @@ export const publishedLabelClass = sprinkles({
   color: 'tintedText',
 })
 
-export const footerClass = style([
+export const footerClass = sprinkles({
-  sprinkles({
+  display: 'flex',
-    display: 'flex',
+  fontSize: 'sm',
-    fontSize: 'sm',
+  justifyContent: 'space-between',
-    justifyContent: 'space-between',
+  paddingTop: '1x',
-    paddingTop: '1x',
+  marginTop: '2x',
-    marginTop: '2x',
+})
-  }),
-  {
-    borderTop: `1px solid ${transparentize(
-      0.6,
-      desaturate(0.5, colors.tearkiss)
-    )}`,
-  },
-])

src/components/blog/ArticleFooter.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { horizontalBorderTopClass } from '$lib/styles/scoops.css'
+
   import { format } from 'date-fns'
   import type { PostContent } from '../../routes/blog/_content'
   import {
@@ -12,7 +14,7 @@
   export let post: PostContent
 </script>
 
-<footer class={footerClass}>
+<footer class="{footerClass} {horizontalBorderTopClass}">
   <div class="article-tags">
     {#if post.tags.length > 0}
       <span class="lighten">Tags:</span>

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/components/portfolio/work.css.ts

@@ -0,0 +1,15 @@
+import { sprinkles } from '$lib/styles/sprinkles.css'
+
+export const workFooterClass = sprinkles({
+  marginTop: '1x',
+  paddingTop: '1x',
+  fontSize: 'sm',
+  lineHeight: '1x',
+})
+
+export const workAddressNameClass = sprinkles({
+  fontStyle: 'italic',
+  fontWeight: 'normal',
+  margin: 'none',
+  fontSize: 'base',
+})

src/components/portfolio/work.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-  import type { RecordAttributes } from '../../routes/portfolio/index.json'
+  import type { WorkAttributes } from '../../routes/portfolio/index.json'
-  export let work: RecordAttributes
+  import { workAddressNameClass, workFooterClass } from './work.css'
+  import { horizontalBorderTopClass } from '$lib/styles/scoops.css'
+  export let work: WorkAttributes
 </script>
 
 <article>
@@ -8,4 +10,18 @@
   <section class="description">
     {@html work.description}
   </section>
+
+  {#if work.address}
+    <footer class="{workFooterClass} {horizontalBorderTopClass}">
+      <h4 class={workAddressNameClass}>{work.address.name}</h4>
+      <address>
+        <div>
+          {work.address.location},
+          {work.address.zipcode}
+          {work.address.city},
+          {work.address.country}
+        </div>
+      </address>
+    </footer>
+  {/if}
 </article>

src/components/portfolio/workhistory.svelte

@@ -1,35 +0,0 @@
-<section id="workhistory">
-  <h3>Work Experience</h3>
-  <p>
-    I am doing web development for approximately 14 years.
-    I've started at very young age of 14.
-    My very first web site was for promotion web of my own Counter-Strike clan.
-    Then I had an opportunity to create a important registration system
-    for marathon runners for Europe's oldest marathon event.
-    That basically started off my career as a web developer. I had some projects while I was studying in high school and university.
-    After that I started to work full-time as a web developer and gain more experience in developing real-time web applications.
-  </p>
-  
-  <article>
-    <h4>localhost.company s.r.o</h4>
-    <p>localhost.company is a small company which has only around 40 developers and most of them are students.
-      I work in <em>localhost</em> as a <strong>Senior front end developer</strong>. I am focused on delivering a high quality product and to teach and help other colleagues.
-    </p>
-    <p>I've started to work there in October 2018.</p>
-    <span class="location"><em>localhost.company s.r.o</em> Boženy Nemcovej 30, 040 01 Košice, Slovakia</span>
-  </article>
-  <article>
-    <h4>Ness KE s.r.o</h4>
-    <p>I worked in Ness as a <strong>Senior front end developer</strong>. In Ness, I've been able to work for different clients on various projects.</p>
-    <p>I joined Ness as a Junior front end developer and I've been able to quickly proceed to Senior level with my engagement</p>
-    <p>I started to work in March 2013 and left in October 2018.</p>
-    <span class="location"><em>Ness KE s.r.o.</em>Moldavská cesta 10/B, 040 11 Košice, Slovakia</span>
-  </article>
-  <article>
-    <h4>eSOLUTIONS s.r.o.</h4>
-    <p>I worked in eSOLUTIONS as a <strong>extern web developer</strong></p>
-    <p>I was building front-end and back-end for websites and web applications. Mostly using <em>PHP</em>, <em>MySQL</em>, <em>JavaScript</em>, <em>HTML</em>, <em>CSS</em></p>
-    <p>I started to work in 2007 and stopped in 2012.</p>
-    <span class="location"><em>eSOLUTIONS s.r.o.</em> Hroncová 2, Košice, Slovakia</span>
-  </article>
-</section>

src/lib/styles/scoops.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css'
+import { desaturate, transparentize } from 'polished'
+import { colors } from './vars.css'
+
+export const horizontalBorderTopClass = style({
+  borderTop: `1px solid ${transparentize(
+    0.6,
+    desaturate(0.5, colors.tearkiss)
+  )}`,
+})

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/__layout.svelte

@@ -20,7 +20,7 @@
   import Nav from '../components/Nav.svelte'
   import Footer from '../components/Footer.svelte'
   import 'modern-normalize/modern-normalize.css'
-  import '../styles/global.css'
+  import '$lib/styles/global.css'
   import { mainContentClass } from './layout.css'
 
   export let segment

src/routes/blog/blog.css.ts

@@ -1,5 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars } from '../../../src/styles/vars.css'
+import { vars } from '$lib/styles/vars.css'
 
 export const contentClass = style({})
 

src/routes/blog/index.css.ts

@@ -1,6 +1,6 @@
 import { globalStyle } from '@vanilla-extract/css'
-import { vars } from '../../styles/vars.css'
+import { vars } from '$lib/styles/vars.css'
-import { sprinkles } from '../../styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const postListClass = sprinkles({
   padding: 'none',

src/routes/index.css.ts

@@ -1,4 +1,4 @@
-import { sprinkles } from '../../src/styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const profilePicClass = sprinkles({
   textAlign: 'center',

src/routes/layout.css.ts

@@ -1,6 +1,6 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars } from '../../src/styles/vars.css'
+import { vars } from '$lib/styles/vars.css'
-import { sprinkles } from '../../src/styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const appContentClass = style([
   sprinkles({

src/routes/portfolio/index.css.ts

@@ -1,4 +1,4 @@
-import { sprinkles } from '../../../src/styles/sprinkles.css'
+import { sprinkles } from '$lib/styles/sprinkles.css'
 
 export const linkableSectionClass = sprinkles({
   marginTop: '4x',
@@ -15,5 +15,5 @@ export const listClass = sprinkles({
 
 export const listItemClass = sprinkles({
   marginX: 'none',
-  marginY: '3x',
+  marginY: '4x',
 })

src/routes/portfolio/index.json.ts

@@ -17,20 +17,36 @@ export interface ProjectAttributes extends RecordAttributes {
   }
 }
 
+export interface WorkAttributes extends RecordAttributes {
+  address: {
+    name: string
+    location: string
+    zipcode: string
+    city: string
+    country: string
+  }
+}
+
+export interface PresentationAttributes extends RecordAttributes {
+  link: string
+}
+
 export interface PortfolioAttributes {
   title: string
-  work_history: RecordAttributes[]
+  work_history: WorkAttributes[]
   work_history_prelude: string
   projects: ProjectAttributes[]
   education: RecordAttributes[]
+  presentations: PresentationAttributes[]
 }
 
 export type PortfolioContent = {
   title: string
-  workHistory: RecordAttributes[]
+  workHistory: WorkAttributes[]
   workHistoryPrelude: string
   projects: ProjectAttributes[]
   education: RecordAttributes[]
+  presentations: PresentationAttributes[]
   body: string
 }
 
@@ -46,15 +62,18 @@ export async function get() {
   }
 
   const parsed = fm<PortfolioAttributes>(pageSource)
-  const workHistory = (parsed.attributes.work_history || []).map(
+  const workHistory = (parsed.attributes.work_history || [])
-    parseField('description')
+    .filter((workHistory) => workHistory.displayed)
-  )
+    .map(parseField('description'))
   const projects = (parsed.attributes.projects || [])
     .filter((project) => project.displayed)
     .map(parseField('description'))
   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,
@@ -63,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}>

src/styles/variables.module.less

@@ -1,35 +0,0 @@
-@tearkiss: #42a6f0;
-@pinky: #fea6eb;
-@light-cyan: #d8f6ff;
-@midnight-blue: #171664;
-@french-violet: #7332c3;
-
-@article-text-color: desaturate(@midnight-blue, 16%);
-@text-shadow: 0.02em 0.02em 0.03em fade(@tearkiss, 20%);
-@selection-color: tint(@pinky, 40%);
-@link-color: saturate(mix(@tearkiss, @midnight-blue, 66%), 20%);
-@link-hover-color: @tearkiss;
-@link-visited-color: @french-violet;
-@link-visited-hover-color: lighten(@link-visited-color, 10%);
-@nice-pink-color: spin(@link-visited-color, 50);
-
-@menu-color: @midnight-blue;
-@menu-link-color: @menu-color;
-@menu-link-hover-color: lighten(@menu-link-color, 15%);
-@menu-link-text-shadow: 0.02em 0.02em 0.03em fade(@menu-link-color, 30%);
-@menu-active-link-text-shadow: 0.01em 0.01em 0.05em fade(@menu-link-color, 90%);
-
-@header-color: lighten(@midnight-blue, 10%);
-@header-text-shadow: 0.015em 0.015em 0.02em fade(@header-color, 40%);
-
-@bg-color: tint(@light-cyan, 70%);
-@menu-bg-color: fade(@tearkiss, 40%);
-
-@content-box-shadow: 0px 0px 2px 1px fade(desaturate(@tearkiss, 50%), 50%);
-@code-box-shadow: inset 0px 0px 2px 1px fade(desaturate(@tearkiss, 50%), 20%);
-
-@media-l: 1000px;
-@media-m: 700px;
-@media-max: 1140px;
-@media-s: 400px;
-@max-image-size: 800px;

static/admin/config.yml

@@ -64,6 +64,16 @@ collections:
             fields:
               - { label: Company name, name: name, widget: string }
               - { label: Description, name: description, widget: markdown }
+              - label: Address
+                widget: object
+                name: address
+                fields: 
+                 - { label: Business name, name: name, widget: string, required: false }
+                 - { label: Address, name: location, widget: string, required: false }
+                 - { label: Zipcode, name: zipcode, widget: string, required: false }
+                 - { label: City, name: city, widget: string, required: false }
+                 - { label: Country, name: country, widget: string, required: false }
+              - { label: Displayed, name: displayed, widget: boolean, default: true }
           - label: Projects
             name: projects
             widget: list
@@ -92,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

static/images/uploads/the-expert-logo.svg

@@ -0,0 +1,20 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="500" height="500" fill="#126554"/>
+<path d="M93.024 270.584L102.208 236.289L95.112 236.018L96.1084 232.987L103.3 231.983L106.479 220.307H113.757L110.577 232.533H119.241L119.337 236.105H109.564L100.033 268.419L105.578 269.065L111.86 260.812L112.674 261.449C108.948 269.309 104.305 273.466 101.489 273.466C99.6606 273.432 92.7467 271.685 93.024 270.584Z" fill="white"/>
+<path d="M137.505 270.13C137.505 268.663 140.97 259.65 143.509 252.611C145.328 247.572 147.78 241.703 147.78 239.957C147.78 238.21 145.597 236.463 143.596 236.463C140.866 236.463 134.498 245.817 126.675 262.602L123.495 272.593L116.122 272.139C116.399 271.493 119.492 261.406 120.853 257.554C124.405 246.463 131.683 217.032 131.683 217.032C131.951 216.019 131.865 215.014 131.223 214.918L124.405 214.045L124.673 212.945L140.598 210.56L137.869 221.11C133.589 235.87 129.499 251.362 126.77 257.878L127.403 257.965C132.679 247.144 138.051 238.07 141.265 234.856C143.056 232.941 145.489 231.765 148.092 231.555C151.454 231.555 154.824 234.036 154.824 236.97C154.824 239.721 152.823 245.957 150.492 252.376C148.491 257.878 144.852 267.502 144.575 268.419L148.673 269.065L155.041 260.812L155.855 261.449C152.13 269.309 147.122 273.466 144.393 273.466C142.487 273.432 137.505 271.414 137.505 270.13Z" fill="white"/>
+<path d="M161.002 260.227C161.002 246.743 172.187 231.337 183.286 231.337C189.108 231.337 192.929 234.367 192.929 238.856C192.929 244.821 185.651 248.122 169.458 252.707C168.968 254.709 168.695 256.759 168.644 258.821C168.644 265.152 171.243 268.427 176.103 268.427C180.011 268.427 182.922 266.314 187.652 260.174L188.519 260.812C184.421 267.327 179.058 273.379 172.594 273.379C165.733 273.432 161.002 267.379 161.002 260.227ZM186.128 238.123C186.123 236.908 185.642 235.745 184.79 234.886C183.938 234.027 182.784 233.542 181.579 233.538C179.846 233.538 178.391 234.463 176.935 235.835C174.336 238.455 171.295 244.568 169.657 251.327L169.839 251.424C182.194 247.476 186.11 244.088 186.11 238.123H186.128Z" fill="white"/>
+<path d="M206.488 253.441C206.488 240.874 215.308 231.153 227.282 231.153C236.743 231.153 242.296 236.839 242.296 244.253C242.289 245.116 242.196 245.977 242.019 246.821C242.019 246.821 217.188 246.542 216.278 246.542C216.092 247.726 216 248.923 216.001 250.122C216.096 260.393 221.823 267.266 229.864 267.266C234.689 267.266 238.597 265.519 241.69 260.576L242.695 261.126C238.874 268.986 233.165 273.597 225.133 273.597C214.398 273.58 206.488 264.899 206.488 253.441ZM233.052 244.908C233.139 238.673 231.137 232.987 226.121 232.987C221.477 232.987 217.387 238.123 216.382 245.005L233.052 244.908Z" fill="white"/>
+<path d="M245.086 270.864L247.356 270.497C250.631 269.947 252.182 268.384 257.181 261.965L263.003 254.262L253.637 240.69C250.544 236.201 249.089 234.577 246.628 234.271L245.173 234.001L244.904 232.621H266.096L265.828 234.001L264.008 234.271C261.097 234.551 261.366 236.289 263.913 240.053L269.189 248.026H269.285L273.556 241.913C277.559 236.228 277.472 234.664 273.374 234.298L271.555 234.027L271.286 232.647H287.566L287.297 234.027L285.019 234.394C281.839 234.848 280.019 236.411 275.194 243.013L270.281 249.336L280.47 264.183C283.563 268.497 285.2 270.296 287.401 270.602L288.77 270.785L289.134 272.253H268.011L268.28 270.881L269.917 270.602C272.924 270.235 272.742 268.585 270.194 264.829L264.13 255.659H263.948L258.853 262.995C254.764 268.681 254.764 270.331 258.767 270.602L260.855 270.881L261.037 272.253H244.809L245.086 270.864Z" fill="white"/>
+<path d="M291.508 293.789L293.423 293.693C295.97 293.509 297.061 293.239 297.061 292.226V244.192C297.061 238.603 296.334 237.686 293.241 236.952L291.239 236.489L291.326 235.389L306.159 231.354L305.977 239.424L306.341 239.52C309.98 235.153 314.71 231.721 320.203 231.721C329.474 231.721 336.387 239.974 336.387 251.161C336.387 265.283 325.835 273.536 315.109 273.536C312.041 273.589 308.996 273.009 306.159 271.833H306.063V292.374C306.063 293.108 306.523 293.474 310.248 293.658L313.428 293.754L313.705 295.221H291.239L291.508 293.789ZM326.528 254.078C326.528 244.725 321.979 237.668 314.979 237.668C313.274 237.706 311.598 238.11 310.06 238.852C308.523 239.594 307.16 240.659 306.063 241.974V263.528C308.429 268.017 312.431 271.597 316.616 271.597C322.62 271.597 326.528 263.895 326.528 254.078Z" fill="white"/>
+<path d="M341.828 253.441C341.828 240.874 350.648 231.153 362.622 231.153C372.083 231.153 377.628 236.839 377.628 244.253C377.624 245.116 377.534 245.976 377.36 246.821C377.36 246.821 352.52 246.542 351.619 246.542C351.433 247.726 351.34 248.923 351.341 250.122C351.437 260.393 357.164 267.266 365.204 267.266C370.021 267.266 373.937 265.519 377.03 260.576L378.027 261.126C374.206 268.986 368.496 273.597 360.473 273.597C349.739 273.58 341.828 264.899 341.828 253.441ZM368.384 244.908C368.479 238.673 366.478 232.987 361.452 232.987C356.817 232.987 352.719 238.123 351.723 245.005L368.384 244.908Z" fill="white"/>
+<path d="M382.385 270.768L384.118 270.681C386.717 270.497 387.757 270.218 387.757 269.117V244.271C387.757 238.586 387.029 237.669 383.936 236.935L381.839 236.472L381.934 235.372L396.854 231.337L396.672 245.005H396.94C400.033 236.201 403.672 231.25 409.131 231.25C412.596 231.25 415.317 233.634 415.317 236.935C415.339 237.637 415.221 238.336 414.969 238.991C414.718 239.646 414.339 240.244 413.854 240.748C413.369 241.252 412.788 241.653 412.146 241.927C411.505 242.2 410.815 242.341 410.118 242.341C408.704 242.344 407.337 241.822 406.279 240.875C405.222 239.928 404.547 238.622 404.383 237.206C401.385 238.123 398.924 241.887 396.655 249.039V269.301C396.655 270.174 397.382 270.497 400.987 270.681L403.716 270.768L403.984 272.235H382.064L382.385 270.768Z" fill="white"/>
+<path d="M425.739 262.148L426.199 237.302L418.921 237.022L419.735 234.734L425.471 230.367L433.84 223.582L435.201 223.861L435.114 232.656H449.124L447.85 236.9H435.114L434.568 260.742C434.473 265.781 436.751 268.078 441.387 268.078C444.13 268.071 446.792 267.133 448.942 265.414L449.392 266.331C445.667 270.279 441.023 273.397 436.11 273.397C429.378 273.432 425.653 269.947 425.739 262.148Z" fill="white"/>
+<path d="M55.3613 190.107H57.9605V319.552H55.3613V190.107Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="500" height="500" fill="white"/>
+</clipPath>
+</defs>
+</svg>