├── .DS_Store ├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── package.json └── src ├── .DS_Store ├── index.html ├── resume.css └── resume.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kabirvirji/material-resume/797b279838aa65b546fc484535a15b82b1bb5282/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | src/*.min.* 2 | *.log 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Ryan Delaney 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material Resume 2 | 3 | ## Updated Material Resume: [Demo](http://kabirvirji.com/material-resume/material-resume.html) 4 | 5 | ### TODO 6 | - [ ] Size the main container to 850px x 1100px to match letter paper size (high priority) 7 | - [ ] Last line its own directive 8 | - [ ] Header links use scope variables 9 | 10 | ## My version of the classic Taylor Swift material resume example. 11 | 12 | ## Updates: 13 | 14 | 1. One column so recruiters have an easier time reading (more like scanning 🙄) your resume 15 | 2. Splash of colour 🌈 words can be bolded blue to stand out with the `` tag 16 | 3. Header contact information includes links, put links in the JavaScript under `resumeHeading` and `header-icons` 17 | 4. Last line can be used for interests, awards, etc. 18 | 19 | 20 | ### Original Material Resume: [Demo](http://rdel.io/material-resume) 21 |
22 | ## Getting Started 23 | 24 | 1. Download the [`index.html`](https://github.com/rrdelaney/material-resume/blob/gh-pages/index.html) file 25 | 2. Open in your favorite editor 26 | 3. Open document in chrome 27 | 4. Start editing in the `` 28 | 5. To save: 29 | - Right click 30 | - `Print...` 31 | - `Save as PDF` 32 | 33 | Building the resume is as easy as adding `ng-app="Resume"` to your body 34 | and then using the directives listed below. 35 | 36 | ## Directives 37 | 38 | ### `` 39 | 40 | Holds the entire document. 41 | 42 | __Example__: 43 | ```html 44 | 45 | ... 46 | 47 | 48 | ... 49 | 50 | 51 | 52 | ``` 53 | 54 | ### `` 55 | 56 | Heading the for the resume. Should come immediately after ``. 57 | 58 | __Options__: 59 | - `first-name`: Your first name 60 | - `last-name`: Your last name 61 | - `website`: Your website, optional 62 | - `email`: Your email, optional 63 | - `phone`: Your phone number, optional 64 | - `github`: Your github username, optional 65 | - `linkedin`: Your linkedin username, optional 66 | 67 | __Example__: 68 | ```html 69 | 70 | 73 | 74 | 75 | ``` 76 | 77 | ### `` 78 | 79 | Contains the body of the resume. 80 | 81 | __Example__: 82 | ```html 83 | 84 | 85 | ... 86 | 87 | 88 | ``` 89 | 90 | ### `` 91 | 92 | Adds a column to the resume. The width of the column must also be specified. 93 | There can be more than one column side-by-side, but the flex values 94 | should add up to 100. 95 | 96 | __Options__: 97 | - `flex`: The width of the column out of 100 98 | 99 | __Example__: 100 | ```html 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | ``` 113 | 114 | ### `` 115 | 116 | A small category window meant to hold a couple of points. Useful for things 117 | in a sidebar, like coursework. Meant for small bullets. Child items should use 118 | the `

` tag. 119 | 120 | __Options__: 121 | - `name`: The name of the category. Will appear in bold font above the items 122 | 123 | __Example__: 124 | ```html 125 | 126 | 127 | 128 |

I am awesome

129 |

I am cool

130 | 131 | 132 | 133 | ``` 134 | 135 | ### `` 136 | 137 | A larger category for the main section of the resume. Meant for multiple items 138 | to be be elaborated upon. Child items should be the `` tag. An 139 | example would be to create a category called "Jobs" and then each item would 140 | be a previous job that would then be expanded upon. 141 | 142 | __Options__: 143 | - `name`: The name of the category 144 | 145 | __Example__: 146 | ```html 147 | 148 | 149 | 150 | ... 151 | ... 152 | ... 153 | 154 | 155 | 156 | ``` 157 | 158 | ### `` 159 | 160 | A point to elaborate upon in a category. E.x. a job in the "Jobs" category. 161 | Child items should use the `
  • ` tag. 162 | 163 | __Options__: 164 | - `title`: The title of the item. Will be displayed in bold under the category 165 | - `subtitle`: Extra info, next to the title, optional 166 | 167 | __Example__: 168 | ```html 169 | 170 | 171 |
  • Created content for marketing
    • 172 |
  • Worked with others, sometimes successfully
    • 173 |     174 | 175 |
  • Checked items out
    • 176 |
  • Did inventory
    • 177 |     178 |     179 | ``` 180 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | Resume 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
  • Software Design | Algorithm Analysis | Statistics | Data Structures | Systems Programming
    • 24 |     25 |     26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
  • LemonStand is an e-commerce platform dedicated to improving the online shopping experience for both customers and store owners
    • 34 |
  • Utilized PHP and Javascript to add a blog system to the LemonStand platform
    • 35 |
  • Developed an author biography for blogs using PHP and JavaScript, allowing store owners to
    connect with their customers and increase sales
    • 36 |
  • Engineered theme features using JavaScript/HTML/CSS that resulted in 2x themes being used
    • 37 |
  • Used PHP and JavaScript to add a feature allowing customers to opt-in to marketing during the
    checkout process, allowing store owners to automate promotional email marketing
    • 38 |
  • Assited in developing and maintaining the LemonStand API in PHP
    • 39 |
  • Dealt with customer support on a technical and non-technical level
    • 40 | 41 | 42 | 43 |     44 |     45 | 46 | 47 |
  • Developed a Spotify Messenger Bot using the Spotify API for group music manipulation
    • 48 |
  • Utilized JavaScript and node.js for functionaliy and user input recognition
    • 49 |     50 | 51 |
  • Developed a web application that connects high school students with post-secondary mentors
    • 52 |
  • Utilized PHP to develop the back-end and JavaScript to develop the front-end
    • 53 |     54 | 55 |
  • Developed a Twitterbot to build a customizable tweet-auto-reply tool
    • 56 |
  • Used Python, the Twitter API, and several libraries such as APSchedular and Tweepy
    • 57 |     58 |     59 | 60 | 61 | 62 | 63 | 64 | 65 |
  • Founded a club that focuses on generating ideas to solve real world problems using CS
    • 66 |
  • Organize bi-weekly meetings, and monthly workshops led by industry professionals
    • 67 |     68 | 69 | 70 | 71 |
  • Attended a month-long program at the University of Saskatchewan that focuses on engineering, entrepreneurship, and solving real world problems
    • 72 |
  • Exercised networking and problem solving skills through a series of activities and events
    • 73 |
  • Developed, prototyped, and pitched a product based around a centeral theme
    • 74 | 75 |     76 | 77 |

    Competitive Pokemon Trading Card Game Player \ Hackathon lover \ Kanye Fan \ From Vancouver and living in the 6ix

    78 | 79 |     80 | 81 | 82 | 83 |     84 | 85 |     86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-resume", 3 | "version": "1.0.0", 4 | "description": "A cool resume template", 5 | "scripts": { 6 | "build:js": "buble src/resume.js | uglifyjs > src/resume.min.js", 7 | "build:css": "cssmin src/resume.css > src/resume.min.css", 8 | "build:html": "vulcanize index.html -p src --inline-scripts --inline-css > index.html", 9 | "build": "npm run build:js && npm run build:css && npm run build:html" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/rrdelaney/material-resume" 14 | }, 15 | "author": "Ryan Delaney ", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/rrdelaney/material-resume/issues" 19 | }, 20 | "homepage": "https://github.com/rrdelaney/material-resume", 21 | "devDependencies": { 22 | "buble": "^0.14.0", 23 | "cssmin": "^0.4.3", 24 | "uglify-js": "^2.7.3", 25 | "vulcanize": "^1.14.8" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kabirvirji/material-resume/797b279838aa65b546fc484535a15b82b1bb5282/src/.DS_Store -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | Resume 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
  • Software Design | Algorithms and Data Structures | Operating Systems | Distributed Systems
    • 24 |     25 |     26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
  • Worked to maintain and improve the web application
    • 34 |
  • Added cool new features and improved UI
    • 35 |
  • Developed the LemonStand API for customers
    • 36 |     37 | 38 | 39 |
  • Worked in an Agile Environment on the iOS team with other interns
    • 40 |
  • Used JIRA to collaborate with developers are on stories
    • 41 |
  • Collaborated with other interns on design
    • 42 |
  • Used Objective-C to create new app features and scaled on Kubernetes
    • 43 |     44 | 45 | 46 |
  • Worked on the iOS application
    • 47 |
  • Added new features and fixed several bugs on the app
    • 48 |
  • Greenfield project to research a better way to call cars to your location
    • 49 |     50 | 51 |     52 | 53 | 54 |
  • Such an amazing application that did lots of cool stuff and has so many awesome features
    • 55 |
  • Integrations with Uber, Spotify, and AirBnB which is great because everyone uses those
    • 56 |     57 | 58 |
  • Food-storage-as-a-Service app that lets people put their food in your fridge which is an awesome idea
    • 59 |
  • System is based on the blockchain with Ethereum and I used some cool programming languages
    • 60 |     61 | 62 |
  • A new programming language with a focus on developers turning up which is so lit
    • 63 |
  • Implemented in Go and requires Docker 1.12 with Ceph on CoreOS and other complicated stuff
    • 64 |     65 |     66 | 67 | 68 | 69 | 70 | 71 | 72 |
  • Founded a club that focuses on really cool Computer Science stuff and its applications
    • 73 |
  • We also have workshops where important people in and tell us amazing things
    • 74 |     75 | 76 | 77 | 78 |
  • Aside from winning hackathons I also organzied a really great one with lots of sponsors
    • 79 |
  • There was awesome food and everyone loved it plus it was cool not hacking and helping organize
    • 80 | 81 |     82 | 83 |

    Consistent on the Dean's list \ Hackathon winner \ Kanye lover \ Professional Super Smash Bros. Melee superstar 💯

    84 | 85 |     86 | 87 | 88 | 89 |     90 | 91 |     92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /src/resume.css: -------------------------------------------------------------------------------- 1 | h1, h2, h3, h4, h5, h6, p, li { 2 | font-family: 'Raleway', sans-serif; 3 | } 4 | 5 | a { 6 | font-family: 'Raleway', sans-serif; 7 | font-size:14px; 8 | text-decoration:none; 9 | color:black; 10 | 11 | } 12 | 13 | a:hover { 14 | color: #1a8dff; 15 | } 16 | 17 | strong { 18 | color: #1a8dff; 19 | } 20 | 21 | 22 | 23 | 24 | 25 | .resume { 26 | background-color: #1f1f1f; 27 | min-height: 100vh; 28 | } 29 | .resume .main { 30 | height: 100%; 31 | width: 750px; 32 | background-color: #fff; 33 | padding: 0 25px; 34 | margin: 0 auto; 35 | } 36 | .resume .main .header { 37 | border-bottom: 2px solid #ddd; 38 | } 39 | .resume .main .header .page-title-container { 40 | margin: 0 auto; 41 | text-align: center; 42 | padding-bottom: 10px; 43 | } 44 | .resume .main .header .page-title { 45 | font-size: 48pt; 46 | display: inline; 47 | } 48 | .resume .main .header .page-title-first { 49 | font-weight: 400; 50 | } 51 | .resume .main .header .page-title-last { 52 | font-weight: 200; 53 | } 54 | .resume .main .header .header-icons { 55 | text-align: center; 56 | } 57 | .resume .main .header .header-icons .page-subhead { 58 | margin: 1rem 15px; 59 | display: inline; 60 | } 61 | .resume .main .header .fa { 62 | padding-right: 10px; 63 | } 64 | .resume .main .indented { 65 | padding-left: 40px; 66 | } 67 | .resume .main .category-row { 68 | padding-bottom: 2px; 69 | } 70 | .resume .main .category-row .category { 71 | margin-right: 10px; 72 | padding-left: 5px; 73 | padding-right: 10px; 74 | border-bottom: 1px solid #ddd; 75 | border-right: 1px solid #ddd; 76 | } 77 | .resume .main .category-row .category-row-title { 78 | margin: 0.4rem 0; 79 | } 80 | .resume .main .category-row .category-title, 81 | .resume .main .category-row .category-subtitle, 82 | .resume .main .category-row .category-date { 83 | display: inline; 84 | margin-top: 10px; 85 | margin-bottom: 5px; 86 | } 87 | 88 | .resume .main .category-row .skill-item { 89 | display: inline; 90 | margin-top: 10px; 91 | margin-bottom: 5px; 92 | } 93 | 94 | 95 | .resume .main .category-row .category-bullets { 96 | margin-top: 5px; 97 | } 98 | .resume .main .category-row p, 99 | .resume .main .category-row li { 100 | font-size: smaller; 101 | } 102 | sidebar-category:last-of-type .category { 103 | border-bottom: 0 !important; 104 | padding-bottom: 0 !important; 105 | margin-bottom: 0 !important; 106 | } 107 | category:last-of-type category-item:last-of-type .category { 108 | border-bottom: 0 !important; 109 | padding-bottom: 0 !important; 110 | margin-bottom: 0 !important; 111 | } 112 | -------------------------------------------------------------------------------- /src/resume.js: -------------------------------------------------------------------------------- 1 | angular.module('Resume', ['ngMaterial']) 2 | 3 | .directive('resume', function() { 4 | return { 5 | restrict: 'E', 6 | transclude: true, 7 | template: `
    8 |
    9 |
    ` 10 | } 11 | }) 12 | 13 | .directive('resumeHeading', function() { 14 | return { 15 | restrict: 'E', 16 | scope: { 17 | firstName: '@', 18 | lastName: '@', 19 | website: '@', 20 | phone: '@', 21 | email: '@', 22 | github: '@', 23 | linkedin: '@' 24 | }, 25 | template: `
    26 |
    27 |

    {{firstName}}

    28 |

    {{lastName}}

    29 |
    30 |
    31 | {{website}} 32 | {{email}} 33 | {{github}} 34 | {{linkedin}} 35 |
    36 |
    ` 37 | } 38 | }) 39 | 40 | .directive('resumeBody', function() { 41 | return { 42 | restrict: 'E', 43 | transclude: true, 44 | template: `
    ` 45 | } 46 | }) 47 | 48 | .directive('resumeColumn', function() { 49 | return { 50 | restrict: 'E', 51 | transclude: true, 52 | template: `
    ` 53 | } 54 | }) 55 | 56 | .directive('sidebarCategory', function() { 57 | return { 58 | restrict: 'E', 59 | scope: { 60 | name: '@' 61 | }, 62 | transclude: true, 63 | template: `
    64 |
    65 |
    {{name}}
    66 | 67 |
    68 |
    ` 69 | } 70 | }) 71 | 72 | .directive('category', function() { 73 | return { 74 | restrict: 'E', 75 | scope: { 76 | name: '@' 77 | }, 78 | transclude: true, 79 | template: `
    80 |

    {{name}}

    81 | 82 |
    ` 83 | } 84 | }) 85 | 86 | .directive('categoryItem', function() { 87 | return { 88 | restrict: 'E', 89 | scope: { 90 | title: '@', 91 | date: '@', 92 | subtitle: '@' 93 | }, 94 | transclude: true, 95 | template: `
    96 |

    {{title}}

      97 |

    {{subtitle}}

    98 |
    {{date}}
    99 |
      100 |
      ` 101 | } 102 | }) 103 | 104 | .directive('skillItem', function() { 105 | return { 106 | restrict: 'E', 107 | scope: { 108 | languages: '@', 109 | technologies: '@' 110 | }, 111 | transclude: true, 112 | template: `
      113 |

      Languages: {{languages}}

        114 |

      Technologies: {{technologies}}

      115 |
        116 |
        ` 117 | } 118 | }) 119 | --------------------------------------------------------------------------------