diff --git a/assets/css/blog.css b/assets/css/blog.css
new file mode 100644
index 0000000..f6f1701
--- /dev/null
+++ b/assets/css/blog.css
@@ -0,0 +1,189 @@
+#header {
+  -moz-align-items: center;
+  -webkit-align-items: center;
+  -ms-align-items: center;
+  align-items: center;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: -ms-flex;
+  display: flex;
+  -moz-justify-content: space-between;
+  -webkit-justify-content: space-between;
+  -ms-justify-content: space-between;
+  justify-content: space-between;
+  background: black;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: default;
+  height: 3.25rem;
+  left: 0;
+  line-height: 3.25rem;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 10001; }
+  #header > .logo {
+    color: #ffffff;
+    font-size: 1rem;
+    font-weight: 600;
+    height: inherit;
+    line-height: inherit;
+    padding: 0 1.25rem;
+    text-decoration: none; }
+  #header > nav > a {
+    color: inherit;
+    display: inline-block;
+    padding: 0 0.75rem;
+    text-decoration: none; }
+    #header > nav > a:hover {
+      color: #ffffff; }
+    #header > nav > a[href="#menu"] {
+      text-decoration: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+      #header > nav > a[href="#menu"]:before {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-family: FontAwesome;
+        font-style: normal;
+        font-weight: normal;
+        text-transform: none !important; }
+      #header > nav > a[href="#menu"]:before {
+        content: '\f0c9';
+        margin: 0 0.5rem 0 0; }
+    #header > nav > a + a[href="#menu"]:last-child {
+      border-left: solid 1px rgba(255, 255, 255, 0.25);
+      margin-left: 0.5rem;
+      padding-left: 1.25rem; }
+    #header > nav > a:last-child {
+      padding-right: 1.25rem; }
+    @media screen and (max-width: 736px) {
+      #header > nav > a {
+        padding: 0 0.5rem; }
+        #header > nav > a + a[href="#menu"]:last-child {
+          margin-left: 0.25rem;
+          padding-left: 1rem; }
+        #header > nav > a:last-child {
+          padding-right: 1rem; } }
+
+@media screen and (max-width: 980px) {
+  body {
+    padding-top: 44px; }
+
+  #header {
+    height: 44px;
+    line-height: 44px; } }
+@media screen and (max-width: 480px) {
+  #header {
+    min-width: 320px; } }
+
+    #signature {
+      position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-right: -50%;
+        transform: translate(-50%, -50%);
+      height: 80%;
+      width: 200px;
+      margin-left: 10px;
+    }
+
+
+#readBlog {
+  margin: 2em;
+  padding: .5em 3em;
+  font-size: 2em;
+  color: white;
+  border: 3px solid white;
+  cursor: pointer;
+  transition: 0.7s;
+  -webkit-transition: 0.7s;
+  z-index: 2;
+}
+  #readBlog:hover {
+    background-color: white;
+    color: black;
+    box-shadow: inset 0 0 0 1px #ffffff;
+  }
+
+#blog {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  flex: 1;
+  top: 0;
+  z-index: 3;
+  transition: 1s;
+  -webkit-transition: 1s;
+  color: black;
+  font-family: 'Dosis', sans-serif;
+}
+.blogCard {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin: 5em;
+  padding: 1em;
+  background-color: #f7f7f9;
+  max-width: 900px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+  cursor: pointer;
+}
+    .blogCard:hover {
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+    }
+  .blogCard > .title {
+    font-size: 1.5em;
+    font-weight: 500;
+  }
+  .fa {
+    margin-right: .5em;
+  }
+  .blogCard > .info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: grey;
+    font-size: 0.8em;
+    margin-bottom: 1em;
+  }
+    .info > p {
+      margin: 0 2em 0 0;
+    }
+  .blogCard > .pic {
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
+  }
+  .blogCard > .content {
+    margin: 0.5em 0;
+    color: #7f8082;
+    font-size: 0.9em;
+  }
+    .content > .readMore {
+      text-align: center;
+      border: 1px solid #234da0;
+      padding: .5em 2em;
+      color: #234da0;
+      margin: 0;
+      transition: .5s;
+      -webkit-transition: .5s;
+      cursor: pointer;
+    }
+      .content > .readMore:hover {
+        background-color: #234da0;
+        color: white;
+      }
+#goToMain {
+  position: fixed;
+  top: 3.25rem;
+  right: 0;
+  padding: .5em;
+  color: red;
+  font-size: 2em;
+  cursor: pointer;
+  z-index: 5;
+}
diff --git a/assets/css/blogContent.css b/assets/css/blogContent.css
new file mode 100644
index 0000000..6ab4548
--- /dev/null
+++ b/assets/css/blogContent.css
@@ -0,0 +1,182 @@
+#header {
+  -moz-align-items: center;
+  -webkit-align-items: center;
+  -ms-align-items: center;
+  align-items: center;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: -ms-flex;
+  display: flex;
+  -moz-justify-content: space-between;
+  -webkit-justify-content: space-between;
+  -ms-justify-content: space-between;
+  justify-content: space-between;
+  background: black;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: default;
+  height: 3.25rem;
+  left: 0;
+  line-height: 3.25rem;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 10001; }
+  #header > .logo {
+    color: #ffffff;
+    font-size: 1rem;
+    font-weight: 600;
+    height: inherit;
+    line-height: inherit;
+    padding: 0 1.25rem;
+    text-decoration: none; }
+  #header > nav > a {
+    color: inherit;
+    display: inline-block;
+    padding: 0 0.75rem;
+    text-decoration: none; }
+    #header > nav > a:hover {
+      color: #ffffff; }
+    #header > nav > a[href="#menu"] {
+      text-decoration: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+      #header > nav > a[href="#menu"]:before {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-family: FontAwesome;
+        font-style: normal;
+        font-weight: normal;
+        text-transform: none !important; }
+      #header > nav > a[href="#menu"]:before {
+        content: '\f0c9';
+        margin: 0 0.5rem 0 0; }
+    #header > nav > a + a[href="#menu"]:last-child {
+      border-left: solid 1px rgba(255, 255, 255, 0.25);
+      margin-left: 0.5rem;
+      padding-left: 1.25rem; }
+    #header > nav > a:last-child {
+      padding-right: 1.25rem; }
+    @media screen and (max-width: 736px) {
+      #header > nav > a {
+        padding: 0 0.5rem; }
+        #header > nav > a + a[href="#menu"]:last-child {
+          margin-left: 0.25rem;
+          padding-left: 1rem; }
+        #header > nav > a:last-child {
+          padding-right: 1rem; } }
+
+@media screen and (max-width: 980px) {
+  body {
+    padding-top: 44px; }
+
+  #header {
+    height: 44px;
+    line-height: 44px; } }
+@media screen and (max-width: 480px) {
+  #header {
+    min-width: 320px; } }
+
+    #signature {
+      position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-right: -50%;
+        transform: translate(-50%, -50%);
+      height: 80%;
+      width: 200px;
+      margin-left: 10px;
+    }
+
+#blog {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  flex: 1;
+  top: 0;
+  z-index: 3;
+  transition: 1s;
+  -webkit-transition: 1s;
+  color: black;
+  font-family: 'Dosis', sans-serif;
+}
+.blogCard {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin: 5em;
+  padding: 1em;
+  background-color: white;
+  max-width: 900px;
+}
+  hr {
+    border: 0.5px solid #c2c4c6;
+    width: 100%;
+  }
+  .blogCard > .title {
+    font-size: 2.5em;
+    font-weight: 700;
+  }
+  .fa {
+    margin-right: .5em;
+  }
+  .blogCard > .info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: grey;
+    font-size: 0.8em;
+    margin: 0.5em 0 1em 0;
+  }
+    .info > p {
+      margin: 0 2em 0 0;
+    }
+  .blogCard > .pic {
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    margin: 2em 0 0 0;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
+  }
+  .blogCard > .content {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 0.5em 0;
+    color: #434344;
+    font-size: 1.5em;
+  }
+    .content > .readMore {
+      text-align: center;
+      border: 1px solid #234da0;
+      padding: .5em 2em;
+      color: #234da0;
+      margin: 0;
+      transition: .5s;
+      -webkit-transition: .5s;
+      cursor: pointer;
+    }
+      .content > .readMore:hover {
+        background-color: #234da0;
+        color: white;
+      }
+  .blogImg {
+    overflow: hidden;
+    max-height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 1em 0;
+  }
+
+#goToBlogs {
+  position: fixed;
+  top: 3.25rem;
+  right: 0;
+  padding: .5em;
+  color: red;
+  font-size: 2em;
+  cursor: pointer;
+  z-index: 5;
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index e36e9a4..868fb5d 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1807,6 +1807,7 @@ ul.icons {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
+  flex-direction: column;
   -moz-justify-content: center;
   -webkit-justify-content: center;
   -ms-justify-content: center;
@@ -1817,7 +1818,7 @@ ul.icons {
   background-size: cover;
   border-top: 0;
   display: -ms-flexbox;
-  height: 35rem !important;
+  height: 50rem !important;
   min-height: 35rem;
   overflow: hidden;
   position: relative;
diff --git a/assets/js/main.js b/assets/js/main.js
index f15bd16..e72c7bb 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -42,4 +42,24 @@
 				side: 'right'
 			});
 
-})(jQuery);
\ No newline at end of file
+		$('#blog').load('blog.html');
+
+	$('#readBlog').on("click", function() {
+		window.location.href = "blog.html";
+	});
+
+	$('.readMore').on("click", function() {
+		var whichBlog = $(this).attr('id');
+		console.log("Loading vlog: " + whichBlog);
+		window.location.href = "blogs/" + whichBlog + ".html";
+	});
+
+	$('#goToMain').on("click", function() {
+		window.location.href = "index.html";
+	});
+
+	$('#goToBlogs').on("click", function() {
+		window.location.href = "../blog.html";
+	});
+
+})(jQuery);
diff --git a/blog.html b/blog.html
new file mode 100644
index 0000000..665acf5
--- /dev/null
+++ b/blog.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<!--
+	Industrious by TEMPLATED
+	templated.co @templatedco
+	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
+-->
+<html>
+	<head>
+		<title>Arjun</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<meta name="description" content="" />
+		<meta name="keywords" content="" />
+		<link rel="stylesheet" href="assets/css/blog.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
+  </head>
+	<body>
+
+    <!-- Header -->
+			<header id="header">
+				<img id="signature" src="images/signature.jpg" alt="" />
+				<!-- <nav>
+					<a href="#menu">Menu</a>
+				</nav> -->
+			</header>
+
+      <div id="goToMain">
+        <i class="fa fa-times-circle-o"></i>
+      </div>
+
+
+			<section id="blog">
+        <div class="blogCard">
+  				<div class="title">
+  					The College Programming Tutorial Article Blog Thingy?
+  				</div>
+          <div class="info">
+            <i class="fa fa-user"></i>
+            <p>Arjun Patel</p>
+            <i class="fa fa-calendar"></i>
+            <p>7/7/18</p>
+          </div>
+  				<img class="pic"src="images/blogs/1/pic.jpg"/>
+  				<div class="content">
+  					<p>I probably should have started this earlier, but here we go! This is my super official blog. Alright let's get a little serious. I want to discuss development insight I have on my current projects and work, explain key technical findings, and also talk about cool tech.</p>
+            <p id="1" class="readMore">Read More</p>
+          </div>
+        </div>
+			</section>
+
+		<!-- Scripts -->
+			<script src="assets/js/jquery.min.js"></script>
+			<script src="assets/js/browser.min.js"></script>
+			<script src="assets/js/breakpoints.min.js"></script>
+      <script src="assets/js/util.js"></script>
+			<script src="assets/js/main.js"></script>
+
+	</body>
+</html>
diff --git a/blogs/1.html b/blogs/1.html
new file mode 100644
index 0000000..d29c2dd
--- /dev/null
+++ b/blogs/1.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<!--
+	Industrious by TEMPLATED
+	templated.co @templatedco
+	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
+-->
+<html>
+	<head>
+		<title>Arjun</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<meta name="description" content="" />
+		<meta name="keywords" content="" />
+		<link rel="stylesheet" href="../assets/css/blogContent.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
+  </head>
+	<body>
+
+    <!-- Header -->
+			<header id="header">
+				<img id="signature" src="../images/signature.jpg" alt="" />
+				<!-- <nav>
+					<a href="#menu">Menu</a>
+				</nav> -->
+			</header>
+
+      <div id="goToBlogs">
+        <i class="fa fa-times-circle-o"></i>
+      </div>
+
+
+			<section id="blog">
+        <div class="blogCard">
+          <hr>
+    				<div class="title">
+    					The college programming tutorial article blog thingy?
+    				</div>
+            <div class="info">
+              <i class="fa fa-user"></i>
+              <p>Arjun Patel</p>
+              <i class="fa fa-calendar"></i>
+              <p>7/7/18</p>
+            </div>
+          <hr>
+  				<img class="pic"src="../images/blogs/1/pic.jpg"/>
+  				<div class="content">
+  					<p>I probably should have started this earlier, but here we go! This is my super official blog. Alright let's get a little serious. I want to discuss development insight I have on my current projects and work, explain key technical findings, and also talk about cool tech.</p>
+            <p>Now, obviously the type of content throughout my blogs is going to change overtime. But for right now, I am considering to keep it quite open ended. For those of you looking for more niche topics, do not worry as I will be writing on specific software engineering/web/app development experiences. To give yourself a better picture of myself:</p>
+            <hr>
+            <div class="blogImg">
+              <img src="../images/blogs/1/me.jpg" />
+            </div>
+            <hr>
+            <p>Currently, I am a software engineering intern at Intel in an internal tools team/test automation. Our department within Intel manages the production and deliverance of Solid State drives. To get to the point, I work with visualizing test data and optimizing running of tests. In addition, my brother and I run a software service company called Lotus. We have one client currently and are building customized Customer Relations Tools for mid-sized companies. We also are expanding to include more development such as mobile apps.</p>
+            <p>As with many college computer science students, I am really into hackathon competitions, as my team won top 6 at Cal Hacks and best web hack. Many of my interests lie in the idea of a startup and growing your own business using cool technologies. I am currently ideating and building out various applications to continue to learn and monetize at a later time.</p>
+            <p>Thanks for tuning in to my first blog. I will be uploading more content as I get a better idea where I am going with this in terms of topics. If you would like to suggest topics according to my programming expertise, please find my contact info on the main page.
+          </div>
+        </div>
+			</section>
+
+		<!-- Scripts -->
+			<script src="../assets/js/jquery.min.js"></script>
+			<script src="../assets/js/browser.min.js"></script>
+			<script src="../assets/js/breakpoints.min.js"></script>
+      <script src="../assets/js/util.js"></script>
+			<script src="../assets/js/main.js"></script>
+
+	</body>
+</html>
diff --git a/images/aziz.jpeg b/images/aziz.jpeg
new file mode 100644
index 0000000..887f37b
Binary files /dev/null and b/images/aziz.jpeg differ
diff --git a/images/blogs/1/me.jpg b/images/blogs/1/me.jpg
new file mode 100644
index 0000000..42fc26c
Binary files /dev/null and b/images/blogs/1/me.jpg differ
diff --git a/images/blogs/1/pic.jpg b/images/blogs/1/pic.jpg
new file mode 100644
index 0000000..fb6914b
Binary files /dev/null and b/images/blogs/1/pic.jpg differ
diff --git a/images/heran.jpg b/images/heran.jpg
new file mode 100644
index 0000000..638c52a
Binary files /dev/null and b/images/heran.jpg differ
diff --git a/images/joel.jpg b/images/joel.jpg
new file mode 100644
index 0000000..cefd2b6
Binary files /dev/null and b/images/joel.jpg differ
diff --git a/index.html b/index.html
index f45ccd8..1e5872e 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,19 @@
 		<meta name="description" content="" />
 		<meta name="keywords" content="" />
 		<link rel="stylesheet" href="assets/css/main.css" />
+		<link rel="stylesheet" href="assets/css/blog.css" />
 	</head>
+
+		<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121903350-1"></script>
+	<script>
+	  window.dataLayer = window.dataLayer || [];
+	  function gtag(){dataLayer.push(arguments);}
+	  gtag('js', new Date());
+
+	  gtag('config', 'UA-121903350-1');
+	</script>
+
 	<body class="is-preload">
 
 		<!-- Header -->
@@ -38,6 +50,9 @@
 					<h1>{ Arjun Patel }</h1>
 					<p>Web Guru, Budding Entrepreneur, and Technology Enthusiast</p>
 				</div>
+
+				<p id="readBlog">Read Blog</p>
+
 				<video autoplay loop muted playsinline src="images/banner.mp4"></video>
 			</section>
 
@@ -117,11 +132,11 @@
 			</section>
 
 		<!-- Testimonials -->
-			<!-- <section class="wrapper">
+			<section class="wrapper">
 				<div class="inner">
 					<header class="special">
-						<h2>Faucibus consequat lorem</h2>
-						<p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor.</p>
+						<h2>Important People</h2>
+						<!-- <p>Working with these inspiring individuals has allowed me to grow as a developer and person. </p> -->
 					</header>
 					<div class="testimonials">
 						<section>
@@ -131,9 +146,9 @@
 								</blockquote>
 								<div class="author">
 									<div class="image">
-										<img src="images/pic01.jpg" alt="" />
+										<img src="images/heran.jpg" alt="" />
 									</div>
-									<p class="credit">- <strong>Jane Doe</strong> <span>CEO - ABC Inc.</span></p>
+									<p class="credit">- <strong>Heran Patel</strong> <span>CEO - Lotus</span></p>
 								</div>
 							</div>
 						</section>
@@ -144,9 +159,9 @@
 								</blockquote>
 								<div class="author">
 									<div class="image">
-										<img src="images/pic03.jpg" alt="" />
+										<img src="images/joel.jpg" alt="" />
 									</div>
-									<p class="credit">- <strong>John Doe</strong> <span>CEO - ABC Inc.</span></p>
+									<p class="credit">- <strong>Joel Simonoff</strong> <span>Founder - Predictim</span></p>
 								</div>
 							</div>
 						</section>
@@ -157,15 +172,15 @@
 								</blockquote>
 								<div class="author">
 									<div class="image">
-										<img src="images/pic02.jpg" alt="" />
+										<img src="images/aziz.jpeg" alt="" />
 									</div>
-									<p class="credit">- <strong>Janet Smith</strong> <span>CEO - ABC Inc.</span></p>
+									<p class="credit">- <strong>Aziz Bandeli</strong> <span>Product Owner - NSG | Intel</span></p>
 								</div>
 							</div>
 						</section>
 					</div>
 				</div>
-			</section> -->
+			</section>
 
 		<!-- Footer -->
 			<footer id="footer">