...
 
Commits (3)
......@@ -12,8 +12,10 @@
<div id="content-wrapper">
<img class="me" src="./assets/me.jpg" alt="David Kudera">
<h1>David Kudera</h1>
<h3>DevOps & backend developer</h3>
<div class="headline">
<h1>David Kudera</h1>
<h3>DevOps & backend developer</h3>
</div>
<section>
<p>
......@@ -154,9 +156,9 @@
<h2>Skills</h2>
<section class="text-center">
<section class="skills">
<div class="row">
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
English<br>
<i class="material-icons">star</i>
......@@ -166,7 +168,7 @@
<i class="material-icons">star_outline</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
PHP<br>
<i class="material-icons">star</i>
......@@ -176,7 +178,7 @@
<i class="material-icons">star</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
Angular<br>
<i class="material-icons">star</i>
......@@ -186,7 +188,7 @@
<i class="material-icons">star_half</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
Docker<br>
<i class="material-icons">star</i>
......@@ -196,7 +198,7 @@
<i class="material-icons">star</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
Kubernetes<br>
<i class="material-icons">star</i>
......@@ -206,10 +208,7 @@
<i class="material-icons">star_outline</i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
PostgreSQL<br>
<i class="material-icons">star</i>
......@@ -219,7 +218,7 @@
<i class="material-icons">star_outline</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
Typescript<br>
<i class="material-icons">star</i>
......@@ -229,7 +228,7 @@
<i class="material-icons">star_half</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
Linux<br>
<i class="material-icons">star</i>
......@@ -239,7 +238,7 @@
<i class="material-icons">star_outline</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
Google Cloud<br>
<i class="material-icons">star</i>
......@@ -249,7 +248,7 @@
<i class="material-icons">star_outline</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
Node.JS<br>
<i class="material-icons">star</i>
......@@ -259,10 +258,7 @@
<i class="material-icons">star_half</i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
Vue.js<br>
<i class="material-icons">star</i>
......@@ -272,7 +268,7 @@
<i class="material-icons">star_outline</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
GIT<br>
<i class="material-icons">star</i>
......@@ -282,7 +278,7 @@
<i class="material-icons">star_outline</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
Nette<br>
<i class="material-icons">star</i>
......@@ -292,7 +288,7 @@
<i class="material-icons">star</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
Go<br>
<i class="material-icons">star</i>
......@@ -302,7 +298,7 @@
<i class="material-icons">star_outline</i>
</div>
</div>
<div class="col-lg">
<div class="col-lg-2 col-xs-12">
<div class="box">
C# & .Net Core<br>
<i class="material-icons">favorite</i>
......
......@@ -4154,6 +4154,12 @@
"resolve-from": "^3.0.0"
}
},
"include-media": {
"version": "1.4.9",
"resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.9.tgz",
"integrity": "sha1-0AILe+PrLVSGiiCUNZXOOA4LxDs=",
"dev": true
},
"indexes-of": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
......
......@@ -7,6 +7,7 @@
"minireset.css": "0.0.6"
},
"devDependencies": {
"include-media": "^1.4.9",
"parcel-bundler": "^1.12.4",
"sass": "^1.26.0",
"typescript": "^3.8.2"
......
import {initCalculateExperienceInYears} from './components/calculate-experience-in-years';
initCalculateExperienceInYears();
import('./components/calculate-experience-in-years')
.then((m) => m.initCalculateExperienceInYears());
.me {
width: 300px;
border-radius: 500px;
float: right;
margin: 0 50px 50px;
border-radius: 50rem;
width: 30rem;
}
@include media(">=desktop") {
.me {
float: right;
margin: 0 5rem 5rem;
}
}
@include media("<desktop") {
.me {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 5rem;
}
}
@include media("<tablet") {
.me {
width: 75vw;
}
}
.skills .row > div {
margin-bottom: 1rem;
}
@include media(">=desktop") {
.skills .row > div {
margin-bottom: 2rem;
}
}
......@@ -3,9 +3,9 @@ body {
}
section {
padding-right: 25px;
padding-left: 25px;
padding-bottom: 35px;
padding-right: 2.5rem;
padding-left: 2.5rem;
padding-bottom: 3.5rem;
}
article > section {
......@@ -13,20 +13,20 @@ article > section {
}
article {
margin-bottom: 30px;
margin-bottom: 3rem;
}
p, ul {
padding-bottom: 25px;
padding-bottom: 2.5rem;
}
li {
padding-bottom: 3px;
padding-bottom: 0.3rem;
}
li:before {
content: "•";
padding-right: 10px;
padding-right: 1rem;
}
dt, dd {
......@@ -34,5 +34,5 @@ dt, dd {
}
.row {
margin-bottom: 20px;
margin-bottom: 2rem;
}
......@@ -3,30 +3,50 @@ h1, h2, h3, h4 {
}
h1 {
font-size: 3vw;
margin-bottom: 20px;
font-size: 6rem;
margin-bottom: 2rem;
}
h2 {
font-size: 2vw;
padding-bottom: 4px;
padding-left: 10px;
margin-bottom: 40px;
font-size: 3.9rem;
padding-bottom: 0.4rem;
padding-left: 1rem;
margin-bottom: 4rem;
border-bottom: 1px solid $white;
}
h3 {
font-size: 1.2vw;
margin-bottom: 40px;
font-size: 2.3rem;
margin-bottom: 4rem;
}
h4 {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 25px;
margin-bottom: 2.5rem;
small {
font-weight: normal;
text-transform: none;
}
}
@include media("<desktop") {
h1 {
line-height: 7rem;
}
h2 {
line-height: 5rem;
}
h3 {
margin-bottom: 6rem;
margin-left: 1rem;
margin-right: 1rem;
}
.headline {
text-align: center;
}
}
body {
font-size: 0.95vw;
line-height: 30px;
font-size: 1.8rem;
line-height: 3rem;
color: $white-dark;
}
......@@ -20,9 +20,5 @@ dt {
}
footer {
font-size: 0.85vw;
}
.text-center {
text-align: center;
font-size: 1.6rem;
}
:root {
font-size: 62.5%;
}
@import "~minireset.css/minireset";
@import "../node_modules/include-media/dist/include-media";
@import "../node_modules/flexboxgrid/dist/flexboxgrid.css";
@import "core/colors";
......@@ -10,3 +15,4 @@
@import "layout/layout";
@import "components/me";
@import "components/skills";
#content-wrapper {
width: 1200px;
width: 120rem;
margin: 0 auto;
padding-top: 80px;
padding-bottom: 20px;
padding-top: 8rem;
padding-bottom: 2rem;
}
footer {
border-top: 1px dashed $white;
padding: 40px 30px 20px;
margin-top: 60px;
padding: 4rem 3rem 2rem;
margin-top: 6rem;
}
@include media("<=desktop") {
#content-wrapper {
width: 100%;
}
}