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 react
npm install react-dom
npm 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-link
from here
In an attempt to resolve a Modernizr issue, I ram npm install -g modernizr
... but no longer using this
npm install jquery --save
for jQuery use as well as npm i --save-dev @types/jquery
as per here
attempt to add waypoints with npm install react-waypoint --save
from [here]https://www.npmjs.com/package/react-waypoint)
to detect scroll: npm i @smakss/react-scroll-direction
as per here
npm install @mui/material @emotion/react @emotion/styled
from 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.
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-deps
for react-modal
Things I had to remember:
class
in HTML must now be className