personal-website-m2

Personal Website, mark 2

Environment Setup

• Create Git Repo
• Set up EditorConfig
• Set up NPM Project
• Set up Directory Structure
• Install and setup Webpack (and config file)
• Install and setup ESLint (and rc file)
• Install and setup Babel (and rc file)
• Set up dev/dist servers
• Set up NPM scripts
• Set up framework (e.g. React)
• Use https://realfavicongenerator.net/ for favicons

TODO

• Styling

  • Finish Basic Site Styles
  • Use React for animation stuff instead of vanilla CSS
  • Create Responsive Setup (Grid System?)
  • Make the PageWrapper change the document.title
  • Style typography, site colors - make it responsive and get bigger/smaller with screen size, similar to banner on homePage
  • consolidate variables (don't set actual colors anywhere: move everything to variables)

• Style Navbar

  • Basic responsiveness
  • Mobile Navigation Drawer
  • Make navigation bar disable rest of website
  • Make navigation bar close after page change
  • Fix z-indices

• Projects Page

  • Make Project Footer have links to the GitHub/DevPost/Project (based on type (Github/Devpost/Project) and link props)
  • Make the ProjectLinks react to hover

• On all animations, use will-change and instead of 'all' only put the values that will change

• Make all .column elements into divs, rather than text-level elements

• Include fallbacks for rgba values

• Production

  • Figure out svg, png, jpg packaging with Webpack - use require() when specifying src in JSX
  • Update graphics (desk picture, projects pictures)
    • Make the projects pictures all the same size square (350x350 px?) - used picresize.com for resizing and tinypng.com/kraken.io for optimization
  • Use PostCSS or some autoprefixer or something
  • Update Production Stack
  • Figure out why React Router adds a new history state when I click the link to the page I am already on
  • Figure out Favicon packaging with Webpack
  • Fix iPhone styling errors, add browserslistrc!!!

• Future

  • Clean up project
  • Learn how to make svg assets (personal logo, etc.)
  • Update page transitions to TransitionGroup so that I can make a 404 Page
  • Cubic bezier custom transition functions