ADD index page
This commit is contained in:
salamimitpizza
parent
67874822e2
commit
42c459ee06
@ -2,7 +2,7 @@
|
||||
|
||||
Build your best resume ever!
|
||||
|
||||
A collection of beautiful Resumes build with LESS, Mustache Templates and JavaScript. Choose your favorite Curriculum Vitae and easily export it as pdf.
|
||||
A collection of beautiful resumes build with LESS and Mustache Templates. Choose your favorite Curriculum Vitae and easily export it as pdf.
|
||||
|
||||
## Install
|
||||
|
||||
|
||||
1
createPDF.sh
Normal file
1
createPDF.sh
Normal file
@ -0,0 +1 @@
|
||||
electroshot localhost:3000/resume-1 2481x3508 --format pdf --out pdf
|
||||
@ -1,13 +1,11 @@
|
||||
@import "resume-1.less";
|
||||
@brown: #774F38;
|
||||
@red: #E08E79;
|
||||
@blue: #C5E0DC;
|
||||
@powder: #ECE5CE;
|
||||
@creme: #F1D4AF;
|
||||
@white: #ffffff;
|
||||
@header: #4B5B6E;
|
||||
@background: #CCCCCC;
|
||||
@darkgrey: #343444;
|
||||
@briefcase: #F1F2DF;
|
||||
|
||||
body {
|
||||
background: rgb(204, 204, 204);
|
||||
background: @background;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -23,6 +21,51 @@ body {
|
||||
page-break-after: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.index-page {
|
||||
p {}
|
||||
|
||||
header {
|
||||
background: @header;
|
||||
color: white;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
h1 {
|
||||
.fa {
|
||||
color: @briefcase;
|
||||
margin-bottom: 10px;
|
||||
font-size: 70px;
|
||||
}
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.resume-collection {
|
||||
a.resume {
|
||||
img {
|
||||
height: 300px;
|
||||
width: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
body,
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
{
|
||||
"name": "beautifulcv",
|
||||
"name": "best-resume-ever",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "npm run less && node server.js",
|
||||
"server": "node server.js",
|
||||
"start": "npm run less && npm run server",
|
||||
"pdf": "bash createPDF.bash",
|
||||
"server": "ws --spa index.html",
|
||||
"pdf:win": "sh createPDF.sh",
|
||||
"less": "lessc --clean-css less/style.less public/style.min.css"
|
||||
},
|
||||
"repository": {
|
||||
|
||||
Binary file not shown.
BIN
public/preview/resume-1.png
Normal file
BIN
public/preview/resume-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
2
public/style.min.css
vendored
2
public/style.min.css
vendored
@ -1 +1 @@
|
||||
#resume1 body{font-family:'Source Sans Pro',sans-serif}#resume1 h3{padding-top:20px;margin-bottom:0}#resume1 a,#resume1 a:focus,#resume1 a:hover,#resume1 a:visited{color:#616161}#resume1 span{display:inline-block}#resume1 .row{width:100%}#resume1 .half{width:44%}#resume1 .left{float:left;text-align:right;padding-left:4%;padding-right:2%}#resume1 .right{float:right;text-align:left;padding-right:4%;padding-left:2%}#resume1 .center{margin-left:auto;margin-right:auto}#resume1 .text-center{text-align:center}#resume1 .name{border:1px solid #000;text-transform:uppercase;padding:10px 20px;margin-top:80px;margin-bottom:5px;font-family:'Open Sans',sans-serif;font-size:25px;font-weight:700;letter-spacing:5px}#resume1 .position{text-transform:uppercase;font-family:'Open Sans',sans-serif;font-size:smaller;color:#757575;margin-bottom:40px}#resume1 .image{width:100px;height:100px;margin-top:50px;margin-bottom:50px}#resume1 .image img{width:100%;height:100%;border-radius:50%}#resume1 .contact,#resume1 .experience,#resume1 .experience-block{width:100%}#resume1 .experience-block span{width:100%}#resume1 .education-block span.degree,#resume1 .experience-block span.company{font-weight:700;padding-bottom:10px;padding-top:20px;color:#424242}#resume1 .education-block span.degree-description,#resume1 .experience-block span.job-description,#resume1 .experience-block span.time-period,#resume1 .skills-other{color:#616161}#resume1 .experience-block span.job-title{font-style:italic;color:#616161}#resume1 .skill-block{display:flex;padding-bottom:10px}#resume1 .skill-block .skill{width:100px;color:#616161}#resume1 .skill-block .skill-bar{background:#E0E0E0;overflow:hidden;height:8px;flex:1;border-radius:3px;margin-top:6.5px;position:relative}#resume1 .skill-bar .level{background:#757575;height:100%}#resume1 .skills{margin-top:20px;margin-bottom:20px}#resume1 .contact table{text-align:right;float:right;margin-top:20px}#resume1 .contact table i{padding:5px;color:#616161}#resume1 .contact table tr td:nth-child(2){vertical-align:top}#resume1 .contact table{color:#616161}body{background:#ccc;font-family:'Open Sans',sans-serif;margin:0;padding:0;-webkit-print-color-adjust:exact;box-sizing:border-box}body page{background:#fff;position:relative;width:21cm;height:297mm;display:block;page-break-after:auto;overflow:hidden}@media print{body,page{margin:0;box-shadow:0;width:100%;height:100%}}
|
||||
#resume1 body{font-family:'Source Sans Pro',sans-serif}#resume1 h3{padding-top:20px;margin-bottom:0}#resume1 a,#resume1 a:focus,#resume1 a:hover,#resume1 a:visited{color:#616161}#resume1 span{display:inline-block}#resume1 .row{width:100%}#resume1 .half{width:44%}#resume1 .left{float:left;text-align:right;padding-left:4%;padding-right:2%}#resume1 .right{float:right;text-align:left;padding-right:4%;padding-left:2%}#resume1 .center{margin-left:auto;margin-right:auto}#resume1 .text-center{text-align:center}#resume1 .name{border:1px solid #000;text-transform:uppercase;padding:10px 20px;margin-top:80px;margin-bottom:5px;font-family:'Open Sans',sans-serif;font-size:25px;font-weight:700;letter-spacing:5px}#resume1 .position{text-transform:uppercase;font-family:'Open Sans',sans-serif;font-size:smaller;color:#757575;margin-bottom:40px}#resume1 .image{width:100px;height:100px;margin-top:50px;margin-bottom:50px}#resume1 .image img{width:100%;height:100%;border-radius:50%}#resume1 .contact,#resume1 .experience,#resume1 .experience-block{width:100%}#resume1 .experience-block span{width:100%}#resume1 .education-block span.degree,#resume1 .experience-block span.company{font-weight:700;padding-bottom:10px;padding-top:20px;color:#424242}#resume1 .education-block span.degree-description,#resume1 .experience-block span.job-description,#resume1 .experience-block span.time-period,#resume1 .skills-other{color:#616161}#resume1 .experience-block span.job-title{font-style:italic;color:#616161}#resume1 .skill-block{display:flex;padding-bottom:10px}#resume1 .skill-block .skill{width:100px;color:#616161}#resume1 .skill-block .skill-bar{background:#E0E0E0;overflow:hidden;height:8px;flex:1;border-radius:3px;margin-top:6.5px;position:relative}#resume1 .skill-bar .level{background:#757575;height:100%}#resume1 .skills{margin-top:20px;margin-bottom:20px}#resume1 .contact table{text-align:right;float:right;margin-top:20px}#resume1 .contact table i{padding:5px;color:#616161}#resume1 .contact table tr td:nth-child(2){vertical-align:top}#resume1 .contact table{color:#616161}body{background:#CCC;font-family:'Open Sans',sans-serif;margin:0;padding:0;-webkit-print-color-adjust:exact;box-sizing:border-box}body page{background:#fff;position:relative;width:21cm;height:297mm;display:block;page-break-after:auto;overflow:hidden}body .index-page header{background:#4B5B6E;color:#fff;padding-top:100px;padding-bottom:100px}body .index-page header h1{width:100%;text-align:center}body .index-page header h1 .fa{color:#F1F2DF;margin-bottom:10px;font-size:70px}body .index-page main{padding-left:5%;padding-right:5%}body .index-page main p{font-size:20px}body .index-page main .resume-collection a.resume img{height:300px;width:auto;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:all .3s cubic-bezier(.25,.8,.25,1)}body .index-page main .resume-collection a.resume img:hover{box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}@media print{body,page{margin:0;box-shadow:0;width:100%;height:100%}}
|
||||
@ -0,0 +1,33 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="/style.min.css" rel="stylesheet">
|
||||
<title>Best resume ever</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="index-page">
|
||||
<header>
|
||||
<h1>
|
||||
<i class="fa fa-briefcase"></i>
|
||||
<br>
|
||||
best-resume-ever
|
||||
</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>Click one of the resumes to preview.</p>
|
||||
<div class="resume-collection">
|
||||
<a class="resume" href="/resume-1">
|
||||
<img src="/preview/resume-1.png" />
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -10,10 +10,9 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<page class="a4">
|
||||
|
||||
{{> content}}
|
||||
</page>
|
||||
|
||||
{{> content}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,76 +1,78 @@
|
||||
<div id="resume1">
|
||||
<div class="row text-center">
|
||||
<span class="name">{{person.name}}</span>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="position center">{{person.position}}</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="image center">
|
||||
<img src="/person.jpg" />
|
||||
<page class="a4">
|
||||
<div id="resume1">
|
||||
<div class="row text-center">
|
||||
<span class="name">{{person.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left half">
|
||||
<div class="experience">
|
||||
<h3>Experience</h3>
|
||||
{{#person.experience}}
|
||||
<div class="experience-block">
|
||||
<span class="company"> {{company}} </span>
|
||||
<span class="job-title"> {{position}} </span>
|
||||
<span class="time-period"> {{timeperiod}}</span>
|
||||
<span class="job-description"> {{description}} </span>
|
||||
</div>
|
||||
{{/person.experience}}
|
||||
<div class="row text-center">
|
||||
<p class="position center">{{person.position}}</p>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>Contact</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="mailto:{{person.contact.email}}">{{person.contact.email}}</a></td>
|
||||
<td><i class="fa fa-envelope" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="tel:{{person.contact.phone}}">{{person.contact.phone}}</a></td>
|
||||
<td><i class="fa fa-phone" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{person.contact.street}} <br> {{person.contact.city}}</td>
|
||||
<td><i class="fa fa-home" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="{{person.contact.website}}">{{person.contact.website}}</a></td>
|
||||
<td><i class="fa fa-globe" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="{{person.contact.github}}">{{person.contact.github}}</a></td>
|
||||
<td><i class="fa fa-github" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="image center">
|
||||
<img src="/person.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right half">
|
||||
<div class="education">
|
||||
<h3>Education</h3>
|
||||
{{#person.education}}
|
||||
<div class="education-block">
|
||||
<span class="degree">{{degree}}</span>
|
||||
<span class="degree-description">{{description}}</span>
|
||||
</div>
|
||||
{{/person.education}}
|
||||
</div>
|
||||
<h3>Skills</h3>
|
||||
<div class="skills">
|
||||
{{#person.skills}}
|
||||
<div class="skill-block">
|
||||
<span class="skill">{{name}}</span>
|
||||
<div class="skill-bar">
|
||||
<div style="width: {{level}}%" class="level"> </div>
|
||||
<div class="left half">
|
||||
<div class="experience">
|
||||
<h3>Experience</h3>
|
||||
{{#person.experience}}
|
||||
<div class="experience-block">
|
||||
<span class="company"> {{company}} </span>
|
||||
<span class="job-title"> {{position}} </span>
|
||||
<span class="time-period"> {{timeperiod}}</span>
|
||||
<span class="job-description"> {{description}} </span>
|
||||
</div>
|
||||
</div>
|
||||
{{/person.skills}}
|
||||
{{/person.experience}}
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>Contact</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="mailto:{{person.contact.email}}">{{person.contact.email}}</a></td>
|
||||
<td><i class="fa fa-envelope" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="tel:{{person.contact.phone}}">{{person.contact.phone}}</a></td>
|
||||
<td><i class="fa fa-phone" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{person.contact.street}} <br> {{person.contact.city}}</td>
|
||||
<td><i class="fa fa-home" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="{{person.contact.website}}">{{person.contact.website}}</a></td>
|
||||
<td><i class="fa fa-globe" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="{{person.contact.github}}">{{person.contact.github}}</a></td>
|
||||
<td><i class="fa fa-github" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right half">
|
||||
<div class="education">
|
||||
<h3>Education</h3>
|
||||
{{#person.education}}
|
||||
<div class="education-block">
|
||||
<span class="degree">{{degree}}</span>
|
||||
<span class="degree-description">{{description}}</span>
|
||||
</div>
|
||||
{{/person.education}}
|
||||
</div>
|
||||
<h3>Skills</h3>
|
||||
<div class="skills">
|
||||
{{#person.skills}}
|
||||
<div class="skill-block">
|
||||
<span class="skill">{{name}}</span>
|
||||
<div class="skill-bar">
|
||||
<div style="width: {{level}}%" class="level"> </div>
|
||||
</div>
|
||||
</div>
|
||||
{{/person.skills}}
|
||||
</div>
|
||||
<span class="skills-other"> {{person.skillDescription}} </span>
|
||||
</div>
|
||||
<span class="skills-other"> {{person.skillDescription}} </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</page>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user