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

Edit styling and fonts

Browse Source
This commit is contained in:
Michal Vanko 2019-09-15 22:48:03 +02:00
parent f7400be1d0
commit 20d91c9ace
14 changed files with 112 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Nav.svelte
View File

@ -50,19 +50,14 @@
nav {
position: sticky;
top: 0;
background: rgb(31, 22, 94);
background: #f2f6f6;
z-index: 1;
padding: 0.5em;
box-shadow: 0px 2px 4px #090808;
box-shadow: 0px 1px 3px #959595;
}
nav a {
padding: 0.4em 0.5em;
text-decoration: none;
}
nav a:hover {
text-decoration: underline
}
</style>

16
src/components/portfolio/project.svelte
View File

@ -2,16 +2,22 @@
export let project
</script>
<style>
.project-image {
float: right;
width: 25%;
}
</style>
<article class="project">
<h3>{project.name}</h3>
<section class="description">
{#if project.image}
<img src="{project.image.source}" class="project-image" alt="{project.image.image_description}" />
{/if}
{@html project.description}
</section>
{#if project.image}
<aside>
<img src="{project.image}" class="project-image" alt="{project.image.description}" />
</aside>
{/if}
<aside>
</aside>
</article>

99
src/components/portfolio/projects.svelte
View File

@ -1,99 +0,0 @@
<section class="projects">
<h3>Projects</h3>
<article class="project">
<h5>Signal Hub Manager</h5>
<p><em>Signal Hub</em> is an end-to-end <strong>Big Data analytics platform</strong> for large enterprises. It accelerates the process of extracting insights and intelligence from large volumes of data, including data of different types and in different formats.</p>
<p>I worked on <em>Signal Hub</em> as a front-end developer. Working on the part of the platform called <em>Workbench</em>. <em>Workbench</em> is an <strong>IDE for data analyst</strong>.
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.
</p>
<p>This project is built with modern web technologies including: <strong>AngularJS</strong>, <strong>React</strong>, <strong>D3</strong>, <strong>Highcharts</strong>, <strong>Jest</strong>, <strong>Webpack</strong>.</p>
<p>I was part of a large distributed team of ~20 developers &amp; ~6 testers which were working on the whole platform.</p>
</article>
<article class="project">
<h5>SHIP (Structured heard input process)</h5>
<p><em>SHIP</em> is a web application for <strong>editors</strong> who actively <strong>track trades offers and bids</strong> on the commodity market.</p>
<p>It was built for a price reporting company <em>S&P Global Platts</em>. This company is a provider of energy and commodities information and a source of benchmark price assessments in the <em>physical energy markets</em>.</p>
<p><em>SHIP</em> was suited for a very easy and quick workflow for editors.</p>
<p>Team consisted of 3 front-end and 3 back-end developers. I was a <strong>leader of the front-end</strong> part of the project.</p>
<p>The application was built with <strong>AngularJS and Redux</strong>. The challenging part was working with <strong>Cassandra database</strong>.</p>
</article>
<article class="project">
<h5>FX Salestrader (<a href="http://www.caplin.com/business/fx-sales" target="_blank">www.caplin.com/business/fx-sales.com</a>)</h5>
<p>The main function of <em>Caplin FX Sales</em> 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.</p>
<p>Main technologies used: <strong>Websockets</strong>, Custom Front-end JavaScript MVVM Framework (Knockout, BRJS)</p>
<p>We worked on this project in a team of 6 developers and 3 testers</p>
</article>
<article class="project">
<h5>Skosy</h5>
<p><em>Skosy</em> is a web application which purpose is to <strong>automate writing of integration tests</strong> for web sites.</p>
<p>I worked on a <em>proof of concept</em> front-end portion of this application, which was able to create a list of steps for testing.</p>
<p>I worked on this project in a team of 2 front-end developers.</p>
</article>
<article class="project">
<h5>Livesport.tv <a href="http://www.livesport.tv" target="_blank">(www.livesport.tv)</a></h5>
<p><em>Livesport.tv</em> is a network of premium online sports channels, featuring all the top sports competitions from around the world.</p>
<p>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.</p>
<p>Project was built on top of <strong>Freemarker</strong> templating language.</p>
<p>The team consisted of 2 developers and 1 tester.</p>
</article>
<article class="project">
<h5>beIN SPORTS France &amp; beIN SPORTS USA</h5>
<p><em>beIN Sports</em> is a global network of sports channels jointly owned and operated by <em>Qatari Sports Investments</em>, an affiliate of <em>Al Jazeera Media Networks</em></p>
<p>I worked on this project as a front-end developer. I maintained official websites of beIN SPORTS France and USA (<a href="http://www.beinsports.fr" target="_blank">www.beinsports.fr</a>, <a href="http://www.beinsports.tv" target="_blank">www.beinsports.tv</a>).</p>
<p>Project was built on top of <strong>Freemarker</strong> templating language.</p>
<p>I worked on this project in a team consisting of 7 members.</p>
</article>
<!-- <div class="project">
<h5>Norsk Toppfotball</h5>
<p>I worked on this project as a front-end developer. I maintained official websites of all Norweigian Football teams - NTF Network (<a href="http://www.toppfotball.no" target="_blank">www.toppfotball.no</a>)<br>
<p>Project was built on top of <strong>Freemarker</strong> templating language.</p>
<p>I worked on this project in a team consisting of 4 members.</p>
</div> -->
<article class="project">
<h5>Košice Peace Marathon (<a href="http://www.kosicemarathon.com/" target="_blank">www.kosicemarathon.com</a>)</h5>
<p><em>Košice Peace Marathon</em> is the oldest marathon in Europe and the third-oldest in the world.</p>
<p>
I worked on this project as a front-end and an back-end developer. I've built a <strong>custom CMS</strong>for website and for registration of participants. Also created an application for actual event for signing participants.
<br>
The application was able to create a start list of all participants and provide various statistics about them.
</p>
<p>I've built this project alone and then one maintainer joined me.</p>
</article>
<article class="project">
<h5>CK Vive (<a href="http://www.ckvive.sk" target="_blank">www.ckvive.sk</a>)</h5>
<p><em>CK Vive</em> is a travel agency.</p>
<p>
I worked on this project as a front-end and an back-end developer. I've created new <strong>custom CMS</strong> for adding destinations and apartmans into offering.<br>
<p>I've built this project on top of <strong>PHP</strong>, <strong>MySQL</strong> and <strong>JavaScript</strong>.</p>
<p>I worked on this project alone.</p>
</article>
<section class="small-projects">
<h4>Smaller projects</h4>
<p class="small-description">
I'd built these projects while I was in high-school working externally for eSOLUTIONS s.r.o
</p>
<article class="smaller-project">
<p>VZT MONT s.r.o. (<a href="http://www.vztmont.sk" target="_blank">www.vztmont.sk</a>)</p>
<p>I've created a presentation website for company dealing with air-conditioning</p>
</article>
<article class="smaller-project">
<p>TK Projekt s.r.o.(<a href="http://www.tkprojekt.sk" target="_blank">www.tkprojekt.sk</a>)</p>
<p>I've created a presentation website from template for company dealing with air-conditioning</p>
</article>
<article class="smaller-project">
<p>Tatra Audit s.r.o.(<a href="http://www.tatraauditke.sk" target="_blank">www.tatraauditke.sk</a>)</p>
<p>I've created a presentation website from template for auditing company</p>
</article>
</section>
</section>

10
src/routes/_layout.svelte
View File

@ -6,23 +6,17 @@
<style>
.app-content {
background: linear-gradient(176deg, rgb(31, 22, 94) 0%,rgb(67, 117, 236) 100%);
background-attachment: fixed;
color:#f2f0f0;
background: #f2f6f6;
}
main {
position: relative;
max-width: 56em;
max-width: 700px;
padding: 2em;
margin: 0 auto;
box-sizing: border-box;
}
:global(::selection) {
background: #0dd0d0;
}
</style>
<div class="app-content">

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

@ -23,6 +23,28 @@
margin-top: -3em;
visibility: hidden;
}
section[id] {
margin-top: 2em;
}
h1 {
text-shadow: 2px 2px 1px #c8c4b7;
}
#personal-information :global(h3), #personal-information :global(h2) {
margin: 1em 0 0.5em;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 1.5em 0;
}
</style>
<svelte:head>

3
src/template.html
View File

@ -8,6 +8,9 @@
%sapper.base%
<link rel='stylesheet' href='global.css'>
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="fonts.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i&display=swap&subset=latin-ext" rel="stylesheet"> -->
<link rel='manifest' href='manifest.json'>
<link rel='icon' type='image/png' href='favicon.png'>

13
static/fonts.css Normal file
View File

@ -0,0 +1,13 @@
@font-face {
font-family: Cantarell;
src: local("Cantarell"), url(/fonts/cantarell/Cantarell-Regular.otf) format('opentype');
font-display: swap;
}
@font-face {
font-family: Cantarell;
src: local("Cantarell"), url(/fonts/cantarell/Cantarell-Thin.otf) format('opentype');
font-weight: 200;
font-display: swap;
}

BIN
static/fonts/cantarell/Cantarell-Bold.otf Normal file
View File

Binary file not shown.

BIN
static/fonts/cantarell/Cantarell-ExtraBold.otf Normal file
View File

Binary file not shown.

BIN
static/fonts/cantarell/Cantarell-Light.otf Normal file
View File

Binary file not shown.

BIN
static/fonts/cantarell/Cantarell-Regular.otf Normal file
View File

Binary file not shown.

BIN
static/fonts/cantarell/Cantarell-Thin.otf Normal file
View File

Binary file not shown.

58
static/global.css
View File

@ -4,26 +4,53 @@ html {
body {
margin: 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 14px;
font-family: Cantarell, Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
color: #42436a;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0;
font-weight: 400;
font-weight: 200;
line-height: 1.2;
text-shadow: 1px 1px 1px #c6c4b7;
color: #212138;
letter-spacing: -0.01em;
}
h1 {
font-size: 2em;
font-size: 2.5em;
}
h2 {
font-size: 1.7em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.3em;
}
a {
color: inherit;
color: #2e2ed9;
text-decoration: none;
transition: 0.2s;
}
a:visited {
color: #9a2ed9;
}
a:hover {
color: #2e86d9;
text-decoration: underline;
}
code {
font-family: menlo, inconsolata, monospace;
font-size: calc(1em - 2px);
@ -33,8 +60,23 @@ code {
border-radius: 2px;
}
@media (min-width: 400px) {
p {
margin: 0;
}
::selection {
background: #0dd0d0;
}
@media only screen and (min-width: 400px) {
body {
font-size: 16px;
font-size: 18px;
}
}
@media only screen and (min-width: 700px) {
body {
font-size: 24px;
}
}

7
static/print.css Normal file
View File

@ -0,0 +1,7 @@
body {
font-size: 12px;
}
.app-content nav {
display: none;
}