Overhaul

package.json

@@ -13,9 +13,14 @@
     "deploy": "gh-pages -d dist -b master"
   },
   "dependencies": {
+    "@carbon/charts-react": "^1.27.2",
+    "@carbon/icons-react": "^11.74.0",
+    "@carbon/react": "^1.100.0",
     "gh-pages": "^6.3.0",
+    "motion": "^12.34.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",

src/App.jsx

@@ -1,46 +1,47 @@
-import ContactForm from './ContactForm';
-import ProjectList from './ProjectList';
-import maxtekLogo from './assets/logo.jpeg'
-import './App.css'
+import { Content, Theme } from '@carbon/react'
+import {
+  Navigate,
+  Outlet,
+  RouterProvider,
+  createHashRouter,
+} from 'react-router-dom'
+import AppHeader from './components/AppHeader'
+import AppContent from './components/AppContent'
+import Home from './content/Home'
+import Projects from './content/Projects'
+import Contact from './content/Contact'
+import { enable } from '@carbon/feature-flags';
+import { useState } from 'react'
 
-function App() {
+const AppLayout = () => {
+  const defaultDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  const [darkMode, setDarkMode] = useState(defaultDarkMode);
+
+  enable('enable-tile-contrast');
 
   return (
-    <>
-      <title>Maxtek Consulting</title>
-      <div className="logo-container">
-        <img src={maxtekLogo} className="logo" alt="Maxtek logo" />
-        <h1>Maxtek Consulting</h1>
-      </div>
+    <Theme theme={darkMode ? 'g100' : 'g10'}>
+        <AppHeader darkMode={darkMode} setDarkMode={setDarkMode} />
+        <AppContent><Outlet /></AppContent>
+    </Theme>
+  );
+};
 
-      <div className="container">
-        <div className="box">
-          <h2>Services</h2>
-          <p>We can provide expertise in the following areas:</p>
-          <ul>
-            <li>C, C++, and Go</li>
-            <li>CMake build systems</li>
-            <li>Linux kernel development</li>
-            <li>Embedded systems</li>
-            <li>Open source projects</li>
-            <li>CI/CD integration</li>
-          </ul>
-        </div>
-        <div className="box">
-          <h2>Projects</h2>
-          <p>Here are some of our active projects:</p>
-          <ProjectList />
-          <p>Check out our <a href="https://github.com/maxtek6">GitHub</a> for more projects.</p>
-        </div>
-        <div className="box">
-          <h2>Contact</h2>
-          <p>For help with custom software or open source development.</p>
+const router = createHashRouter([
+  {
+    path: '/',
+    element: <AppLayout />,
+    children: [
+      { index: true, element: <Home /> },
+      { path: 'projects', element: <Projects /> },
+      { path: 'contact', element: <Contact /> },
+      { path: '*', element: <Navigate to="/" replace /> },
+    ],
+  },
+])
 
-          <ContactForm />
-        </div>
-      </div>
-    </>
-  )
+function App() {
+  return <RouterProvider router={router} />
 }
 
 export default App

src/assets/organizations.json

@@ -0,0 +1,5 @@
+[
+    "https://github.com/lariat-app",
+    "https://github.com/PreGuardAI",
+    "https://github.com/wxWidgets"
+]

src/assets/projects.json

@@ -0,0 +1,22 @@
+[
+    {
+        "name": "mio",
+        "description": "Header-only cross-platform C++ memory mapping library.",
+        "documentation" : "https://maxtek6.github.io/docs/mio"
+    },
+    {
+        "name" : "hyperpage",
+        "description" : "Fast and efficient solution for storing web content.",
+        "documentation" : "https://maxtek6.github.io/docs/hyperpage"
+    },
+    {
+        "name" : "sigfn",
+        "description" : "C++ library for handling signals.",
+        "documentation" : "https://maxtek6.github.io/docs/sigfn"
+    },
+    {
+        "name" : "threadpool",
+        "description" : "Header-only C++ threadpool.",
+        "documentation" : "https://maxtek6.github.io/docs/threadpool"
+    }
+]

src/components/AppContent.jsx

@@ -0,0 +1,16 @@
+import { Content } from '@carbon/react';
+
+function AppContent({ children, ...props }) {
+    return (
+        <Content
+            style={{
+                display: 'flex',
+                minHeight: 'calc(100vh - 3rem)',
+            }}
+            {...props}>
+            {children}
+        </Content>
+    )
+}
+
+export default AppContent;

src/components/AppHeader.jsx

@@ -0,0 +1,66 @@
+
+import {
+    Header,
+    HeaderContainer,
+    HeaderGlobalBar,
+    HeaderGlobalAction,
+    HeaderName,
+    HeaderNavigation,
+    HeaderMenuItem,
+    SkipToContent,
+} from '@carbon/react'
+import { Moon, Sun } from '@carbon/icons-react';
+import { useLocation, useNavigate } from 'react-router-dom'
+
+const NAV_ITEMS = [
+    { label: 'Home', path: '/' },
+    { label: 'Projects', path: '/projects' },
+    { label: 'Contact', path: '/contact' },
+]
+
+const AppHeader = ({ darkMode, setDarkMode }) => {
+    const location = useLocation()
+    const navigate = useNavigate()
+
+    return (
+        <HeaderContainer
+            render={() => (
+                <Header aria-label="Maxtek">
+                    <SkipToContent href="#main-content" />
+                    <HeaderName
+                        href="/"
+                        prefix=""
+                        onClick={(event) => {
+                            event.preventDefault()
+                            navigate('/')
+                        }}
+                    >
+                        Maxtek
+                    </HeaderName>
+                    <HeaderNavigation aria-label="Main navigation">
+                        {NAV_ITEMS.map((item) => (
+                            <HeaderMenuItem
+                                key={item.path}
+                                isActive={location.pathname === item.path}
+                                onClick={() => navigate(item.path)}
+                            >
+                                {item.label}
+                            </HeaderMenuItem>
+                        ))}
+                    </HeaderNavigation>
+                    <HeaderGlobalBar>
+                        <HeaderGlobalAction
+                            aria-label="Toggle dark mode"
+                            onClick={() => setDarkMode(!darkMode)}
+                            isActive={darkMode}
+                        >
+                            {darkMode ? <Moon /> : <Sun />}
+                        </HeaderGlobalAction>
+                    </HeaderGlobalBar>
+                </Header>
+            )}
+        />
+    )
+}
+
+export default AppHeader