https://github.com/iammatthias/.com/blob/main/components/joy/bg/gradient.js

• Maybe store as local asset?
  • Optimize with font tool, like we did with Inter

Fonts:

• Recursive
• Space Mono
• Space Grotesk

Follow next.js testing guide?

Don't really need anything as complex as what I have, simplify, and maybe remove hamburger menu comp altogether.

• Cleanup Project components (eg. classnames, etc)
• SVG Blog / Gradient BG (a la tailwindcss.com, stripe.com, etc)
• Focus issue on mobile/iOS (see #30 for details/screenshot)
  • make sure page content isn't 'trapping' focus unintentionally on initial page load

Figure out how to get in-editor Tailwind classname autocomplete for HOC components that receive classname.

See LinkWrapper and withLinkStyle for example.

Add page transitions with framer motion.

• Screenshots
• Code examples
• links to live deployments

Use Framer Motion for page transitions

Opengraph image, favicon, title, meta, etc.

• https://github.com/blasterbug/headlessui-popover-does-not-close/pull/1/files
• tailwindlabs/headlessui#120
• tailwindlabs/headlessui#427
• tailwindlabs/headlessui#358 (comment)

Eg. Project List

Fix logo being broken on initial load. Either wait until the component is mounted, or set src to a full string, not an interpolated one.

Have footer positioned at bottom of viewport if page content doesn't fill vertical viewport size. If page content does fill vertical viewport size, have footer appear below content.

Change primary colour from radix red to blue.

Update Components / Pages

• Projects
• Index
• Header
• Contact

Can Possibly Remove:

• @typescript-eslint/eslint-plugin
  • Not required with eslint-config-next?
• @typescript-eslint/parser
  • Not required with eslint-config-next?
  • Aha! Included in eslint-config-next
• autoprefixer
  • Included with tailwind now?
• postcss-nested
  • Included with tailwind now?
• postcss-* (eg. all other postcss plugins)
  • Included with tailwind now?
• @taildwindcss/*
  • Do I need any of these other than typography?

Also, do we need both:

• eslint-config-prettier
• eslint-plugin-prettier

Or can we get rid of one?

We receive the following warning during jest / testing-library testing with two describe blocks in test file.

console.error
    Warning: Prop `id` did not match. Server: "headlessui-popover-button-undefined" Client: "headlessui-popover-button-3"

Tests still pass, can we safely ignore / suppress this?

Automatically focuses to GitHub link on mobile when page loads?

Change footer positioning to fixed rather than absolute

FCP has been increasing in Vercel Analytics, particularly for desktop.

https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdev.andy.ws

21-07-20: FCP is 1.9-2.0s.

Verify that specific items are not receiving focus prematurely on page load. Seems to be an issue on iOS?

Example:

When 'projects' page is loaded, hammer spoon project is in hover state.

This is not intended.

https://snyk.io/test/website-scanner/?test=220116_BiDc2N_99816c5d6a771d2c21fc69e8daf69f10&utm_medium=referral&utm_source=webpagetest&utm_campaign=website-scanner

X Content Type
X Frame
CSP
XSS protection