wip

src/App.tsx

@@ -1,12 +1,29 @@
-import { GithubCorner } from '@components/github';
+import React from 'react';
+import { css as csl } from '@linaria/core';
+import 'ress';
+import 'unfonts.css';
+import { RouterProvider } from 'react-router-dom';
 
-function App() {
-  return (
-    <>
-      <p>Hello World.</p>
-      <GithubCorner />
-    </>
-  );
-}
+import { css, cx } from '@lib/css';
+import { theme } from '@theme';
 
-export default App;
+import { router } from './routing';
+
+export const App = () => (
+  <React.StrictMode>
+    <div
+      className={cx(
+        csl`
+          ${theme.decl.font.size.step0}
+          ${theme.decl.font.sansSerif.regular}
+        `,
+        css`
+          ${theme.page.body}
+          ${theme.definitions}
+        `,
+      )}
+    >
+      <RouterProvider router={router} />
+    </div>
+  </React.StrictMode>
+);

src/app.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { css as csl } from '@linaria/core';
+import 'ress';
+import 'unfonts.css';
+import { RouterProvider } from 'react-router-dom';
+
+import { css, cx } from '@lib/css';
+import { theme } from '@theme';
+
+import { router } from './routing';
+
+export const App = () => (
+  <React.StrictMode>
+    <div
+      className={cx(
+        csl`
+          ${theme.decl.font.size.step0}
+          ${theme.decl.font.sansSerif.regular}
+        `,
+        css`
+          ${theme.page.body}
+          ${theme.definitions}
+        `,
+      )}
+    >
+      <RouterProvider router={router} />
+    </div>
+  </React.StrictMode>
+);

src/components/layout/footer/site_credits.styles.ts

@@ -4,6 +4,7 @@ import { theme } from '@theme';
 const { vars, decl } = theme;
 
 const root = toProps(css`
+  ${decl.anchor}
   ${decl.font.size.stepN1}
   ${decl.color.background.dark}
   ${decl.color.font.text}

src/components/layout/footer/site_logo.tsx

@@ -1,12 +1,14 @@
+import { Link } from 'react-router-dom';
+
 // @ts-expect-error - required for loading the logo
 import logo from '../../../content/images/logo.png?w=130&format=webp';
 
 import styles from './site_logo.styles';
 
 export const SiteLogo = () => (
   <p {...styles.root}>
-    <a href="/">
+    <Link to="/">
       <img src={logo} alt="Logo" />
-    </a>
+    </Link>
   </p>
 );

src/components/layout/header/header_logo.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 import styles from './header_logo.styles';
 
 export interface HeaderLogoProps {
@@ -7,9 +9,9 @@ export interface HeaderLogoProps {
 export const HeaderLogo = ({ isLocal = false }: HeaderLogoProps) => {
   return (
     <h1 {...styles.root}>
-      <a {...styles.link} href={isLocal ? '#' : '/'}>
+      <Link {...styles.link} to={isLocal ? '#' : '/'}>
         Clint Andrew Hall
-      </a>
+      </Link>
     </h1>
   );
 };

src/components/layout/navigation/navigation_link.tsx

@@ -1,4 +1,5 @@
 import { type MouseEventHandler } from 'react';
+import { Link } from 'react-router-dom';
 
 import { type SectionId, sectionTitles } from '@lib/site';
 
@@ -11,17 +12,28 @@ export interface NavigationLinkProps {
   isCurrent?: boolean;
 }
 
+const getTo = (id: SectionId) => {
+  switch (id) {
+    case 'resume':
+      return '/resume';
+    case 'portfolio':
+      return '/portfolio';
+    default:
+      return `/#${id}`;
+  }
+};
+
 export const NavigationLink = ({
   id,
   href: hrefProp,
   onClick,
   isCurrent = false,
 }: NavigationLinkProps) => {
-  const href = hrefProp || `/${id}`;
+  const to = hrefProp || getTo(id);
 
   return (
     <li {...styles.root(isCurrent)}>
-      <a {...{ onClick, href, ...styles.link }}>{sectionTitles[id]}</a>
+      <Link {...{ onClick, to, ...styles.link }}>{sectionTitles[id]}</Link>
     </li>
   );
 };

src/components/layout/navigation/to_section_link.tsx

@@ -6,7 +6,8 @@ import { NavigationLink, type NavigationLinkProps } from './navigation_link';
 export type ToSectionLinkProps = Pick<NavigationLinkProps, 'id'>;
 
 export const ToSectionLink = ({ id }: ToSectionLinkProps) => {
-  const href = `#${id}`;
+  const href = id === 'resume' ? '/resume' : `#${id}`;
+
   const [isCurrent, setIsCurrent] = useState(false);
   const { currentSectionId } = useCurrentSectionId();
   const isHome = useIsHome();

src/components/layout/section/section_link.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 import { cx } from '@lib/css';
 
 import styles from './section_link.styles';
@@ -8,11 +10,11 @@ export interface SectionLinkProps {
   className?: string;
 }
 
-export const SectionLink = ({ href, title: children, className }: SectionLinkProps) => (
+export const SectionLink = ({ href: to, title: children, className }: SectionLinkProps) => (
   <p {...cx(styles.root, className)}>
-    <a
-      {...{ ...styles.link, href, children }}
-      target={href.startsWith('http') ? '_blank' : '_self'}
+    <Link
+      {...{ ...styles.link, to, children }}
+      target={to.startsWith('http') ? '_blank' : '_self'}
     />
   </p>
 );

src/components/portfolio/portfolio_item.styles.ts

@@ -6,15 +6,11 @@ const { vars, icons, decl } = theme;
 const root = (image: string) =>
   toProps(
     css`
-      ${decl.color.border.outline}
       ${decl.font.size.step0}
-      ${decl.shadow.large}
       background-position: 50% 50%;
       background-repeat: no-repeat;
       background-size: cover;
       border-radius: var(${vars.spacing.step1});
-      border-style: solid;
-      border-width: 1px;
       height: 0;
       overflow: hidden;
       padding-bottom: 75%;

src/components/timeline/timeline.styles.ts

@@ -4,6 +4,8 @@ import { theme } from '@theme';
 const { decl, vars } = theme;
 
 const root = toProps(css`
+  ${decl.anchor}
+
   --image-size: var(${vars.spacing.step5});
   --bullet-padding: var(${vars.spacing.step1});
   --bullet-size: calc(var(--image-size) + (var(--bullet-padding) * 2));

src/main.tsx

@@ -1,18 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import App from './App.tsx';
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <App />,
-  },
-]);
+import { App } from './app';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <App />
   </React.StrictMode>,
 );

src/pages/article/article.tsx

@@ -9,7 +9,11 @@ interface CommonProps {
 }
 
 const Header = ({ article }: CommonProps) => (
-  <LayoutComponent.Header background={!!article ? 'clear' : 'opaque'} selectedId="portfolio" />
+  <LayoutComponent.Header
+    background={!!article ? 'clear' : 'opaque'}
+    selectedId="portfolio"
+    isLocal={false}
+  />
 );
 
 const Layout = ({ article }: CommonProps) =>

src/pages/article/article_markdown.styles.ts

@@ -4,6 +4,7 @@ import { theme } from '@theme';
 const { decl, vars } = theme;
 
 const root = toProps(css`
+  ${decl.anchor}
   ${decl.font.serif.regular}
   ${decl.font.size.step1}
   ${decl.color.font.text}

src/pages/home/about/about.styles.ts

@@ -3,6 +3,10 @@ import { theme } from '@theme';
 
 const { decl, vars } = theme;
 
+const root = toProps(css`
+  ${decl.anchor}
+`);
+
 const header = toProps(css`
   ${decl.grid.area.byOne}
 `);
@@ -52,4 +56,4 @@ const code = toProps(css`
   }
 `);
 
-export default { content, header, title, work, code, summary };
+export default { content, header, title, work, code, summary, root };

src/pages/home/about/about.tsx

@@ -12,7 +12,7 @@ const Component = () => {
   const { ref } = useHomeTopic('about');
 
   return (
-    <Section {...{ ref, ...attributes }}>
+    <Section {...{ ref, ...attributes }} {...styles.root}>
       <Section.Header {...attributes} {...styles.header} />
       <About.Summary />
       <Section.Divider />

src/pages/home/hero.tsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import { ParallaxBanner, ParallaxBannerLayer, ParallaxProvider } from 'react-scroll-parallax';
 
 import { SocialProfiles } from '@components/social_profiles';
@@ -28,10 +29,10 @@ export const Hero = () => {
               </hgroup>
               <ul {...styles.links}>
                 <li {...styles.link}>
-                  <a href="#portfolio">Latest Projects</a>
+                  <Link to="/#portfolio">Latest Projects</Link>
                 </li>
                 <li {...styles.link}>
-                  <a href="#about">More About Me</a>
+                  <Link to="/#about">More About Me</Link>
                 </li>
               </ul>
               <SocialProfiles showDivider={false} showLabel={false} {...styles.profiles} />

src/routing/article.tsx

@@ -0,0 +1,7 @@
+import { Article as ArticleComponent } from '@pages/article';
+import { useParams } from 'react-router-dom';
+
+export const Article = () => {
+  const params = useParams<'id'>();
+  return <ArticleComponent id={params.id || 'not-found'} />;
+};

src/routing/index.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { Home } from '@pages/home';
+import { Portfolio } from '@pages/portfolio';
+import { createBrowserRouter, Outlet, useLocation } from 'react-router-dom';
+
+import { Article } from './article';
+
+const ScrollToTop = () => {
+  // Extracts pathname property(key) from an object
+  const { pathname } = useLocation();
+
+  // Automatically scrolls to top whenever pathname changes
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return <Outlet />;
+};
+
+export const router = createBrowserRouter([
+  {
+    element: <ScrollToTop />,
+    children: [
+      {
+        path: '/',
+        element: <Home />,
+      },
+      {
+        path: '/portfolio',
+        element: <Portfolio />,
+      },
+      {
+        path: '/portfolio/:id',
+        element: <Article />,
+      },
+    ],
+  },
+]);

src/state/home.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { type SectionId } from '@lib/site';
 
@@ -15,13 +16,18 @@ const initialState: State = {
 const HomeContext = createContext<State>(initialState);
 
 export const HomeContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const navigate = useNavigate();
+  const { pathname, search, hash } = useLocation();
   const [currentSectionId, setCurrentSectionId] = useState<SectionId>('home');
 
+  console.log('incoming', pathname, search, hash);
+
   useEffect(() => {
-    const root = `${window.location.pathname}${window.location.search}`;
+    const root = `${pathname}${search}`;
     const location = currentSectionId === 'home' ? root : `${root}#${currentSectionId}`;
 
-    window.history.replaceState(null, '', location);
+    navigate(location, { replace: true });
+    // window.history.replaceState(null, '', location);
   }, [currentSectionId]);
 
   return (