diff --git a/README.md b/README.md index 5912e2c97..9732b7d1d 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,11 @@ 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 ``. -- [ ] Implement the project on your newly created `` branch, committing changes regularly. +- [ 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. - [ ] Push commits: git push origin ``. Follow these steps for completing your project. @@ -18,7 +18,7 @@ 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 cohort's help channel or your team lead for help. +* [ 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. * [ ] 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 diff --git a/css/index.css b/css/index.css index 7dd97920d..11a8be3a6 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,276 @@ -/* 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; + padding: 0; + margin: 0; + max-width: 100%; +} +@font-face { + font-family: 'Oswald'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/oswald/v31/TK3_WkUHHAIjg75cFRf3bXL8LICs169vgUE.ttf) format('truetype'); +} +html, +body { + height: 100%; +} +body { + background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); +} +h1, +h2, +h3, +a { + color: #696969; + font-family: 'Oswald', sans-serif; +} +section { + padding: 3%; +} +header { + width: 100%; + border: 2px solid black; + padding-top: 6%; +} +@media (max-width: 500px) { + header { + width: 100%; + height: 22vh; + display: flex; + flex-direction: column; + } + header nav { + display: flex; + flex-direction: column; + padding: 2%; + } + header a { + display: flex; + justify-content: space-between; + } +} +header nav { + width: 100%; + display: flex; + justify-content: space-around; + align-items: baseline; +} +header nav a { + text-decoration: none; + letter-spacing: 1px; + font-size: 1.3rem; + display: flex; + justify-content: space-between; +} +header nav a:hover { + color: pink; +} +header nav h1 { + width: 70%; + font-size: 2.5rem; + padding-bottom: 2%; +} +.profile { + width: 90%; + padding-top: 2%; + padding-left: 2%; + padding-bottom: 2%; + display: flex; + flex-direction: row; + align-items: center; +} +@media (max-width: 500px) { + flex-direction: column; +} +@media (max-width: 500px) { + section { + flex-direction: column; + } +} +h2 { + width: 25%; + padding: 1% 0; + font-size: 1.2rem; +} +p { + width: 40%; + font-size: 1.2rem; + font-family: 'Oswald', sans-serif; + color: #2F4F4F; +} +img { + width: 20%; + border: 1px solid black; + border-radius: 85%; +} +.skills { + width: 100%; + height: 62.5vh; + color: #2F4F4F; + font-family: 'Oswald', sans-serif; + padding-top: 3%; + display: flex; + justify-content: space-around; + border-top: 4px dotted black; + border-bottom: 4px dotted black; +} +.skills .list1 { + width: 50%; + padding: 3%; + list-style-type: none; + font-size: 1.2rem; + font-family: 'Oswald', sans-serif; + color: #2F4F4F; +} +.skills .list2 { + width: 50%; + padding: 3%; + font-size: 1.2rem; +} +.skills h2 { + font-size: 1.75rem; +} +table { + padding: 10%; + line-height: 2; + color: #2F4F4F; + font-family: 'Oswald', sans-serif; +} +.footer h3 { + font-size: 1.2rem; + color: white; + text-align: center; + margin: 0 40%; + padding: 1%; + background-color: #4682B4; +} diff --git a/index.html b/index.html index a7f9e3ad1..c0ef3efa9 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ + + My Resume @@ -14,6 +16,73 @@ -

My Resume

+
+ +
+
+
+

Profile

+

Currently a student at Lambda School in the Full Stack Web Development. This is a valuable first experience in Computer Programming. Fluent in English and Spanish, verbal and written communication.

+
+ +
+
+
+

Skills

+
Programming
+
Debugging
+
Collaboration
+
Critical Thinking
+
Oral written communication
+
+
+

Languages

+
JavaScript
+
Java
+
Python
+
DJango
+
SQL
+
+ +
+
+

Work Experience

+ + + + + + + + + + + + + + + + + + + + + + + + + +
YearsCompanyTitleTech Used
1AppleSoftware EngineerSwift
2MicrosoftComputer Scientist.Net
3AmazonDevs OpAWS
+ +
+ \ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..836cce031 100644 --- a/less/index.less +++ b/less/index.less @@ -50,10 +50,204 @@ table { /* Set every element's box-sizing to border-box */ * { - box-sizing: border-box; + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + // border: 1px solid grey!important; //Take important off when done } +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap'); +//media queries begin +// @media (max-width:500px){ +// width: 100%; +// height: 17vh; +// }//this ends the header media query + + + +//media queries END + +//variables start + +@color:#2F4F4F; + +@font: 'Oswald', sans-serif; + +.headingTitle2 (){ + font-size: 1.2rem; +} //MIXIN + +//variables end html, body { - height: 100%; + height: 100%; } +body { + + background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); + } + + h1,h2,h3, a { + color: #696969; + font-family: @font + } + + section { + padding: 3%; + } +// HEADER BEGINS BELOW THIS LINE****** + +header { + width:100%; + border: 2px solid black; + padding-top: 6%; + + @media (max-width:500px){ + width: 100%; + height: 22vh; + display: flex; + flex-direction: column; + + nav{ + display:flex; + flex-direction: column; + padding: 2%; + + }//this ends the nav inside media query + + a { + display: flex; + justify-content: space-between; + } + }//this ends the header media query + + nav { + width: 100%; + display:flex; + justify-content: space-around; + align-items:baseline; + + a{ + text-decoration: none; + letter-spacing: 1px; + font-size: 1.3rem; + display: flex; + justify-content: space-between; + &:hover { + color: pink; + }//this ends the hover + } //this ends the "a" + h1 { + width:70%; + font-size: 2.5rem; + padding-bottom: 2%; + }//This ends nav + } //this ends h1 +} //this ends header + +// HEADER ENDS ABOVE THIS LINE****** + +//PROFILE SECTION AND PHOTO BEGINS BELOW THIS LINE***** +.profile { + width:90%; + padding-top: 2%; + padding-left:2%; + padding-bottom: 2%; + display: flex; + flex-direction:row; + align-items: center; +} + + @media(max-width:500px){ + flex-direction: column; + } + + + + section { + @media(max-width:500px){ + flex-direction: column; + + }//this ends media query for section + }//this ends section + +h2 { + width: 25%; + padding: 1% 0; + .headingTitle2() +}//this ends h2 +p { + width:40%; + .headingTitle2(); + font-family: @font; + color: @color +}//this ends p tag + +img { + width: 20%; + border: 1px solid black; + border-radius: 85%; +} +//PROFILE AND IMAGE SECTION ENDS ABOVE THIS LINE**** + + +//SKILLS AND LANGUAGE SECTION BEGINS BELOW******** +.skills { + width: 100%; + height: 62.5vh; + color: @color; + font-family: @font; + padding-top: 3%; + display: flex; + justify-content:space-around; + border-top: 4px dotted black; + border-bottom: 4px dotted black; + + .list1 { + width: 50%; + padding:3%; + list-style-type: none; + .headingTitle2(); + font-family: @font; + color: @color; + } //This ends .list + + .list2{ + width: 50%; + padding: 3%; + .headingTitle2(); + } + + h2 { + font-size: 1.75rem; + }//this ends list2 + }//this ends .skills + +// SKILLS AND LANGUAGES SECTION ENDS ABOVE THIS LINE***** +//Work experience table starts +table { + // border: 1px solid black; + padding: 10%; + line-height: 2; + color: @color; + font-family: @font; +}//ends table +//work experience table ends +// FOOTER BEGINS BELOW THIS LINE ********* + +.footer { + h3{ + .headingTitle2(); + color:white; + text-align: center; + margin: 0 40%; + padding: 1%; + background-color: #4682B4; + // @media(max-width: 500px){ + // width: 80%; + // display: flex; + // justify-content: flex-start; + // }//this ends media query + }// this ends h3 +}//this ends footer \ No newline at end of file