michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add presentations to the portfolio

Browse Source
This commit is contained in:
Michal Vanko 2022-01-02 20:23:43 +01:00
parent a9ecb8fd7e
commit 2322066430
9 changed files with 159 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
TODO
View File

@ -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)

93
_pages/portfolio.md
View File

@ -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 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 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 like to explore new technologies and _Open-source_ software.
I am interested in modern software architecture and _reactive programming_.
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 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 🚗.

18
src/components/portfolio/presentation.css.ts Normal file
View File

@ -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',
})

41
src/components/portfolio/presentation.svelte Normal file
View File

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

2
src/lib/styles/sprinkles.css.ts
View File

@ -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'],
},

2
src/routes/portfolio/index.css.ts
View File

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

10
src/routes/portfolio/index.json.ts
View File

@ -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 {

16
src/routes/portfolio/index.svelte
View File

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

13
static/admin/config.yml
View File

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