update about site, readme, cleanup

README.md

@@ -1,48 +1,22 @@
 # Personal Github Pages Setup with React + TypeScript + Vite
 
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-});
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react';
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-});
-```
+This site was created with great appreciation to developers who have contributed to:
+
+- Vite
+- React
+- Typescript
+- Emotion
+- React Router DOM
+- Yarn
+- Eslint
+- Prettier
+- VsCode
+- Github
+
+When spinning up this site, I initially started off using CRA but it felt a bit clunky and
+dependencies were outdated. I switched to Vite and found it a much better experience. I also
+opted to write my own css with some tools to clamp my typography and space for a more fluid
+and responsive layout. The site follows accessibility best practices. Testing was performed
+using Axe DevTools, VoiceOver, and keyboard.
+
+Feel free to take a look at my code. I opted to leave it public so that it could be used as a sample of my coding practice.

package.json

@@ -17,25 +17,23 @@
     "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
-    "@types/gh-pages": "^6",
-    "@types/react": "^18.3.10",
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.2",
-    "eslint": "^9.11.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-react-refresh": "^0.4.14",
     "eslint-plugin-sort": "^3.0.2",
-    "gh-pages": "^6.2.0",
     "globals": "^15.9.0",
     "prettier": "^3.3.3",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.10.0",
-    "vite": "^5.4.9"
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10"
   },
   "homepage": "https://avo.github.io/",
   "packageManager": "[email protected]"

src/App.tsx

@@ -1,6 +1,7 @@
 import { Global } from '@emotion/react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { About } from './routes/About';
+import { AboutSite } from './routes/AboutSite';
 import { Error } from './routes/Error';
 import { Newness } from './routes/New';
 import { Root } from './routes/Root';
@@ -21,6 +22,10 @@ const router = createBrowserRouter(
           element: <About />,
           path: '/about',
         },
+        {
+          element: <AboutSite />,
+          path: '/about/site',
+        },
         {
           element: <Newness />,
           path: '/blog',

src/core/Anchor.tsx

@@ -4,7 +4,7 @@ import { focusVisibleMixin } from '../styles/Mixins';
 import { IntrinsicAttributes } from '../types/polymorphic';
 
 const anchorMixin = css`
-  ${focusVisibleMixin};  
+  ${focusVisibleMixin};
   border-radius: var(--av-border-radius-xs);
   color: var(--av-color-link-fg);
   font-weight: 600;
@@ -38,38 +38,49 @@ const anchorMixin = css`
       color: var(--av-color-link-fg-dimmed-active);
       text-decoration-color: var(--av-color-link-fg-dimmed-active);
     }
+  }
 `;
 
 const anchorPrimaryStyle = css`
   ${anchorMixin};
 `;
 
-/**
- * TODO: add secondary variant
- */
+// TODO: add secondary variant
 const anchorSecondaryStyle = css``;
 
 export function AnchorDivider() {
   return <span css={{ paddingInline: 'var(--av-space-2xs)' }}> | </span>;
 }
 
+// TODO: Create a base component between Anchor and Button
 export const Anchor = forwardRef(function AnchorWithRef(
-  { as: Component = 'a', children, href, target, variant = 'primary', ...props }: AnchorOwnProps,
+  { as: Component = 'a', children, target, variant = 'primary', ...props }: AnchorOwnProps,
   ref: Ref<Element>
 ) {
+  const anchorProps =
+    target === '_blank'
+      ? {
+          rel: 'noreferrer',
+          target,
+        }
+      : {};
+
+  const buttonProps = {
+    type: 'button',
+  };
+
   return (
     <Component
       ref={ref}
       css={variant === 'primary' ? anchorPrimaryStyle : anchorSecondaryStyle}
-      href={href}
-      target={target}
-      {...(target === '_blank' && { rel: 'noreferrer' })}
+      {...(Component === 'a' && anchorProps)}
+      {...(Component === 'button' && buttonProps)}
       {...props}
     >
       {children}
     </Component>
   );
-}) as <E extends ElementType = 'button'>(props: AnchorProps<E>) => React.JSX.Element;
+}) as <E extends ElementType = 'a'>(props: AnchorProps<E>) => React.JSX.Element;
 
 interface AnchorOwnProps<E extends ElementType = ElementType> {
   as?: E;

src/core/Button.tsx

@@ -34,11 +34,10 @@ const primaryButtonStyle = css`
   }
 `;
 
-/**
- * TODO: add secondary variant
- */
+// TODO: add secondary variant
 const secondaryButtonStyle = css``;
 
+// TODO: Create a base component between Anchor and Button
 export const Button = forwardRef(function ButtonWithRef(
   { as: Component = 'button', target, variant = 'primary', ...props }: ButtonOwnProps,
   ref: Ref<Element>

src/layout/Footer.tsx

@@ -1,4 +1,6 @@
 import { css } from '@emotion/react';
+import { Link } from 'react-router-dom';
+import { Anchor } from '../core/Anchor';
 import {
   diamondMixin,
   layoutMediaQueryMixin,
@@ -49,8 +51,9 @@ export function Footer() {
     <footer css={footerStyle}>
       <p css={copyrightStyle}>&copy;2024 Anna Vo. All rights reserved.</p>
       <p>
-        Site created with great appreciation to developers who have contributed to: <br />
-        Vite, React, Typescript, Emotion Css, Prettier, Eslint, Yarn, VsCode, Github.
+        <Anchor as={Link} to="/about/site">
+          About how this site was built
+        </Anchor>
       </p>
     </footer>
   );

src/layout/Header.tsx

@@ -53,11 +53,15 @@ export function Header() {
   return (
     <header css={headerStyle}>
       <nav aria-label="Secondary external links" css={secondaryNavStyle}>
-        <Anchor href="https://www.linkedin.com/in/annavo/" target="_blank">
+        <Anchor
+          aria-label="View my LinkedIn profile"
+          href="https://www.linkedin.com/in/annavo/"
+          target="_blank"
+        >
           LinkedIn
         </Anchor>
         <AnchorDivider />
-        <Anchor href="https://github.com/avo" target="_blank">
+        <Anchor aria-label="View my Github pages" href="https://github.com/avo" target="_blank">
           Github
         </Anchor>
       </nav>

src/routes/AboutSite.tsx

@@ -0,0 +1,80 @@
+import { Anchor } from '../core/Anchor';
+
+export function AboutSite() {
+  return (
+    <>
+      <h1>About this site</h1>
+      <p>
+        This site was created with great appreciation to developers who have contributed to:
+        <ul>
+          <li>Vite</li>
+          <li>React</li>
+          <li>Typescript</li>
+          <li>Emotion</li>
+          <li>React Router DOM</li>
+          <li>Yarn</li>
+          <li>Eslint</li>
+          <li>Prettier</li>
+          <li>VsCode</li>
+          <li>Github</li>
+        </ul>
+      </p>
+
+      <p>
+        When spinning up this site, I initially started off using CRA but it felt a bit clunky and
+        dependencies were outdated. I switched to Vite and found it a much better experience. I also
+        opted to write my own css with some tools to clamp my typography and space for a more fluid
+        and responsive layout. The site follows accessibility best practices. Testing was performed
+        using Axe DevTools, VoiceOver, and keyboard.
+      </p>
+
+      <p>
+        Feel free to{' '}
+        <Anchor href="https://github.com/avo/gio" target="_blank">
+          take a look at my code
+        </Anchor>
+        . I opted to leave it public so that it could be used as a sample of my coding practice.
+      </p>
+
+      <h2>Tech stack</h2>
+      <p>
+        I enjoy working in{' '}
+        <Anchor href="https://react.dev/" target="_blank">
+          React
+        </Anchor>
+        ,{' '}
+        <Anchor href="https://www.typescriptlang.org/" target="_blank">
+          Typescript
+        </Anchor>
+        , and using CSS in JS, which this site uses{' '}
+        <Anchor href="https://emotion.sh/" target="_blank">
+          Emotion
+        </Anchor>{' '}
+        for. I prefer using css variables, though I have worked with Less and Sass in the past. I
+        haven't found a need for adding in Less or Sass anymore with the combination of css
+        variables and CSS in JS. Though if there's a need to create design tokens in various
+        formats, I recommend using{' '}
+        <Anchor href="https://github.com/amzn/style-dictionary" target="_blank">
+          Amazon's style dictionary
+        </Anchor>
+        . I recently created a proof of concept for the design team looking to create a universal
+        design system and thought this worked pretty well for their needs.
+      </p>
+
+      <h2>Eslint and Prettier</h2>
+      <p>
+        I am a HUGE fan of using linting and formatting tools. It helps when performing code reviews
+        and jumping from team to team when the code syntax and formatting are consistent. Developers
+        don't have to think too much about formatting and can focus on the code. Linters can also
+        help prevent mistakes and improve code.
+      </p>
+
+      <h2>IDEs</h2>
+
+      <p>
+        While I have used IntelliJ Idea, especially when working in Java or Groovy code, I prefer
+        VsCode for most everything else.
+      </p>
+    </>
+  );
+}

src/styles/Element.ts

@@ -34,6 +34,12 @@ export const elementStyle = css`
     margin-inline: 0;
   }
 
+  h2 {
+    font-size: var(--av-font-step-1);
+    margin-block: var(--av-space-2xs);
+    margin-inline: 0;
+  }
+
   a {
     text-decoration: inherit;
   }
@@ -42,4 +48,8 @@ export const elementStyle = css`
     margin-block: var(--av-space-xs);
     text-wrap: pretty; /* use in newer browsers to pretty up text wrapping */
   }
+
+  ul {
+    margin-block-end: 0;
+  }
 `;

tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/index.tsx","./src/vite-env.d.ts","./src/core/anchor.tsx","./src/core/blockquote.tsx","./src/core/button.tsx","./src/core/skiplink.tsx","./src/layout/footer.tsx","./src/layout/header.tsx","./src/layout/mainsection.tsx","./src/layout/pagewrapper.tsx","./src/routes/about.tsx","./src/routes/error.tsx","./src/routes/new.tsx","./src/routes/root.tsx","./src/routes/unknown.tsx","./src/styles/base.ts","./src/styles/element.ts","./src/styles/mixins.ts","./src/styles/theme.ts","./src/styles/typography.ts","./src/types/polymorphic.ts"],"version":"5.6.3"}
+{"root":["./src/app.tsx","./src/index.tsx","./src/vite-env.d.ts","./src/core/anchor.tsx","./src/core/blockquote.tsx","./src/core/button.tsx","./src/core/skiplink.tsx","./src/layout/footer.tsx","./src/layout/header.tsx","./src/layout/mainsection.tsx","./src/layout/pagewrapper.tsx","./src/routes/about.tsx","./src/routes/aboutsite.tsx","./src/routes/error.tsx","./src/routes/new.tsx","./src/routes/root.tsx","./src/routes/unknown.tsx","./src/styles/base.ts","./src/styles/element.ts","./src/styles/mixins.ts","./src/styles/theme.ts","./src/styles/typography.ts","./src/types/polymorphic.ts"],"version":"5.6.3"}