diff --git a/Pic01.JPG b/Pic01.JPG
new file mode 100644
index 000000000..a913a5b91
Binary files /dev/null and b/Pic01.JPG differ
diff --git a/Preprocessing-I b/Preprocessing-I
new file mode 160000
index 000000000..c9d519530
--- /dev/null
+++ b/Preprocessing-I
@@ -0,0 +1 @@
+Subproject commit c9d519530d20b80f1996f21e75a25bfe81a65475
diff --git a/css/index.css b/css/index.css
index 7dd97920d..2d3686e54 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,287 @@
-/* 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;
+}
+body {
+  background-color: black;
+}
+.container {
+  max-width: 1000px;
+  font-size: 62.5%;
+  margin: 0 auto;
+}
+.container header {
+  text-align: right;
+  margin: 0 0 30px 10%;
+  padding: 13px;
+  background: lightgray;
+  height: auto;
+  border-radius: 40px 0 0 40px;
+  border: 2px solid #6c756b;
+}
+@media (max-width: 500px) {
+  .container header {
+    text-align: center;
+    margin: 0;
+    border-radius: 0;
+    height: auto;
+  }
+}
+@media (max-width: 500px) {
+  .container header nav {
+    display: flex;
+    flex-flow: column nowrap;
+  }
+}
+.container header nav a {
+  text-decoration: none;
+  color: black;
+  margin: 0 5%;
+  font-size: 1.2rem;
+}
+.container header nav a:hover {
+  color: white;
+}
+@media (max-width: 500px) {
+  .container header nav a {
+    margin: 10px;
+    border: 2px solid #6c756b;
+    padding: 10px;
+  }
+}
+.container h2 {
+  font-size: 1.5rem;
+}
+.container .headline {
+  width: 100%;
+  background: lightgray;
+  padding: 30px 20px;
+  margin: 30px 0;
+}
+.container .headline img {
+  width: 20%;
+}
+.container .headline h1 {
+  font-size: 2rem;
+  margin: 20px 0;
+  padding: 20px 0;
+  border-bottom: 1px dashed #6c756b;
+}
+.container .headline p {
+  font-size: 1.3rem;
+}
+.container .content {
+  background: lightgray;
+  border: 2px solid #6c756b;
+  padding: 20px 0;
+  display: flex;
+  flex-flow: row wrap;
+}
+@media (max-width: 500px) {
+  .container .content {
+    flex-flow: column nowrap;
+  }
+}
+.container .content .about-me {
+  width: 30%;
+  margin: 0 2%;
+}
+@media (max-width: 500px) {
+  .container .content .about-me {
+    width: 95%;
+  }
+}
+.container .content .about-me p {
+  font-size: 1rem;
+  margin: 20px 0;
+}
+.container .content .skills {
+  width: 60%;
+  margin: 0 2%;
+}
+@media (max-width: 500px) {
+  .container .content .skills {
+    width: 95%;
+  }
+}
+.container .content .skills li {
+  padding: 10px 30px;
+  margin: 10px;
+  background: lightgray;
+  border: 2px solid #6c756b;
+  border-radius: 10px;
+  font-size: 1rem;
+}
+.container .content .history {
+  width: 100%;
+  margin: 0 2%;
+}
+@media (max-width: 500px) {
+  .container .content .history {
+    width: 95%;
+  }
+}
+.container .content .history table {
+  margin: 20px 0;
+  width: 100%;
+}
+.container .content .history table tr {
+  width: 100%;
+  background: #6c756b;
+}
+.container .content .history table tr:nth-child(even) {
+  background: lightgray;
+}
+.container .content .history table th {
+  font-size: 1.1rem;
+  padding: 10px 0;
+}
+.container .content .history table td {
+  padding: 10px 0;
+  font-size: 1rem;
+  text-align: center;
+}
+.container .contact {
+  margin: 30px 0;
+  width: 100%;
+  background: lightgray;
+}
+.container .contact h2 {
+  margin: 20px 0;
+}
+.container .contact p {
+  font-size: 1rem;
+}
+.container footer p {
+  width: 100%;
+  text-align: center;
+  font-size: 1rem;
+}
diff --git a/index.html b/index.html
index a7f9e3ad1..421dd0eb3 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,96 @@
 <!doctype html>
 
 <html lang="en">
-<head>
-  <meta charset="utf-8">
 
-  <title>My Resume</title>
+<body>
+
+  <head>
+    <meta charset="utf-8">
+
+    <title>My Resume</title>
 
-  <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/index.css">
 
-  <!--[if lt IE 9]>
+    <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
-</head>
+  </head>
+
+  <body>
+    <section class="home container">
+      <header>
+        <nav>
+          <a href="#headline">Home</a>
+          <a href="#about-me">About Me</a>
+          <a href="#history">My Work</a>
+          <a href="#contact">Contact</a>
+        </nav>
+      </header>
+      <section class="home headline">
+        <section class="home hl-top">
+          <img class="home headline-img" src="../Pic01.JPG">
+          <h1>Annique Nsabimana - Web Developer</h1>
+          <p>Who said women can't code? I've heard a saying "I'm SUCH a tech person!" said (almost) no one ever so I am
+            here to change that!</p>
+        </section>
+      </section>
+      <section class="home content">
+        <section class="home about-me">
+          <h2>About Me</h2>
+          <p> As a dual citizen to a 3rd War Country, I chose to study coding not only that it is said that many women
+            are not meant to code, but my small birth country called Burundi has probably never had any woman that codes
+            therefore I aspire not only to creat coding projects within the country to also encourage women to believe
+            in their abilities and talents within this insdustry regardless on how it is perceived.</p>
+        </section>
+        <section class="home skills">
+          <h2>Great Skills</h2>
+          <ul>
+            <li>Practice Writing code</li>
+            <li>Taking Care Of My Daugther</li>
+            <li>Writing</li>
+          </ul>
+        </section>
+        <section class="home history">
+          <h2>History</h2>
+          <table>
+            <tbody>
+              <tr>
+                <th>Time</th>
+                <th>Company</th>
+                <th>Title</th>
+              </tr>
+              <tr>
+                <td>1</td>
+                <td>Amazon</td>
+                <td>Software Engineer</td>
+              </tr>
+              <tr>
+                <td>2</td>
+                <td>NetFlix</td>
+                <td>Front End Developer</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+      </section>
+      <section class="home contact">
+        <form>
+          <h2>Contact Me
+
+          </h2>
+          <p>First name:</p>
+          <input type="text">
+          <p>Last name:</p>
+          <input type="text">
+          <p>Email:</p>
+          <input type="text"><br>
+          <input type="submit" value="Submit">
+        </form>
+      </section>
+      <footer>
+        <p>Copyright</p>
+      </footer>
+    </section>
+  </body>
 
-<body>
-  <h1>My Resume</h1>
-</body>
 </html>
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index 191ce142e..66b771b71 100644
--- a/less/index.less
+++ b/less/index.less
@@ -52,8 +52,158 @@ table {
 * {
     box-sizing: border-box;
 }
+@primary-color: lightgray;
+@secondary-color: #6c756b;
 
-html, body {
-    height: 100%;
+
+.head-style() {
+	text-align: right;
+	margin: 0 0 30px 10%;
+	padding: 13px;
+	background: @primary-color;
+	height: auto;
+	border-radius: 40px 0 0 40px;
+	border: 2px solid @secondary-color;
+}
+.a-style() {
+	text-decoration: none;
+	color: black;
+	margin: 0 5%;
+	font-size: 1.2rem;
+	&:hover {
+		color: white;
+	}
 }
+body {
+	background-color: black;
 
+}
+.container {
+	max-width: 1000px;
+	font-size: 62.5%;
+	margin: 0 auto;
+	header {
+		.head-style();
+		@media (max-width: 500px) {
+			text-align: center;
+			margin: 0;
+			border-radius: 0;
+			height: auto;
+		}
+		nav {
+			@media (max-width: 500px) {
+				display: flex;
+				flex-flow: column nowrap;
+			}
+			a {
+				.a-style();
+				@media (max-width: 500px) {
+					margin: 10px;
+					border: 2px solid @secondary-color;
+					padding: 10px;
+				}
+			}
+		}
+	}
+	h2 {
+		font-size: 1.5rem; 
+	}
+	.headline {
+		width: 100%;
+		background: @primary-color;
+		padding: 30px 20px;
+		margin: 30px 0;
+		img {
+			width: 20%;
+		}
+		h1 {
+			font-size: 2rem;
+			margin: 20px 0;
+			padding: 20px 0;
+			border-bottom: 1px dashed @secondary-color;
+		}
+		p {
+			font-size: 1.3rem;
+		}
+	}
+	.content {
+		background: @primary-color;
+		border: 2px solid @secondary-color;
+		padding: 20px 0;
+		display: flex;
+		flex-flow: row wrap;
+		@media (max-width: 500px) {
+			flex-flow: column nowrap;
+		}
+		.about-me {
+			width: 30%;
+			margin: 0 2%;
+			@media (max-width: 500px) {
+				width: 95%;
+			}
+			p {
+				font-size: 1rem;
+				margin: 20px 0;
+			}
+		}
+		.skills {
+			width: 60%;
+			margin: 0 2%;
+			@media (max-width: 500px) {
+				width: 95%;
+			}
+			li {
+				padding: 10px 30px;
+				margin: 10px;
+				background: @primary-color;
+				border: 2px solid @secondary-color;
+				border-radius: 10px;
+				font-size: 1rem;
+			}
+		}
+		.history {
+			width: 100%;
+			margin: 0 2%;
+			@media (max-width: 500px) {
+				width: 95%;
+			}
+			table {
+				margin: 20px 0;
+				width: 100%;
+				tr {
+					width: 100%;
+					background: @secondary-color;
+					&:nth-child(even) {
+						background: @primary-color;
+					}
+				}
+				th {
+					font-size: 1.1rem;
+					padding: 10px 0;
+				}
+				td {
+					padding: 10px 0;
+					font-size: 1rem;
+					text-align: center;
+				}
+			}
+		}
+	}
+	.contact {
+		margin: 30px 0;width: 100%;
+		background: @primary-color;
+		h2 {
+			margin: 20px 0;
+		}
+		p {
+			font-size: 1rem;
+		}
+	}
+	footer {
+		p {
+			width: 100%;
+			text-align: center;
+			font-size: 1rem;
+		}
+	}
+}
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
new file mode 100644
index 000000000..762d83dbf
--- /dev/null
+++ b/node_modules/.yarn-integrity
@@ -0,0 +1,10 @@
+{
+  "systemParams": "win32-x64-64",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000..fb57ccd13
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+