As a developer, my focus has mostly been on backend work. I have branched out into front end, and this will be my playground. More so - my online resume. It will bring together all of what I want to be seen when speaking with a potential new employer or client.
-
vanilla-HTMLJS: original resume site without projects section.
-
react-migration: migrating original resume site from vanilla HTML/CSS/JS to React. (Projects not in this one.)
-
updates-react: branch where updates are done after migration to react.
-
gh-pages: GitHub hosting published code.
If you would like to see what free templates inspired my decisions, check out the original README.
While I originally based the the flow with this template, I quickly realized there was a LOT that could be optimized, some things were broken or missing, and I didn't like the style for the projects. But since I (at the time) had very few reasons to do front end web development, I just needed a starting piece. And from the template, I began updatin gcolors, fonts, flow of things, and so much more.
Eventually, I went through ZTM's Complete Web Developer Mastery (2023) where I eventually learned a bit of React, Node & Express, as well as postgres as outlined here.
So in this next phase of my digital resume, I will have migrated the original (vanilla) HTML/CSS/Javascript to a React site.
npm start will allow you to test the site locally.
npm start dev will allow you to test the site locally AND have it automatically update with changes.
npm run predeploy creates a build directory with production build of your app. But this is not needed, since we are integrating with GitHub Pages.
npm run deploy will run predeploy then react-scripts build to optimize your code into a production build.
I found Stroybook and have introduced this into my process flow! (And realized it had a dependency for lower React version so had to stop for now)
I was introduced to this YouTube for creating my project cards. Additional animation stuff here from the creator.
After running npm init in my root repo folder, I then installed the following npm packages I installed for the first phase of React migration:
npm install express(removed since not currently hosting as a server)npm install reactnpm install react-domnpm install react-scripts
It was at this stage I realized I likely needed to run npx create-react-app APPNAME to get everything installed properly, so I did so in a temp folder and moved over necessary files.
-
OPTIONAL (may not be needed / haven't installed yet)
npm install --save react-router-hash-linkfrom here -
In an attempt to resolve a Modernizr issue, I ram
npm install -g modernizr... but no longer using this -
npm install jquery --savefor jQuery use as well asnpm i --save-dev @types/jqueryas per here -
attempt to add waypoints with
npm install react-waypoint --savefrom [here]https://www.npmjs.com/package/react-waypoint) -
to detect scroll:
npm i @smakss/react-scroll-directionas per here -
npm install @mui/material @emotion/react @emotion/styledfrom here ... NOTE that I believe this is no longer needed as VSCode cannot find it in my code anymore ... but sometimes it comes up empty. So be aware that this may be extraneous.
- Slider (from original site) --> React-Slick with code here
npm install react-slick --save
npm install slick-carousel --save
-
react-scroll-up-button using
npm install react-scroll-up-button --legacy-peer-deps(as per here and here) --- but because it is broken made my own component with their code as base -
npm install --save react-modal --legacy-peer-depsfor react-modal
Things I had to remember:
classin HTML must now beclassName