Start Header, Revise ESLint Rules, Start Custom Styling, Update Packages

.eslintrc.json

@@ -2,7 +2,7 @@
   "env": {
     "browser": true,
     "es2021": true
-    },
+  },
   "extends": [
     "next/core-web-vitals",
     "airbnb",
@@ -15,13 +15,35 @@
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
-        },
-    "ecmaVersion": "latest",
+    },
+    "ecmaVersion": 2023,
     "sourceType": "module"
   },
   "rules": {
+    "react/function-component-definition": "off",
     "react/react-in-jsx-scope": "off",
     "@next/next/no-img-element": "off",
-    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }]
+    "react/jsx-filename-extension": [
+      2,
+      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
+    ],
+    "react/prop-types": "off", // Disable prop-types check when using TypeScript
+    "@typescript-eslint/explicit-module-boundary-types": "off", // Allow omitting return types on functions
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "import/no-unresolved": "off" // Disable unresolved import errors for TypeScript paths
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {} // Resolve TypeScript paths properly
+    }
   }
 }

components/layout/header/HeaderMenuItems.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import { HeaderMenuItem } from '@carbon/react';
+
+const HeaderMenuItems: FC = () => (
+  <>
+    <HeaderMenuItem href="/">Home</HeaderMenuItem>
+    <HeaderMenuItem href="/work">Work</HeaderMenuItem>
+    <HeaderMenuItem href="/projects">Projects</HeaderMenuItem>
+    <HeaderMenuItem href="/talks">Talks</HeaderMenuItem>
+    <HeaderMenuItem href="/writing">Writing</HeaderMenuItem>
+  </>
+);
+
+export default HeaderMenuItems;

components/layout/header/NavHeader.tsx

@@ -0,0 +1,54 @@
+import {
+  Header,
+  HeaderContainer,
+  HeaderName,
+  HeaderNavigation,
+  HeaderMenuButton,
+  SkipToContent,
+  SideNav,
+  SideNavItems,
+  HeaderSideNavItems,
+  HeaderGlobalBar,
+  HeaderGlobalAction,
+} from '@carbon/react';
+
+import HeaderMenuItems from './HeaderMenuItems';
+
+export default function NavHeader() {
+  return (
+    <HeaderContainer render={({ isSideNavExpanded, onClickSideNavExpand }) => (
+      <Header aria-label="Anthony Jesmok">
+        <SkipToContent />
+        <HeaderMenuButton
+          aria-label="Open menu"
+          onClick={onClickSideNavExpand}
+          isActive={isSideNavExpanded}
+        />
+        <HeaderName href="/" prefix="">
+          Anthony Jesmok
+        </HeaderName>
+        <HeaderNavigation aria-label="Site Menu">
+          <HeaderMenuItems />
+        </HeaderNavigation>
+        <SideNav
+          aria-label="Mobile Navigation"
+          expanded={isSideNavExpanded}
+          isPersistent={false}
+          placeholder="Mobile Navigation"
+        >
+          <SideNavItems>
+            <HeaderSideNavItems>
+              <HeaderMenuItems />
+            </HeaderSideNavItems>
+          </SideNavItems>
+        </SideNav>
+        <HeaderGlobalBar>
+          <HeaderGlobalAction aria-label="Contact Me">
+            <p>TODO</p>
+          </HeaderGlobalAction>
+        </HeaderGlobalBar>
+      </Header>
+    )}
+    />
+  );
+}

package.json

@@ -26,7 +26,6 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.3",
     "@firebase/performance": "^0.6.4",
-    "@next/font": "^13.5.6",
     "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
     "@typescript-eslint/eslint-plugin": "^6.16.0",

pages/_app.js

@@ -9,11 +9,11 @@ import { getPerformance } from '@firebase/performance';
 import firebase from '../util/firebase';
 
 // Styles
-import { Theme } from '@carbon/react';
 import '../styles/app.scss';
 
 // Components
-import NavHeader from '../components/layout/NavHeader';
+import NavHeader from '../components/layout/header/NavHeader.tsx';
+import { Content } from '@carbon/react';
 
 // Initialize App
 function MarshmallowApp({ Component, pageProps }) {
@@ -25,14 +25,12 @@ function MarshmallowApp({ Component, pageProps }) {
 
   // Return App
   return (
-    <Theme theme="g90">
-      <header>
-        <NavHeader />
-      </header>
-      <main>
+    <>
+      <NavHeader />
+      <Content>
         <Component {...pageProps} />
-      </main>
-    </Theme>
+      </Content>
+    </>
   )
 }
 

pages/index.tsx

@@ -1,4 +1,5 @@
 import Head from 'next/head';
+import { Grid, Column } from '@carbon/react';
 
 // export async function getStaticProps() {}
 
@@ -8,9 +9,14 @@ export default function IndexPage() {
       <Head>
         <title>Anthony Jesmok | Home | jesmok.xyz</title>
       </Head>
-      <div>
-        <p>Something will be here soon.</p>
-      </div>
+      <Grid fullWidth>
+        <Column>
+          <h1>Home</h1>
+        </Column>
+        <Column>
+          <h1>Image</h1>
+        </Column>
+      </Grid>
     </>
   );
 }

styles/app.scss

@@ -1 +1,13 @@
-@use '@carbon/react';
+/* Import the Carbon Framework With Custom Colors */
+@use '@carbon/react' with (
+  $theme: (
+    background: #083F63,
+    text-primary: #FFFFFF,
+    text-secondary: #FFFFFF,
+    text-inverse: #000000,
+  )
+);
+
+/* Use the Carbon Grid */
+@use '@carbon/grid';
+@include grid.flex-grid();

tsconfig.json

@@ -6,7 +6,7 @@
     "skipLibCheck": true,
     "strict": false,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
+    "noEmit": false,
     "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",