├── src
├── views
│ ├── fragments
│ │ ├── footer.jade
│ │ ├── dinosaur.jade
│ │ ├── layout.jade
│ │ ├── side.jade
│ │ └── middle.jade
│ └── index.jade
├── assets
│ ├── github.png
│ ├── linkedin.png
│ ├── profile-pic-1.jpg
│ └── profile-pic-2.jpg
├── scripts
│ └── page-actions.coffee
├── styles
│ └── basic.sass
└── locals.json
├── .gitignore
├── .bowerrc
├── examples
├── example-2.jpg
├── example-2.png
├── example-3.jpg
├── example-3.png
├── example-4.png
├── example-locals-2.json
├── example-locals-3.json
└── example-locals-4.json
├── server.js
├── package.json
├── gulpfile.js
└── readme.md
/src/views/fragments/footer.jade:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | production
--------------------------------------------------------------------------------
/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 | "directory": "production/bower_components/"
3 | }
--------------------------------------------------------------------------------
/src/assets/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lissy93/md-cv-maker/HEAD/src/assets/github.png
--------------------------------------------------------------------------------
/examples/example-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lissy93/md-cv-maker/HEAD/examples/example-2.jpg
--------------------------------------------------------------------------------
/examples/example-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lissy93/md-cv-maker/HEAD/examples/example-2.png
--------------------------------------------------------------------------------
/examples/example-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lissy93/md-cv-maker/HEAD/examples/example-3.jpg
--------------------------------------------------------------------------------
/examples/example-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lissy93/md-cv-maker/HEAD/examples/example-3.png
--------------------------------------------------------------------------------
/examples/example-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lissy93/md-cv-maker/HEAD/examples/example-4.png
--------------------------------------------------------------------------------
/src/assets/linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lissy93/md-cv-maker/HEAD/src/assets/linkedin.png
--------------------------------------------------------------------------------
/src/assets/profile-pic-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lissy93/md-cv-maker/HEAD/src/assets/profile-pic-1.jpg
--------------------------------------------------------------------------------
/src/assets/profile-pic-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lissy93/md-cv-maker/HEAD/src/assets/profile-pic-2.jpg
--------------------------------------------------------------------------------
/src/views/index.jade:
--------------------------------------------------------------------------------
1 | extend fragments/layout
2 | block content
3 |
4 | .row
5 | .col.s12.m3.side-bar.z-depth-1
6 | include ./fragments/side
7 | .col.s12.m9
8 | include ./fragments/middle
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 |
2 | var connect = require('connect');
3 | var serveStatic = require('serve-static');
4 |
5 | connect().use(serveStatic(__dirname+'/production')).listen(8080, function(){
6 | console.log('Server running on 8080...');
7 | });
--------------------------------------------------------------------------------
/src/scripts/page-actions.coffee:
--------------------------------------------------------------------------------
1 | # Set the color of the content links to template color
2 | links = document.getElementsByTagName('a')
3 | i = 0
4 | while i < links.length
5 | if links[i].href
6 | links[i].className += textColor
7 | i++
8 |
--------------------------------------------------------------------------------
/src/views/fragments/dinosaur.jade:
--------------------------------------------------------------------------------
1 |
2 | |
--------------------------------------------------------------------------------
/src/views/fragments/layout.jade:
--------------------------------------------------------------------------------
1 | include ./dinosaur.jade
2 |
3 | doctype html
4 | html
5 | head
6 | meta(charset='utf-8')
7 | meta(name='viewport', content='width=device-width, initial-scale=1')
8 | title= title
9 | link(href='https://fonts.googleapis.com/icon?family=Material+Icons', rel='stylesheet')
10 | link(rel='stylesheet', href='lib/node_modules/materialize-css/dist/css/materialize.min.css')
11 | link(rel='stylesheet', href='css/styles.css')
12 |
13 | body.grey.lighten-3
14 | block content
15 | script.
16 | var textColor = " #{design.color}-text"
17 | script(src="js/scripts.js")
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "CV",
3 | "version": "1.0.0",
4 | "description": "Alicia Sykes Curriculum Vitae",
5 | "main": "server.js",
6 | "repository": "https://github.com/Lissy93/website",
7 | "scripts": {
8 | "test": "gulp test",
9 | "build": "gulp build",
10 | "watch": "gulp watch",
11 | "serve": "node server",
12 | "postinstall": "gulp build"
13 | },
14 | "author": "Alicia Sykes",
15 | "license": "MIT",
16 | "devDependencies": {
17 | "coffeelint-stylish": "^0.1.2",
18 | "del": "^2.2.0",
19 | "gulp": "^3.9.1",
20 | "gulp-clean-css": "^2.0.7",
21 | "gulp-coffee": "^2.3.2",
22 | "gulp-concat": "^2.6.0",
23 | "gulp-copy": "^4.0.1",
24 | "gulp-jade": "^1.1.0",
25 | "gulp-sass": "^2.3.1",
26 | "gulp-uglify": "^1.5.3",
27 | "gulp-util": "^3.0.7"
28 | },
29 | "dependencies": {
30 | "connect": "^3.4.1",
31 | "materialize-css": "^1.0.0",
32 | "serve-static": "^1.10.2"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/views/fragments/side.jade:
--------------------------------------------------------------------------------
1 | header(class="#{design.color}")
2 | .card
3 | .card-image.show-on-medium-and-up
4 | img.profile-pic(src="#{headshot.url}", alt="#{headshot.alt}")
5 | h1.card-title= heading1
6 |
7 | .bio-container.z-depth-1
8 | h2(style='margin: 0 0 0.2em 1em') About
9 | .row
10 | i.col.s2.small.white-text.material-icons perm_identity
11 | span.col.s10.white-text!= bio.join(" ").replace(/\n/g, "
")
12 |
13 | - if (typeof(contact) !== 'undefined'){
14 | .contact-container
15 | h2 Contact
16 | - if (typeof(contact.email) !== 'undefined'){
17 | .row
18 | i.col.s2.small.white-text.material-icons email
19 | a(href="mailto:#{contact.email}").col.s10.white-text= contact.email
20 | - }
21 | - if (typeof(contact.phone) !== 'undefined'){
22 | .row
23 | i.col.s2.small.white-text.material-icons phone
24 | a(href="dialer:#{contact.phone}").col.s10.white-text= contact.phone
25 | - }
26 | - if (typeof(contact.address) !== 'undefined'){
27 | .row
28 | i.col.s2.small.white-text.material-icons location_on
29 | span.col.s10.white-text= contact.address
30 | - }
31 | - }
32 |
33 | - if (typeof(social) !== 'undefined'){
34 | .links-container
35 | h2 Links
36 | - if (typeof(contact.website) !== 'undefined'){
37 | .row
38 | i.col.s2.small.white-text.material-icons http
39 | a(href='http://#{contact.website}').col.s10.white-text= contact.website
40 | - }
41 | - if (typeof(social.github) !== 'undefined'){
42 | .row
43 | .col.s2: img(src='assets/github.png')
44 | a(href='https://#{social.github}').col.s10.white-text= social.github
45 | - }
46 | - if (typeof(social.linkedin) !== 'undefined'){
47 | .row
48 | .col.s2: img(src='assets/linkedin.png')
49 | a(href='https://#{social.linkedin}').col.s10.white-text= social.linkedin
50 | - }
51 | - }
52 |
--------------------------------------------------------------------------------
/src/styles/basic.sass:
--------------------------------------------------------------------------------
1 |
2 | .hide-on-computer
3 | display: none
4 |
5 | html, body, .row, .side-bar, header
6 | height: 100%
7 |
8 | /* SIDEBAR */
9 | .side-bar
10 | padding: 0 !important
11 | header
12 | overflow-x: hidden
13 | overflow-y: auto
14 | width: inherit
15 | @media (min-width: 601px)
16 | position: fixed
17 | .card
18 | background: inherit
19 | margin: 0
20 | .card-image .profile-pic
21 | width: 100%
22 | .contact-container, .links-container
23 | .row
24 | margin: 15px 0
25 | .col img
26 | width: 25px
27 | .bio-container
28 | padding: 20px 0
29 | background: rgba(255, 255, 255, 0.4)
30 | .skills-container
31 | padding: 20px 0
32 | margin-bottom: 20px
33 | background: rgba(255,255,255,0.25)
34 |
35 | /* MAIN CONTENT */
36 | .main-content
37 | margin: 20px auto
38 | width: 90%
39 | p:not(:last-child)
40 | padding-bottom: 15px
41 | border-bottom: 1px solid #e2e2e2
42 |
43 | .pad
44 | padding: 1em !important
45 |
46 |
47 | /* TEXT */
48 | a
49 | color: #008ece
50 |
51 | a:hover
52 | text-decoration: underline
53 |
54 |
55 | h1
56 | background: rgba(0,0,0,0.6)
57 | h2
58 | font-size: 1.8em
59 | font-weight: 200
60 | color: #FFFFFF
61 | text-shadow: 1px 1px 1px rgba(0,0,0,0.3)
62 | margin: 0.5em 0 0 1em
63 |
64 | h4
65 | font-weight: 400
66 | color: #9e9e9e
67 |
68 | h5
69 | margin-bottom: 0
70 |
71 |
72 | /* OVERIDING STYLES FOR THE PRINTER VERSION*/
73 | @media print
74 | .hide-on-computer
75 | display: block
76 |
77 | .main-content
78 | width: 100%
79 | margin: 0
80 |
81 | .col
82 | border-bottom: 1px solid grey
83 |
84 | .pad
85 | padding: 0 !important
86 |
87 | .side-bar, i
88 | display: none !important
89 |
90 | p, b, span, a, div, h1, h2, h3, h4, h5, h6
91 | color: #000000 !important
92 |
93 | b, span
94 | display: inline
95 |
96 | div
97 | box-shadow: none !important
98 |
99 | p, span
100 | font-size: 0.9em
101 | line-height: 1
102 |
103 | h1
104 | background: none
105 | text-align: center
106 | font-size: 1.8em
107 | margin: 0
108 | padding: 0
109 |
110 | h4
111 | font-size: 1.6em
112 | margin: 0
113 | padding: 0
114 |
115 | h5
116 | font-size: 1.1em
117 | font-weight: normal
118 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 |
2 | var gulp = require('gulp');
3 | var gutil = require ('gulp-util');
4 | var del = require('del');
5 | var jade = require('gulp-jade');
6 | var coffee = require('gulp-coffee');
7 | var concat = require('gulp-concat');
8 | var uglify = require('gulp-uglify');
9 | var sass = require('gulp-sass');
10 | var copy = require('gulp-copy');
11 | var cleanCSS= require('gulp-clean-css');
12 |
13 |
14 | // Compile Jade views into HTML
15 | gulp.task('views', function() {
16 | locals = require('./src/locals.json');
17 | gulp.src('./src/views/*.jade')
18 | .pipe(jade({locals: locals}))
19 | .pipe(gulp.dest('./production/'))
20 | });
21 |
22 |
23 | // Compile CoffeeScript into JS, concat and minify
24 | gulp.task('coffee', function() {
25 | gulp.src('./src/scripts/**/*.coffee')
26 | .pipe(coffee({bare: true}).on('error', gutil.log))
27 | .pipe(concat('scripts.js'))
28 | .pipe(uglify())
29 | .pipe(gulp.dest('./production/js'));
30 | });
31 |
32 |
33 | // Compile SASS into CSS, concat and minify
34 | gulp.task('sass', function () {
35 | return gulp.src('./src/styles/basic.sass')
36 | .pipe(sass().on('error', gutil.log))
37 | .pipe(concat('styles.css'))
38 | .pipe(cleanCSS({compatibility: 'ie8'}))
39 | .pipe(gulp.dest('./production/css'));
40 | });
41 |
42 |
43 | // Copy all static assets to production
44 | gulp.task('assets', function () {
45 | return gulp.src('./src/assets/**/*')
46 | .pipe(gulp.dest('./production/assets'));
47 | });
48 |
49 |
50 | // Watch source for changes, and run appropriate task
51 | gulp.task('watch', function() {
52 | gulp.watch('src/views/**/*.jade', ['views'] );
53 | gulp.watch('src/scripts/**/*.coffee', ['coffee'] );
54 | gulp.watch('src/styles/**/*.sass', ['sass'] );
55 | gulp.watch('src/assets/**/*', ['assets'] );
56 | gulp.watch('src/locals.json', ['build']);
57 | });
58 |
59 |
60 | // Run tests
61 | gulp.task('test', function(){
62 | gutil.log(gutil.colors.yellow(
63 | 'No tests have been configured in the gulpfile yet.'
64 | ));
65 | });
66 |
67 |
68 | // Copy lib files
69 | gulp.task('lib', function(){
70 | listOfLibraries = ['node_modules/materialize-css/dist/css/materialize.min.css']
71 | return gulp
72 | .src(listOfLibraries)
73 | .pipe(copy('production/lib'))
74 | });
75 |
76 |
77 | // Delete production files
78 | gulp.task('clean', function () {
79 | return del([ 'production' ]);
80 | });
81 |
82 |
83 | // Build complete project
84 | gulp.task('build', ['clean'], function(){
85 | gulp.start('views', 'coffee', 'sass', 'assets', 'lib');
86 | gutil.beep(); // Delete this line if you don't like the sound effects!
87 | });
88 |
89 |
90 | // Default task - build the project then run tests
91 | gulp.task('default', ['build'], function(){
92 | gulp.start('test');
93 | });
94 |
--------------------------------------------------------------------------------
/src/views/fragments/middle.jade:
--------------------------------------------------------------------------------
1 |
2 | .main-content
3 | .row
4 | .hide-on-computer
5 | h1=heading1
6 | - if (typeof(bio) !== 'undefined'){
7 | h4 perm_identity About
8 | .col.s12.card-panel
9 | p!= bio.join(" ").replace(/\n/g, "
")
10 | - }
11 |
12 | - if (typeof(employment) !== 'undefined'){
13 | h4 assignment Employment
14 | .col.s12.card-panel
15 | for job in employment
16 | h5 #{job.role} @ #{job.place}
17 | small.grey-text= job.dates
18 | p!= job.description.join(" ")
19 | - }
20 |
21 | - if (typeof(experience) !== 'undefined'){
22 | h4 done_all Other Experience
23 | .col.s12.card-panel
24 | for stuff in experience
25 | h5 #{stuff.title}
26 | small.grey-text= stuff.subtitle
27 | p!= stuff.description.join(" ")
28 | - }
29 |
30 |
31 | - if (typeof(education) !== 'undefined'){
32 | h4 class Education
33 | .col.s12.card-panel
34 | for school in education
35 | h5 #{school.course} @ #{school.establishment}
36 | small.grey-text= school.dates
37 | p= school.description.join(" ")
38 | - }
39 |
40 |
41 |
42 | - if (typeof(skills) !== 'undefined'){
43 | h4 list Key Skills
44 | .col.s12.card-panel
45 | for skill in skills
46 | span(style='font-size:#{(skill.level / 6)+0.6}em; cursor: default', title='#{skill.type}: #{skill.name}. Competency: #{skill.level}/5') #{skill.name}
47 | - }
48 |
49 | - if (typeof(hobies) !== 'undefined'){
50 | h4 stars Hobbies and Interests
51 | .col.s12.card-panel.pad
52 | p= hobies.join(" ")
53 | - }
54 |
55 |
56 | .row.hide-on-computer
57 | - if (typeof(contact) !== 'undefined'){
58 | .col.s6
59 | h4 Contact
60 | .card-panel
61 | - if (typeof(contact.email) !== 'undefined'){
62 | b Email:
63 | span!= ' '+contact.email
64 | br
65 | - }
66 | - if (typeof(contact.phone) !== 'undefined'){
67 | b Phone:
68 | span!= ' '+contact.phone
69 | br
70 | - }
71 | - if (typeof(contact.address) !== 'undefined'){
72 | b Address:
73 | span!= ' '+contact.address
74 | - }
75 | - }
76 | - if (typeof(social) !== 'undefined'){
77 | .col.s6.hide-on-computer
78 | h4 Links
79 | .card-panel
80 | - if (typeof(contact.website) !== 'undefined'){
81 | b Website:
82 | span!= ' ' + contact.website
83 | br
84 | - }
85 | - if (typeof(social.github) !== 'undefined'){
86 | b GitHub:
87 | span!= ' ' + social.github
88 | br
89 | - }
90 | - if (typeof(social.linkedin) !== 'undefined'){
91 | b LinkedIn:
92 | span!= ' ' + social.linkedin
93 | - }
94 |
95 | - }
96 |
--------------------------------------------------------------------------------
/examples/example-locals-2.json:
--------------------------------------------------------------------------------
1 | {
2 | "title":"John Smith CV",
3 | "heading1":"John Smith",
4 | "contact":{
5 | "address":"Mountain View, SA",
6 | "phone": "07772955104",
7 | "email":"john-smith@google.com",
8 | "website":"example.com"
9 | },
10 | "design": {
11 | "color":"brown"
12 | },
13 | "headshot":{
14 | "url": "http://static2.hypable.com/wp-content/uploads/2012/11/david-tennant-doctor-who-50th-anniversary.jpg",
15 | "alt": "Picture of me visiting Earth in 2007"
16 | },
17 | "social":{
18 | "github": "https://github.com/guryanovev/JohnSmith",
19 | "linkedin":"linkedin.com/in/johnsmith"
20 | },
21 | "bio": [
22 | "John Smith is a profesional time Lord, specialising in something..",
23 | "lorem ipsum dolor sit amet consectetur adipiscing elit sed diam nonummy nibh"
24 | ],
25 | "employment":[
26 | {
27 | "role":"Doctor",
28 | "place":"University of Oxford",
29 | "placeurl":"http://www.bbc.co.uk/programmes/b006q2x0",
30 | "dates":"June - September 1913 (3 months)",
31 | "description":[
32 | "lorem ipsum dolor sit amet consectetur adipiscing elit sed diam nonummy nibh",
33 | "lorem ipsum dolor sit amet consectetur adipiscing elit sed diam nonummy nibh",
34 | "lorem ipsum dolor sit amet consectetur adipiscing elit sed diam nonummy nibh"
35 | ]
36 | },
37 | {
38 | "role":"Software Engineer",
39 | "place":"Google, UK",
40 | "placeurl":"http://www.google.com",
41 | "dates":"July 1998 - July 2001 (36 months)",
42 | "description":[
43 | "Google's software engineers develop the next-generation technologies ",
44 | "that change how millions of users connect, explore, and interact with ",
45 | "information and one another. Our ambitions reach far beyond just Search. ",
46 | "Our products need to handle information at the the scale of the web. We're ",
47 | "looking for ideas from every area of computer science, including information ",
48 | "retrieval, artificial intelligence, natural language processing, distributed ",
49 | "computing, large-scale system design, networking, security, data compression, ",
50 | "and user interface design; the list goes on and is growing every day. "
51 | ]
52 | }
53 | ],
54 |
55 | "experience":[
56 | {
57 | "title":"Doctor Who",
58 | "subtitle":"Made an appearance on the BBC sereis, Doctor Who",
59 | "description":[
60 | ""
61 | ]
62 | }
63 |
64 | ],
65 | "education":[
66 | {
67 | "course":"Computer Science BSc",
68 | "establishment":"Cambridge University",
69 | "placeurl":"https://www.cambridge.ac.uk/",
70 | "dates":"September 2012 - May 2016",
71 | "description":[
72 | "Gained a first-class honours in computer science, and won the",
73 | "British Computer Society (BCS) award for best computing project.\n",
74 | "Course representative and student ambassador, was fully involved",
75 | "in all aspects of my course.\n",
76 | "Founded and initially ran the computing society, which holds regular",
77 | "computer-science related, and social events."
78 | ]
79 | }
80 | ],
81 |
82 | "skills":[
83 | {"name":"Time Travel", "type":"web", "level":"5"},
84 | {"name":"Tardis Repair", "type":"web", "level":"3"},
85 | {"name":"Saving-the-world", "type":"web", "level":"1"}
86 | ],
87 |
88 | "hobies":[
89 | "Lorem Ipsum Dolor Siet Ammet"
90 | ]
91 | }
92 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 |
3 | A customisable template for a single-page material design CV website
4 |
53 | © Alicia Sykes 2017
54 | Licensed under MIT
55 | 
56 | Thanks for visiting :)
57 |