diff --git a/README.md b/README.md index 5912e2c97..437917b3b 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,44 @@ # Preprocessing I: Digital Resume +try 1 + 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. ## Task 1: Set Up The Project With Git -- [ ] Create a forked copy of this project. -- [ ] Add your project manager as collaborator on Github. -- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). -- [ ] Create a new branch: git checkout -b ``. -- [ ] Implement the project on your newly created `` branch, committing changes regularly. -- [ ] Push commits: git push origin ``. +- [x ] Create a forked copy of this project. +- [x] Add your project manager as collaborator on Github. +- [x] Clone your OWN version of the repository (Not Lambda's by mistake!). +- [x] Create a new branch: git checkout -b ``. +- [x] Implement the project on your newly created `` branch, committing changes regularly. +- [x] Push commits: git push origin ``. Follow these steps for completing your project. -- [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** -- [ ] Add your project manager as a reviewer on the pull-request -- [ ] Your project manager will count the project as complete by merging the branch back into master. +- [x] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** +- [x] Add your project manager as a reviewer on the pull-request +- [x] Your project manager will count the project as complete by merging the branch back into master. ## Task 2: Set up your preprocessor -* [ ] 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. -* [ ] In your project's root folder, run the following command `less-watch-compiler less css index.less` -* [ ] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` -* [ ] Once you see the red screen, you can delete that style and you're ready to start on the next task +* [x] 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. +* [x] In your project's root folder, run the following command `less-watch-compiler less css index.less` +* [x] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` +* [x] Once you see the red screen, you can delete that style and you're ready to start on the next task ## Task 3: Project Objectives -* [ ] 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. +* [x] 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. **Note: you are only required to build one page, anything more than that would be stretch.** -* [ ] The resume content will be provided by you. The content can be about you or a fictional character. -* [ ] Content: Navigation - Build a simple navigation with 4 items of your choosing -* [ ] Content: Intro - Have a short introduction as to why you would be a good hire -* [ ] Content: Skills - Showcase a list of skills you have somewhere on your resume -* [ ] Content: Work History - Showcase your work history somewhere on your resume -* [ ] 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) -* [ ] Variables: Incorporate variables in your project for color and font stacks. -* [ ] Nesting: Every selector should be nested inside the main container. Avoid having global styles unless they are element level. -* [ ] Mixins: Create 2 mixins of your choosing. Hint: It's super helpful to use flexbox properties in mixins -* [ ] Mobile: Use nested-at rules to provide a mobile version of your resume. Use `500px` as a `max-width` for mobile. +* [x ] The resume content will be provided by you. The content can be about you or a fictional character. +* [x] Content: Navigation - Build a simple navigation with 4 items of your choosing +* [x] Content: Intro - Have a short introduction as to why you would be a good hire +* [x] Content: Skills - Showcase a list of skills you have somewhere on your resume +* [x] Content: Work History - Showcase your work history somewhere on your resume +* [x] 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) +* [x] Variables: Incorporate variables in your project for color and font stacks. +* [x] Nesting: Every selector should be nested inside the main container. Avoid having global styles unless they are element level. +* [x] Mixins: Create 2 mixins of your choosing. Hint: It's super helpful to use flexbox properties in mixins +* [x] Mobile: Use nested-at rules to provide a mobile version of your resume. Use `500px` as a `max-width` for mobile. ## Stretch Goals: * [ ] Incorporate a google font of your choosing diff --git a/css/index.css b/css/index.css index 7dd97920d..d4b5a96ff 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,261 @@ -/* Compile your LESS file! */ \ No newline at end of file +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; +} +html, +body { + height: 100%; +} +html { + font-size: 62.5%; +} +p { + font-size: 1.6rem; +} +.specialfont { + font-family: 'Roboto', sans-serif; +} +.page-container { + margin: 0 auto; + max-width: 1200px; + width: 100%; +} +.page-container .sitecheck { + border: 1px solid red; +} +.page-container .onepxborder { + border: 1px solid grey; +} +.page-container .header { + display: flex; + justify-content: flex-end; +} +.page-container .header nav { + width: 30%; + display: flex; + margin: 25px 0px; + justify-content: space-between; +} +.page-container .header nav a { + margin-left: 2.58rem; + font-size: 1.6rem; +} +@media screen and (max-width: 500px) { + .page-container .header nav { + width: 90%; + display: flex; + flex-direction: column; + padding: 2%; + } +} +.page-container .top-section { + background: lightgrey; + border: 2px solid black; + display: flex; + flex-wrap: wrap; +} +.page-container .top-section .image { + width: 25%; + margin-top: 5%; + margin-left: 4%; + margin-bottom: 5%; +} +.page-container .top-section .image img { + max-width: 100%; +} +.page-container .top-section p { + padding: 2%; +} +.page-container .top-section h1 { + font-size: 3.8rem; + font-family: 'Roboto', sans-serif; +} +.page-container .top-section h3 { + font-size: 2.8rem; +} +.page-container .top-section .top-section-text { + margin: 10px; + padding: 1%; + border-bottom: 1px solid black; + width: 92%; +} +.page-container .top-section .genericbutton { + width: 14%; + padding: 0.5%; + margin: 1%; + background: #5b5b3e; + color: white; +} +.page-container .middle-section { + width: 100%; + margin-top: 2%; + padding: 1%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.page-container .middle-section .middle-container { + width: 45%; +} +.page-container .middle-section .middle-container h2 { + font-size: 2.8rem; +} +.page-container .middle-section ul li { + border: 1px solid lightgrey; + font-size: 1.6rem; + padding: 1%; +} +.page-container .middle-section .bottom-table { + width: 100%; +} +.page-container .middle-section .bottom-table h2 { + font-size: 2.8rem; +} +.page-container .middle-section .work-history { + width: 100%; + font-size: 1.6rem; + border: 1px solid grey; + text-align: left; + padding: 1rem; +} +.page-container .middle-section .work-history .grey { + background-color: #dddddd; +} +.page-container footer { + margin-top: 2%; + padding: 5% 30%; + background: lightgrey; + color: white; +} +.page-container footer .footer-rules { + width: 100%; + font-size: 2.8rem; +} diff --git a/images/Profile pic.PNG b/images/Profile pic.PNG new file mode 100644 index 000000000..0821eabdc Binary files /dev/null and b/images/Profile pic.PNG differ diff --git a/index.html b/index.html index a7f9e3ad1..97b8869e5 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,101 @@ -

My Resume

- + +
+
+ +
+ + +
+
+ +
+
+

Michael Guadalupe-Fullstack

+

Putting awesome on your page!

+

Email me: mikeguadalupe@gmail.com

+
+ + +
+

Hire this guy. He know that all you care about are results, and he is here to give them to you. With experience in high stakes poker, HTML, CSS, and flooring solutions for tile enclosures, Mike will provide you with help on every aspect of your work project.

+
+ + +
+ + +
+
+

Listen Up

+

+ This guy is motivated to do the work that you need. With his German Shephard Dog Alystrina at his side begging for treats, Mike will be your loyal worker. His wife needing the best in defense technology will need a guy that will work hard to earn that dough rae me to keep her geared up

+

He also gets nagged a lot at home, so expect him yearning for a job that has hours of tasks to be completed. This go getter will be a briliant addition to your stable of talented staff. +

+
+
+

My Skills

+
    +
  • HTML
    • +
  • CSS
    • +
  • SEO
    • +
  • Customer Coddling
    • +
  • Telling you stuff you know
    • +
  • Usless information
    • +
+

+ +
+
+

Work History

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CompanyYearsContactCity
Bellagio7Sean MacCormickLas Vegas, NV
AllThumz Gaming2Alistair BellBedfordshire, UK
HealthyMods7Michele GuadalupeNormal, IL
+
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..20dd82982 100644 --- a/less/index.less +++ b/less/index.less @@ -1,4 +1,3 @@ -// Is this working? /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -56,4 +55,176 @@ table { html, body { height: 100%; } +html { + font-size: 62.5%; +} +p { + font-size: 1.6rem; +} + +.specialfont { + font-family: 'Roboto', sans-serif; +} + +.page-container { + margin: 0 auto; + max-width: 1200px; + width: 100%; + // border: 1px solid red; + +.sitecheck { + border: 1px solid red +} +.onepxborder { + border: 1px solid grey; + } + + +//mixins +@common-color: lightgrey; +@main-font: 2.8rem; + + +.header { + // margin-top: auto; + display: flex; + justify-content: flex-end; + + nav { + + width: 30%; + // border: 2px solid green; + display: flex; + margin:25px 0px; + justify-content: space-between; + + a { + margin-left:2.58rem; + font-size: 1.6rem; + } + @media screen and (max-width: 500px){ + width: 90%; + display:flex; + flex-direction: column; + padding:2%; + + } + + } +} + +.top-section { + background: @common-color; + border: 2px solid black; + display: flex; + flex-wrap: wrap; + // flex-direction: column; + // .sitecheck(); + .image { + width: 25%; + margin-top: 5%; + margin-left:4%; + margin-bottom:5%; + // border: 1px solid red; + + img { + max-width: 100%; + } + } + + p { + padding: 2%; + } + h1 { + font-size: 3.8rem; + .specialfont(); + // .sitecheck(); + } + h3 { + font-size: @main-font; + // padding: 1%; + // .sitecheck(); + } + + .top-section-text { + // border: 1px solid blue; + margin:10px; + padding: 1%; + border-bottom: 1px solid black; + width: 92%; + + } + .genericbutton { + width: 14%; + padding: .5%; + margin: 1%; + background:#5b5b3e; + color:white; + // .sitecheck(); + } + + +} +.middle-section { + width: 100%; + // .sitecheck(); + margin-top: 2%; + padding: 1%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + .middle-container { + width: 45%; + + h2 { + font-size: @main-font; + } + } + ul{ + + li { + border: 1px solid @common-color; + font-size: 1.6rem; + padding: 1%; + } + } + .bottom-table { + width:100%; + h2 { + font-size:@main-font; + } + } + + .work-history { + + width:100%; + font-size:1.6rem; + .onepxborder(); + text-align: left; + padding: 1rem; + + .grey { + background-color: #dddddd; + } + + + } + + } +footer{ + // border:1px solid red; + margin-top:2%; + padding: 5% 30%; + background: @common-color; + color: white; + + .footer-rules { + width: 100%; + // border:1px solid red; + font-size: @main-font; + // color: white; + } +} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..48e341a09 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +}