diff --git a/css/index.css b/css/index.css
index 7dd97920d..31b2d8760 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,307 @@
-/* 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;
+}
+.addDepth {
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  background-image: linear-gradient(grey, darkgrey);
+}
+.addFlex {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  flex-direction: row;
+}
+html,
+body {
+  height: 100%;
+}
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/muli/v20/7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk30e0.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/quicksand/v20/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-xw.ttf) format('truetype');
+}
+body {
+  font-family: 'Muli', sans-serif;
+  background: linear-gradient(rgba(255, 255, 255, 0), lightgrey, darkgrey, grey);
+}
+header {
+  width: 100%;
+  background: linear-gradient(rgba(255, 255, 255, 0), lightgrey, darkgrey, grey);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  flex-direction: row;
+}
+@media (max-width:750px) {
+  header {
+    display: inline-block;
+    text-align: center;
+  }
+}
+header h1 {
+  width: 20%;
+  text-align: center;
+  font-size: 2rem;
+}
+@media (max-width:750px) {
+  header h1 {
+    font-size: 2.3rem;
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+}
+header ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  flex-direction: row;
+  justify-content: right;
+  align-items: flex-end;
+  list-style: none;
+}
+@media (max-width:750px) {
+  header ul {
+    justify-content: center;
+  }
+}
+header ul .nav {
+  width: 300px;
+  color: black;
+  text-decoration: none;
+  text-align: center;
+  background-color: transparent !important;
+  padding: 10px;
+  margin: 10px;
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  background-image: linear-gradient(grey, darkgrey);
+}
+@media (min-width:600px) {
+  header ul .nav:hover {
+    color: white;
+  }
+}
+@media (max-width:750px) {
+  header ul .nav:hover {
+    color: none;
+  }
+}
+.container1 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  flex-direction: row;
+  width: auto;
+}
+@media (max-width:750px) {
+  .container1 .myPicture {
+    text-align: center;
+    margin-top: 20px;
+  }
+}
+.container1 .intro {
+  background: linear-gradient(rgba(255, 255, 255, 0), lightgrey, darkgrey, grey);
+}
+@media (max-width:750px) {
+  .container1 .intro p {
+    margin: auto 20px;
+  }
+}
+.container1 .intro button {
+  font-size: 1.5rem;
+  margin-left: 50%;
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  background-image: linear-gradient(grey, darkgrey);
+}
+@media (max-width:750px) {
+  .container1 .intro button {
+    margin: 10px;
+    margin-left: 100px;
+    text-align: center;
+    font-size: 1.8rem;
+  }
+}
+@media (max-width:750px) and (min-width:600px) {
+  .container1 .intro button:hover {
+    color: white;
+  }
+}
+.container1 .why {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  flex-direction: row;
+  align-items: top;
+  background: linear-gradient(rgba(255, 255, 255, 0), lightgrey, darkgrey, grey);
+}
+@media (max-width:750px) {
+  .container1 .why p {
+    margin: auto 20px;
+  }
+}
+.container1 .skills {
+  background: linear-gradient(rgba(255, 255, 255, 0), lightgrey, darkgrey, grey);
+}
+.container1 .skills li {
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  background-image: linear-gradient(grey, darkgrey);
+  padding: 10px;
+  margin: 10px;
+  list-style: none;
+}
+div {
+  width: 40%;
+}
+@media (max-width:750px) {
+  div {
+    width: 100%;
+    padding-bottom: 20px;
+    margin-bottom: 5px;
+  }
+}
+.workHistory {
+  background: linear-gradient(rgba(255, 255, 255, 0), lightgrey, darkgrey, grey);
+  width: 100%;
+}
+.workHistory table {
+  overflow-y: auto;
+  height: 100px;
+}
+.workHistory .workhistory.table thead th {
+  position: sticky;
+  top: 0;
+}
+.workHistory table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.workHistory th,
+.workHistory td {
+  padding: 8px 16px;
+}
+.workHistory th {
+  background: #eee;
+}
+h2 {
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  background-image: linear-gradient(grey, darkgrey);
+  padding: 10px;
+  margin: 10px;
+}
+@media (max-width:750px) {
+  h2 {
+    font-size: 1.6rem;
+  }
+}
diff --git a/index.html b/index.html
index a7f9e3ad1..aa03243e0 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,8 @@
 <head>
   <meta charset="utf-8">
 
-  <title>My Resume</title>
-
-  <link rel="stylesheet" href="css/index.css">
+  <title>Daniel Terry , Web Developer</title>
+  <link rel="stylesheet" href="C:\Users\Daniel\Preprocessing-I\css\index.css">
 
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
@@ -14,6 +13,87 @@
 </head>
 
 <body>
-  <h1>My Resume</h1>
+	<header>
+  	<h1>Daniel Terry , Web Developer</h1>
+  	<nav>
+  	<ul>
+  	<a href="#"<li class ="nav">Home</a>
+  	<a href="#"<li class ="nav">About</a>
+  	<a href="https://wizardly-mirzakhani-2cf446.netlify.app/"<li class ="nav">Portfolio</a>
+  	<a href="#"<li class ="nav">Contact</a>
+  	</ul>
+  	</nav>
+  </header>
+  <div class ="container1">
+  <div class ="myPicture">
+  <img src = "https://scontent.fatl1-2.fna.fbcdn.net/v/t1.0-9/95264383_554255512133900_1827810443339497472_o.jpg?_nc_cat=104&_nc_sid=8bfeb9&_nc_ohc=qQqw8ETd-9MAX8KDz-j&_nc_ht=scontent.fatl1-2.fna&oh=682f310f06231122b6bd2a64da9816f5&oe=5F1AC864" alt ="Picture of me" width = "400px">
+  </div>
+  <div class ="intro">
+  <section>
+  	<h2><u>Daniel Terry , Web Dev</u></h2>
+  	<p>Sometimes the easiest way to see someone's value, is through there results. click here to go to a portfolio of my work</p>
+  	<a href = "https://wizardly-mirzakhani-2cf446.netlify.app/"><button><span>Portfolio</span></button></a><br><br>
+  		<span>you can reach me by email:daniel.terry2121@gmail.com</span>
+  </section>
+  </div>
+  <div class= "why">
+  <section>
+  		<h2><u>Why Hire Me?</u></h2>
+  		<p>	My name is Daniel Terry. I've had an abundance of work experience in many different types of work situations, from customer service, to manufacturing , and 
+  		even business. In every job environment I have worked in I have never been fired, I have almost always moved into a solo or leadership role 
+  		and been successful in that work-place. I may be new to tech , but I know that I will excel here as-well.</p>
+  </section>
+  </div>
+  <div class = "skills">
+	<section>
+		<h2 class = "skills"><u>Skills</u></h2>
+		<ul>
+			<li>-HTML-writing clean and semantic HTML</li>
+			<li>-CSS/LESS-Styling to meet any design</li>
+			<li>-Javascript-Adding unique and fun features to your site</li>
+			<li>-Microsoft Excel</li>
+			<li>-Spreadsheets</li>
+			<li>-Improving 5s and lean environments</li>
+			<li>-Leadership</li>
+		</ul>
+	</section>
+	</div>
+	</div>
+	<div class = "workHistory">
+	<section class = "workHistory">
+		<h2><u>Previous Work History</u></h2>
+			<table>
+				<thead>
+					<tr>
+						<th>Years</th>
+						<th>Company</th>
+						<th>Title</th>
+						<th>Responsibilites</th>
+					</tr>
+				</thead>
+				<tr>
+					<td>5</td>
+					<td>VT Industries</td>
+					<td>Accessories Department Supervisor</td>
+					<td>Lead a team of 22 people in daily production, launching and creation of new products, and keeping inventory of related stock.</td>
+				</tr>
+				<tr>
+					<td>2</td>
+					<td>Restore Roofing</td>
+					<td>Team lead</td>
+					<td>Lead a team of 5 doing: roofing,paint work, and remodeling.</td>
+				</tr>
+				<tr>
+					<td>2</td>
+					<td>Hendricks Irrigation</td>
+					<td>Service Tech</td>
+					<td>Install and service irrigation systems.</td>
+				</tr>
+			</table>
+	</section>
+</div>
+<footer>
+<script src ="C:\Users\Daniel\Desktop\notes\advanced_array_method_notes.js"></script>
+</footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index 191ce142e..0e8ad13f5 100644
--- a/less/index.less
+++ b/less/index.less
@@ -29,31 +29,182 @@ article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
+@desktop:~"(min-width:600px)";
+@phone:~"(max-width:750px)";
+@coolBackground:linear-gradient(rgba(255, 255, 255, 0), lightgrey, darkgrey, grey);
+
+  .addDepth{
+   box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  background-image: linear-gradient(grey, darkgrey);
+  }
+  .addFlex{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  flex-direction: row;
+  }
+  
+html,
+body {
+  height: 100%;
+}
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
 body {
-	line-height: 1;
+  font-family: 'Muli', sans-serif;
+  background: @coolBackground;
+  }
+header {
+  width: 100%;
+  background: @coolBackground;
+  .addFlex();
+  
+  @media @phone{
+  	display:inline-block;
+  	text-align:center;
+  }
+
+	h1 {
+	  width: 20%;
+	  text-align:center;
+	  font-size:2rem;
+	  @media @phone{
+	  	font-size:2.3rem;
+	  	display:block;
+	  	width:100%;
+	  	text-align:center;
+	  }
+	}
+   ul{
+   .addFlex();
+  justify-content:right;
+  align-items:flex-end;
+  list-style:none;
+   @media @phone{
+	justify-content:center;
+			  }
+  .nav {
+		 width: 300px;
+	    color: black;
+		 text-decoration: none;
+		 text-align: center;
+		 background-color: transparent !important;
+		 padding: 10px;
+		 margin: 10px;
+		 .addDepth();
+		@media @desktop{
+			 &:hover{
+		 color:white;}
+		}
+		@media @phone{
+			&:hover{
+			color:none;
+			}
+		}
+			  }
+			}
+		}
+	
+.container1 {
+  .addFlex();
+  justify-content: space-evenly;
+  flex-direction: row;
+  width: auto;
+  
+.myPicture{
+	@media @phone{
+	text-align:center;
+	margin-top:20px;
 }
-ol, ul {
-	list-style: none;
 }
-blockquote, q {
-	quotes: none;
+
+	.intro {
+	  background: @coolBackground;
+	  p{
+	  @media @phone{
+	  	margin:auto 20px;
+	  }
+	  }
+	  
+	 button{
+	 	font-size:1.5rem;
+	 	margin-left:50%;
+	 	.addDepth();
+	 	@media @phone{
+	 		margin:10px;
+	 		margin-left:100px;
+	 		text-align:center;
+	 		font-size:1.8rem;
+	 		@media @desktop{
+			 &:hover{
+		 color:white;}
+	 	}
+	 }
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
 }
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
+.why {
+  .addFlex();
+  align-items: top;
+  background:@coolBackground;
+  p{
+  @media @phone{
+  	margin:auto 20px;
+  }
+  }
+}
+.skills {
+	background:@coolBackground;
+}
+.skills li {
+  .addDepth();
+  padding: 10px;
+  margin: 10px;
+  list-style:none;
 }
 
-/* Set every element's box-sizing to border-box */
-* {
-    box-sizing: border-box;
+}
+div {
+  width: 40%;
+  @media @phone{
+  	width: 100%;
+  	padding-bottom:20px;
+  	margin-bottom:5px;
+  }
 }
 
-html, body {
-    height: 100%;
+.workHistory {
+  background: @coolBackground;
+  width: 100%;
+
+table {
+  overflow-y: auto;
+  height: 100px;
 }
+.workhistory.table thead th {
+  position: sticky;
+  top: 0;
+}
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+th,
+td {
+  padding: 8px 16px;
+}
+th {
+  background: #eee;
+}
+}
+h2 {
+  .addDepth();
+  padding: 10px;
+  margin: 10px;
+  @media @phone{
+  	font-size:1.6rem;
+  }
+}
+
+
+