feat: set default theme to gadient

public/blogs/simple.mdx

@@ -10,11 +10,15 @@ tags:
   - 'journey'
   - 'career'
 ---
-<H3 id="prop-drils">Prop drills</H3>
+
+
+<H3>Server</H3>
 <C>
-Finally, the RTK package also includes "RTK Query", a full data fetching and caching solution for Redux apps, as a separate optional entry point. It lets you define endpoints (REST, GraphQL, or any async function), and generates a reducer and middleware that fully manage fetching data, updating loading state, and caching results. It also automatically generates React hooks that can be used in components to fetch data, like const
-<S2/>
-Each of these APIs is completely optional and designed for specific use cases, and you can pick and choose which APIs you actually use in your app. But, all of them are highly recommended to help with those tasks.
-<S2/>
-Note that Redux Toolkit is still "Redux"! There's still a single store, with dispatched action objects for updates, and reducers that immutably update state, plus the ability to write thunks for async logic, manage normalized state, type your code with TypeScript, and use the DevTools. There's just way less code you have to write for the same results!
+  First you might want to yeet the **`Server`** & **`X-Powered-By`** headers (the latter being
+  unofficial), preferably through the server configs, or check `no_srv.go`. I have metioned this actually <L href='#using-go'>here</L> before
+<S/>
+> _Security through obscurity ain’t all that chief, but it's just a good complementary security measure._
+
+To test that you've removed this entirely you can use curl:
 </C>
+

src/app/components/reusables/nav.tsx

@@ -21,7 +21,7 @@ export function Navbar() {
   return (
     <nav className="p-4">
       <div className="container mx-auto flex items-center justify-between">
-        <div className="font-bold text-xl border-gradient">A S H G W</div>
+        <div className="font-bold text-xl">A S H G W</div>
         <div className="space-x-4">
           {Object.entries(navItems).map(([path, { name }]) => (
             <Button key={path}>

src/app/globals.css

@@ -72,38 +72,33 @@
   .average-transition {
     transition: ease-in-out 0.15s;
   }
-}
-
-/*
-  These are not specific
-*/
 
-.border-gradient::after {
-  content: '';
-  position: fixed;
-  left: -1px;
-  top: -1px;
-  z-index: -1;
-  width: calc(100% + 2px);
-  height: calc(100% + 2px);
-  opacity: 0;
-  transition: opacity 0.5s;
-}
+  .bg-gradient::after {
+    content: '';
+    position: fixed;
+    left: -1px;
+    top: -1px;
+    z-index: -1;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    opacity: 0;
+    transition: opacity 0.5s;
+  }
 
-.border-gradient::after {
-  background-image: linear-gradient(
-    84.16deg,
-    rgba(150, 46, 200, 0.2) -7.25%,
-    rgba(255, 215, 111, 0.042) 35.45%,
-    rgba(30, 17, 224, 0.1) 97%
-  );
-}
+  .bg-gradient::after {
+    /*If i change my mind abouut the theme I'll use this for inidividual components*/
+    background-image: linear-gradient(
+      84.16deg,
+      rgba(150, 46, 200, 0.15),
+      rgba(255, 215, 111, 0.042),
+      rgba(30, 17, 224, 0.1)
+    );
+  }
 
-.border-gradient:hover::after {
-  opacity: 1;
+  .bg-gradient:hover::after {
+    opacity: 1;
+  }
 }
-/*
-*/
 
 @layer base {
   * {
@@ -112,6 +107,12 @@
   html,
   body {
     scroll-behavior: smooth;
+    background: linear-gradient(
+      84.16deg,
+      rgba(150, 46, 200, 0.15),
+      rgba(255, 215, 111, 0.042),
+      rgba(30, 17, 224, 0.1)
+    );
   }
 
   body {