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

prosperousheart.github.io's Issues

fix minor spacing issues

Here's a few places where there could be spacing added between the text and link:

about me .has-bottom-sep no longer centered

after integrating bootstrap directly via script pull, separator is no longer centered

smooth scroll in React requiring a work around

I can get it right when scrolling, but clicking causes the WayPoint to sometimes go further (e.g.: clicking on Experience in nav bar)

able to resolve by calling clearNav when nav item is clicked, but this is a workaround - I don't like the user experience (though likely not many others would even notice or care)

may even have to do with the size of the section containers

create separate page to link to templates used

since there will be several templates I will be piecing together my look from, I need a nice section to showcase all of the specific ones - as per their agreement on their sites

currently most of the ones I'm looking at come from the same place, but their footer links to the main company site ... need to have some place that will link to all the specific ones I'm using as templates (to hone my skills while also making the original code better - since they appear to have been made with a drag and drop site creator)

add training section

create a section for available trainings - should include things like:

• training repos and link to bootcamp site
• and recordings of trainings I've done (like "how to think like a programmer")

fix mobile issue for iphone XR

iPhone XR is only a few pixels larger than mine - let's go for 500 pixels to hopefully cover all other cell phones

project GitHub buttons not centered vertically

create media section

this section should be the different media like podcasts and webinars I've been on - trainings should be their own section

create section for important side projects

could be things like:

• podcast interview
• other highlights I can't think of just yet

Lighthouse optimization: Images

Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more.

Need to migrate my PNGs and whatnot over to WebP.

Also considering updating IMg tags as per here

provide clarity on code

add in documentation for clarity of purpose & what's there

if done as comments in code could cause slowness in loading

came from #22 research

Update Projects: fix card sizing

Need to determine why the cards are not expanding to full capacity

when hovering over testimonial images, make background circle light up

create new testimonials slider

original template was as follows:

Looking to do a different one that auto scrolls and looks nicer

add .lead section in experience timeline

include link to LinkedIn and highlights of completed day job work doc

convert vanilla to ReactJS

I've been working on this for several days and almost complete - this will minimize the need for several of the other issues like:

• #16
• #8 - will still need to be done but now it's compartmentalized and much easier to manage

add LinkedIn links to people's testimonials

show them some love

integrate MailChimp into contact page

1. complete training on integrating MailChimp into my web page
2. re-add contact section
   

create events section

have a section that has cards but they're YouTube videos of me explaining the events I've lead / supported

possibility

add projects section

this section should be the different repos and projects I have worked on - media like podcasts and webinars I've been on (or trainings I have done) should be their own section

sites for inspiration:

• BootstrapMade - Personal: I like the dark background and teh green color of highlighted button; I like that you can pull for certain projects or all of them; I like when you expand, it takes up the whole screen but you can slide through the items; really like how it looks on mobile
• BootstrapMade - Lonley: I like the top part - visal buttons with highlighted text; portfolio itself is nice - item on it's own page though; broken links & seems to only have 1 index page? will have to check code
• BootstrapMade - DevFolio: I like the zoom of images; missing the different sections for filtering; I like the way the titles and type look on desktop; looks nice on mobile and "focus" (?) automatically zooms in on photos, even if not a mouse on it; don't like when clicking on images it opens the image vs taking to the item - must click the +; has item on it's own page - links don't work, so not sure where it goes to go back ... but looks like an ID
• ThemeWagon - Ronin: like the way the images are made for hover, also has similar full page design for portfolio details - home links appropriately
• ThemeWagon - Browny: I like the zoom and the theme showing on hover but no actual portfolio
• ThemeWagon - Snow: hover shows name and type; load more works instead of being there; each item has it's own page in URL
• ThemeWagon - Nickie: like the transitions A LOT for hover on portfolio section buttons; really like color of selected vs nonselected; portfolio JUST shows images
• ThemeWagon - Safs: like transition over photos and simple outline of sections
• ThemeWagon - Profile-bootstrap: I like that the individual project popped up but I don't like sizing on desktop or mobile
• TemplateFlip - creatiove-cv: I like the animation on hover but nothing else works

Found this!!! It's AMAZING and I would love to do one like this in the future ... but the portfolio is pretty awesome

add links to past companies on timeline

ensure they change the mouse pointer and do not LOOK like they are links (no change of color) until hover over

improve/minimize working code in CSS & JavaScript

1. condense down duplicate CSS items
2. convert local files into an auto-pull (like bootstrap)

fix main photo + buttons

move head section content to the right so not covering my face - or get a new photo to replace the current one

consider moving the buttons to the right side for desktop

mobile for mine:

original mobile design focuses on the face (in the center - need to see about moving the positioning on mobile):

=====

original desktop:

original mobile on chrome:

update contact section

at least update to give instructions to click on links in footer ... some final parting word or quote

add bootcamp links

1. ensure information in README for: main, XP component, Projects
2. update project card template to include: if bootcamp
3. update code to check if bootcamp is true then providing different info for card template
4. add tooltip to show that it is an affiliate link (need to stay legal)

WayPoint Timing Issue About To XP

Need to have the menu bar change color when going down to XP only when About (bottom of section) has left the screen.

When going up, menu should change color when bottom of About section comes into view

Complete Experience Timeline

Need to add all important corporate roles I wish to highlight regarding my programming and leadership abilities

integrate personal domain

https://docs.github.com/articles/using-a-custom-domain-with-github-pages/

update colors of buttons for "more about me"

make dark button be dark pink with dark green when hover

make gray button turn light pink when hovered over

update font colors and sizing to match personal branding

right now it is whatever was part of bootstrap and the templates originally based on

react-slider previous not working

working prior - not sure what I did

fix header social icons

review TODO in code

resolve and/or create tasks for each:

• after adding projects, be sure to link between the projects and roles

UPDATE Projects: Add search option

Allow for the ability to find specific projects based on any of the following:

• skill (e.g.: python, React, HTML, CSS, etc)
• project type (e.g.: personal, bootcamp, training)

need less space above mobile projects

add education section

• add section for TCU & degree
• highlight work with chat bot and whatever else I feel would be relevant
• include internal certification from Cisco & other certs received (link to LinkedIn list if needed)

consider a word cloud for skills