## raythompsonwebdev.co.uk ### portfolio website --- ### Contact Form - Javascript Validation using Validity Object --- ### Page animation on page scroll <style> code.blue { color: #337AB7 !important; } code.orange { color: #F7A004 !important; } </style> - Animation applied using <code class="blue">[getBoundingClientRect().top](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)</code> size of an element and its position relative to the viewport. - <code class="blue">[documentElement.clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)</code> to get a reference to the root node of the document (html) and get it current viewport height. - <code class="blue">[window.innerHeight](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight)</code> to get current interior height of the window in pixels. --- ### Page animation on page scroll cont.. - used <code class="orange">[window.onscroll](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll)</code> to apply animation to page once page scrolled to more than the height of page header. - used <code class="orange">[element.scrollTo(](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo))</code> to add smooth scrolling animation along with css properties <code class="orange">[scroll-behaviour](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) & [scroll-margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top)</code>. --- ### Adding PHP and MYSQL Database to Contact Form - PHP Form input Validation - <code>[htmlentites()](https://www.php.net/manual/en/function.htmlentities.php)</code> - MYSQLI [prepared statements](https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php) - Creating [mysql database](https://www.w3schools.com/sql/sql_create_db.asp) using [PHPMYADMIN](https://www.siteground.co.uk/tutorials/phpmyadmin/) --- ### Adding SRCSET and SIZES - Used javascript to dynamically add srcset & sizes to each image in profile page - Added srcset and sizes attributes to html markup for image of myself and map image in contact page --- ### ISSUES - GDPR - Hiding Database credentials (HTACCESS, .env, heroku) - removing page animation from mobile screens.used <code>[matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)</code> - setting up deploy now product from IONOS - NPM package vulnerabilities in Yarn.lock file - refine logic for javascript form validation --- ### Commits - [112 commits](https://github.com/raythompsonwebdev/raythompsonwebsite-fc) --- ## PULL REQUESTS  - 6 closed --- ### What I learned - to read documentation thoroughly. - git hub actions and CI/CD tools - accessibility - adding aria labels - screen readers --- # Demo ---