Merge branch 'dev'

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

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'
-  export let work: RecordAttributes
+  import type { WorkAttributes } from '../../routes/portfolio/index.json'
+  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 { sprinkles } from '../../styles/sprinkles.css'
+import { vars } from '$lib/styles/vars.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 { sprinkles } from '../../src/styles/sprinkles.css'
+import { vars } from '$lib/styles/vars.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(
-    parseField('description')
-  )
+  const workHistory = (parsed.attributes.work_history || [])
+    .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;