├── .gitignore ├── README.md ├── css └── index.css ├── index.html ├── less └── index.less └── resume-example.png /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Preprocessing I: Digital Resume 2 | 3 | For this project you will be building a digital resume from scratch. You will be required to use specific preprocessing skills to accomplish your tasks. 4 | 5 | ## Task 1: Set Up The Project With Git 6 | 7 | - [ ] Create a forked copy of this project. 8 | - [ ] Add your project manager as collaborator on Github. 9 | - [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). 10 | - [ ] Create a new branch: git checkout -b ``. 11 | - [ ] Implement the project on your newly created `` branch, committing changes regularly. 12 | - [ ] Push commits: git push origin ``. 13 | 14 | Follow these steps for completing your project. 15 | 16 | - [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** 17 | - [ ] Add your project manager as a reviewer on the pull-request 18 | - [ ] Your project manager will count the project as complete by merging the branch back into master. 19 | 20 | ## Task 2: Set up your preprocessor 21 | * [ ] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your cohort's help channel or your team lead for help. 22 | * [ ] In your project's root folder, run the following command `less-watch-compiler less css index.less` 23 | * [ ] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` 24 | * [ ] Once you see the red screen, you can delete that style and you're ready to start on the next task 25 | 26 | ## Task 3: Project Objectives 27 | 28 | * [ ] Review the [example resume](resume-example.png). Notice how simplistic the example resume is. Develop a simple layout of your choosing. If you are struggling to be creative, you may use the example resume as your design file. 29 | **Note: you are only required to build one page, anything more than that would be stretch.** 30 | * [ ] The resume content will be provided by you. The content can be about you or a fictional character. 31 | * [ ] Content: Navigation - Build a simple navigation with 4 items of your choosing 32 | * [ ] Content: Intro - Have a short introduction as to why you would be a good hire 33 | * [ ] Content: Skills - Showcase a list of skills you have somewhere on your resume 34 | * [ ] Content: Work History - Showcase your work history somewhere on your resume 35 | * [ ] Content: Contact - Provide some way a potential employer could contact you. Phone number, email, or a full on contact form (doesn't have to work) 36 | * [ ] Variables: Incorporate variables in your project for color and font stacks. 37 | * [ ] Nesting: Every selector should be nested inside the main container. Avoid having global styles unless they are element level. 38 | * [ ] Mixins: Create 2 mixins of your choosing. Hint: It's super helpful to use flexbox properties in mixins 39 | * [ ] Mobile: Use nested-at rules to provide a mobile version of your resume. Use `500px` as a `max-width` for mobile. 40 | 41 | ## Stretch Goals: 42 | * [ ] Incorporate a google font of your choosing 43 | * [ ] Convert your portfolio project (from last week) CSS into LESS. Introduce variables, mixins, nesting, etc. 44 | * [ ] Create a link to the portfolio page and create a layout that would allow users to see your work. A good idea is to link projects back to their github repos so employers can see your code. 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | /* Compile your LESS file! */ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Resume 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 |

My Resume

18 | 19 | -------------------------------------------------------------------------------- /less/index.less: -------------------------------------------------------------------------------- 1 | // Is this working? 2 | /* http://meyerweb.com/eric/tools/css/reset/ 3 | v2.0 | 20110126 4 | License: none (public domain) 5 | */ 6 | 7 | html, body, div, span, applet, object, iframe, 8 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 9 | a, abbr, acronym, address, big, cite, code, 10 | del, dfn, em, img, ins, kbd, q, s, samp, 11 | small, strike, strong, sub, sup, tt, var, 12 | b, u, i, center, 13 | dl, dt, dd, ol, ul, li, 14 | fieldset, form, label, legend, 15 | table, caption, tbody, tfoot, thead, tr, th, td, 16 | article, aside, canvas, details, embed, 17 | figure, figcaption, footer, header, hgroup, 18 | menu, nav, output, ruby, section, summary, 19 | time, mark, audio, video { 20 | margin: 0; 21 | padding: 0; 22 | border: 0; 23 | font-size: 100%; 24 | font: inherit; 25 | vertical-align: baseline; 26 | } 27 | /* HTML5 display-role reset for older browsers */ 28 | article, aside, details, figcaption, figure, 29 | footer, header, hgroup, menu, nav, section { 30 | display: block; 31 | } 32 | body { 33 | line-height: 1; 34 | } 35 | ol, ul { 36 | list-style: none; 37 | } 38 | blockquote, q { 39 | quotes: none; 40 | } 41 | blockquote:before, blockquote:after, 42 | q:before, q:after { 43 | content: ''; 44 | content: none; 45 | } 46 | table { 47 | border-collapse: collapse; 48 | border-spacing: 0; 49 | } 50 | 51 | /* Set every element's box-sizing to border-box */ 52 | * { 53 | box-sizing: border-box; 54 | } 55 | 56 | html, body { 57 | height: 100%; 58 | } 59 | 60 | -------------------------------------------------------------------------------- /resume-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/Preprocessing-I/24c8e2d00bacf662cb24d43a3d04a9b22a334b3d/resume-example.png --------------------------------------------------------------------------------