diff --git a/index.html b/index.html
index 4a2d653..7c7c654 100644
--- a/index.html
+++ b/index.html
@@ -1,40 +1,80 @@
 <head>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-<style>
-h1 {
-text-align:center;
-}
-h3 {
-  text-align:center;
-}
-.vcenter {
-    display: inline-block;
-    vertical-align: middle;
-    float: none;
-}
-</style>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>RetryLife</title>
+  <title>Retrylife</title>
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
+  <style>
+  body{
+    background-color:#e5e9f0;
+  }
+  </style>
 </head>
 <body>
-  <ul class="nav justify-content-center">
-<!--   <li class="nav-item">
-    <a class="nav-link active" href="./index.html">Home</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="./music.html">Music</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="./twitch.html">Twitch</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="./other.html">Other</a>
-  </li> -->
-</ul>
-<div style="height:30%"></div>
-<h1 class="display-1">RetryLife</h1>
-  <h3><small class="text-muted">A collection of projects by <em><a href="https://github.com/ewpratten">Evan Pratten</a></em></small></h3>
-  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-</body>
+  <div style="height:35%"></div>
+  
+  <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
+  <div class="sm:flex sm:items-center px-6 py-4">
+    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars0.githubusercontent.com/u/21065412?s=460&v=4" alt="">
+    <div class="text-center sm:text-left sm:flex-grow">
+      <div class="mb-4">
+        <p class="text-xl leading-tight">Evan Pratten</p>
+        <p class="text-sm leading-tight text-grey-dark">Programmer and student</p>
+      </div>
+      <div>
+        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<br><br>
+
+  <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
+  <div class="sm:flex sm:items-center px-6 py-4">
+    <div class="text-center sm:text-left sm:flex-grow">
+      <div class="mb-4">
+        <p class="text-xl leading-tight">About Me</p>
+        <br>
+        <p class="text-sm leading-tight text-grey-dark">I am a teenager who loves to write code and make stuff. Currently, I am in school, doing stuff... Aside from that, I am a programming captain on FRC team #<a href="https://github.com/frc5024">5024</a> and spend my free time either programming or thinking about programming</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<br>
+
+  <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
+  <div class="sm:flex sm:items-center px-6 py-4">
+    <div class="text-center sm:text-left sm:flex-grow">
+      <div class="mb-4">
+        <p class="text-xl leading-tight">Robotics</p>
+        <br>
+        <p class="text-sm leading-tight text-grey-dark">As a part of team 5024, I co-lead the programming team and help teach new programmers about programming in compiled languages, interfacing with hardware, and computer vidsion. Currently, we are in the middle of a build season and are working to create code for the many tasks involved in this year's game.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<br>
+
+  <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
+  <div class="sm:flex sm:items-center px-6 py-4">
+    <div class="text-center sm:text-left sm:flex-grow">
+      <div class="mb-4">
+        <p class="text-xl leading-tight">Social Media</p>
+        <br>
+        <p class="text-sm leading-tight text-grey-dark">When I am not programming or doing homework, I post updates on robotics and other projects to my social media. Feel free to check my posts out.</p>
+      </div>
+      <div>
+        <a href="https://twitter.com/ewpratten"><button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Twitter</button></a>
+        <a href="https://devrant.com/users/ewpratten"><button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">devRant</button></a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<br>
+<div style="text-align:center">
+  <p class="text-sm leading-tight text-grey-dark">pgp: <a href="https://keybase.io/ewpratten/pgp_keys.asc">56F5 A6FB 5A8E EF90</a></p>
+</div>
+
+
+</body>
\ No newline at end of file
diff --git a/index.html.bkp b/index.html.bkp
new file mode 100644
index 0000000..4a2d653
--- /dev/null
+++ b/index.html.bkp
@@ -0,0 +1,40 @@
+<head>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<style>
+h1 {
+text-align:center;
+}
+h3 {
+  text-align:center;
+}
+.vcenter {
+    display: inline-block;
+    vertical-align: middle;
+    float: none;
+}
+</style>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>RetryLife</title>
+</head>
+<body>
+  <ul class="nav justify-content-center">
+<!--   <li class="nav-item">
+    <a class="nav-link active" href="./index.html">Home</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="./music.html">Music</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="./twitch.html">Twitch</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="./other.html">Other</a>
+  </li> -->
+</ul>
+<div style="height:30%"></div>
+<h1 class="display-1">RetryLife</h1>
+  <h3><small class="text-muted">A collection of projects by <em><a href="https://github.com/ewpratten">Evan Pratten</a></em></small></h3>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+</body>
