309 lines
11 KiB
Vue
309 lines
11 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<Navigation></Navigation>
|
||
|
|
<div class="about">
|
||
|
|
<div class="margin-container">
|
||
|
|
<!-- first row -->
|
||
|
|
<div class="tile is-parent is-horizontal">
|
||
|
|
<div class="tile is-child portrait-small is-4 is-flex"
|
||
|
|
style="align-items: center;flex-direction: column">
|
||
|
|
<figure class="image portrait">
|
||
|
|
<img class="is-rounded" src="~assets/portrait-small.jpg" alt="Potrait"/>
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
<div class="tile is-child is-8" style="display: flex; align-items: center; flex-direction: row">
|
||
|
|
<div class="container">
|
||
|
|
<h2 class="title has-text-centered">Who am I?</h2>
|
||
|
|
<p class="content">
|
||
|
|
Profficient fullstack developer who gained experience in technology & financial
|
||
|
|
industry.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- second row -->
|
||
|
|
|
||
|
|
<div class="tbox">
|
||
|
|
<h2 class="title has-text-centered">Technologies</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tile is-parent is-vertical is-12">
|
||
|
|
<div class="tile is-child">
|
||
|
|
<p class="content">
|
||
|
|
In the beginning of my IT career, I started as a JEE developer. It was a heavy, hard-to-use
|
||
|
|
technology but anyways used in most companies. Because of this hard-to-use, I learnt how to
|
||
|
|
bypass a long process of constant redeployments, just by writing much quicker unit-tests.
|
||
|
|
Unintentionally, it lead me to writing better code as I started to think how to write a
|
||
|
|
testable code. After many years in the industry, I switched to more light-weight web and
|
||
|
|
integration technologies like spring and vertx but the very same techniques of writing code
|
||
|
|
are ironically very up-to-date even though the underlying technology went obsolete or not
|
||
|
|
recommended anymore.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="tile is-parent">
|
||
|
|
<div class="tile is-child is-6">
|
||
|
|
<h1 class="subtitle">Backend technologies</h1>
|
||
|
|
<div class="content">
|
||
|
|
<ul>
|
||
|
|
<li>Java SE + EE</li>
|
||
|
|
<li>JSF</li>
|
||
|
|
<li>JPA, EJB, Message Driven Beans</li>
|
||
|
|
<li>Spring</li>
|
||
|
|
<li>Vertx</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tile is-child is-6">
|
||
|
|
<h1 class="subtitle">Frontend technologies</h1>
|
||
|
|
<div class="content">
|
||
|
|
<ul>
|
||
|
|
<li>Javascript</li>
|
||
|
|
<li>Reasonable knowledge of flow & Typescript</li>
|
||
|
|
<li>Gulp & Webpack</li>
|
||
|
|
<li>React</li>
|
||
|
|
<li>Vue</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tbox">
|
||
|
|
<h2 class="title has-text-centered">Career</h2>
|
||
|
|
|
||
|
|
<div class="timeline is-centered">
|
||
|
|
<header class="timeline-header">
|
||
|
|
<span class="tag is-medium is-primary">Start</span>
|
||
|
|
</header>
|
||
|
|
<div class="timeline-item">
|
||
|
|
<div class="timeline-marker"></div>
|
||
|
|
<div class="timeline-content">
|
||
|
|
<p class="heading">July 2013</p>
|
||
|
|
<div class="position">
|
||
|
|
<div class="position-box">
|
||
|
|
<div class="image-wrapper" style="float: left;">
|
||
|
|
<a target="_blank" href="https://www.comarch.com/">
|
||
|
|
<p class="image is-64x64">
|
||
|
|
<img src="~~/assets/comarch.svg"/>
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<p class="content">
|
||
|
|
Public government project - development of EPUAP2 project.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="timeline-item">
|
||
|
|
<div class="timeline-marker is-icon">
|
||
|
|
<i class="fa fa-flag"></i>
|
||
|
|
</div>
|
||
|
|
<div class="timeline-content">
|
||
|
|
<p class="heading">November 2013</p>
|
||
|
|
<div class="position">
|
||
|
|
<div class="position-box">
|
||
|
|
|
||
|
|
<div class="image-wrapper" style="float: right">
|
||
|
|
<a target="_blank" href="https://www.coi.gov.pl/">
|
||
|
|
<p class="image is-64x64">
|
||
|
|
<img src="../assets/coi.png"/>
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="content">
|
||
|
|
Development of CEPIK2 (central records of vehicles and drivers) - CEK and Resper
|
||
|
|
projects.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="timeline-item">
|
||
|
|
<div class="timeline-marker is-icon">
|
||
|
|
<i class="fa fa-flag"></i>
|
||
|
|
</div>
|
||
|
|
<div class="timeline-content">
|
||
|
|
<p class="heading">October 2015</p>
|
||
|
|
<div class="position">
|
||
|
|
<div class="position-box">
|
||
|
|
<div class="image-wrapper" style="float: left">
|
||
|
|
<a target="_blank"
|
||
|
|
href="https://www.unicreditgroup.eu/en/worldwide/our-worldwide-presence/europe/poland/unicredit-services-s-c-p-a--spoka-akcyjna-o.html">
|
||
|
|
<p class="image is-64x64">
|
||
|
|
<img src="../assets/unicredit.png"/>
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<p>
|
||
|
|
Retail banking - support of the existing backend system, support of CVA Web
|
||
|
|
Console and internal operation monitoring system.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="timeline-item">
|
||
|
|
<div class="timeline-marker is-image is-32x32">
|
||
|
|
<img src="https://bulma.io/images/placeholders/32x32.png">
|
||
|
|
</div>
|
||
|
|
<div class="timeline-content">
|
||
|
|
<p class="heading">March 2017</p>
|
||
|
|
<div class="position">
|
||
|
|
<div class="position-box">
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
|
||
|
|
<div class="image-wrapper" style="float: right">
|
||
|
|
<a href="https://www.goldmansachs.com/" target="_blank">
|
||
|
|
<p class="image is-64x64">
|
||
|
|
<img src="../assets/goldman.svg"/>
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
Investment banking - support of the existing backend system and development of
|
||
|
|
an integration with the over-the-counter mifid compliant trading platform using
|
||
|
|
a
|
||
|
|
fix protocol. Coverage of equity options and convertible bonds.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="timeline-item">
|
||
|
|
<div class="timeline-marker"></div>
|
||
|
|
<div class="timeline-content">
|
||
|
|
<p class="heading">February 2020</p>
|
||
|
|
<div class="position2">
|
||
|
|
<div class="position-box">
|
||
|
|
<div class="image-wrapper" style="float: left;">
|
||
|
|
<a href="https://www.luxoft.com/" target="_blank">
|
||
|
|
<p class="image is-64x64">
|
||
|
|
<img src="../assets/luxoft.png"/>
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<p class="content">
|
||
|
|
Retail banking - support of the existing backend system used by regional swiss
|
||
|
|
banks
|
||
|
|
and development of an integration with the swiss implementation of
|
||
|
|
<a target="_blank" href="https://adorsys.com/en/products/banking-gateway/">XS2A
|
||
|
|
Openbanking</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="timeline-header">
|
||
|
|
<span class="tag is-medium is-primary">End</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'AboutPage'
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
$tile-spacing: 0;
|
||
|
|
@import "~assets/main.scss";
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.portrait {
|
||
|
|
max-width: 256px;
|
||
|
|
max-height: 256px;
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image {
|
||
|
|
display: table-cell;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about {
|
||
|
|
background: url("~assets/about.jpg") fixed;
|
||
|
|
background-position-x: 50%;
|
||
|
|
background-position-y: 50%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: justify;
|
||
|
|
|
||
|
|
padding: 2rem 5rem;
|
||
|
|
|
||
|
|
@media screen and (max-width: $tablet) {
|
||
|
|
padding: 1rem 2rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.description {
|
||
|
|
padding: 2em;
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
|
||
|
|
.position {
|
||
|
|
padding: 0.5em;
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.position-box {
|
||
|
|
@extend .box;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tbox {
|
||
|
|
margin: 1em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.margin-container {
|
||
|
|
background-color: white;
|
||
|
|
opacity: 0.8;
|
||
|
|
padding: 1em 3em;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: $tablet) {
|
||
|
|
.margin-container {
|
||
|
|
// only on wider screens
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.position {
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-wrapper {
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|