diff --git a/README.md b/README.md index d0146f5..acd34f4 100755 --- a/README.md +++ b/README.md @@ -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 diff --git a/createPDF.sh b/createPDF.sh new file mode 100644 index 0000000..319065c --- /dev/null +++ b/createPDF.sh @@ -0,0 +1 @@ +electroshot localhost:3000/resume-1 2481x3508 --format pdf --out pdf diff --git a/less/style.less b/less/style.less index d8b2651..f158f15 100755 --- a/less/style.less +++ b/less/style.less @@ -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, diff --git a/package.json b/package.json index efbac97..493b9d8 100755 --- a/package.json +++ b/package.json @@ -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": { diff --git a/pdf/localhost-resume-1-2481x3508.pdf b/pdf/localhost-resume-1-2481x3508.pdf index 2a2ef57..b216b61 100644 Binary files a/pdf/localhost-resume-1-2481x3508.pdf and b/pdf/localhost-resume-1-2481x3508.pdf differ diff --git a/public/preview/resume-1.png b/public/preview/resume-1.png new file mode 100644 index 0000000..f772c9c Binary files /dev/null and b/public/preview/resume-1.png differ diff --git a/public/style.min.css b/public/style.min.css index ffd5d8a..34974a3 100755 --- a/public/style.min.css +++ b/public/style.min.css @@ -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%}} \ No newline at end of file +#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%}} \ No newline at end of file diff --git a/templates/index.mustache b/templates/index.mustache index e69de29..c8f314a 100755 --- a/templates/index.mustache +++ b/templates/index.mustache @@ -0,0 +1,33 @@ + + + + + + + + + Best resume ever + + + +
+
+

+ +
+ best-resume-ever +

+
+
+

Click one of the resumes to preview.

+
+ + + +
+
+
+ + + + diff --git a/templates/layout.mustache b/templates/layout.mustache index 0f31357..d74b1f0 100755 --- a/templates/layout.mustache +++ b/templates/layout.mustache @@ -10,10 +10,9 @@ - - {{> content}} - + + {{> content}} diff --git a/templates/resume-1.mustache b/templates/resume-1.mustache index 076e973..ead47ef 100755 --- a/templates/resume-1.mustache +++ b/templates/resume-1.mustache @@ -1,76 +1,78 @@ -
-
- {{person.name}} -
-
-

{{person.position}}

-
-
-
- + +
+
+ {{person.name}}
-
-
-
-

Experience

- {{#person.experience}} -
- {{company}} - {{position}} - {{timeperiod}} - {{description}} -
- {{/person.experience}} +
+

{{person.position}}

-
-

Contact

- - - - - - - - - - - - - - - - - - - - - -
{{person.contact.email}}
{{person.contact.phone}}
{{person.contact.street}}
{{person.contact.city}}
{{person.contact.website}}
{{person.contact.github}}
+
+
+ +
-
-
-
-

Education

- {{#person.education}} -
- {{degree}} - {{description}} -
- {{/person.education}} -
-

Skills

-
- {{#person.skills}} -
- {{name}} -
-
+
+
+

Experience

+ {{#person.experience}} +
+ {{company}} + {{position}} + {{timeperiod}} + {{description}}
-
- {{/person.skills}} + {{/person.experience}} +
+
+

Contact

+ + + + + + + + + + + + + + + + + + + + + +
{{person.contact.email}}
{{person.contact.phone}}
{{person.contact.street}}
{{person.contact.city}}
{{person.contact.website}}
{{person.contact.github}}
+
+
+
+
+

Education

+ {{#person.education}} +
+ {{degree}} + {{description}} +
+ {{/person.education}} +
+

Skills

+
+ {{#person.skills}} +
+ {{name}} +
+
+
+
+ {{/person.skills}} +
+ {{person.skillDescription}}
- {{person.skillDescription}}
-
-
+
+