added about page

index.html

@@ -82,6 +82,7 @@ pre.ascii-art {
 	  <button id="tab-home" class="active">Home</button>
     <button id="tab-git">User Repository</button>
     <button id="tab-wiki">Wiki</button>
+    <button id="tab-about">About</button>
   </nav>
   <div id="terminal">
 	  <pre class=ascii-art>                                                                                    
@@ -156,6 +157,21 @@ pre.ascii-art {
         <li><a class="link" href="https://wiki.miasma-ls.com/pages" target="_blank">Pages</a></li>
       </ul>
     </div>
+        <div id="content-about" style="display:none;">
+      <p><span class="prompt">➜</span> <span class="cmd">~/about_us</span></p>
+          <p>The inspiration for building Miasma OS is simply that I have done so much hardening to Arch Linux on my desktop, and while all the policies, tools, 
+          have made my desktop secure, the usability is still excellent. There is very little tradeoff between security and usability in my configuration.<br> 
+            The problem was that I also had to maintain this on other devices such as my laptop. I was wishing that there was a pre-configured desktop that matched all my needs 
+          that I could install on a laptop and not have to maintain it with the same time and frequency that I maintain my desktop. I tried other options but did not find anything 
+          that checked all the boxes: </p>
+          <ul>
+          <li> Arch based</li>
+          <li> Immutable so I don't have to worry about it</li>
+          <li> Security focused defaults</li>
+          <li> Modern desktop environments and window managers</li></ul>
+          <p>So the goal was personal but I really do think this is something missing despite all the custom isos out there.</p>
+          <p>Miasma OS at the end of the day Arch with a bunch of post install scripts, similar to something like Omarchy, but the philosophy and goal of the project is its distinguishing factor.</p>
+        </div>
   </div>
 </div>
 
@@ -163,21 +179,27 @@ pre.ascii-art {
 const tabHome   = document.getElementById('tab-home');
 const tabGit   = document.getElementById('tab-git');
 const tabWiki  = document.getElementById('tab-wiki');
+const tabAbout = document.getElementById('tab-about');
 const cntHome   = document.getElementById('content-home');
 const cntGit   = document.getElementById('content-git');
 const cntWiki  = document.getElementById('content-wiki');
+const cntAbout = document.getElementById('content-about');
 
 tabHome.addEventListener('click',()=>{ 
-  tabHome.classList.add('active'); tabWiki.classList.remove('active'); tabGit.classList.remove('active');
+  tabHome.classList.add('active'); tabWiki.classList.remove('active'); tabGit.classList.remove('active');tabAbout.classList.remove('active');
-  cntHome.style.display='block'; cntWiki.style.display='none'; cntGit.style.display='none';
+  cntHome.style.display='block'; cntWiki.style.display='none'; cntGit.style.display='none';cntAbout.style.display='none';
 });
 tabGit.addEventListener('click',()=>{ 
-  tabGit.classList.add('active'); tabWiki.classList.remove('active');tabHome.classList.remove('active');
+  tabGit.classList.add('active'); tabWiki.classList.remove('active');tabHome.classList.remove('active');tabAbout.classList.remove('active');
-  cntGit.style.display='block'; cntWiki.style.display='none';cntHome.style.display='none';
+  cntGit.style.display='block'; cntWiki.style.display='none';cntHome.style.display='none';cntAbout.style.display='none';
 });
 tabWiki.addEventListener('click',()=>{ 
-  tabWiki.classList.add('active'); tabGit.classList.remove('active');tabHome.classList.remove('active');
+  tabWiki.classList.add('active'); tabGit.classList.remove('active');tabHome.classList.remove('active');tabAbout.classList.remove('active');
-  cntWiki.style.display='block'; cntGit.style.display='none';cntHome.style.display='none';
+  cntWiki.style.display='block'; cntGit.style.display='none';cntHome.style.display='none';cntAbout.style.display='none';
+});
+tabAbout.addEventListener('click',()=>{ 
+  tabAbout.classList.add('active'); tabWiki.classList.remove('active'); tabGit.classList.remove('active');tabHome.classList.remove('active');
+  cntAbout.style.display='block'; cntWiki.style.display='none'; cntGit.style.display='none';cntHome.style.display='none';
 });
 </script>
 </body>