diff --git a/.github/PULL_REQUEST_TEMPLATE b/.github/PULL_REQUEST_TEMPLATE
old mode 100644
new mode 100755
diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/css/normalize.css b/css/normalize.css
new file mode 100755
index 000000000..47b010e47
--- /dev/null
+++ b/css/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/css/normalize.min.css b/css/normalize.min.css
new file mode 100755
index 000000000..1a1f4c41f
--- /dev/null
+++ b/css/normalize.min.css
@@ -0,0 +1 @@
+/*! normalize.css v3.0.2 */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}
diff --git a/css/styles.css b/css/styles.css
new file mode 100755
index 000000000..d51e64b65
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,762 @@
+/* General Styling */
+body {
+	position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-size: 1em;
+	background-color: hsl(0, 0%, 100%, .7)
+}
+
+h2 {
+	text-align: center;
+	font-size: 1.5em;
+	font-family: 'Playfair', serif;
+	margin-top: 2rem;
+}
+
+.container {
+  display: grid;
+  grid-template-rows: .33fr 3fr .67fr;
+  height: 100%;
+}
+
+.main {
+	display: grid;
+	width: 100%;
+	grid-template-columns: 30% 70%;
+	min-height: 45vh;
+	height: auto;
+}
+
+.three-column {
+	width: 75%;
+	height: 30vh;
+	margin: 0 auto;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	justify-content: center;
+	padding: 1rem;
+}
+
+.three-column article {
+	display:flex;
+	flex-flow: wrap column;
+	justify-content: center;
+}
+
+.three-column article p:first-of-type {
+	margin: 0 auto;
+	font-size: 1.25em;
+	width: 70%;
+	font-family: 'Raleway', sans-serif;
+}
+
+/* Header Styling */
+#top-nav ul {
+	position: fixed;
+	width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  background-color: hsl(0, 0%, 0%, .6);
+  margin: 2rem auto;
+}
+
+#top-nav li {
+  display: block;
+  padding: 1rem 3rem;
+  border-right: solid 1px hsl(187, 61%, 43%, .5);
+}
+
+#top-nav a {
+  color: hsl(32, 36%, 76%);
+  text-decoration: none;
+  font-size: 2em;
+}
+
+#top-nav li:hover {
+  background-color: hsl(187, 61%, 43%, .5);
+}
+
+/* Profile Box Styling */
+
+.profile {
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: flex-end;
+  color: hsl(240, 63%, 4%);
+}
+
+.profile h3, .profile span {
+  text-align: center;
+}
+
+.profile-picture {
+  border: 2px dotted hsl(32, 36%, 76%);
+  border-radius: 50%;
+  height: 30vh;
+  width: 30vh;
+  margin: 2vh auto;
+}
+
+.circle {
+	border-radius: 50%;
+	height: 20vh;
+	width: 20vh;
+	margin: 0 auto;
+	/* align-self: center; */
+}
+
+footer {
+	background-color: hsl(0, 0%, 0%, .6);
+}
+
+footer ul {
+	list-style-type: none;
+	display: flex;
+	flex-flow: wrap row;
+	justify-content: flex-end;
+}
+
+footer ul li {
+	margin-right: 5rem;
+}
+
+footer ul a {
+  color: hsl(32, 36%, 76%);
+  text-decoration: none;
+  font-size: 1.2em;
+}
+footer ul a:hover {
+  color: hsl(187, 61%, 43%, .7);
+}
+
+/* Fun things to play with potentially */
+/* Parallax */
+.break {
+	width: 100%;
+	height: 45vh;
+	border-bottom: solid 1px gray;
+}
+
+.parallax-segment {
+	grid-column-start:2;
+}
+
+.parallax-segment img {
+	width: 35vh;
+	height: 35vh;
+	padding: 2rem;
+	float: left;
+}
+
+h1.parallax {
+	margin-left: -999px;
+}
+
+.parallax-segment h1, .parallax-segment h2 {
+	font-family: 'Playfair', serif;
+	margin-top: 2rem;
+}
+
+.parallax-segment p {
+	font-family: 'Raleway', sans-serif;
+	width: 95%;
+}
+
+#know-nothing {
+grid-column-start: 2;
+font-family: 'Gloria Hallelujah', cursive;
+text-align: center;
+margin: 1em auto;
+color: hsl(187, 61%, 43%, .9);
+font-size: 8em;
+width: 90%;
+}
+
+.parallax {
+    /* The image used */
+    background-image: url("../images/max-jakob-beer-562013-unsplash.jpg");
+
+    /* Full height */
+    height: 35vh;
+
+    /* Create the parallax scrolling effect */
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
+@media only screen and (max-device-width: 1366px) {
+    .parallax {
+        background-attachment: scroll;
+    }
+}
+
+
+/* Layout */
+
+a {
+  text-decoration: none;
+}
+
+.clr:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+#sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 30%;
+  z-index: 998;
+  -o-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 40px 1%;
+  background: hsl(0, 0%, 19%);
+  text-align: center;
+  font-family: 'Raleway', sans-serif;
+}
+
+#sidebar ul {
+		list-style-type: none;
+}
+
+#sidebar li {
+	  display: block;
+	  padding: 1rem 3rem;
+	  border-bottom: solid 1px hsl(187, 61%, 43%, .5);
+		margin-left: -2rem;
+}
+
+#sidebar li a {
+  color: hsl(32, 36%, 76%);
+  text-decoration: none;
+}
+
+#sidebar li:hover {
+  background-color: hsl(187, 61%, 43%, .5);
+}
+
+#sidebar-portrait {
+  height: auto;
+  width: 70%;
+  overflow: hidden;
+  margin: 0 auto;
+  border-radius: 50%;
+  background: hsl(0, 0%, 100%);
+}
+
+#sidebar-portrait img {
+  height: auto;
+  width: 100%;
+}
+
+#sidebar-social-icons {
+  display: block;
+  height: auto;
+  width: 60%;
+  margin: 10px auto;
+  background: none;
+}
+
+.sidebar-social-icon {
+  overflow: hidden;
+  display: inline-block;
+  height: 30px;
+  width: 30px;
+  margin: 0 5px;
+  border-radius: 5px;
+  background: hsl(0, 0%, 27%)
+  -o-transition: all 0.3s linear 0s;
+  -moz-transition: all 0.3s linear 0s;
+  -ms-transition: all 0.3s linear 0s;
+  -webkit-transition: all 0.3s linear 0s;
+  transition: all 0.3s linear 0s;
+  cursor: pointer;
+}
+
+.sidebar-social-icon:hover {
+  background: hsl(0, 0%, 37%);
+}
+
+.sidebar-social-icon img {
+  height: 30px;
+  width: 30px;
+}
+
+#title {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100px;
+  width: 70%;
+  z-index: 995;
+  -o-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 10px 0 0 6%;
+  background: hsl(0, 0%, 100%);
+  text-align: center;
+}
+
+#item1, #item2, #item3, #item4, #item5, #item6, #item7, #item8, #item9, #item10, #item11, #item12, #item13, #item14, #item15 {
+  overflow: hidden;
+  z-index: 999;
+  display: block;
+  position: fixed;
+  top: 0;
+  right: -100%;
+  height: 0;
+  width: 100%;
+  background: hsl(0, 0%, 100%);
+  -o-transition: transform 0.6s linear 0s, height 0s linear 0.6s;
+  -moz-transition: transform 0.6s linear 0s, height 0s linear 0.6s;
+  -ms-transition: transform 0.6s linear 0s, height 0s linear 0.6s;
+  -webkit-transition: transform 0.6s linear 0s, height 0s linear 0.6s;
+  transition: transform 0.6s linear 0s, height 0s linear 0.6s;
+}
+
+#item1:target, #item2:target, #item3:target, #item4:target, #item5:target, #item6:target, #item7:target, #item8:target,
+#item9:target, #item10:target, #item11:target, #item12:target, #item13:target, #item14:target, #item15:target {
+  height: 100%;
+  overflow: auto;
+  -o-transition: transform 0.6s linear 0s, height 0s linear 0s;
+  -moz-transition: transform 0.6s linear 0s, height 0s linear 0s;
+  -ms-transition: transform 0.6s linear 0s, height 0s linear 0s;
+  -webkit-transition: transform 0.6s linear 0s, height 0s linear 0s;
+  transition: transform 0.6s linear 0s, height 0s linear 0s;
+  -o-transform: translateZ(0) translateX(-100%);
+  -moz-transform: translateZ(0) translateX(-100%);
+  -webkit-transform: translateZ(0) translateX(-100%);
+  -ms-transform: translateZ(0) translateX(-100%);
+  transform: translateZ(0) translateX(-100%);
+}
+
+#contact {
+  z-index: 997;
+  position: fixed;
+  top: 0;
+  left: -100%;
+  display: block;
+  height: 0;
+  width: 100%;
+  -o-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 0 0 30%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: hsl(0, 0%, 29%);
+  -o-transition: transform 0.6s linear 0s, height 0s linear 0.6s;
+  -moz-transition: transform 0.6s linear 0s, height 0s linear 0.6s;
+  -ms-transition: transform 0.6s linear 0s, height 0s linear 0.6s;
+  -webkit-transition: transform 0.6s linear 0s, height 0s linear 0.6s;
+  transition: transform 0.6s linear 0s, height 0s linear 0.6s;
+}
+
+#contact:target {
+  height: 100%;
+  overflow: auto;
+  -o-transition: transform 0.6s linear 0s, height 0s linear 0s;
+  -moz-transition: transform 0.6s linear 0s, height 0s linear 0s;
+  -ms-transition: transform 0.6s linear 0s, height 0s linear 0s;
+  -webkit-transition: transform 0.6s linear 0s, height 0s linear 0s;
+  transition: transform 0.6s linear 0s, height 0s linear 0s;
+  -o-transform: translateZ(0) translateX(100%);
+  -moz-transform: translateZ(0) translateX(100%);
+  -webkit-transform: translateZ(0) translateX(100%);
+  -ms-transform: translateZ(0) translateX(100%);
+  transform: translateZ(0) translateX(100%);
+}
+
+#contact form {
+  position: relative;
+  height: auto;
+  width: 80%;
+  margin: 0 auto;
+  background: none;
+  text-align: center;
+}
+
+#contact label {
+  display: inline-block;
+  width: 20%;
+  padding: 0 10px 0 0;
+  -o-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: right;
+}
+
+#contact input[type="text"] {
+  height: 30px;
+  width: 50%;
+  border: 0;
+  padding: 0 10px;
+  -o-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+#contact input[type="submit"] {
+  border: 0;
+  margin: 15px 0 15px 20%;
+}
+
+#contact label[for="message"] {
+  height: 300px;
+  padding: 120px 10px 0 10px;
+  -o-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+
+#contact textarea {
+  height: 300px;
+  width: 50%;
+  padding: 5px 10px;
+  border: 0;
+  resize: none;
+  overflow-y: auto;
+  -o-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.left, .right {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  width: 50%;
+  overflow: auto;
+  background: none;
+}
+
+.right {
+  left: 50%;
+  overflow: hidden;
+}
+
+.right img {
+  height: auto;
+  width: 120%;
+}
+
+.button {
+  display: inline-block;
+  height: auto;
+  width: auto;
+  padding: 5px 10px;
+  border-radius: 10px;
+  margin: 5px;
+  -o-transition: all 0.3s linear 0s;
+  -moz-transition: all 0.3s linear 0s;
+  -ms-transition: all 0.3s linear 0s;
+  -webkit-transition: all 0.3s linear 0s;
+  transition: all 0.3s linear 0s;
+  background: hsl(187, 61%, 43%, .75);
+}
+
+.button:hover {
+  background: hsl(187, 61%, 43%, .5);
+}
+
+/* Hexagonal Grid */
+
+#grid {
+  width: 70%;
+  margin: 100px 0 0 30%;
+  padding: 20px 2%;
+  -o-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+#grid li {
+  position: relative;
+  float: left;
+  width: 27.85714285714286%;
+  padding: 0 0 32.16760145166612% 0;
+  list-style-type: none;
+  -o-transform: rotate(-60deg) skewY(30deg);
+  -moz-transform: rotate(-60deg) skewY(30deg);
+  -webkit-transform: rotate(-60deg) skewY(30deg);
+  -ms-transform: rotate(-60deg) skewY(30deg);
+  transform: rotate(-60deg) skewY(30deg);
+  overflow: hidden;
+  visibility: hidden;
+  cursor: pointer;
+}
+
+#grid li * {
+  visibility: visible;
+}
+
+#grid li .hexagon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  -o-transform: skewY(-30deg) rotate(60deg);
+  -moz-transform: skewY(-30deg) rotate(60deg);
+  -webkit-transform: skewY(-30deg) rotate(60deg);
+  -ms-transform: skewY(-30deg) rotate(60deg);
+  transform: skewY(-30deg) rotate(60deg);
+  overflow: hidden;
+  background: none;
+}
+
+#grid li:nth-child(3n+2) {
+  margin: 0 1%;
+}
+
+#grid li:nth-child(6n+4), #grid li:nth-child(6n+5), #grid li:nth-child(6n+6) {
+  margin-top: -6.9285714285%;
+  margin-bottom: -6.9285714285%;
+}
+
+#grid li:nth-child(6n+1), #grid li:nth-child(6n+2), #grid li:nth-child(6n+3) {
+  -o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
+  -moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
+  -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
+  -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
+  transform: translateX(50%) rotate(-60deg) skewY(30deg);
+}
+
+#grid li:nth-child(6n+1) {
+  margin-left: 0.5%;
+}
+
+#grid li .hexagon img {
+  height:100%;
+	object-fit: cover;
+	margin-right: -2em;
+  margin: 0 auto;
+  -o-transition: all 0.6s linear 0s;
+  -moz-transition: all 0.6s linear 0s;
+  -ms-transition: all 0.6s linear 0s;
+  -webkit-transition: all 0.6s linear 0s;
+  transition: all 0.6s linear 0s;
+}
+
+#grid li:hover img {
+  height: 150%;
+	margin-top: -30%;
+  -o-transform: translateZ(0) translateX(-20%);
+  -moz-transform: translateZ(0) translateX(-20%);
+  -webkit-transform: translateZ(0) translateX(-20%);
+  -ms-transform: translateZ(0) translateX(-20%);
+  transform: translateZ(0) translateX(-20%);
+}
+
+#grid li .hexagon .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: hsla(0, 0%, 100%, 0);
+}
+
+#grid li:hover .overlay {
+  -o-transition: all 0.6s linear 0s;
+  -moz-transition: all 0.6s linear 0s;
+  -ms-transition: all 0.6s linear 0s;
+  -webkit-transition: all 0.6s linear 0s;
+  transition: all 0.6s linear 0s;
+  background: hsla(0, 0%, 100%, 0.6);
+}
+
+/* Text */
+
+#sidebar p.name, #sidebar p.jobrole {
+  height: auto;
+  width: auto;
+  margin: 0;
+  font-family: 'Raleway', sans-serif;
+  font-size: 1.5em;
+  line-height: 1.5em;
+  color: hsl(0, 0%, 100%);
+}
+
+label {
+  font-family: 'Raleway', sans-serif;
+  font-size: 1.5em;
+  line-height: 1.5em;
+  color: hsl(0, 0%, 100%);
+}
+
+#sidebar p.name {
+  margin: 20px 0 0 0;
+  font-family: 'Playfair Display', serif;
+  color: hsl(187, 61%, 43%);
+  font-size: 2em;
+}
+
+.left h2 {
+  font-family: 'Playfair Display', serif;
+  text-align: center;
+  font-size: 1.2em;
+}
+
+.left p {
+  font-family: 'Raleway', sans-serif;
+	font-weight: 400;
+  padding: 0 10px;
+  font-size: 1em;
+}
+
+#title h1 {
+  font-family: 'Playfair Display', serif;
+  font-size: 36px;
+  font-weight: 200;
+  color: hsl(0, 0%, 34%);
+}
+
+.button p, input[type="submit"].button {
+  margin: 0;
+  font-family: 'Playfair Display', serif;
+  color: hsl(0, 0%, 100%);
+  font-size: 1em;
+}
+
+/* Media Queries */
+
+@media only screen and (max-width: 1100px) {
+  /* Layout */
+  #contact form {
+    width: 100%;
+  }
+}
+
+@media only screen and (max-width: 870px) {
+  /* Layout */
+  #contact label {
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  #contact input[type="text"] {
+    height: 30px;
+  }
+
+  #contact input[type="submit"] {
+    border: 0;
+    margin: 10px auto;
+  }
+
+  #contact label[for="message"] {
+    height: auto;
+    padding: 0;
+  }
+
+  #contact textarea {
+    height: 200px;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  /* layout */
+  #sidebar {
+    z-index: 0;
+    position: relative;
+    height: auto;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  #sidebar-portrait {
+    position: relative;
+    display: inline-block;
+    width: 20%;
+    margin: 0 0 0 10px;
+    border-radius: 50%;
+    vertical-align: middle;
+    overflow: hidden;
+    background: hsl(0, 0%, 100%);
+  }
+
+  #sidebar-portrait img {
+    height: auto;
+    width: 100%;
+  }
+
+  #title {
+    position: relative;
+    height: auto;
+    width: 100%;
+    padding: 0;
+  }
+
+  #title h1 {
+    margin: 10px 0;
+  }
+
+  #contact {
+    padding: 0;
+  }
+
+  .left, .right {
+    position: relative;
+    left: 0;
+    height: auto;
+    width: 100%;
+  }
+
+  .right img {
+    height: auto;
+    width: 100%;
+  }
+
+  /* Grid */
+  #grid {
+    margin: 0 auto;
+    width: 95%;
+  }
+}
+
+
+@media only screen and (max-width: 550px) {
+  /* Layout */
+  body {
+    font-size: 14px;
+  }
+
+  #contact input[type="text"], #contact textarea {
+    width: 80%;
+  }
diff --git a/feedback.md b/feedback.md
old mode 100644
new mode 100755
diff --git a/images/1-11.jpg b/images/1-11.jpg
new file mode 100755
index 000000000..325afe2de
Binary files /dev/null and b/images/1-11.jpg differ
diff --git a/images/1-12.jpg b/images/1-12.jpg
new file mode 100755
index 000000000..9ad74d91b
Binary files /dev/null and b/images/1-12.jpg differ
diff --git a/images/1-15.jpg b/images/1-15.jpg
new file mode 100755
index 000000000..209167c06
Binary files /dev/null and b/images/1-15.jpg differ
diff --git a/images/1-3.jpg b/images/1-3.jpg
new file mode 100755
index 000000000..b02be482a
Binary files /dev/null and b/images/1-3.jpg differ
diff --git a/images/1-4.jpg b/images/1-4.jpg
new file mode 100755
index 000000000..62f0768ac
Binary files /dev/null and b/images/1-4.jpg differ
diff --git a/images/1-7.jpg b/images/1-7.jpg
new file mode 100755
index 000000000..ba0c79b6e
Binary files /dev/null and b/images/1-7.jpg differ
diff --git a/images/1-8.jpg b/images/1-8.jpg
new file mode 100755
index 000000000..1d00f92ad
Binary files /dev/null and b/images/1-8.jpg differ
diff --git a/images/1-9.jpg b/images/1-9.jpg
new file mode 100755
index 000000000..ef8e834fe
Binary files /dev/null and b/images/1-9.jpg differ
diff --git a/images/1.jpg b/images/1.jpg
new file mode 100755
index 000000000..2659176fd
Binary files /dev/null and b/images/1.jpg differ
diff --git a/images/10.jpg b/images/10.jpg
new file mode 100755
index 000000000..8b90b698f
Binary files /dev/null and b/images/10.jpg differ
diff --git a/images/11.jpg b/images/11.jpg
new file mode 100755
index 000000000..0b0f3d34e
Binary files /dev/null and b/images/11.jpg differ
diff --git a/images/111.jpg b/images/111.jpg
new file mode 100755
index 000000000..e360d822f
Binary files /dev/null and b/images/111.jpg differ
diff --git a/images/12.jpg b/images/12.jpg
new file mode 100755
index 000000000..2390e8da7
Binary files /dev/null and b/images/12.jpg differ
diff --git a/images/13.jpg b/images/13.jpg
new file mode 100755
index 000000000..c6f0473f5
Binary files /dev/null and b/images/13.jpg differ
diff --git a/images/14.jpg b/images/14.jpg
new file mode 100755
index 000000000..d74565bd3
Binary files /dev/null and b/images/14.jpg differ
diff --git a/images/15.jpg b/images/15.jpg
new file mode 100755
index 000000000..df06edfbb
Binary files /dev/null and b/images/15.jpg differ
diff --git a/images/2.jpg b/images/2.jpg
new file mode 100755
index 000000000..606d9d618
Binary files /dev/null and b/images/2.jpg differ
diff --git a/images/3.jpg b/images/3.jpg
new file mode 100755
index 000000000..6b464096b
Binary files /dev/null and b/images/3.jpg differ
diff --git a/images/4.jpg b/images/4.jpg
new file mode 100755
index 000000000..78634325f
Binary files /dev/null and b/images/4.jpg differ
diff --git a/images/5.jpg b/images/5.jpg
new file mode 100755
index 000000000..6a9d719d3
Binary files /dev/null and b/images/5.jpg differ
diff --git a/images/6.jpg b/images/6.jpg
new file mode 100755
index 000000000..a5ab6be65
Binary files /dev/null and b/images/6.jpg differ
diff --git a/images/7.jpg b/images/7.jpg
new file mode 100755
index 000000000..7d5aff262
Binary files /dev/null and b/images/7.jpg differ
diff --git a/images/8.jpg b/images/8.jpg
new file mode 100755
index 000000000..79e649862
Binary files /dev/null and b/images/8.jpg differ
diff --git a/images/9.jpg b/images/9.jpg
new file mode 100755
index 000000000..dd470bda3
Binary files /dev/null and b/images/9.jpg differ
diff --git a/images/facebook.png b/images/facebook.png
new file mode 100755
index 000000000..6fc336852
Binary files /dev/null and b/images/facebook.png differ
diff --git a/images/grocery.jpg b/images/grocery.jpg
new file mode 100755
index 000000000..f83c20c02
Binary files /dev/null and b/images/grocery.jpg differ
diff --git a/images/max-jakob-beer-562013-unsplash.jpg b/images/max-jakob-beer-562013-unsplash.jpg
new file mode 100755
index 000000000..06e603bf4
Binary files /dev/null and b/images/max-jakob-beer-562013-unsplash.jpg differ
diff --git a/images/portrait.jpg b/images/portrait.jpg
new file mode 100755
index 000000000..87d1e7903
Binary files /dev/null and b/images/portrait.jpg differ
diff --git a/images/profile.jpeg b/images/profile.jpeg
new file mode 100755
index 000000000..ded870f31
Binary files /dev/null and b/images/profile.jpeg differ
diff --git a/images/profile.jpg b/images/profile.jpg
new file mode 100755
index 000000000..1ba26c1c6
Binary files /dev/null and b/images/profile.jpg differ
diff --git a/images/profile1.jpg b/images/profile1.jpg
new file mode 100755
index 000000000..7198bb595
Binary files /dev/null and b/images/profile1.jpg differ
diff --git a/images/rideshare.jpg b/images/rideshare.jpg
new file mode 100755
index 000000000..23616ba58
Binary files /dev/null and b/images/rideshare.jpg differ
diff --git a/images/solar-system.jpg b/images/solar-system.jpg
new file mode 100755
index 000000000..2f1b67a23
Binary files /dev/null and b/images/solar-system.jpg differ
diff --git a/images/twitter.png b/images/twitter.png
new file mode 100755
index 000000000..68a0cb114
Binary files /dev/null and b/images/twitter.png differ
diff --git a/index.html b/index.html
new file mode 100755
index 000000000..f7f4b4d98
--- /dev/null
+++ b/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Kat Eastman</title>
+  <link rel="stylesheet" href="../css/master.css">
+  <link rel="stylesheet" href="test.css">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <nav>
+        <ul>
+          <li><a href="index.html">home</a></li>
+          <li><a href="portfolio.html">projects</a></li>
+          <li><a href="tech-blog.html">thoughts</a></li>
+          <li><a href="about-me.html">about me</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+      <section>
+        <article class="profile">
+          <img src="#" alt="Profile picture">
+          <h1> Katherine Eastman </h1>
+          <h2> proto-developer, writer and illustrator </h2>
+        </article>
+      </section>
+      <section class="three-column">
+        <article>
+          <h3>About Me</h3>
+
+        </article>
+
+        <article>
+          <h3>Projects</h3>
+
+        </article>
+
+        <article>
+          <h3>Contact</h3>
+
+        </article>
+
+
+      </section>
+  </main>
+  <footer>
+    <section>
+      <ul>
+        <li><a href="tech-blog.html">blog posts</a></li>
+        <li><a href="portfolio.html">portfolio</a></li>
+      </ul>
+    </section>
+  </footer>
+</div>
+</body>
+</html>
diff --git a/public_html/about-me.html b/public_html/about-me.html
new file mode 100755
index 000000000..f72a3f6b6
--- /dev/null
+++ b/public_html/about-me.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+<!-- title -->
+
+  <title>Kat Eastman - About Me</title>
+
+<!-- styles -->
+  <link rel="stylesheet" href="../css/styles.css">
+  <link rel="stylesheet" href="../css/normalize.css">
+
+<!-- fonts -->
+<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Playfair+Display|Raleway:300,400,700" rel="stylesheet">
+
+<!-- meta -->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="Personal Portfolio assignment for Ada Developers Academy https://github.com/Ada-C9/personal-portfolio-site">
+</head>
+  <body>
+    <aside id="sidebar">
+      <section id="sidebar-portrait">
+        <img src="../images/profile.jpg" alt="image of woman with a bowtie and mascara mustache."/>
+      </section>
+      <p class="name">Katherine Eastman</p>
+      <p class="jobrole">proto-developer & writer</p>
+      <section id="sidebar-social-icons"><!--
+      --><section class="sidebar-social-icon">
+      <a href="https://www.facebook.com/katherine.eastman.5"><img src="../images/facebook.png" alt="facebook"/></a>
+    </section><!--
+    --><section class="sidebar-social-icon">
+    <a href="https://twitter.com/unruly_tuples"><img src="../images/twitter.png" alt="twitter"/></a>
+  </section><!--
+  --></section>
+    <section class="sidebar-nav">
+      <ul>
+        <li><a href="index.html">home</a></li>
+        <li><a href="portfolio.html">projects</a></li>
+        <li><a href="tech-blog.html">thoughts</a></li>
+        <li><a href="about-me.html">about me</a></li>
+      </ul>
+    </section>
+    <a href="#contact">
+    <section class="button">
+      <p>MESSAGE ME</p>
+    </section>
+    </a>
+  </aside>
+    <header id="title">
+    <h1>About Me</h1>
+  </header>
+  <main>
+
+    <section class="main">
+      <article class="parallax-segment clr">
+      </article>
+      <p id="know-nothing">
+        I know nothing, Jon Snow.
+      </p>
+  </section>
+  </main>
+  <section id="contact">
+    <a href="#"><section class="button"><p>&lt;&lt; CLOSE</p></section></a>
+    <form id="emailform">
+      <label for="email">Your Email</label><input type="text" id="email"/>
+      <br />
+      <br />
+      <label for="subject">Subject</label><input type="text" id="subject"/>
+      <br />
+      <br />
+      <label for="message">Message</label><textarea form="emailform" id="message"></textarea>
+      <br />
+      <input type="submit" class="button" value="SEND EMAIL"/>
+    </form>
+  </section>
+</div>
+</body>
+</html>
diff --git a/public_html/index.html b/public_html/index.html
new file mode 100755
index 000000000..938adbc57
--- /dev/null
+++ b/public_html/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- title -->
+  <title>Kat Eastman</title>
+
+<!-- styles -->
+  <link rel="stylesheet" href="../css/styles.css">
+  <link rel="stylesheet" href="../css/normalize.css">
+
+<!-- fonts -->
+<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Playfair+Display:400,400i,700|Raleway" rel="stylesheet">
+
+<!-- meta -->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="Personal Portfolio assignment for Ada Developers Academy https://github.com/Ada-C9/personal-portfolio-site">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <nav id="top-nav">
+        <ul>
+          <li><a href="index.html">home</a></li>
+          <li><a href="portfolio.html">projects</a></li>
+          <li><a href="tech-blog.html">thoughts</a></li>
+          <li><a href="about-me.html">about me</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <h1 class="parallax"> Katherine Eastman</h1>
+
+      <section class="three-column break">
+        <a href="tech-blog.html">
+          <article>
+          <img src="../images/1-4.jpg" alt="decorative" class="circle"/>
+          <h2>Blog</h2>
+        <p> Random, tech adjacent thoughts on things that arise in the course of becoming a full stack developer.</p>
+        </article>
+      </a>
+
+        <a href="portfolio.html">
+        <article>
+          <img src="../images/1-15.jpg" alt="decorative" class="circle"/>
+          <h2>Projects</h2>
+          <p> Assignments completed to date in the Ada Developer's Academy curriculum.</p>
+        </article>
+      </a>
+
+    <a href="#contact"><article>
+          <img src="../images/1-12.jpg" alt="decorative" class="circle"/>
+          <h2>Contact</h2>
+          <p> Reach out and send me an email sort of thing.</p>
+      </article></a>
+    </section>
+      <!-- <article class="profile parallax">
+        <h2>Bio</h2>
+          <img src="../images/profile.jpg" alt="picture of woman with a hat, bowtie and eyeliner mustache" class="profile-picture"/>
+          <h3> Katherine Eastman </h3>
+          <span> proto-developer, writer and illustrator </span>
+      </article> -->
+  </main>
+    <div class="parallax"></div>
+  <footer>
+    <section>
+      <ul>
+        <li><a href="tech-blog.html">blog posts</a></li>
+        <li><a href="portfolio.html">portfolio</a></li>
+      </ul>
+    </section>
+  </footer>
+  <section id="contact">
+    <a href="#"><section class="button"><p>&lt;&lt; CLOSE</p></section></a>
+    <form id="emailform">
+      <label for="email">Your Email</label><input type="text" id="email"/>
+      <br />
+      <br />
+      <label for="subject">Subject</label><input type="text" id="subject"/>
+      <br />
+      <br />
+      <label for="message">Message</label><textarea form="emailform" id="message"></textarea>
+      <br />
+      <input type="submit" class="button" value="SEND EMAIL"/>
+    </form>
+  </section>
+</div>
+</body>
+</html>
diff --git a/public_html/portfolio.html b/public_html/portfolio.html
new file mode 100755
index 000000000..b919635ee
--- /dev/null
+++ b/public_html/portfolio.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+<!-- title -->
+  <title>Kat Eastman - Portfolio</title>
+
+<!-- styles -->
+  <link rel="stylesheet" href="../css/styles.css">
+  <link rel="stylesheet" href="../css/normalize.css">
+
+<!-- fonts -->
+  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900|Raleway" rel="stylesheet">
+
+<!-- meta -->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="Personal Portfolio assignment for Ada Developers Academy https://github.com/Ada-C9/personal-portfolio-site">
+</head>
+  <body>
+    <aside id="sidebar">
+      <section id="sidebar-portrait">
+        <img src="../images/profile.jpg" alt="image of woman with a bowtie and mascara mustache"/>
+      </section>
+      <p class="name">Katherine Eastman</p>
+      <p class="jobrole">proto-developer & writer</p>
+      <section id="sidebar-social-icons"><!--
+      --><section class="sidebar-social-icon">
+      <a href="https://www.facebook.com/katherine.eastman.5"><img src="../images/facebook.png" alt="facebook"/></a>
+    </section><!--
+    --><section class="sidebar-social-icon">
+    <a href="https://twitter.com/unruly_tuples"><img src="../images/twitter.png" alt="twitter"/></a>
+  </section><!--
+  --></section>
+    <section class="sidebar-nav">
+      <ul>
+        <li><a href="index.html">home</a></li>
+        <li><a href="portfolio.html">projects</a></li>
+        <li><a href="tech-blog.html">thoughts</a></li>
+        <li><a href="about-me.html">about me</a></li>
+      </ul>
+    </section>
+    <a href="#contact">
+    <section class="button">
+      <p>MESSAGE ME</p>
+    </section>
+    </a>
+  </aside>
+    <header id="title">
+    <h1>Projects to Date</h1>
+  </header>
+  <main>
+  <div class="parallax"></div>
+
+  <section class="main">
+    <article class="parallax-segment">
+      <a href="https://github.com/kseastman/grocery-store/" target="_blank">
+        <img src="../images/grocery.jpg" alt="cartoon neighborhood market">
+      </a>
+      <h2> Grocery Store </h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </article>
+  </section>
+
+    <div class="parallax"></div>
+    <section class="main">
+    <article class="parallax-segment">
+      <a href="https://github.com/kseastman/ride-share">
+        <img src="../images/rideshare.jpg" alt="cars on an urban street">
+      </a>
+      <h2> Rideshare </h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </article>
+  </section>
+    <div class="parallax"></div>
+    <section class="main">
+    <article class="parallax-segment">
+      <a href="https://github.com/kseastman/solar-system">
+      <img src="../images/solar-system.jpg" alt="octopus juggling planets and stars">
+    </a>
+      <h2> Solar System </h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </article>
+  </section>
+  </main>
+
+  <section id="contact">
+    <a href="#"><section class="button"><p>&lt;&lt; CLOSE</p></section></a>
+    <form id="emailform">
+      <label for="email">Your Email</label><input type="text" id="email"/>
+      <br />
+      <br />
+      <label for="subject">Subject</label><input type="text" id="subject"/>
+      <br />
+      <br />
+      <label for="message">Message</label><textarea form="emailform" id="message"></textarea>
+      <br />
+      <input type="submit" class="button" value="SEND EMAIL"/>
+    </form>
+  </section>
+  </body>
+</html>
diff --git a/public_html/tech-blog.html b/public_html/tech-blog.html
new file mode 100755
index 000000000..1740a714d
--- /dev/null
+++ b/public_html/tech-blog.html
@@ -0,0 +1,369 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- title -->
+  <title>Kat Eastman - Tech Blog</title>
+
+  <!-- styles -->
+  <link rel="stylesheet" href="../css/styles.css">
+  <link rel="stylesheet" href="../css/normalize.css">
+
+  <!-- fonts -->
+  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900|Raleway" rel="stylesheet">
+
+  <!-- meta -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Personal Portfolio assignment for Ada Developers Academy https://github.com/Ada-C9/personal-portfolio-site">
+</head>
+
+<body>
+  <aside id="sidebar">
+    <section id="sidebar-portrait">
+      <img src="../images/profile.jpg" alt="Lorem Ipsum"/>
+    </section>
+    <p class="name">Katherine Eastman</p>
+    <p class="jobrole">proto-developer & writer</p>
+    <section id="sidebar-social-icons"><!--
+    --><section class="sidebar-social-icon">
+    <a href="https://www.facebook.com/katherine.eastman.5"><img src="../images/facebook.png" alt="facebook"/></a>
+  </section><!--
+  --><section class="sidebar-social-icon">
+  <a href="https://twitter.com/unruly_tuples"><img src="../images/twitter.png" alt="twitter"/></a>
+</section><!--
+--></section>
+  <section class="sidebar-nav">
+    <ul>
+      <li><a href="index.html">home</a></li>
+      <li><a href="portfolio.html">projects</a></li>
+      <li><a href="tech-blog.html">thoughts</a></li>
+      <li><a href="about-me.html">about me</a></li>
+    </ul>
+  </section>
+  <a href="#contact">
+  <section class="button">
+    <p>MESSAGE ME</p>
+  </section>
+  </a>
+</aside>
+  <header id="title">
+  <h1>Ruminations on Techy Things</h1>
+</header>
+<ul id="grid" class="clr">
+  <li>
+    <a href="#item1">
+      <section class="hexagon">
+        <img src="../images/1.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item2">
+      <section class="hexagon">
+        <img src="../images/2.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item3">
+      <section class="hexagon">
+        <img src="../images/3.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item4">
+      <section class="hexagon">
+        <img src="../images/4.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item5">
+      <section class="hexagon">
+        <img src="../images/5.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item6">
+      <section class="hexagon">
+        <img src="../images/6.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item7">
+      <section class="hexagon">
+        <img src="../images/7.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item8">
+      <section class="hexagon">
+        <img src="../images/8.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item9">
+      <section class="hexagon">
+        <img src="../images/9.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item10">
+      <section class="hexagon">
+        <img src="../images/10.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item11">
+      <section class="hexagon">
+        <img src="../images/11.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item12">
+      <section class="hexagon">
+        <img src="../images/12.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item13">
+      <section class="hexagon">
+        <img src="../images/13.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item14">
+      <section class="hexagon">
+        <img src="../images/14.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+  <li>
+    <a href="#item15">
+      <section class="hexagon">
+        <img src="../images/15.jpg" alt="Lorem Ipsum"/>
+        <section class="overlay"></section>
+      </section>
+    </a>
+  </li>
+</ul>
+<section id="item1">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/1.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item2">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/2.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item3">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/3.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item4">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/4.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item5">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/5.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item6">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/6.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item7">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/7.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item8">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/8.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item9">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/9.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item10">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/10.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item11">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/11.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item12">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/12.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item13">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/13.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item14">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/14.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="item15">
+  <section class="left">
+    <a href="#"><section class="button"><p>CLOSE &gt;&gt;</p></section></a>
+    <h2>ITEM TITLE</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel molestie orci. Nulla egestas libero tellus, rhoncus facilisis nulla eleifend eget. Donec quis nunc sodales turpis gravida consectetur eu ut diam. Vestibulum ut ante justo. Nunc ac tincidunt turpis. Duis at massa consectetur, porta augue sed, elementum est. In hac habitasse platea dictumst. Duis sed sollicitudin risus. Donec fermentum laoreet odio. Nullam nec mi et mauris ultrices dictum. Vestibulum malesuada mattis ornare. Ut sit amet tellus nec neque tempus scelerisque. Etiam pretium felis et augue efficitur, eu pharetra sapien consequat. Aenean imperdiet ante mi, eget condimentum mauris imperdiet pulvinar. Mauris ut suscipit eros, sit amet congue erat. Fusce nec augue est.
+    </p>
+  </section>
+  <section class="right">
+    <img src="../images/15.jpg" alt="Lorem Ipsum"/>
+  </section>
+</section>
+<section id="contact">
+  <a href="#"><section class="button"><p>&lt;&lt; CLOSE</p></section></a>
+  <form id="emailform">
+    <label for="email">Your Email</label><input type="text" id="email"/>
+    <br />
+    <br />
+    <label for="subject">Subject</label><input type="text" id="subject"/>
+    <br />
+    <br />
+    <label for="message">Message</label><textarea form="emailform" id="message"></textarea>
+    <br />
+    <input type="submit" class="button" value="SEND EMAIL"/>
+  </form>
+</section>
+</body>
+</html>