prosperousheart/prosperousheart.github.io

My Digital Resume

About This Site

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.

Distinguishing Branches

• 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.

Site Creation History

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.

How To Integrate New Code Into Live

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.

Special Shoutouts

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.

NPM Installs

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:

1. npm install express (removed since not currently hosting as a server)
2. npm install react
3. npm install react-dom
4. 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.

5. OPTIONAL (may not be needed / haven't installed yet) npm install --save react-router-hash-link from here

6. In an attempt to resolve a Modernizr issue, I ram npm install -g modernizr ... but no longer using this

7. npm install jquery --save for jQuery use as well as npm i --save-dev @types/jquery as per here

8. attempt to add waypoints with npm install react-waypoint --save from [here]https://www.npmjs.com/package/react-waypoint)

9. to detect scroll: npm i @smakss/react-scroll-direction as per here

10. 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.

Additional 3rd Party Tools

1. Slider (from original site) --> React-Slick with code here

npm install react-slick --save
npm install slick-carousel --save

2. 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

3. npm install --save react-modal --legacy-peer-deps for react-modal

Migrating From Vanilla to React

Things I had to remember:

1. class in HTML must now be className