They skew more towards the right when this site is viewed on my laptop.

https://codyhouse.co/demo/page-scroll-effects/parallax.html

A list of languages (mostly frameworks)
None of these are in order

• https://graphql.org
• https://sass-lang.com

Add an option to display someones location with Google Maps

• https://swipe.js.org/ (or page transition)

• After keyframes gets to 100% on the hero text they move back to original position.

• https://swup.js.org/

`footer {
display: flex;
flex-flow: column nowrap;
}

.copyright {
margin-top: auto;
}`

https://stackoverflow.com/questions/56011205/is-there-a-safari-equivalent-for-scroll-behavior-smooth

This is a list of tasks I need to get done.

• Move the parallax background image to the top of the page and have the nav bar still overlap the background

• Add blue overlay on hero

• Create a button below the text on the parallax to redirect to the about section

• Have the text "Hi, I'm John" have an animation as if its being typed out

Create two more HTML files

• About shows general info about me and ways to contact
• Projects showcases what I've worked on and as long as reviews from those I've worked with and display what I languages and frameworks I can use.

To "What I use to Build Websites"

Take what changes you made for the desktop version of the site and apply them to the other versions.

My phones screen size is around 480 pxiels

There's a problem with loading the background image for the parallax scrolling effect.

Packages

• https://zzz.dog/
• https://vincentgarreau.com/particles.js/
• https://greensock.com/gsap/
• https://github.com/michalsnik/aos/blob/next/README.md

Designs

• https://codyhouse.co/demo/page-scroll-effects/parallax.html

Ideas

• Display new information when scrolling. (event listener for mouseup action)

https://milligram.io

https://github.com/michalsnik/aos/blob/next/README.md

this.addRegionEventListener("mouseup", function() {
alert("mouse up");
});

https://stackoverflow.com/questions/8020967/html-5-image-hover-resize-and-redirect/8021658#8021658

The current design from W3 isn't amazing. Try using something different.

This is for complex animations

Suggestions

• jhh.dev
• johnharris.dev

https://domains.google.com/m/registrar/search?hl=en&searchTerm=harris.codes&_ga=2.251252358.106150639.1575702151-643020584.1575702151&tab=1

• harris.software
• jharris.space
• jharris.world
• harris.studio
• harris.codes

When the page loads have both the icons (twitter and GitHub) fade in from the side their respected positions. For the twitter icon use this and have it be 64px

Use event listeners there's probably something for when a user reaches a page and then have css code come into place.

Itll improve managing bugs

https://www.netlify.com/

• Using object.prototype.getSummary could help with shortening it down

• Use for each loop for filtering out objects.

Even though the CSS and HTML are properly linked together, I'm using the full file path that's on my desktop. Which will cause issues when working on this with my laptop.

How it currently works

        <link href="D:\Documents\portfolio\Portfolio-Site\css\style.css" rel="stylesheet" />

How it should work

        <link href="css\style.css" rel="stylesheet" />

The text in the hero is behind the overlay so the text isn't the clear enough to read on any device.

SOLUTION
Just take what you did in the default layout and apply it to media queries.

• HTML/CSS and JavaScript login screen
• eCommerce page
• Interview problems
• Java Banking Application
• Java IRC
• GitHub Finder JavaScript (Uses API)

Have it send links to people and have it stick to the screen https://www.w3schools.com/howto/howto_css_sticky_element.asp

https://firebase.google.com/docs/hosting

• Give it both an id and a class

• Don't do the styling on an id