ADD basics for material-blue
This commit is contained in:
pubkey
parent
e470e2538f
commit
470e55b871
137
resumes/resume-material-blue/index.mustache
Normal file
137
resumes/resume-material-blue/index.mustache
Normal file
@ -0,0 +1,137 @@
|
||||
<page class="a4" id="material-blue">
|
||||
<div class="leftCol m_box">
|
||||
<div class="heading" id="myselfpic">
|
||||
<div class="title">
|
||||
<h2>{{person.name.first}} {{person.name.last}}</h2>
|
||||
<div>{{person.position}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="fa fa-user"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<ul>
|
||||
<li>Born 1990 in FoobarTown</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="fa fa-location-arrow"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<ul>
|
||||
<li>{{person.contact.street}}</li>
|
||||
<li>{{person.contact.city}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="tel:{{person.contact.phone}}">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="fa fa-phone"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h4>{{person.contact.phone}}</h4>
|
||||
<span>mobil</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="mailto:{{person.contact.email}}">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h4>{{person.contact.email}}</h4>
|
||||
<span>private</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="{{person.contact.github}}" target="_blank">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h4>@{{person.contact.github}}</h4>
|
||||
<span>{{person.contact.github}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item last">
|
||||
<div class="icon">
|
||||
<i class="fa fa-cogs"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h3>Skills</h3>
|
||||
<div style="width: 100%; height: 15px;"></div>
|
||||
</div>
|
||||
{{#person.skills}}
|
||||
<div class="skill">
|
||||
<div class="right">
|
||||
<span>{{name}}</span>
|
||||
<div class="progress">
|
||||
<div class="determinate" style="width: {{level}}%;">
|
||||
<i class="fa fa-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/person.skills}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rightCol">
|
||||
|
||||
<div class="block">
|
||||
<div class="icon">
|
||||
<i class="fa fa-suitcase"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h2>Experience</h2>
|
||||
|
||||
{{#person.experience}}
|
||||
<div class="item">
|
||||
<h3>{{position}} - {{company}}</h3>
|
||||
<span>{{timeperiod}}</span>
|
||||
<p>
|
||||
{{description}}
|
||||
</p>
|
||||
</div>
|
||||
{{/person.experience}}
|
||||
</div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<div class="icon">
|
||||
<i class="fa fa-graduation-cap"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h2>Education</h2>
|
||||
|
||||
{{#person.education}}
|
||||
<div class="item">
|
||||
<h3>{{degree}}</h3>
|
||||
|
||||
<!-- TODO add time -->
|
||||
<span>Okt 2016 - vsl. März 2019</span>
|
||||
|
||||
<p> {{description}} </p>
|
||||
</div>
|
||||
{{/person.education}}
|
||||
</div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both;"></div>
|
||||
|
||||
</page>
|
||||
282
resumes/resume-material-blue/style.less
Normal file
282
resumes/resume-material-blue/style.less
Normal file
@ -0,0 +1,282 @@
|
||||
#material-blue {
|
||||
.c {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
font-family: 'roboto', sans-serif;
|
||||
background-color: #eae8e7;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: #767270;
|
||||
letter-spacing: 0.072em;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
|
||||
li,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 10pt;
|
||||
line-height: 17pt;
|
||||
}
|
||||
|
||||
.m_box {
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.fa {
|
||||
display: inline-block;
|
||||
font-family: FontAwesome;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 26px;
|
||||
}
|
||||
margin-top: 50px;
|
||||
background-color: #eae8e7;
|
||||
border: none;
|
||||
width: 846px;
|
||||
height: 1205px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22pt;
|
||||
line-height: 37pt;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 12pt;
|
||||
line-height: 20pt;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rightCol {
|
||||
width: 63.5%;
|
||||
height: 100%;
|
||||
float: right;
|
||||
|
||||
.block {
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
background-color: white;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.icon {
|
||||
width: 16%;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
|
||||
.fa {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 30pt;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
float: right;
|
||||
width: 80%;
|
||||
padding-right: 3%;
|
||||
text-align: left;
|
||||
|
||||
.item {
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
margin-top: 20px;
|
||||
|
||||
span {
|
||||
color: #5da4d9;
|
||||
margin-top: 0;
|
||||
font-size: 10pt;
|
||||
line-height: 16pt;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.item:last-of-type {
|
||||
border-bottom-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leftCol {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
background-color: #5da4d9;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.heading {
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
bottom: 25px;
|
||||
|
||||
span {
|
||||
margin-top: -5px;
|
||||
font-size: 10pt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 15pt;
|
||||
}
|
||||
}
|
||||
@paddingVertical: 13px;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
margin-top: @paddingVertical;
|
||||
float: left;
|
||||
|
||||
.icon {
|
||||
width: 20%;
|
||||
margin-top: 8px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fa {
|
||||
display: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
float: right;
|
||||
width: 69%;
|
||||
padding-right: 10%;
|
||||
padding-bottom: @paddingVertical;
|
||||
border-bottom: 1px solid #4783c2;
|
||||
|
||||
li {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.skill {
|
||||
clear: both;
|
||||
width: 77%;
|
||||
margin-left: 20%;
|
||||
padding-top: 4px;
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 10%;
|
||||
padding-top: 3px;
|
||||
|
||||
i {}
|
||||
|
||||
i:nth-child(2) {
|
||||
float: left;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 90%;
|
||||
|
||||
.progress {
|
||||
float: left;
|
||||
position: relative;
|
||||
height: 2px;
|
||||
display: block;
|
||||
width: 95%;
|
||||
background-color: #4783c2;
|
||||
border-radius: 2px;
|
||||
margin: 0.5rem 0 1rem;
|
||||
overflow: visible;
|
||||
|
||||
.determinate {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
.fa {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -2px;
|
||||
margin-left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item.last .text {
|
||||
border-bottom-style: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#myselfpic {
|
||||
background-image: url(/person.jpg);
|
||||
color: black;
|
||||
}
|
||||
|
||||
#githubIcon {
|
||||
width: 25px;
|
||||
padding-left: 17px;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user