mdx docs for nextjs

next js docs for mdx

a plaintext version of my website, super simple like here with a button that transforms it to the current version :D

http://www.eleecreative.com/

check this out

refer to https://medium.com/wesionary-team/customize-social-media-preview-of-your-nextjs-website-links-82f6bce035b

Bugs:

• Hamburger menu popover panel
  • Clicking outside the panel doesn't close it. Clicking on the navbar does though.
  • When the panel is open on the 404 page, it is behind the image of Shrimp for some reason.
• When running locally, warning in console when light mode is toggled, but not when dark mode is on:

themeToggle.js:21 Warning: Cannot update a component (`f`) while rendering a different component (`ThemeToggle`). To locate the bad setState() call inside `ThemeToggle`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at ThemeToggle (webpack-internal:///(app-pages-browser)/./components/themeToggle.js:17:82)
...

Improvements:

• Heading text should be another color from body text
• Color palette
  • Accent color in dark mode could be more pronounced
• Fix accessibility (use lighthouse in chrome to see what to improve)
• Change font
• Search bar for projects
• Back button (on project pages) can use router to go back to wherever user came from, rather than always going to all projects
• Blog?

Cool to have:

• About me page can be way cooler. Maybe try implementing a modern web design (scrapbook maybe)?
• Highlight animation (see this and this)
  • Hovering over a tagline can highlight it, and change the photo
  • Buttons can have highlight effects on hover
• Analytics (consider GoatCounter, Plausible, and umami)

Hopefully once I go to custom domain, those browser console issues will be fixed

store a variable in localstorage? or is there a more elegant way?

look into:

theme: {
    extend: {
    	colors: {
    		primary: '#5222d0',
    		secondary: '#ec615b'
    	},
      gridAutoColumns: {
        '270': '270px',
        '220': '220px',
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],

theme and tailwindcss/typography

why did none of these solutions work :(

and you know what throw in all SEO stuff into this issue, like meta tags and stuff. Can also try using next-seo package

look into _document.js

Tried all sorts of things to be able to use BlurHash as image placeholders while they load. Maybe take another look in the future, perhaps it'll be more compatible then.

scroll down to "collapse transition"

• use {{year}} {{month}} {{date}} slugs for resume?

A plant page!
A productions page? (theater)
A tennis page?