diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d6b6a9f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Joe Johnson</title>
+    <link rel="stylesheet" href=style.css>
+  </head>
+  <body>
+    <header>
+      <ul>
+        <li class="selected">About Me </li> |
+        <li><a href="portfolio.html">Portfolio</a></li>
+      </ul>
+      <h1> JOE JOHNSON </h1>
+    </header>
+    <article>
+      <div class ="para">
+        <h3>I ENJOY LIFE AS A DEVELOPER</h3>
+        <p>I'm Joe Johnson, a Developer based in NYC. I Have ten years of experience in the graphic design world, specializing in the creation of responsive websites.</p>
+      </div>
+      <div>
+        <img class="bean" src="mrbean.jpeg">
+      </div>
+    </article>
+    <footer>
+      <ul>
+        <li><a href="">Facebook</li></a> |
+        <li><a href="">Twitter</li></a> |
+        <li><a href="">Instagram</li></a> |
+        <li><a href="">LinkedIn</li></a>
+      </ul>
+    </footer>
+  </body></html>
\ No newline at end of file
diff --git a/mrbean.jpeg b/mrbean.jpeg
new file mode 100644
index 0000000..e7578d4
Binary files /dev/null and b/mrbean.jpeg differ
diff --git a/portfolio.html b/portfolio.html
new file mode 100644
index 0000000..46cb8ba
--- /dev/null
+++ b/portfolio.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Joe Johnson</title>
+    <link rel="stylesheet" href=style.css>
+  </head>
+  <body>
+    <header>
+      <ul>
+        <li><a href="index.html">About Me </a></li> |
+        <li class="selected">Portfolio</li>
+      </ul>
+      <h1> JOE JOHNSON </h1>
+    </header>
+    <article>
+        <h2>Experience</h2>
+        <p>I recently graduated from a Front-End Web Development course at General Assembly where I learned HTML, CSS, JavaScript, jQuery and how to be an <b><i>awesome</i></b> Front-End Web Developer! During my spare time, I enjoy senior water aerobics, pickling, and spending time with my goldfish, Jerry.</p>
+        <h3>PORTFOLIO</h3>
+        <ul class="portfolio2">
+          <li class="divider">
+            <h4>Web Developer</h4><h5>, Relaxr </h5><h6>2015 - present</h6>
+            </br>Developed a multi-column layout blog, landing page, and contact forms that render on mobile devices.
+            <p><img class="portfolioImage" src="images/relaxr-deliverable.png"></p>
+          </li>
+          <li class="divider">
+            <h4>Web Developer</h4><h5>, Startup Matchmaker </h5><h6>2015 - present</h6>
+            </br>Used a design team's wireframes to develop this company's responsive homepage.
+            <p><img class="portfolioImage" src="images/startup-matchmaker-deliverable.png"></p>
+          </li>
+          <li class="divider">
+            <h4>Web Developer</h4><h5>, Citipix </h5><h6>2015 - present</h6>
+            </br>Built web app prototype that allows users to store and quickly retrieve photos using keywords.
+            <p><img class="portfolioImage" src="images/citipix-deliverable.png"></p>
+            </li>
+
+          </li>
+    </article>
+    <footer>
+      <ul class="divider">
+        <li><a href="">Facebook</li></a> |
+        <li><a href="">Twitter</li></a> |
+        <li><a href="">Instagram</li></a> |
+        <li><a href="">LinkedIn</li></a>
+      </ul>
+    </footer>
+  </body></html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..92b0878
--- /dev/null
+++ b/style.css
@@ -0,0 +1,95 @@
+.selected {
+  font-style: italic;
+}
+.para {
+  float: left;
+  width: 50%;
+}
+.bean {
+  text-align: right;
+  border: 2px solid;
+  margin: 10px 0px 10px 20px;
+  padding: 5px;
+}
+.portfolio2 {
+  display: block;
+  margin-left: 50px;
+}
+
+.portfolioImage {
+  margin-left: 20px;
+  margin-top: 10px;
+  border: 2px solid;
+  padding: 5px;
+}
+.divider {
+  display: block;
+  margin-top:10px;
+  line-height: 20px;
+}
+
+h1{
+  font-family: arial;
+}
+h2 {
+  margin: 30px 0px;
+  font-family: arial;
+}
+h3 {
+  margin: 40px 0px 20px 0px;
+  font-size: 16px;
+  font-family: arial;
+}
+h4 {
+  font-weight: bold;
+  font-style: italic;
+  display:inline;
+  font-family: arial;
+}
+h5 {
+  display:inline;
+  font-weight: normal;
+  font-size: 15px;
+  font-family: arial;
+}
+h6 {
+  font-weight: normal;
+  display:inline;
+  font-family: arial;
+}
+body {
+  font-family: times;
+  font-size: 17px;
+  text-align: center;
+  margin: 40px 25px 40px 25px;
+  border-top: solid 5px;
+  border-bottom: solid 5px;
+  padding: 30px;
+}
+p {
+  font-family: times;
+  line-height: 22px;
+}
+article {
+  border-top: solid 1px;
+  border-bottom: solid 1px;
+  text-align: left;
+}
+header{
+  display: inline;
+  font-family: arial;
+}
+footer {
+  font-style: bold;
+  display: inline;
+  font-family: arial;
+}
+ul {
+  -webkit-padding-start: 0px;
+}
+li {
+  display: inline;
+}
+a {
+  color: black;
+}
\ No newline at end of file
