diff --git a/docs/css/style.css b/docs/css/style.css
index 7a9dfaa..297bea8 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -1,13 +1,17 @@
+@charset "UTF-8";
 html {
-  font-size: 14px;
+  font-size: 12px;
   font-family: 'Roboto', Arial, Helvetica, sans-serif;
   font-weight: 300;
-  color: #6633ff; }
+  color: #8b64ff; }
 
 body {
   width: 100%;
   overflow-x: hidden;
-  background: #000; }
+  background: rgba(0, 0, 0, 0.9);
+  background: linear-gradient(to bottom, #000000 0%, #000000 30%, #2f2730 100%);
+  max-width: 768px;
+  margin: auto; }
 
 h1, h2, h3, h4, h5, h6 {
   font-weight: 300;
@@ -16,8 +20,21 @@ h1, h2, h3, h4, h5, h6 {
 p {
   margin: 0; }
 
+a {
+  color: #fff;
+  font-weight: 500;
+  text-decoration: underline dashed; }
+
 h1 {
-  font-size: 2.8em; }
+  font-size: 2.8rem; }
+
+.t-med {
+  font-size: 1.5em; }
+
+.t-large {
+  font-size: 3rem;
+  margin-bottom: 3rem;
+  font-weight: 500; }
 
 .t-right {
   text-align: right; }
@@ -33,40 +50,184 @@ h1 {
 
 .tooltip {
   display: none;
-  width: 100%;
+  width: 120%;
   position: absolute;
-  top: 3em;
+  top: 3rem;
   left: 0;
   z-index: 200;
-  background: #6633ff;
+  background: #5a23ff;
   color: #fff;
-  padding: 0.8em;
-  font-size: 0.8em;
+  padding: 0.8rem;
+  font-size: 1rem;
   text-align: left; }
 
-@media screen and (max-width: 600px) {
-  .t-right {
-    text-align: center; } }
+#faq, #work {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+
+.faq-item > * {
+  font-size: 1.5rem;
+  line-height: 2.2rem;
+  letter-spacing: 0.5px;
+  font-weight: 500; }
+
+#faq > li {
+  margin-bottom: 2rem; }
 
-.row-full {
+.faq-item > p {
+  color: #fff;
+  border-bottom: 1px dotted white;
+  display: inline-block; }
+
+#work li:before {
+  content: "→"; }
+
+#work .faq-item p {
+  font-size: 1.3rem;
+  line-height: 2rem; }
+
+.row-full, .row-3 {
   display: block;
   display: grid;
   align-content: center;
   align-items: center;
   justify-content: center;
+  min-height: 100vh;
   margin: auto;
-  height: 100vh;
+  padding: 1rem;
   grid-template-columns: [full] 100%; }
 
-.col-full {
+.row-3 {
+  grid-template-rows: [header] 10% [gutter] 5% [content1] 25% [gutter] 5% [content2] 25%;
+  grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr; }
+
+.col-full, .col-1-1, .col-1-2, .col-1-3, .col-2-1, .col-2-2, .col-2-3 {
+  align-self: center;
+  grid-column: full;
+  margin: auto;
+  padding: 1rem; }
+
+.row-head {
   align-self: center;
-  grid-area: full;
+  grid-row: header;
+  grid-column-start: span 3;
   margin: auto; }
 
+.row-head h2 {
+  color: #fff;
+  font-size: 1.5rem; }
+
+.col-1-1 {
+  grid-row: content1;
+  grid-column: col1;
+  margin: 0.5rem;
+  min-height: 100%;
+  z-index: 99; }
+
+.col-1-2 {
+  grid-row: content1;
+  grid-column: col2;
+  margin: 0.5rem;
+  min-height: 100%;
+  z-index: 99; }
+
+.col-1-3 {
+  grid-row: content1;
+  grid-column: col3;
+  margin: 0.5rem;
+  min-height: 100%;
+  z-index: 99; }
+
+.col-2-1 {
+  grid-row: content2;
+  grid-column: col1;
+  margin: 0.5rem;
+  min-height: 100%;
+  z-index: 98; }
+
+.col-2-2 {
+  grid-row: content2;
+  grid-column: col2;
+  margin: 0.5rem;
+  min-height: 100%;
+  z-index: 98; }
+
+.col-2-3 {
+  grid-row: content2;
+  grid-column: col3;
+  margin: 0.5rem;
+  min-height: 100%;
+  z-index: 98; }
+
 @media screen and (max-width: 600px) {
-  .row-full {
-    margin: 40vh auto;
-    height: auto; } }
+  .row-full, .row-3 {
+    margin: 0;
+    display: flex;
+    flex-direction: column; }
+  .row-3 {
+    height: auto;
+    margin: 5rem auto;
+    max-width: 260px; }
+  .row-head {
+    margin: 2em auto; } }
+
+.p-item {
+  position: relative;
+  padding: 1.5rem 1.8rem;
+  border-radius: .5rem;
+  text-align: left;
+  background: #2c829a;
+  color: #fff;
+  box-shadow: 0rem 0.5rem 3rem #000; }
+
+.p-item:hover {
+  transform: translateY(-5px) scale(1.02);
+  z-index: 100;
+  background: #5a23ff;
+  box-shadow: 0rem 1rem 4rem #000; }
+
+.p-item h3 {
+  padding-top: .3rem;
+  margin-bottom: .8rem;
+  font-size: 0.9rem;
+  font-weight: 500; }
+
+.p-links a {
+  display: inline-block;
+  margin: 0.5rem 0.5rem; }
+
+.tags {
+  padding: 0;
+  display: inline-block; }
+
+.tags li {
+  list-style: none;
+  display: inline-block;
+  background: rgba(24, 32, 231, 0.25);
+  border-radius: 1rem;
+  font-size: .7rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding: .5em 0.8rem;
+  margin: 0.2em 0; }
+
+.accessible {
+  text-align: center;
+  margin: 10px auto;
+  width: 100vw;
+  background: #fff;
+  color: #000;
+  position: relative;
+  top: -100px; }
+
+.accessible:focus {
+  margin: 10px auto;
+  width: 100vw;
+  background: #fff;
+  color: #000;
+  position: static;
+  top: 0; }
 
 .is-relative {
   position: relative; }
diff --git a/docs/index.html b/docs/index.html
index 7181d0b..43783e2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,36 +12,193 @@
 	<meta name="copyright" content="Muthu Kumar/Anu Rahul Nandhan">
 	<meta name="language" content="EN">
 	<meta name="robots" content="index,follow">
-	<meta name="revised" content="Sunday, December 12th, 2017">
+	<meta name="revised" content="Sunday, December 10th, 2017">
 	<meta name="author" content="Muthu Kumar, muthukumar(AT)thefeathers.in">
 	<meta name="url" content="https://mkr.pw">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta http-equiv="x-dns-prefetch-control" content="on">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" type="text/css" charset="utf-8">
 	<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8">
+	<link href="https://fonts.googleapis.com/css?family=Roboto:300,500" rel="stylesheet">
 </head>
 
 <body>
-	<div id="intro" class="row-full">
+	<a class="accessible" aria-hidden="true" href="#intro">[Skip to Content]</a>
+	<section id="intro" class="row-full">
 		<div class="col-full">
 			<h1 class="t-right">Hi, I'm Muthu Kumar</h1>
 			<p class="t-right">a.k.a
 				<span class="is-relative">
 					<span class="t-white" id="myname-select">Anu Rahul Nandhan S</span>
-					<span class="tooltip" id="myname-tip">Anu Rahul Nandhan is indeed my legal name. I work under the pseudonym Muthu Kumar.
+					<span class="tooltip" id="myname-tip">This is indeed my legal name. I work under the pseudonym Muthu Kumar.
 					</span>
 				</span>
 			</p>
 		</div>
-	</div>
-	<div id="about" class="row-full">
-		<div class="col-full t-center">
-			<h2>Content</h2>
-			<p>Is
-				<span class="t-white">Coming</span>
+	</section>
+	<section id="about" class="row-full">
+		<div class="col-full">
+			<h2 class="t-large t-white">About</h2>
+			<h2>Let's make this simple.</h2>
+			<h3 class="t-white">You have questions—let me try to answer them.</h3>
+			<br>
+			<ul id="faq">
+				<li class="faq-item">
+					<h3>I'm</h3>
+					<p>22.</p>
+				</li>
+				<li class="faq-item">
+					<h3>I'm an</h3>
+					<p>Architect, designer, full stack web developer, writer, and filmmaker.</p>
+				</li>
+				<li class="faq-item">
+					<h3>Currently at</h3>
+					<p>Chennai, India.</p>
+				</li>
+				<li class="faq-item">
+					<h3>from</h3>
+					<p>Tuticorin, Tamil Nadu.</p>
+				</li>
+				<li class="faq-item">
+					<h3>Highschool at</h3>
+					<p>Sri Jayendra Swamigal Silver Jubilee, Tirunelveli.</p>
+				</li>
+				<li class="faq-item">
+					<h3>College at</h3>
+					<p>McGan's Ooty School of Architecture, Ooty.</p>
+				</li>
+				<li class="faq-item">
+					<h3>Previous Work</h3>
+				</li>
+				<li>
+					<ul id="work">
+						<li class="faq-item">
+							<p>Architectural Intern, BlueCube, Chennai.</p>
+						</li>
+						<li class="faq-item">
+							<p>Technical Content Writer Intern, Zoho, Chennai.</p>
+						</li>
+						<li class="faq-item">
+							<p>Graphic Designer & Web Developer, Manoj Exports, Chennai.</p>
+						</li>
+					</ul>
+				</li>
+				<li>
+					<h3 class="t-white">Get more infortmation by visiting
+						<code>/api</code> on this domain.
+					</h3>
+				</li>
+			</ul>
+		</div>
+	</section>
+	<section id="projects" class="row-3">
+		<div class="row-head t-center">
+			<h2>Projects</h2>
+		</div>
+		<div class="col-1-1 t-center p-item">
+			<h3>Personal Website</h3>
+			<p>Source code of this website.</p>
+			<ul class="tags">
+				<li>JavaScript</li>
+				<li>Node</li>
+				<li>HTML</li>
+				<li>Sass</li>
+				<li>Browserify</li>
+			</ul>
+			<p class="p-links">
+				<a target="_blank" href="https://github.com/MKRhere/pw">GitHub</a>
+				<a target="_blank" href="https://mkr.pw">Project Site</a>
+			</p>
+		</div>
+		<div class="col-1-2 t-center p-item">
+			<h3>up-serve</h3>
+			<p>A very simple to use cli nginx configuration tool.</p>
+			<ul class="tags">
+				<li>JavaScript</li>
+				<li>Node</li>
+				<li>nginx</li>
+				<li>Linux</li>
+				<li>SysAdmin</li>
+			</ul>
+			<p class="p-links">
+				<a target="_blank" href="https://github.com/CodeFeathers/up-serve">GitHub</a>
+				<a target="_blank" href="https://up.js.org">Project Site</a>
+			</p>
+		</div>
+		<div class="col-1-3 t-center p-item">
+			<h3>OutFocusRED</h3>
+			<p>WordPress theme for the OutFocus.in online magazine.</p>
+			<ul class="tags">
+				<li>WordPress</li>
+				<li>PHP</li>
+				<li>_s</li>
+				<li>JavaScript</li>
+			</ul>
+			<p class="p-links">
+				<a target="_blank" href="https://github.com/CodeFeathers/OutFocusRED">GitHub</a>
+				<a target="_blank" href="https://outfocus.in">Project Site</a>
+			</p>
+		</div>
+		<div class="col-2-1 t-center p-item">
+			<h3>The Feathers</h3>
+			<p>Founder, designer and developer of theFeathers.in.</p>
+			<ul class="tags">
+				<li>Design</li>
+				<li>WordPress</li>
+				<li>JavaScript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+			</ul>
+			<p class="p-links">
+				<a target="_blank" href="https://thefeathers.in">Project Site / Currently down</a>
+			</p>
+		</div>
+		<div class="col-2-2 t-center p-item">
+			<h3>The Devs Network</h3>
+			<p>A Telegram network for developers. Contributed to development.</p>
+			<ul class="tags">
+				<li>JavaScript</li>
+				<li>Node</li>
+				<li>React</li>
+				<li>Material</li>
+				<li>Design</li>
+			</ul>
+			<p class="p-links">
+				<a target="_blank" href="https://github.com/thedevs-network">GitHub</a>
+				<a target="_blank" href="https://thedevs.network">Project Site</a>
+			</p>
+		</div>
+		<div class="col-2-3 t-center p-item">
+			<h3>Curatio Healthcare</h3>
+			<p>Design and development of custom site (WordPress).</p>
+			<ul class="tags">
+				<li>Design</li>
+				<li>WordPress</li>
+				<li>JavaScript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+			</ul>
+			<p class="p-links">
+				<a target="_blank" href="http://curatiohealthcare.com">Project Site</a>
+			</p>
+		</div>
+	</section>
+	<section id="contact" class="row-full">
+		<div class="col-full">
+			<h1>I'm available for work.</h1>
+			<p class="t-med">Contact me at:
+				<span id="contact-em" class="t-white">mxthxkxmar@thefeathers.in (Replace x with u)</span>
 			</p>
 		</div>
-	</div>
+	</section>
+	<script>
+		function revealEmail() {
+			var obfem = "mxthxkxmar@thefeathers.in"
+			obfem = obfem.replace(/x/g, 'u')
+			document.querySelector("#contact-em").innerHTML = obfem
+		}
+		document.onscroll = revealEmail
+	</script>
 	<script src="js/bundle.js" type="text/javascript" charset="utf-8"></script>
 </body>
 
diff --git a/package.json b/package.json
index 0fdd453..f409da8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mkr.pw",
-	"version": "0.1.0",
+	"version": "1.0.0",
 	"description": "MKR's personal website",
 	"main": "index.js",
 	"scripts": {
diff --git a/sass/style.sass b/sass/style.sass
index ec5ac7c..8df3f1c 100644
--- a/sass/style.sass
+++ b/sass/style.sass
@@ -1,15 +1,16 @@
 // Vars
 
-$primary: hsl(255, 100%, 60%)
-$bg-color: #000
+$primary: #5a23ff
+$primary-dull: #3a17a3
+$bg-color: rgba(0, 0, 0, 0.9)
 
 // Root
 
 html
-	font-size: 14px
+	font-size: 12px
 	font-family: 'Roboto', Arial, Helvetica, sans-serif
 	font-weight: 300
-	color: $primary
+	color: #8b64ff
 
 // Body
 
@@ -17,6 +18,9 @@ body
 	width: 100%
 	overflow-x: hidden
 	background: $bg-color
+	background: linear-gradient(to bottom, #000000 0%, #000000 30%, #2f2730 100%)
+	max-width: 768px
+	margin: auto
 
 // Typography
 
@@ -27,8 +31,21 @@ h1, h2, h3, h4, h5, h6
 p
 	margin: 0
 
+a
+	color: #fff
+	font-weight: 500
+	text-decoration: underline dashed
+
 h1
-	font-size: 2.8em
+	font-size: 2.8rem
+
+.t-med
+	font-size: 1.5em
+
+.t-large
+	font-size: 3rem
+	margin-bottom: 3rem
+	font-weight: 500
 
 .t-right
 	text-align: right
@@ -44,20 +61,44 @@ h1
 
 .tooltip
 	display: none
-	width: 100%
+	width: 120%
 	position: absolute
-	top: 3em
+	top: 3rem
 	left: 0
 	z-index: 200
 	background: $primary
 	color: #fff
-	padding: 0.8em
-	font-size: 0.8em
+	padding: 0.8rem
+	font-size: 1rem
 	text-align: left
 
-@media screen and (max-width: 600px)
-	.t-right
-		text-align: center
+// FAQ UL
+
+#faq, #work
+	list-style: none
+	margin: 0
+	padding: 0
+
+.faq-item > *
+	font-size: 1.5rem
+	line-height: 2.2rem
+	letter-spacing: 0.5px
+	font-weight: 500
+
+#faq > li
+	margin-bottom: 2rem
+
+.faq-item > p
+	color: #fff
+	border-bottom: 1px dotted white
+	display: inline-block
+
+#work li:before
+	content: "→"
+
+#work .faq-item p
+	font-size: 1.3rem
+	line-height: 2rem
 
 // Grid
 
@@ -67,21 +108,118 @@ h1
 	align-content: center
 	align-items: center
 	justify-content: center
+	min-height: 100vh
 	margin: auto
-	height: 100vh
+	padding: 1rem
 	grid-template-columns: [full] 100%
 
+.row-3
+	@extend .row-full
+	grid-template-rows: [header] 10% [gutter] 5% [content1] 25% [gutter] 5% [content2] 25%
+	grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr
+
 .col-full
 	align-self: center
-	grid-area: full
+	grid-column: full
 	margin: auto
+	padding: 1rem
+
+.row-head
+	align-self: center
+	grid-row: header
+	grid-column-start: span 3
+	margin: auto
+	
+.row-head h2
+	color: #fff
+	font-size: 1.5rem
+
+@for $rown from 1 through 2
+	@for $coln from 1 through 3
+		.col-#{$rown}-#{$coln}
+			@extend .col-full
+			grid-row: content#{$rown}
+			grid-column: col#{$coln}
+			margin: 0.5rem
+			min-height: 100%
+			z-index: #{100 - $rown}
 
 @media screen and (max-width: 600px)
 	.row-full
-		margin: 40vh auto
+		margin: 0
+		display: flex
+		flex-direction: column
+	.row-3
 		height: auto
+		margin: 5rem auto
+		max-width: 260px
+	.row-head
+		margin: 2em auto
 
-// Micro-class
+// Portfolio Item
+
+.p-item
+	position: relative
+	padding: 1.5rem 1.8rem
+	border-radius: .5rem
+	text-align: left
+	background: #2c829a
+	color: #fff
+	box-shadow: 0rem 0.5rem 3rem #000
+
+.p-item:hover
+	transform: translateY(-5px) scale(1.02)
+	z-index: 100
+	background: $primary
+	box-shadow: 0rem 1rem 4rem #000
+
+.p-item h3
+	padding-top: .3rem
+	margin-bottom: .8rem
+	font-size: 0.9rem
+	font-weight: 500
+
+.p-links a
+	display: inline-block
+	margin: 0.5rem 0.5rem
+
+// Tags
+
+.tags
+	padding: 0
+	display: inline-block
+
+.tags li
+	list-style: none
+	display: inline-block
+	background: rgba(24, 32, 231, .25)
+	border-radius: 1rem
+	font-size: .7rem
+	font-weight: 500
+	text-transform: uppercase
+	padding: .5em 0.8rem
+	margin: 0.2em 0
+
+// Accessibility
+
+.accessible
+	text-align: center
+	margin: 10px auto
+	width: 100vw
+	background: #fff
+	color: #000
+	position: relative
+	top: -100px
+
+.accessible:focus
+	margin: 10px auto
+	width: 100vw
+	background: #fff
+	color: #000
+	position: static
+	top: 0
+
+// Micro-classes
 
 .is-relative
 	position: relative
\ No newline at end of file