diff --git a/README.md b/README.md index 5912e2c97..4e6b0a84c 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ For this project you will be building a digital resume from scratch. You will be - [ ] Create a new branch: git checkout -b ``. - [ ] Implement the project on your newly created `` branch, committing changes regularly. - [ ] 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** @@ -25,7 +25,7 @@ Follow these steps for completing your project. ## 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. +* [ ] 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 @@ -36,12 +36,9 @@ Follow these steps for completing your project. * [ ] 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. +* [ ] Mobile: Use nested-at rules to provide a mobile version of your resume. Use `500px` as a `max-width` for mobile. -## Stretch Goals: +## Stretch Goals: * [ ] Incorporate a google font of your choosing -* [ ] Convert your portfolio project (from last week) CSS into LESS. Introduce variables, mixins, nesting, etc. +* [ ] Convert your portfolio project (from last week) CSS into LESS. Introduce variables, mixins, nesting, etc. * [ ] 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. - - - diff --git a/css/index.css b/css/index.css index 7dd97920d..b94c52012 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,291 @@ -/* 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; +} +.h1-titles { + font-size: 1.5rem; + font-weight: bolder; + margin-bottom: 2rem; +} +.content-margins { + margin-top: 2rem; + margin-left: 2rem; + margin-right: 2rem; + margin-bottom: 2rem; +} +html, +body { + height: 100%; + font-family: 'Open Sans', sans-serif; +} +li { + padding: 0.3rem; + list-style-type: square; + margin-left: 2rem; +} +a.heading-contact { + text-transform: uppercase; + text-decoration: none; + color: black; + transition: 0.5s; + font-weight: bolder; +} +a.heading-contact:hover { + color: gray; + transition: 0.5s; +} +h1.heading-contact { + font-size: 4rem; + font-weight: bolder; + margin-top: 2rem; + margin-bottom: 2rem; +} +div.heading { + margin-right: 2rem; + margin-left: 2rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + display: flex; + justify-content: flex-end; +} +div.heading-name { + margin-right: 2rem; + margin-left: 2rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + display: flex; + justify-content: space-between; +} +img.heading-name { + width: 125px; + border-radius: 1rem; + border: 0.1rem black solid; + box-shadow: 0.2rem 0.2rem 0.2rem black; +} +div.intro { + display: flex; + font-size: 1.1rem; + font-style: italic; + line-height: 1.25rem; + margin-top: 2rem; + margin-left: 2rem; + margin-right: 2rem; + margin-bottom: 2rem; +} +div.employment { + margin-top: 2rem; + margin-left: 2rem; + margin-right: 2rem; + margin-bottom: 2rem; +} +div.employer-details-list { + margin-top: 2rem; + margin-left: 2rem; + margin-right: 2rem; + margin-bottom: 2rem; +} +h1.employment { + font-size: 1.5rem; + font-weight: bolder; + margin-bottom: 2rem; +} +section.employer-details { + display: flex; + flex-direction: row; +} +div.employer-details-list { + display: flex; + flex-direction: column; +} +h2.employer-details { + font-weight: bolder; + margin-left: 2rem; +} +p.employer-details { + text-transform: uppercase; +} +ul.employer-details { + flex-direction: column; +} +div.skills { + margin: 2rem; +} +h1.skills { + font-size: 1.5rem; + font-weight: bolder; + margin-bottom: 2rem; +} +section.skills-details { + display: flex; + flex-direction: row; +} +ul.skills-details { + flex-direction: column; +} +@media (max-width: 500px) { + a.heading-contact { + font-size: 7px; + } + h1.heading-contact { + font-size: 2.5rem; + } + img.heading-name { + margin-top: 25px; + width: 100px; + height: 100px; + } + p.intro-details { + font-size: 0.5rem; + line-height: 1rem; + } + h2.employer-details { + font-size: 0.8rem; + } + p.employer-details { + font-size: 0.8rem; + } + h5.employer-details { + font-size: 0.8rem; + } + h3.employer-details { + font-size: 0.8rem; + } + li.employer-details { + margin-top: 0.2rem; + margin-bottom: 0.2rem; + font-size: 0.7rem; + } + li.skills-details { + margin-top: 0.2rem; + margin-bottom: 0.2rem; + font-size: 0.7rem; + } +} diff --git a/img/me.jpeg b/img/me.jpeg new file mode 100644 index 000000000..3744424d7 Binary files /dev/null and b/img/me.jpeg differ diff --git a/index.html b/index.html index a7f9e3ad1..400df3d15 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,17 @@ + + +
+ +
+
+ +

Joshua Cheney

+
- My Resume - - +