diff --git a/about.html b/about.html
new file mode 100644
index 0000000..0557ee1
--- /dev/null
+++ b/about.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
+  <link rel="manifest" href="./site.webmanifest">
+  <title>Klectr | About Me</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+
+    .ubuntu-regular {
+      font-family: "Ubuntu", sans-serif;
+      font-weight: 400;
+      font-style: normal;
+    }
+
+    .ubuntu-bold {
+      font-family: "Ubuntu", sans-serif;
+      font-weight: 700;
+      font-style: normal;
+    }
+
+    .ubuntu-regular-italic {
+      font-family: "Ubuntu", sans-serif;
+      font-weight: 400;
+      font-style: italic;
+    }
+
+    .gradient {
+      background: radial-gradient(circle at top right, #333 0%, #000 50%);
+      background-repeat: no-repeat;
+    }
+
+    .glow {
+      position: relative;
+    }
+
+    .glow::before {
+      position: absolute;
+      content: 'banana';
+      background-color: #ffce00;
+      width: 0px;
+      height: 0px;
+      filter: blur(30px);
+      z-index: -1;
+      top: -6px;
+      left: -4px;
+      border-radius: 50%;
+      transition: all 0.5s;
+    }
+
+    .glow:hover::before {
+      position: absolute;
+      content: 'banana';
+      background-color: #ffce00;
+      width: 40px;
+      height: 40px;
+      filter: blur(30px);
+      z-index: -1;
+      top: -6px;
+      left: -4px;
+      border-radius: 50%;
+    }
+  </style>
+
+</head>
+
+
+<body class="bg-black text-white mx-auto max-w-2xl my-6 ubuntu-regular p-4 gradient">
+  <!-- ______________________________________________________________ -->
+  <nav class="flex justify-between items-center">
+    <a href="" class="glow"><img src="./avatar.png" alt="avatar" width={30} height={30} class="w-10 h-10" /></a>
+    <div class="flex gap-6 text-md text-slate-400 ">
+      <a href="./index.html" class="hover:text-[#ffce00]">Home</a>
+      <a href="./about.html" class="hover:text-[#ffce00]  border-b border-[#ffce00]">About</a>
+      <a class="hover:text-[#ffce00]">Now</a>
+      <a class="hover:text-[#ffce00]">Featured</a>
+    </div>
+    <a href="mailto:tarmstrong95@proton.me">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        class="lucide lucide-mail  text-slate-400 hover:text-[#ffce00]">
+        <rect width="20" height="16" x="2" y="4" rx="2" />
+        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+      </svg>
+    </a>
+  </nav>
+
+  <!-- ______________________________________________________________ -->
+  <main class="mt-20 text-slate-200">
+    <h1 class="text-2xl font-bold text-white">About</h1>
+    <p class="text-slate-400">Thanks for stopping by! Here's a bit about me.</p>
+
+    <div class="my-6 flex flex-col gap-6 ">
+      <p>As a friendly and understanding software engineer, I bring a unique blend of technical expertise,
+        problem-solving enthusiasm, and debugging skills to my work. With a passion for building innovative
+        solutions that make a difference, I've had the privilege of working on various projects across
+        industries.</p>
+      <p>My journey in software development began with a curiosity about how things worked behind the
+        scenes. This led me to explore different areas, from IoT software to revenue cycle management, and
+        even dabbling in enterprise-level projects. Through these experiences, I've developed a strong
+        foundation in debugging, troubleshooting, and finding creative solutions to complex problems.</p>
+      <p>What sets me apart is my ability to approach challenges with a humble mindset, recognizing that
+        everyone makes mistakes and learning from those experiences. This has helped me grow as an engineer
+        and become more effective in my work. When I'm not coding, you can find me spending time with
+        family or exploring new ideas and technologies.</p>
+    </div>
+
+    <br>
+    <br>
+
+    <div class="flex gap-4 justify-between">
+      <h2 class="text-lg text-slate-400 flex-1">Work</h2>
+      <div class="flex flex-col gap-4 flex-[4]">
+        <p>My Tech toolbox includes Node.js, Rust, REST, React, and much more - but my true love? Open Source Software!
+        </p>
+
+        <div class="flex flex-col gap-2">
+          <div class="flex gap-2 justify-between">
+            <div class="flex gap-2">
+              <img src="./vh_logo.png" alt="ventra health" height={50} width={50} class="w-10 h-10 hover:opacity-100" />
+              <div>
+                <h3>Senior Software Engineer</h3>
+                <p class="text-slate-400">Ventra Health</p>
+              </div>
+            </div>
+            <p class="text-slate-400">Aug 2023 - Present</p>
+          </div>
+
+          <div class="flex gap-2 justify-between">
+            <div class="flex gap-2">
+              <img src="./vh_logo.png" alt="ventra health" height={50} width={50} class="w-10 h-10" />
+              <div>
+                <h3>Software Developer</h3>
+                <p class="text-slate-400">Randstad Technologies</p>
+              </div>
+            </div>
+            <p class="text-slate-400">Aug 2023 - Present</p>
+          </div>
+
+          <div class="flex gap-2 justify-between">
+            <div class="flex gap-2">
+              <img src="./vh_logo.png" alt="ventra health" height={50} width={50} class="w-10 h-10" />
+              <div>
+                <h3>Senior Software Architect</h3>
+                <p class="text-slate-400">Damiano Global Corp.</p>
+              </div>
+            </div>
+            <p class="text-slate-400">Aug 2023 - Present</p>
+          </div>
+
+          <div class="flex gap-2 justify-between">
+            <div class="flex gap-2">
+              <img src="./vh_logo.png" alt="ventra health" height={50} width={50} class="w-10 h-10" />
+              <div>
+                <h3>FullStack Software Developer</h3>
+                <p class="text-slate-400">Makers Ladder LLC</p>
+              </div>
+            </div>
+            <p class="text-slate-400">Aug 2023 - Present</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <br>
+    <br>
+
+    <div class="flex gap-4 justify-between">
+      <h2 class="text-lg text-slate-400 flex-1">Connect</h2>
+      <div class="flex flex-col gap-4 flex-[4]">
+        <p>Come find me on Twitter and LinkedIn - I'm excited to connect! If you're curious about my thoughts, swing by
+          my blog <a href="#">blog.tristonarmstrong.com</a>.</p>
+        <div class="flex flex-col gap-2 hover:text-slate-400 hover:border-slate-400">
+          <div class="flex gap-2 border-inherit">
+            <!-- REPOSITORIES -->
+            <a href="#" class="flex-1 border-inherit">
+              <div
+                class="flex border p-2 rounded-xl justify-between items-center py-3 border-inherit hover:border-slate-100">
+                <div class="flex gap-3 text-sm items-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    class="w-4 h-4">
+                    <circle cx="18" cy="18" r="3" />
+                    <circle cx="6" cy="6" r="3" />
+                    <path d="M6 21V9a9 9 0 0 0 9 9" />
+                  </svg>
+                  Repositories
+                </div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+                  <path d="M7 7h10v10" />
+                  <path d="M7 17 17 7" />
+                </svg>
+              </div>
+            </a>
+
+            <!-- TWITTER -->
+            <a href="#" class="flex-1 border-inherit">
+              <div
+                class="flex border p-2 rounded-xl justify-between items-center py-3 border-inherit hover:border-slate-100">
+                <div class="flex gap-3 text-sm items-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    class="w-4 h-4">
+                    <path
+                      d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
+                  </svg>
+                  Twitter
+                </div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+                  <path d="M7 7h10v10" />
+                  <path d="M7 17 17 7" />
+                </svg>
+              </div>
+            </a>
+          </div>
+
+          <div class="flex gap-2 border-inherit">
+            <!-- LINKED IN -->
+            <a href="#" class="flex-1  border-inherit">
+              <div
+                class="flex  border p-2 rounded-xl justify-between items-center py-3 border-inherit hover:border-slate-100">
+                <div class="flex gap-3 text-sm items-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    class="w-4 h-4">
+                    <path
+                      d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
+                  </svg>
+                  LinkedIn
+                </div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+                  <path d="M7 7h10v10" />
+                  <path d="M7 17 17 7" />
+                </svg>
+              </div>
+            </a>
+
+            <!-- INSTAGRAM -->
+            <a href="#" class="flex-1 border-inherit">
+              <div
+                class="flex border p-2 rounded-xl justify-between items-center py-3 border-inherit hover:border-slate-100">
+                <div class="flex gap-3 text-sm items-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    class="w-4 h-4">
+                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+                    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+                  </svg>
+                  Instagram
+                </div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+                  <path d="M7 7h10v10" />
+                  <path d="M7 17 17 7" />
+                </svg>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </main>
+</body>
+
+</html>
diff --git a/index.html b/index.html
index 332e432..0193b42 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
   <link rel="manifest" href="./site.webmanifest">
-  <title>Klectr Site</title>
+  <title>Klectr | Home</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@@ -132,7 +132,7 @@
       </div>
     </div>
 
-    <div class="text-slate-300">
+    <div class="text-slate-200">
       <p>Software engineer & entrepreneur, building innovative utility apps under my organization Klectr. Focused on
         creating tools that simplify daily life.</p>
       <br>
@@ -143,7 +143,9 @@
         reliability to all aspects of my life.</p>
       <br>
 
-      <p>In a nutshell, ☕️ + 👨🏻‍💻 + 🪵 = @tristonarmstrong</p>
+      <p>In a nutshell, ☕️ + 👨🏻‍💻 + 🪵 = <a href="https://tristonarmstrong.com/about.html"
+          class="font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#ffce00] to-red-500">@tristonarmstrong<a />
+      </p>
     </div>
   </main>
 
diff --git a/vh_logo.png b/vh_logo.png
new file mode 100644
index 0000000..c86a628
Binary files /dev/null and b/vh_logo.png differ
