diff --git a/less/style.less b/less/style.less index f158f15..d517074 100755 --- a/less/style.less +++ b/less/style.less @@ -1,8 +1,9 @@ @import "resume-1.less"; +@import "resume-2.less"; @header: #4B5B6E; @background: #CCCCCC; @darkgrey: #343444; -@briefcase: #F1F2DF; +@main: #E77171; body { background: @background; @@ -28,30 +29,72 @@ body { header { background: @header; color: white; - padding-top: 100px; - padding-bottom: 100px; + padding-top: 10px; + padding-bottom: 10px; - h1 { - .fa { - color: @briefcase; - margin-bottom: 10px; - font-size: 70px; + #forkme { + cursor: pointer; + display: block; + position: absolute; + top: 0; + right: 10%; + z-index: 10; + padding: 10px; + color: #fff; + background: @main; + font-weight: 700; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + } + + .content { + width: 80%; + margin-right: auto; + margin-left: auto; + + .logo { + display: inline-block; + position: relative; + + .fa { + color: white; + margin-bottom: 10px; + font-size: 70px; + float: left; + margin-right: 10px; + margin-top: 15px; + } + + h1 { + float: left; + margin-top: 27px; + } } - width: 100%; - text-align: center; } } main { padding-left: 5%; padding-right: 5%; + width: 80%; + margin-left: auto; + margin-right: auto; + padding-top: 50px; p { font-size: 20px; } .resume-collection { - a.resume { + h3 { + font-size: 30px; + } + + .resume { + display: inline-block; + text-decoration: none; + img { height: 300px; width: auto; @@ -62,6 +105,14 @@ body { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } } + + .resume-title { + text-align: center; + display: block; + text-decoration: none; + margin-top: 10px; + color: black; + } } } } diff --git a/public/style.min.css b/public/style.min.css index 34974a3..4a88e89 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}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 +#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}.rightCol{width:63.5%;height:100%;float:right}.rightCol .block{box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);width:100%;min-height:50px;background-color:#fff;padding-top:24px;padding-bottom:10px;margin-bottom:15px}.rightCol .block .icon{width:16%;float:left;margin-left:0}.rightCol .block .icon .fa{text-align:center;display:block;font-size:30pt}.rightCol .block .content{float:right;width:80%;padding-right:3%;text-align:left}.rightCol .block .content .item{border-bottom:1px solid #bdbdbd;margin-top:20px}.rightCol .block .content .item span{color:#5da4d9;margin-top:0;font-size:10pt;line-height:16pt}.rightCol .block .content .item p{margin-top:5px}.rightCol .block .content .item.last{border-bottom-style:none}.leftCol{width:35%;height:100%;float:left;padding:0;text-align:left;color:#fff;background-color:#5da4d9;overflow:hidden;display:block}.leftCol a{color:#fff;text-decoration:none}.leftCol .heading{background-color:#fff;background-repeat:no-repeat;background-size:cover;background-position:center;position:relative;width:100%;height:340px}.leftCol .title{position:absolute;right:25px;bottom:25px}.leftCol .title span{margin-top:-5px;font-size:10pt;margin:0;padding:0;line-height:15pt}.leftCol .item{width:100%;margin-top:13px;float:left}.leftCol .item .icon{width:20%;margin-top:8px;float:left}.leftCol .item .fa{display:inherit;text-align:center}.leftCol .item .text{float:right;width:69%;padding-right:10%;padding-bottom:13px;border-bottom:1px solid #4783c2}.leftCol .item .text li{padding-top:0}.leftCol .item span{font-weight:300}.leftCol .item .skill{clear:both;width:77%;margin-left:20%;padding-top:4px}.leftCol .item .skill .left{float:left;width:10%;padding-top:3px}.leftCol .item .skill .left i:nth-child(2){float:left;padding-top:4px}.leftCol .item .skill .right{float:right;width:90%}.leftCol .item .skill .right .progress{float:left;position:relative;height:2px;display:block;width:95%;background-color:#4783c2;border-radius:2px;margin:.5rem 0 1rem;overflow:visible}.leftCol .item .skill .right .progress .determinate{background-color:#fff;position:absolute;top:0;bottom:0}.leftCol .item .skill .right .progress .determinate .fa{font-size:12px;position:absolute;top:-6px;right:-2px;margin-left:50%}.leftCol .item.last .text{border-bottom-style:none;padding-bottom:0}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:10px;padding-bottom:10px}body .index-page header #forkme{cursor:pointer;display:block;position:absolute;top:0;right:10%;z-index:10;padding:10px;color:#fff;background:#E77171;font-weight:700;box-shadow:0 0 10px rgba(0,0,0,.5);border-bottom-left-radius:2px;border-bottom-right-radius:2px}body .index-page header .content{width:80%;margin-right:auto;margin-left:auto}body .index-page header .content .logo{display:inline-block;position:relative}body .index-page header .content .logo .fa{color:#fff;margin-bottom:10px;font-size:70px;float:left;margin-right:10px;margin-top:15px}body .index-page header .content .logo h1{float:left;margin-top:27px}body .index-page main{padding-left:5%;padding-right:5%;width:80%;margin-left:auto;margin-right:auto;padding-top:50px}body .index-page main p{font-size:20px}body .index-page main .resume-collection h3{font-size:30px}body .index-page main .resume-collection .resume{display:inline-block;text-decoration:none}body .index-page main .resume-collection .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 .resume img:hover{box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}body .index-page main .resume-collection .resume .resume-title{text-align:center;display:block;text-decoration:none;margin-top:10px;color:#000}@media print{body,page{margin:0;box-shadow:0;width:100%;height:100%}} \ No newline at end of file diff --git a/server.js b/server.js index 3c18916..c574115 100755 --- a/server.js +++ b/server.js @@ -30,6 +30,15 @@ app.get('/resume-1', function(req, res) { }); }); +app.get('/resume-2', function(req, res) { + res.render('layout', { + partials: { + content: 'resume-2' + }, + person: person + }); +}); + app.listen(3000, '0.0.0.0', function() { console.log('Listening on localhost:3000!'); }); diff --git a/templates/index.mustache b/templates/index.mustache index c8f314a..6226ba4 100755 --- a/templates/index.mustache +++ b/templates/index.mustache @@ -12,19 +12,27 @@
-

- -
- best-resume-ever -

+ +
View on Github
+ +
+ +
-

Click one of the resumes to preview.

-
+
+

Resumes

+

Click one of the resumes to preview.

+ Resume 1 -
+