Andrew Muto

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 `<firstName-lastName>`.
+- [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 `<firstName-lastName>`.
 - [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
 - [ ] Push commits: git push origin `<firstName-lastName>`.
 
@@ -18,26 +18,26 @@ 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
-* [ ] 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] 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

css/index.css

@@ -1 +1,255 @@
-/* Compile your LESS 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%;
+}
+.margined {
+  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;
+  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;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.opener nav {
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 10%;
+  margin-right: 10%;
+}
+.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;
+}

index.html

@@ -2,18 +2,71 @@
 
 <html lang="en">
 <head>
-  <meta charset="utf-8">
+<meta charset="utf-8">
 
-  <title>My Resume</title>
+<title>My Resume</title>
 
-  <link rel="stylesheet" href="css/index.css">
+<link rel="stylesheet" href="css/index.css">
 
-  <!--[if lt IE 9]>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-  <![endif]-->
+<!--[if lt IE 9]>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+<![endif]-->
 </head>
 
 <body>
-  <h1>My Resume</h1>
+  <header class="opener">
+    <nav>
+      <h1 class="name">Bob Johnson</h1>
+      <div class="links">
+        <a href="#references">References</a>
+        <a href="#website">Website</a>
+        <a href="#portfolio">Portfolio</a>
+        <a href="#contact">Contact</a>
+      </div>
+    </nav>
+    <div class="logo">  
+      <img src="https://pbs.twimg.com/profile_images/2512732251/zu8wejss1w2znkvcvwag_400x400.jpeg">
+    </div>
+  </header>
+<section class="top-content">
+  <div class="intro">
+    <h2>About Me</h2>
+    <p>
+      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.
+    </p>
+  </div>
+</section>
+<section class="middle-content">
+  <div class="skills">
+    <h2>Skills</h2>
+    <ul>
+      <li>Skill 1 - Here is some context regarding Skill 1</li>
+      <li>Skill 2 - Here is some context regarding Skill 2</li>
+      <li>Skill 3 - Here is some context regarding Skill 3</li>
+      <li>Skill 4 - Here is some context regarding Skill 4</li>
+    </ul>
+  </div>
+  </section>
+<section class="mb-content">
+  <div class="work-history">
+      <h2>Work History</h2>
+      <ul>
+        <li>Job 1 - Here is a description regarding Job 1</li>
+        <li>Job 2 - Here is a description regarding Job 2</li>
+        <li>Job 3 - Here is a description regarding Job 3</li>
+        <li>Job 4 - Here is a description regarding Job 4</li>
+      </ul>
+  </div>
+</section>
+<footer class="bottom-content">
+  <nav>
+    <h1 class="info">Contact Me</h1>
+    <div class="links">
+      <a href="#phone">Twitter </a>
+      <a href="#email">Email</a>
+      <a href="#linkedin">Linkedin</a>
+    </div>
+  </nav>
+</footer>
 </body>
 </html>