From bedc1b6fb858112d9fe8e56202b9ad54d8b32b8a Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Mon, 11 May 2020 16:03:14 -0400 Subject: [PATCH 1/5] Began with HTML framework --- README.md | 24 ++++----- css/index.css | 137 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 39 ++++++++++++-- less/index.less | 2 +- 4 files changed, 185 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 1bfed7f2f..aa5d09abf 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,10 @@ For this project you will be building a digital resume from scratch. You will be ## 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 ``. +- [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 ``. - [ ] Implement the project on your newly created `` branch, committing changes regularly. - [ ] Push commits: git push origin ``. @@ -18,21 +18,21 @@ Follow these steps for completing your project. - [ ] 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 project manager for help. -* [ ] Open your terminal and navigate to your preprocessing project by using the `cd` command -* [ ] Once 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 project manager for help. +* [x] Open your terminal and navigate to your preprocessing project by using the `cd` command +* [x] Once 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. **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 +* [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 * [ ] Content: Skills - Showcase a list of skills you have somewhere on your resume -* [ ] Content: Work History - Showcase your work history somewhere on your resume +* [x] 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. diff --git a/css/index.css b/css/index.css index 7dd97920d..b56477ed7 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,136 @@ -/* 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%; +} diff --git a/index.html b/index.html index a7f9e3ad1..538859e2e 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,3 @@ - - @@ -14,6 +12,41 @@ -

My Resume

+
+ + +
+
+
+

About Me

+

+ Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus. +

+
+
+
+

Skills

+
    +
  • Skill 1
    • +
  • Skill 2
    • +
  • Skill 3
    • +
  • Skill 4
    • +
+
+
+

Work History

+
    +
  • Job 1
    • +
  • Job 2
    • +
  • Job 3
    • +
  • Job 4
    • +
+
\ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..19bdba958 100644 --- a/less/index.less +++ b/less/index.less @@ -54,6 +54,6 @@ table { } html, body { - height: 100%; + height: 100%; } From 618d771859d0060e5c6c3cb49cc8da30d0b853e7 Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Mon, 11 May 2020 18:17:18 -0400 Subject: [PATCH 2/5] Finished HTML skeleton --- README.md | 4 ++-- index.html | 50 +++++++++++++++++++++++++++++++++----------------- 2 files changed, 35 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index aa5d09abf..cc21c03a3 100644 --- a/README.md +++ b/README.md @@ -31,9 +31,9 @@ Follow these steps for completing your project. * [ ] 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 -* [ ] Content: Skills - Showcase a list of skills you have somewhere on your resume +* [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 -* [ ] 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] 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 diff --git a/index.html b/index.html index 538859e2e..3011bd1e0 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,5 @@ + + @@ -7,27 +9,29 @@ + +
+

Bob Johnson

+
+ References + Website + Portfolio + Contact +
+
-
-

About Me

-

- Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus. -

+
+

About Me

+

+ Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus. +

@@ -38,7 +42,7 @@

Skills

  • Skill 3
  • Skill 4
    • -
    +

    Work History

      @@ -46,7 +50,19 @@

      Work History

    • Job 2
    • Job 3
    • Job 4
      • -
    +
    - - \ No newline at end of file +
    + +
    + + \ No newline at end of file From 5b2974619dc7719b63fda6d9828bf6221cad4c81 Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Mon, 11 May 2020 19:09:32 -0400 Subject: [PATCH 3/5] added variable to CSS LESS --- README.md | 2 +- css/index.css | 3 ++ index.html | 112 ++++++++++++++++++++++++------------------------ less/index.less | 9 ++++ 4 files changed, 69 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index cc21c03a3..21bdeea51 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Follow these steps for completing your project. * [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) -* [ ] Variables: Incorporate variables in your project for color and font stacks. +* [x] 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. diff --git a/css/index.css b/css/index.css index b56477ed7..72af708be 100644 --- a/css/index.css +++ b/css/index.css @@ -134,3 +134,6 @@ html, body { height: 100%; } +.opener { + font: Verdana; +} diff --git a/index.html b/index.html index 3011bd1e0..627e223da 100644 --- a/index.html +++ b/index.html @@ -2,67 +2,67 @@ - + - My Resume +My Resume - + - -
    - - -
    -
    -
    -

    About Me

    -

    - Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus. -

    +
    +
    - -
    - - \ No newline at end of file + + + +
    +
    +

    About Me

    +

    + Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus. +

    +
    +
    +
    +

    Skills

    +
      +
    • Skill 1
      • +
    • Skill 2
      • +
    • Skill 3
      • +
    • Skill 4
      • +
    +
    +
    +

    Work History

    +
      +
    • Job 1
      • +
    • Job 2
      • +
    • Job 3
      • +
    • Job 4
      • +
    +
    +
    + +
    + + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 19bdba958..000b005ba 100644 --- a/less/index.less +++ b/less/index.less @@ -57,3 +57,12 @@ html, body { height: 100%; } +//Variables start here// +@background-color:#f5f5dc; +@right-font:Verdana; +@right-size:1rem; +//Variables end here// + +.opener{ + font:@right-font; +} \ No newline at end of file From e6d84cf0d75d6a93bc60bf10902f94ef7cfcfe02 Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Tue, 12 May 2020 22:35:56 -0400 Subject: [PATCH 4/5] Created new variables, mixins, and aligned content --- README.md | 4 +-- css/index.css | 43 +++++++++++++++++++++++++++++- index.html | 70 ++++++++++++++++++++++++++----------------------- less/index.less | 65 +++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 141 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 21bdeea51..bec99bab1 100644 --- a/README.md +++ b/README.md @@ -35,8 +35,8 @@ Follow these steps for completing your project. * [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. -* [ ] 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 +* [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 * [ ] Mobile: Use nested-at rules to provide a mobile version of your resume. Use `500px` as a `max-width` for mobile. ## Stretch Goals: diff --git a/css/index.css b/css/index.css index 72af708be..8b0024de0 100644 --- a/css/index.css +++ b/css/index.css @@ -134,6 +134,47 @@ html, body { height: 100%; } +.margined { + margin-left: 10%; + margin-right: 10%; +} +body { + background: #f5f5dc; +} .opener { - font: Verdana; + font-size: 1rem; + font-family: Verdana; + text-align: center; + display: flex; + flex-direction: column; + align-content: space-around; +} +.opener .name { + font-size: 3rem; +} +.opener .logo img { + border: solid; +} +.opener nav { + flex-direction: column; + justify-content: center; + margin-left: 10%; + margin-right: 10%; +} +.opener nav .links { + font-size: 1rem; + display: flex; + justify-content: space-evenly; + align-items: center; +} +.top-content .intro { + display: flex; + flex-direction: column; +} +.top-content .intro h2 { + text-align: center; +} +.top-content .intro p { + margin-left: 10%; + margin-right: 10%; } diff --git a/index.html b/index.html index 627e223da..11aaf6bc7 100644 --- a/index.html +++ b/index.html @@ -14,36 +14,39 @@ -
    - - -
    -
    + +

    About Me

    Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

    -
    -
    -

    Skills

    -
      -
    • Skill 1
      • -
    • Skill 2
      • -
    • Skill 3
      • -
    • Skill 4
      • -
    -
    -
    +
    +
    +
    +

    Skills

    +
      +
    • Skill 1
      • +
    • Skill 2
      • +
    • Skill 3
      • +
    • Skill 4
      • +
    +
    +

    Work History

    • Job 1
      • @@ -51,18 +54,19 @@

      Work History

    • Job 3
    • Job 4
    -
    -
    -
    -

    Contact Me

    -
    +
    + -
    - - \ No newline at end of file + +
    + + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 000b005ba..d23ba4bc3 100644 --- a/less/index.less +++ b/less/index.less @@ -58,11 +58,66 @@ html, body { } //Variables start here// -@background-color:#f5f5dc; -@right-font:Verdana; -@right-size:1rem; +@background-color: #f5f5dc; +@right-font: Verdana; +@right-size: 1rem; //Variables end here// -.opener{ - font:@right-font; +.margined { + margin-left: 10%; + margin-right: 10%; +} + +.fontsettings { + font-size: @right-size; + font-family: @right-font; +} + +body{ + background:@background-color; +} + +.opener { + .fontsettings(); + text-align: center; + display: flex; + flex-direction: column; + align-content: space-around; + + .name { + font-size: 3rem; + } + .logo { + img { + border: solid; + } + } + + nav { + flex-direction: column; + justify-content: center; + .margined(); + .links { + .fontsettings(); + display: flex; + justify-content: space-evenly; + align-items: center; + } + } + +} + + + +.top-content { + .intro { + display: flex; + flex-direction: column; + h2 { + text-align: center; + } + p{ + .margined(); + } + } } \ No newline at end of file From 5b82f5aa713ac3d8a696017c7e72192330088492 Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Wed, 13 May 2020 11:18:37 -0400 Subject: [PATCH 5/5] added final mixins and media queries for 500px --- README.md | 2 +- css/index.css | 87 +++++++++++++++++++++++++++++++++++++--- index.html | 40 +++++++++---------- less/index.less | 104 +++++++++++++++++++++++++++++++++++++++++++----- 4 files changed, 197 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index bec99bab1..8cea9c41f 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ Follow these steps for completing your project. * [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 -* [ ] Mobile: Use nested-at rules to provide a mobile version of your resume. Use `500px` as a `max-width` for mobile. +* [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 8b0024de0..706b0f11d 100644 --- a/css/index.css +++ b/css/index.css @@ -138,8 +138,32 @@ body { margin-left: 10%; margin-right: 10%; } +.fontsettings { + font-size: 1rem; + font-family: Verdana; +} body { background: #f5f5dc; + display: flex; + align-content: space-around; + flex-direction: column; +} +.links { + font-size: 1rem; + font-family: Verdana; + display: flex; + justify-content: space-evenly; + align-items: center; +} +@media (max-width: 500px) { + .links { + display: flex; + flex-direction: column; + justify-content: center; + align-content: space-around; + margin-left: 10%; + margin-right: 10%; + } } .opener { font-size: 1rem; @@ -154,6 +178,9 @@ body { } .opener .logo img { border: solid; + width: 100%; + height: 100%; + object-fit: cover; } .opener nav { flex-direction: column; @@ -161,20 +188,68 @@ body { margin-left: 10%; margin-right: 10%; } -.opener nav .links { - font-size: 1rem; - display: flex; - justify-content: space-evenly; - align-items: center; -} .top-content .intro { display: flex; flex-direction: column; } .top-content .intro h2 { text-align: center; + font-size: 2rem; + line-height: 1.4; } .top-content .intro p { margin-left: 10%; margin-right: 10%; + line-height: 1.4; +} +.middle-content .skills { + display: flex; + flex-direction: column; + align-content: center; +} +.middle-content .skills h2 { + margin-left: 10%; + margin-right: 10%; + text-align: left; + font-size: 2rem; + line-height: 1.4; +} +.middle-content .skills ul { + margin-left: 10%; + margin-right: 10%; + line-height: 1.4; +} +.mb-content .work-history { + display: flex; + flex-direction: column; + align-content: center; +} +.mb-content .work-history h2 { + margin-left: 10%; + margin-right: 10%; + text-align: left; + font-size: 2rem; + line-height: 1.4; +} +.mb-content .work-history ul { + margin-left: 10%; + margin-right: 10%; + line-height: 1.4; +} +.bottom-content { + font-size: 1rem; + font-family: Verdana; + text-align: center; + display: flex; + flex-direction: column; + align-content: space-around; +} +.bottom-content nav { + flex-direction: column; + justify-content: center; + margin-left: 10%; + margin-right: 10%; +} +.bottom-content nav .info { + font-size: 2rem; } diff --git a/index.html b/index.html index 11aaf6bc7..30528773f 100644 --- a/index.html +++ b/index.html @@ -40,33 +40,33 @@

    About Me

    Skills

      -
    • Skill 1
      • -
    • Skill 2
      • -
    • Skill 3
      • -
    • Skill 4
      • +
    • Skill 1 - Here is some context regarding Skill 1
      • +
    • Skill 2 - Here is some context regarding Skill 2
      • +
    • Skill 3 - Here is some context regarding Skill 3
      • +
    • Skill 4 - Here is some context regarding Skill 4
    +
    +

    Work History

      -
    • Job 1
      • -
    • Job 2
      • -
    • Job 3
      • -
    • Job 4
      • +
    • Job 1 - Here is a description regarding Job 1
      • +
    • Job 2 - Here is a description regarding Job 2
      • +
    • Job 3 - Here is a description regarding Job 3
      • +
    • Job 4 - Here is a description regarding Job 4
    -
    - -
    + \ No newline at end of file diff --git a/less/index.less b/less/index.less index d23ba4bc3..1b6b520cd 100644 --- a/less/index.less +++ b/less/index.less @@ -50,7 +50,7 @@ table { /* Set every element's box-sizing to border-box */ * { - box-sizing: border-box; + box-sizing: border-box; } html, body { @@ -75,7 +75,25 @@ html, body { body{ background:@background-color; -} + display: flex; + align-content: space-around; + flex-direction: column; +} + +.links { + .fontsettings(); + display: flex; + justify-content: space-evenly; + align-items: center; + @media(max-width:500px) { + + display: flex; + flex-direction: column; + justify-content: center; + align-content: space-around; + .margined(); + } +} .opener { .fontsettings(); @@ -87,9 +105,14 @@ body{ .name { font-size: 3rem; } + .logo { + img { border: solid; + width: 100%; + height: 100%; + object-fit: cover; } } @@ -97,12 +120,7 @@ body{ flex-direction: column; justify-content: center; .margined(); - .links { - .fontsettings(); - display: flex; - justify-content: space-evenly; - align-items: center; - } + } } @@ -113,11 +131,79 @@ body{ .intro { display: flex; flex-direction: column; + h2 { text-align: center; + font-size:2rem; + line-height: 1.4; } + p{ .margined(); + line-height: 1.4; } } -} \ No newline at end of file +} + +.middle-content { + .skills { + display: flex; + flex-direction: column; + align-content: center; + + h2 { + .margined(); + text-align: left; + font-size:2rem; + line-height: 1.4; + } + + ul{ + .margined(); + line-height: 1.4; + + } + } +} + +.mb-content { + + .work-history { + display: flex; + flex-direction: column; + align-content: center; + + h2 { + .margined(); + text-align: left; + font-size:2rem; + line-height: 1.4; + } + + ul{ + .margined(); + line-height: 1.4; + } + + } +} + +.bottom-content { + .fontsettings(); + text-align: center; + display: flex; + flex-direction: column; + align-content: space-around; + + nav { + flex-direction: column; + justify-content: center; + .margined(); + + .info { + font-size: 2rem; + } + + } + +}