From c085f62962b21bc6e754724b21fe06af91b42475 Mon Sep 17 00:00:00 2001 From: vika03 Date: Thu, 10 Oct 2024 15:03:21 +0200 Subject: [PATCH 1/5] wip --- components/cv.js | 157 +++++++++++++++++++ components/header.js | 63 ++++++-- components/project.js | 50 +++--- components/tags.js | 65 ++++++++ pages/viktor-kalajo.js | 329 +++++++++++++++++++++++++++------------- pages/viktor-kalajo2.js | 210 +++++++++++++++++++++++++ 6 files changed, 734 insertions(+), 140 deletions(-) create mode 100644 components/cv.js create mode 100644 components/tags.js create mode 100644 pages/viktor-kalajo2.js diff --git a/components/cv.js b/components/cv.js new file mode 100644 index 0000000..e3dac67 --- /dev/null +++ b/components/cv.js @@ -0,0 +1,157 @@ +import { Header } from '../components/header' +import { InPageHeader } from '../components/inPageHeader' +import PropTypes from 'prop-types' + +const Cv = ({ name, title, location, canonical, email, children }) => ( + <> +
+ {name} - curriculum vitae + +
+
+
+

{name}

+

+ {title}, {location} +

+ + {email} + + {children} +
+ {/*language=SCSS*/} + +
+ +) + +Cv.propTypes = { + name: PropTypes.string, + title: PropTypes.string, + location: PropTypes.string, + canonical: PropTypes.string, + email: PropTypes.string, +} + +export default Cv diff --git a/components/header.js b/components/header.js index 51c39d0..b020bb9 100644 --- a/components/header.js +++ b/components/header.js @@ -26,17 +26,18 @@ export function Header({ children }) { font-style: normal; font-weight: 900; src: local(''), - url('/static/fonts/overpass-v7-latin-900.woff2') format('woff2'), - url('/static/fonts/overpass-v7-latin-900.woff') format('woff'); + url('/static/fonts/overpass-v7-latin-900.woff2') format('woff2'), + url('/static/fonts/overpass-v7-latin-900.woff') format('woff'); } - + @font-face { font-family: 'Overpass Mono'; font-style: normal; font-weight: 300; src: local(''), - url('/static/fonts/overpass-mono-v10-latin-300.woff2') format('woff2'), - url('/static/fonts/overpass-mono-v10-latin-300.woff') format('woff'); + url('/static/fonts/overpass-mono-v10-latin-300.woff2') + format('woff2'), + url('/static/fonts/overpass-mono-v10-latin-300.woff') format('woff'); } @font-face { @@ -44,8 +45,10 @@ export function Header({ children }) { font-style: normal; font-weight: 400; src: local(''), - url('/static/fonts/overpass-mono-v10-latin-regular.woff2') format('woff2'), - url('/static/fonts/overpass-mono-v10-latin-regular.woff') format('woff'); + url('/static/fonts/overpass-mono-v10-latin-regular.woff2') + format('woff2'), + url('/static/fonts/overpass-mono-v10-latin-regular.woff') + format('woff'); } @font-face { @@ -53,8 +56,9 @@ export function Header({ children }) { font-style: normal; font-weight: 700; src: local(''), - url('/static/fonts/overpass-mono-v10-latin-700.woff2') format('woff2'), - url('/static/fonts/overpass-mono-v10-latin-700.woff') format('woff'); + url('/static/fonts/overpass-mono-v10-latin-700.woff2') + format('woff2'), + url('/static/fonts/overpass-mono-v10-latin-700.woff') format('woff'); } body { @@ -112,6 +116,11 @@ export function Header({ children }) { max-width: 100%; } + ul, + ol { + padding-inline-start: 20px; + } + li { font-family: 'Overpass Mono', sans-serif; } @@ -147,6 +156,42 @@ export function Header({ children }) { h4 { font-size: 20px; } + + ul, + ol { + padding-inline-start: 40px; + } + } + + @media print { + p.text, + li { + font-size: 12px; + } + + p { + font-size: 15px; + } + + h1 { + font-size: 50px; + } + + h2 { + font-size: 29px; + } + + h3 { + font-size: 20px; + } + + h4 { + font-size: 13px; + } + + a { + text-decoration: none; + } } `} diff --git a/components/project.js b/components/project.js index 4883218..47c6755 100644 --- a/components/project.js +++ b/components/project.js @@ -1,44 +1,42 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Tags } from './tags' export const Project = ({ from, to, role, title, children, tags }) => ( -
-

{title}

-

- {role}, {from} - {to} -

+
+

+ {title} + + {role}, {from} - {to} + +

+

{children} -
    - {tags.map(tag => ( -
  • {tag}
    • - ))} -
+ {/*language=SCSS*/}
-); +) Project.propTypes = { from: PropTypes.string, to: PropTypes.string, role: PropTypes.string, title: PropTypes.node, - tags: PropTypes.arrayOf(PropTypes.string) -}; + tags: PropTypes.arrayOf(PropTypes.string), +} diff --git a/components/tags.js b/components/tags.js new file mode 100644 index 0000000..ea58a80 --- /dev/null +++ b/components/tags.js @@ -0,0 +1,65 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export const Tags = ({ tags }) => ( + <> + + {/*language=SCSS*/} + + +) + +Tags.propTypes = { + tags: PropTypes.arrayOf(PropTypes.string), +} diff --git a/pages/viktor-kalajo.js b/pages/viktor-kalajo.js index 305707b..35a254a 100644 --- a/pages/viktor-kalajo.js +++ b/pages/viktor-kalajo.js @@ -1,6 +1,5 @@ -import { Header } from '../components/header'; -import { InPageHeader } from '../components/inPageHeader'; -import { Project } from '../components/project'; +import { Header } from '../components/header' +import { Project } from '../components/project' const ViktorKalajo = () => ( <> @@ -8,76 +7,98 @@ const ViktorKalajo = () => ( sthlm.io - Viktor Kalajo -
+
- -

Viktor Kalajo

-

Elin Wägners gata 25, 129 51 Hägersten

- - viktor@sthlm.io +

Viktor Kalajo

+

Senior Full-Stack Software Engineer, Stockholm

+ + viktor.kalajo@gmail.com -

- I have been working professionally with web development 7+ years. The - last couple of years my primary focus has been with technologies and - frameworks such as JavaScript, React - , Node and Express. I'm also - well-versed in general front end stuff such as HTML, CSS, build tools, - accessibility, SEO and performance. +

+ With 12+ years of professional web development experience, I create + products that deliver real value to users and stakeholders. I thrive + in end-to-end involvement, from defining business goals and user needs + to shaping UX, architecture, and writing the code.

-

Clients I've worked with include Spotify, SVT and MTG.

- -

Next dream gig

-

- Complex web application with lots of interaction and state. - Technologies such as React, Node, GraphQL and TypeScript. I`d love to - be involved in the full tech stack and also in the design process. -

- -

Summary of Qualifications

+

Summary of Qualifications

  • - Highly experienced in modern JavaScript on both server and client - side + Over 12 years of full-stack web development experience, specializing + in TypeScript, React, and Node.js.
  • - 5+ years of experience writing large-scale React and Node - applications + Proven track record in architecting and delivering large-scale + applications, successfully leading projects from proof of concept to + production.
  • - Databases and search indexes such as MongoDB, ElasticSearch, Redis - and PostgreSQL + Expertise in data storage and processing solutions including + PostgreSQL, ElasticSearch, Kafka, and Redis.
    • -
  • Great general frontend knowledge
  • - CI/CD, automation and hosting using tools like Heroku, Gitlab - pipelines and Jenkins + Proficient in CI/CD implementation with a focus on automated testing + for robust deployment pipelines.
    • -
  • Some GraphQL knowledge
    • -
- -

Wants to learn more about

-
    -
  • GraphQL
    • -
  • TypeScript
- -

Highlighted projects

+

Highlighted projects

+ +

+ As a core developer of Astrid, the publishing platform for SVT News + and Sports, I played a key role in shaping its architecture and + driving it from proof of concept to production. My involvement + spanned the entire development lifecycle—from defining goals to + collaborating on UX and writing code. +

+

+ Astrid has around 400 users/editors and serves millions of unique + readers with published articles and feeds every week. +

+

+ Together with a very autonomous team of ~eight people, we built a + system that has been widely praised within the organization. +

+ -

- CMS for creating real time news streams for articles at{' '} +

+ CMS for creating real-time news streams for articles at{' '} SVT Nyheter.

@@ -85,36 +106,34 @@ const ViktorKalajo = () => ( title={SVT Sport} role="Front-end developer" from="Q3 2014" - to="present" + to="Q1 2019 (periodically)" tags={[ 'React', 'Node', 'GraphQL', 'Express', 'Heroku', - 'Gitlab pipelines', + 'Gitlab CI/CD', 'Webpack', 'MongoDB', 'Redis', - 'Isomorphism', - 'Universal app', - 'Akamai' + 'Universal/SSR', + 'Akamai', ]} > -

+

SVT site for sport news,{' '} - svt.se/sport. Isomorphic / - universal SPA built using React,{' '} - Node and Express. High demands on - performance and accessibility with ~500k unique visitors per week. + svt.se/sport. + Isomorphic/universal SPA built using React, Node and Express. High + demands on performance and accessibility with ~500k unique visitors + per week.

- Akademibokhandeln{' '} - (via creuna) + (via Creuna) } role="Lead front-end developer" @@ -128,60 +147,53 @@ const ViktorKalajo = () => ( 'Heroku', 'ElasticSearch', 'Redis', - 'Docker' + 'Docker', ]} > -

- E-commerce site{' '} - akademibokhandeln.se{' '} - for books built using technologies such as{' '} - Django (Python), React and{' '} - ElasticSearch. I was the lead front end deveoper - during my time on this project, but i also had the opportunity to - work on the back end with Django. +

+ E-commerce site for one of Sweden´s largest bookstores{' '} + akademibokhandeln.se + .

- -

- Survey tool. Single page application built using{' '} - React, Redux,{' '} - Node, MongoDB,{' '} - Heroku and CloudFlare. I was - responsible for the entire tech stack in this project. -

- - + title="MTG Viasat Set-Top Box interface (via Creuna)" + from="Q1 2015" + to="Q2 2015" + tags={['Angular']} + role="Lead front-end developer" + /> -

- Intranet for Spotify built using Angular & Django. I worked on the - front end with Angular in this project. + /> + +

Education

+
+

+ Q3 2008 - Q4 2013

- +

+ Master of Science in{' '} + + Software Design + {' '} + and{' '} + + Industrial Economics and Management + {' '} + at{' '} + KTH Royal Institute of Technology + . +

+
{/*language=SCSS*/} + -
+ -); +) -export default ViktorKalajo; +export default ViktorKalajo diff --git a/pages/viktor-kalajo2.js b/pages/viktor-kalajo2.js new file mode 100644 index 0000000..b7ebc0d --- /dev/null +++ b/pages/viktor-kalajo2.js @@ -0,0 +1,210 @@ +import Cv from '../components/cv' + +import { Project } from '../components/project' +import { Tags } from '../components/tags' + +const ViktorKalajo = () => ( + +

+ With 12+ years of professional web development experience, I create + products that deliver real value to users and stakeholders. I thrive in + end-to-end involvement, from defining business goals and user needs to + shaping UX, architecture, and writing the code. +

+

+ Clients I've worked with includes SVT, Spotify and MTG. +

+

Summary of Qualifications

+
    +
  • + Highly experienced in modern TypeScript on both server and client side +
    • +
  • + 10+ years of experience writing large-scale React and Node applications +
    • +
  • + Experience in front-end and back-end architecture, instrumental in + shaping the architecture of recent projects, and driving technical + solutions from POCs to production. +
    • +
  • + Knowledge in data storage and processing solutions such as such as + PostgreSQL, Kafka, MongoDB, ElasticSearch and Redis +
    • +
  • Experience setting up and using CI/CD with automated testing
    • +
+

Highlighted projects

+ +

+ As a core developer of Astrid, the publishing platform for SVT News and + Sports, I played a key role in shaping its architecture and driving it + from POCs to production. My involvement spanned the entire development + lifecycle—from defining goals to collaborating on UX and writing code. + The system has been widely praised within the organization. +

+ + +

+ CMS for creating real time news streams for articles at{' '} + SVT Nyheter. +

+ + SVT Sport} + role="Front-end developer" + from="Q3 2014" + to="present" + tags={[ + 'React', + 'Node', + 'GraphQL', + 'Express', + 'Heroku', + 'Gitlab CI/CD', + 'Webpack', + 'MongoDB', + 'Redis', + 'Isomorphism', + 'Universal app', + 'Akamai', + ]} + > +

+ SVT site for sport news, svt.se/sport + . Isomorphic / universal SPA built using React,{' '} + Node and Express. High demands on + performance and accessibility with ~500k unique visitors per week. +

+ + + Akademibokhandeln (via + creuna) + + } + role="Lead front-end developer" + from="Q2 2017" + to="Q1 2018" + tags={[ + 'Python', + 'Django', + 'React', + 'PostgreSQL', + 'Heroku', + 'ElasticSearch', + 'Redis', + 'Docker', + ]} + > +

+ E-commerce site{' '} + akademibokhandeln.se for + books built using technologies such as Django (Python),{' '} + React and ElasticSearch. I was the + lead front end deveoper during my time on this project, but i also had + the opportunity to work on the back end with Django. +

+ + +

+ Survey tool. Single page application built using React,{' '} + Redux, Node, MongoDB,{' '} + Heroku and CloudFlare. I was + responsible for the entire tech stack in this project. +

+ + +

+ Intranet for Spotify built using Angular & Django. I worked on the front + end with Angular. +

+

Master of Science, Q3 2008 - Q4 2013

+

Master of Science, Q3 2008 - Q4 2013

+ + +

Tech

+ + +

Education

+
+

Q3 2008 - Q4 2013

+

+ Master of Science in{' '} + + Software Design + {' '} + and{' '} + + Industrial Economics and Management + {' '} + at Royal Institute of Technology. +

+
+ +) + +export default ViktorKalajo From afa23de9be90b8bda93c3e7bc6e3aa7800c13a43 Mon Sep 17 00:00:00 2001 From: vika03 Date: Thu, 7 Nov 2024 08:42:24 +0100 Subject: [PATCH 2/5] wip --- pages/viktor-kalajo.js | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/pages/viktor-kalajo.js b/pages/viktor-kalajo.js index 35a254a..0403915 100644 --- a/pages/viktor-kalajo.js +++ b/pages/viktor-kalajo.js @@ -33,7 +33,7 @@ const ViktorKalajo = () => (
  • Expertise in data storage and processing solutions including - PostgreSQL, ElasticSearch, Kafka, and Redis. + PostgreSQL, ElasticSearch, Kafka and Redis.
  • Proficient in CI/CD implementation with a focus on automated testing @@ -72,12 +72,21 @@ const ViktorKalajo = () => ( collaborating on UX and writing code.

    - Astrid has around 400 users/editors and serves millions of unique - readers with published articles and feeds every week. + Astrid powers one of Sweden’s largest news sites, svt.se, as well as + the SVT Nyheter and SVT Sport apps. The platform has around 400 + editors, reaching millions of unique weekly readers with articles + and feeds.

    - Together with a very autonomous team of ~eight people, we built a - system that has been widely praised within the organization. + One of the major technical challenges was enabling real-time + collaboration among editors on articles and feeds. We solved this by + implementing an event-driven architecture, which supported seamless + and concurrent editing. +

    +

    + Working with a highly autonomous team of eight, we built a system + that received wide praise throughout the organization for its + reliability and usability.

    ( ]} >

    - CMS for creating real-time news streams for articles at{' '} - SVT Nyheter. + Direktcenter is a versatile CMS designed for creating real-time news + streams, chats, and more. It’s widely used within SVT for both News + and Play content, supporting live, interactive features that enhance + viewer engagement. +

    +

    + Additionally, Direktcenter serves as the backup CMS for SVT Nyheter, + ensuring seamless continuity when the primary system is down. Built + for scale, it can support up to one million concurrent readers, + delivering live updates within milliseconds.

    Date: Thu, 7 Nov 2024 10:07:17 +0100 Subject: [PATCH 3/5] wip --- pages/viktor-kalajo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/viktor-kalajo.js b/pages/viktor-kalajo.js index 0403915..cb11a2b 100644 --- a/pages/viktor-kalajo.js +++ b/pages/viktor-kalajo.js @@ -114,8 +114,8 @@ const ViktorKalajo = () => (

    Additionally, Direktcenter serves as the backup CMS for SVT Nyheter, - ensuring seamless continuity when the primary system is down. Built - for scale, it can support up to one million concurrent readers, + ensuring news delivery when the primary system is down. Built for + scale, it can support up to one million concurrent readers, delivering live updates within milliseconds.

    From bc691ac0bdb5e230cb6abb350abed90af644fd24 Mon Sep 17 00:00:00 2001 From: vika03 Date: Fri, 15 Nov 2024 11:31:18 +0100 Subject: [PATCH 4/5] wip --- components/downloadPdfButton.js | 33 +++++++++++++++++++++++++ pages/viktor-kalajo.js | 22 ++++++++--------- public/static/pdf/viktor-kalajo-cv.pdf | Bin 0 -> 33399 bytes 3 files changed, 44 insertions(+), 11 deletions(-) create mode 100644 components/downloadPdfButton.js create mode 100644 public/static/pdf/viktor-kalajo-cv.pdf diff --git a/components/downloadPdfButton.js b/components/downloadPdfButton.js new file mode 100644 index 0000000..566d912 --- /dev/null +++ b/components/downloadPdfButton.js @@ -0,0 +1,33 @@ +export const DownloadPdfButton = ({ href }) => { + return ( + <> + + Download as PDF + + {/*language=SCSS*/} + + + ) +} diff --git a/pages/viktor-kalajo.js b/pages/viktor-kalajo.js index cb11a2b..caa86f7 100644 --- a/pages/viktor-kalajo.js +++ b/pages/viktor-kalajo.js @@ -1,5 +1,6 @@ import { Header } from '../components/header' import { Project } from '../components/project' +import { DownloadPdfButton } from '../components/downloadPdfButton' const ViktorKalajo = () => ( <> @@ -43,7 +44,7 @@ const ViktorKalajo = () => (

    Highlighted projects

    (

    One of the major technical challenges was enabling real-time collaboration among editors on articles and feeds. We solved this by - implementing an event-driven architecture, which supported seamless + implementing an event-driven architecture, which supports seamless and concurrent editing.

    @@ -91,7 +92,7 @@ const ViktorKalajo = () => ( ( .

    +
    + +
    {/*language=SCSS*/} - - -) - -Cv.propTypes = { - name: PropTypes.string, - title: PropTypes.string, - location: PropTypes.string, - canonical: PropTypes.string, - email: PropTypes.string, -} - -export default Cv diff --git a/components/downloadPdfButton.js b/components/downloadPdfButton.js index 566d912..f9ea9cc 100644 --- a/components/downloadPdfButton.js +++ b/components/downloadPdfButton.js @@ -13,7 +13,7 @@ export const DownloadPdfButton = ({ href }) => { color: #fff; border: 0; outline: none; - padding: 20px 50px; + padding: 20px 40px; cursor: pointer; font-size: 18px; font-family: 'Overpass', sans-serif; @@ -21,12 +21,23 @@ export const DownloadPdfButton = ({ href }) => { -webkit-appearance: none; -webkit-border-radius: 0px; margin: 20px 0; + text-decoration: none; + + &:hover { + background: #4c52c1; + } &:hover, &:visited { color: #fff; } } + + @media print { + .downloadPdf { + display: none; + } + } `} ) diff --git a/components/project.js b/components/project.js index 47c6755..40a3343 100644 --- a/components/project.js +++ b/components/project.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import PropTypes from 'prop-types' import { Tags } from './tags' @@ -7,26 +7,39 @@ export const Project = ({ from, to, role, title, children, tags }) => (

    {title} - {role}, {from} - {to} + {role ? `${role}, ` : ''} + {from} - {to}

    -

    {children} {/*language=SCSS*/} diff --git a/pages/johan-baath.js b/pages/johan-baath.js index 636e9d2..75ffb26 100644 --- a/pages/johan-baath.js +++ b/pages/johan-baath.js @@ -91,20 +91,20 @@ export default function JohanBaath() {

    Working with the following teams: -
      -
    • - Performance - Ensuring peak performance for the native apps. -
      • -
    • - Release - Responsible for tooling around releasing Spotify on - all app stores. -
      • -
    • Foundation - iOS developer experience and tooling.
      • -
    • - Machine Learning UX - Building tools for Spotify's ML engineers. -
      • -

    +
      +
    • + Performance - Ensuring peak performance for the native apps. +
      • +
    • + Release - Responsible for tooling around releasing Spotify on all + app stores. +
      • +
    • Foundation - iOS developer experience and tooling.
      • +
    • + Machine Learning UX - Building tools for Spotify's ML engineers. +
      • +

    Cabonline Technologies

    diff --git a/pages/viktor-kalajo.js b/pages/viktor-kalajo.js index caa86f7..67484c5 100644 --- a/pages/viktor-kalajo.js +++ b/pages/viktor-kalajo.js @@ -10,7 +10,7 @@ const ViktorKalajo = () => (
    -

    Viktor Kalajo

    +

    Viktor Kalajo

    Senior Full-Stack Software Engineer, Stockholm

    viktor.kalajo@gmail.com @@ -41,7 +41,7 @@ const ViktorKalajo = () => ( for robust deployment pipelines.
    • -

    Highlighted projects

    +

    Latest projects

    ( .

    - - -

    Education

    -
    -

    - Q3 2008 - Q4 2013 -

    +

    Education

    +

    Master of Science in{' '} @@ -207,7 +195,7 @@ const ViktorKalajo = () => ( KTH Royal Institute of Technology .

    -
    +
    @@ -226,8 +214,6 @@ const ViktorKalajo = () => ( } .content { - display: flex; - flex-direction: column; margin: 0 auto; width: 1024px; max-width: calc(100% - 40px); @@ -249,12 +235,17 @@ const ViktorKalajo = () => ( display: block; } + .educationHeading { + margin-bottom: 0; + } + .education-time { - font-size: 0.9em; - text-transform: uppercase; + font-family: 'Overpass Mono'; + display: block; + font-size: 16px; line-height: 1.2em; - margin-top: 0.3em; - font-weight: 600; + margin-top: 0; + font-weight: 400; } @media print { @@ -269,16 +260,16 @@ const ViktorKalajo = () => ( } `}