WIP

.eslintrc.json

@@ -30,8 +30,15 @@
     // Add your own rules here to override ones from the extended configs.
     "react/react-in-jsx-scope": "off",
     "react/jsx-uses-react": "off",
-    "@typescript-eslint/consistent-type-imports": "error",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports",
+        "disallowTypeAnnotations": false,
+        "fixStyle": "inline-type-imports"
+      }
+    ],
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error"
   },

.storybook/preview.tsx

@@ -2,9 +2,10 @@ import { css as csl } from '@linaria/core';
 import type { Preview } from '@storybook/react';
 import 'ress';
 import 'unfonts.css';
-import { withRouter } from 'storybook-addon-remix-react-router';
+import { reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router';
 
 import { css, cx } from '@lib/css';
+// import { useScrollToAnchor } from '@lib/hooks';
 import { theme } from '@theme';
 
 const preview: Preview = {
@@ -21,26 +22,34 @@ const preview: Preview = {
         order: ['Pages', 'Home'],
       },
     },
+    reactRouter: reactRouterParameters({
+      routing: {
+        path: '/',
+        handle: 'Home',
+      },
+    }),
   },
 
   decorators: [
-    withRouter,
-    (Story) => (
-      <div
-        className={cx(
-          csl`
+    (Story) => {
+      return (
+        <div
+          className={cx(
+            csl`
             ${theme.decl.font.size.step0}
             ${theme.decl.font.sansSerif.regular}
           `,
-          css`
-            ${theme.page.body}
-            ${theme.definitions}
-          `,
-        )}
-      >
-        <Story />
-      </div>
-    ),
+            css`
+              ${theme.page.body}
+              ${theme.definitions}
+            `,
+          )}
+        >
+          <Story />
+        </div>
+      );
+    },
+    withRouter,
   ],
 };
 

.vscode/settings.json

@@ -4,6 +4,6 @@
     "typescript"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.stylelint": "never"
+    "source.fixAll.stylelint": "always"
   },
 }

package.json

@@ -26,10 +26,12 @@
     "numeral": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.13.1",
     "react-keyed-flatten-children": "^3.0.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.26.0",
     "react-scroll-parallax": "^3.4.5",
+    "react-scrollspy-navigation": "^2.0.6",
     "ress": "^5.0.2",
     "storybook-addon-remix-react-router": "^3.0.0",
     "swiper": "^11.1.9",
@@ -59,6 +61,7 @@
     "@types/numeral": "^2.0.5",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
+    "@types/react-router-hash-link": "^2",
     "@typescript-eslint/eslint-plugin": "^8.5.0",
     "@typescript-eslint/parser": "^8.5.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
@@ -83,6 +86,7 @@
     "jsdom": "^25.0.0",
     "postcss": "^8.4.45",
     "prettier": "^3.0.3",
+    "react-router-hash-link": "^2.4.3",
     "rollup": "^3.29.4",
     "rss-parser": "^3.13.0",
     "storybook": "^8.2.8",

src/.stories/components/header.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Home } from '@home';
+import { type SectionId, sectionTitles } from '@lib/site';
+
+const Section = ({ id, color }: { id: SectionId; color: string }) => {
+  return (
+    <section id={id} style={{ height: '100vh', backgroundColor: color }}>
+      <h1>{sectionTitles[id]}</h1>
+    </section>
+  );
+};
+
+const meta: Meta<typeof Home.Header> = {
+  title: 'Home/Header',
+  component: Home.Header,
+  render: () => {
+    return (
+      <>
+        <Home.Header />
+        <Section id="home" color="black" />
+        <Section id="about" color="lightblue" />
+        <Section id="portfolio" color="lightgray" />
+        <Section id="career" color="lightblue" />
+        <Section id="medium" color="lightgray" />
+      </>
+    );
+  },
+};
+
+export default meta;
+
+export const Header: StoryObj<typeof Home.Header> = {};

src/.stories/components/portfolio_item.stories.tsx

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { PortfolioItem as Component } from '@components/portfolio/portfolio_item';
+import { PortfolioGrid } from '@components/portfolio';
 
-const meta: Meta<typeof Component> = {
+const meta: Meta<typeof PortfolioGrid.Item> = {
   title: 'Components/Portfolio Item',
-  component: Component,
+  component: PortfolioGrid.Item,
 };
 
 export default meta;
 
-export const PortfolioItem: StoryObj<typeof Component> = {
+export const PortfolioItem: StoryObj<typeof PortfolioGrid.Item> = {
   args: {
     caption: 'Some caption',
     href: '/portfolio/some-project',

src/.stories/components/section.stories.tsx

@@ -1,7 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Section as Component, type SectionProps } from '@components/layout';
-import type { SectionHeaderProps } from '@components/layout/section/section_header';
+import {
+  Section as Component,
+  type SectionHeaderProps,
+  type SectionProps,
+} from '@components/layout';
 import { css } from '@lib/css';
 
 const meta: Meta<typeof Component> = {
@@ -15,14 +18,14 @@ type Arguments = SectionProps & SectionHeaderProps;
 
 export const Section: StoryObj<Arguments> = {
   args: {
-    id: 'someSection',
+    id: 'home',
     title: 'The Section Title',
     subtitle: 'A witty subtitle.',
     name: 'Some Section',
   },
   render: (args: Arguments) => {
     return (
-      <Component id="storybook">
+      <Component id="home">
         <Component.Header
           {...args}
           className={css`

src/App.tsx

@@ -1,4 +1,4 @@
-import { GithubCorner } from '@components/github/corner';
+import { GithubCorner } from '@components/github';
 
 function App() {
   return (

src/components/github/corner.styles.ts

@@ -1,8 +1,11 @@
 import { css, cx, toProps } from '@lib/css';
+import { theme } from '@theme';
+
+const { vars } = theme;
 
 const svgRoot = toProps(css`
-  color: #151513;
-  fill: #fff;
+  color: var(${vars.color.github.color});
+  fill: var(${vars.color.github.fill});
 `);
 
 const root = toProps(css`

src/components/layout/header/header.styles.ts

@@ -0,0 +1,28 @@
+import { css, cx, toProps } from '@lib/css';
+import { theme } from '@theme';
+
+const { decl, vars } = theme;
+
+const root = (float: boolean) => {
+  const base = css`
+    --header-font-size: var(${vars.font.size.stepN2});
+    --header-padding: var(${vars.spacing.step7});
+    --header-height: calc((var(--header-font-size}) + var(--header-padding}) * 2));
+    left: 0;
+    padding-right: 50px;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1000;
+    transition: background-color 1s;
+    font-size: var(--header-font-size);
+  `;
+
+  const floating = css`
+    ${decl.color.background.dark};
+  `;
+
+  return toProps(float ? cx(base, floating) : base);
+};
+
+export default { root };

src/components/layout/header/header.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+import { GithubCorner as Corner } from '@components/github';
+
+import { Navigation } from '../navigation';
+
+import { HeaderLogo as Logo } from './header_logo';
+
+import styles from './header.styles';
+
+const SCROLL_THRESHOLD = 200;
+
+export interface HeaderProps {
+  isLocal?: boolean;
+}
+
+const Component = ({ isLocal }: HeaderProps) => {
+  const [isFloating, setIsFloating] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY >= SCROLL_THRESHOLD) {
+        setIsFloating(true);
+      } else {
+        setIsFloating(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <header {...styles.root(isFloating)}>
+      <Header.Logo />
+      <Header.Navigation {...{ isLocal }} />
+      <Header.Corner />
+    </header>
+  );
+};
+
+export const Header = Object.assign(Component, {
+  Logo,
+  Navigation,
+  Corner,
+});

src/components/layout/header/header_logo.styles.ts

@@ -0,0 +1,31 @@
+import { css, toProps } from '@lib/css';
+import { theme } from '@theme';
+
+const { vars } = theme;
+
+// @ts-expect-error - required for loading the logo
+import logo from '../../../content/images/logo.png?h=50&format=webp';
+
+const root = toProps(css`
+  padding-top: var(${vars.spacing.step4});
+  padding-left: var(${vars.spacing.step7});
+  padding-bottom: var(${vars.spacing.step4});
+  position: absolute;
+`);
+
+const link = toProps(
+  css`
+    --logo-height: calc(var(${vars.spacing.step6}) + var(${vars.font.size.stepN2}));
+    --logo-width: calc(var(--logo-height) * 3);
+
+    text-indent: -1000px;
+    height: var(--logo-height);
+    width: var(--logo-width);
+    background-size: contain;
+    overflow: hidden;
+    display: block;
+  `,
+  { backgroundImage: `url(${logo})` },
+);
+
+export default { root, link };

src/components/layout/header/header_logo.tsx

@@ -0,0 +1,15 @@
+import styles from './header_logo.styles';
+
+export interface HeaderLogoProps {
+  isLocal?: boolean;
+}
+
+export const HeaderLogo = ({ isLocal = false }: HeaderLogoProps) => {
+  return (
+    <h1 {...styles.root}>
+      <a {...styles.link} href={isLocal ? '#' : '/'}>
+        Clint Andrew Hall
+      </a>
+    </h1>
+  );
+};

src/components/layout/header/index.ts

@@ -0,0 +1 @@
+export { Header } from './header';

src/components/layout/index.ts

@@ -1,3 +1,4 @@
 export { Footer } from './footer';
+export { Header } from './header';
 export { Layout, type LayoutProps } from './layout';
-export { Section, type SectionProps } from './section';
+export { Section, type SectionHeaderProps, type SectionProps } from './section';

src/components/layout/layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { cx } from '@lib/css';
 
@@ -13,13 +13,13 @@ export interface LayoutProps {
   id?: string;
 }
 
-const Component = ({ children, className, element = 'div', id }: LayoutProps) => {
+const Component = forwardRef<HTMLDivElement, LayoutProps>(({ children, className, element = 'div', id }, ref) => {
   return (
-    <div {...{ ...cx(styles.outer, className), id }}>
+    <div {...{ ref, ...cx(styles.outer, className), id }}>
       {React.createElement(element, { ...styles.inner }, children)}
     </div>
   );
-};
+});
 
 export const Layout = Object.assign(Component, {
   Footer,

src/components/layout/navigation/index.ts

@@ -0,0 +1,2 @@
+export { Navigation, type NavigationProps } from './navigation';
+export { NavigationLink, type NavigationLinkProps } from './navigation_link';