Added Initial Server Admin Page

pease-portfolio/src/app/globals.js

@@ -24,11 +24,11 @@ export function Footer() {
 export function Navigation() {
   return (
     <div className="flex justify-center w-full mb-5">
-        <div className="mt-5 bg-slate-900 rounded-lg w-full h-[35px] self-center p-1 ml-5 mr-5">
+        <div className="mt-5 bg-slate-900 rounded-lg w-full self-center p-1 ml-5 mr-5">
-          <a href="/" className="ml-5 hover:font-bold">Home</a>
+          <a href="/" className="ml-5 hover:font-bold break-inside-avoid">Home</a>
-          <a href="/projects" className="ml-5 hover:font-bold">Projects</a>
+          <a href="/projects" className="ml-5 hover:font-bold break-inside-avoid">Projects</a>
-          <a href="/previous_versions" className="ml-5 hover:font-bold">Previous Editions</a>
+          <a href="/previous_versions" className="ml-5 hover:font-bold break-inside-avoid">Previous Editions</a>
-          <a href="/server" className="ml-5 hover:font-bold">Server Administration</a>
+          <a href="/server" className="ml-5 hover:font-bold break-inside-avoid">Server Administration</a>
         </div>
       </div>
   );

pease-portfolio/src/app/server/page.js

@@ -1,7 +1,32 @@
+import "./style.css"
+import Script from 'next/script'
+
 export default function Home() {
     return (
         <div className="ml-6 mr-6">
-            Hi
+            <div className="">
+                <div className="max-md:hidden md:absolute right-[30px]">
+                    <div style={{marginRight: "15px"}} data-netdata="system.cpu" data-max="0" data-chart-library="easypiechart" data-width="200" data-height="200" data-after="-300" data-points="300" data-title="Total CPU Usage"/>
+                    <div style={{marginRight: "15px"}} data-netdata="mem.available" data-max="0" data-chart-library="easypiechart" data-width="200" data-height="200" data-after="-300" data-points="300" data-title="RAM Free"/>
+                    <div style={{marginRight: "15px"}} data-netdata="system.net" data-max="0" data-chart-library="easypiechart" data-width="200" data-height="200" data-after="-300" data-points="300" data-title="Outbound Traffic" data-dimensions="sent"/>
+                    <div data-netdata="system.net" data-chart-library="easypiechart" data-width="200" data-height="200" data-after="-300" data-points="300" data-title="Inbound Traffic" data-dimensions="received"/>
+                </div>
+                <div className="max-md:pb-5 md:h-[200px] md:w-[40%]">
+                    This is an overview of my primary operating server. This server is a Dell R720 with 192GB of RAM, 8x 4TB HDDs, 1 x 1TB HDD, 32 x Intel(R) Xeon(R) CPU E5-2670. It currently runs Proxmox and various containerized services, including this portfolio. Below is a live update of various statistics of that server.
+                </div>
+            </div>
+            <div>
+                <div className="font-bold text-[24px]">CPU</div>
+                <div data-netdata="system.cpu" data-chart-library="dygraph" data-width="100%" data-height="200" data-legend="no" data-title="" data-dygraph-drawgrid="false"/>
+            </div>
+            <div>
+                <div className="font-bold text-[24px]">RAM (Usage)</div>
+                <div data-netdata="mem.committed" data-chart-library="dygraph" data-width="100%" data-height="200" data-after="-600" data-legend="no" data-title="" data-dygraph-drawgrid="false"/>
+            </div>
+            <Script>
+                {`var netdataNoBootstrap = true;`}
+            </Script>
+            <Script src="https://netdata.nicholaspease.com/dashboard.js"/>
         </div>
     )
 }

pease-portfolio/src/app/server/style.css

@@ -0,0 +1,3 @@
+.dygraph-legend {
+    background: transparent !important;
+  }