Skip to content
Personal Website, mark 2
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tools
webpack
.babelrc
.editorconfig
.eslintrc
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

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
You can’t perform that action at this time.