• Add Tab Order for the contact form at least

When find and replace /app, few files loses its name and becomes dead links.

Below lines miss /app next to href="/images/devices.
href="/images/devicesle-touch-icon-180x180-precomposed.png"
href="/images/devicesle-touch-icon-152x152-precomposed.png"
href="/images/devicesle-touch-icon-120x120-precomposed.png"
href="/images/devicesle-touch-icon-76x76-precomposed.png"
href="/images/devicesle-touch-icon-precomposed.png"

src="/scripts.bundle.js"
It should be src="/scripts/app.bundle.js"

• Always check these lines and make sure the names are correct

• Accordian Slider has mouse-hover animation. It doesn't look like in mobile / smaller breakpoints.

• Download my CV button in bottom Click To Action section shows two links when mouse-hover.

• Find alternative ways that suits well on smaller breakpoints.

As per the title:

• Check and fix this issue

Contact panel not getting focus when opened from cta-bottom link. The panel opens but the page should scroll to top position.

• In certain fast hovering the slides, the last slider collapses and shows body background color

• Without animation the slider doesn't look that nice

• Currently the sliders are styled and has width based interaction

• Change the slider containers based on flex box

• Add subtle animation to the slider and the rotated heading text

Between 480px - 491px width breakpoint range, the top main menu breaks into two lines.

• Don't display the icons before the menu items in that breakpoint ranges

When the contact modal opens there is no immediate focus on the contact form first input (name).

• Add focus function on modal open.

Any block elements (div, header tags) are not allowed within anchor tag

Currently present in accordion section and skill set section

• Replace block elements inside Anchor < a > tags
  OR
• Replace anchor mechanism through JavaScript instead of using < a > tag

Currently the portfolio site has lot of images. This slows the website performance.

• Add Lazy load script to improve the website performance. When a user scrolls the image will load accordingly

When the bigger images from the portfolio section getting viewed in the mobile phone, there is no swipe support. But still navigation works by clicking the navigation arrows.

• Add swipe support

As part of the NO JavaScript support thing, the added hr tag doesn't have style to hide in mobile view.

• Modify the style to support this requirement

Slick Carousel is used in testimonials section.

Issues

• In browser console, inline-style related CSP errors shown.

• Few old css styles. Errors shown in W3C css validation. Always needed to replace them before uploading.

• When print command detected the slick carousel doesn't properly unslick even it is defined in custom JavaScript.

• Try Metafizzy Flickity

Current script does lazy load images as required in all browsers. Chrome works. But Firefox and IE not. The print issue is explained in detail here in Stackoverflow.

Obviously two possibilities:

• Fixing the existing script
• Replacing it with a new script that support all necessary functionalities.

Through some research, LazySizes seems promising.

• Try this script.

In mobile view the contact form can be collapsed to make the bottom contact details visible. It is for good UX reason. That is fine. Same way this facility is not needed in desktopview / larger breakpoints. That is the form can be visible all the time.

But once the form collapsed in mobile / smaller breakpoints, immediately seen in desktop view the form doesn't get shown automatically.

• Fix this UI/UX issue.

And change the 1x1 pixel image to white colour one instead of no colour table one. IE Edge fills with black; which is awful.

For some reason JavaScript is disabled in the browser, few page elements doesn't show or work.

Observation:

• Contact information is completely lost
• FontAwesome icons doesn't show. Particularly there is a need in Bio section
• Can't expand the individual skills in the Skills section
• Download my CV button doesn't show the document links
• Contact Now button doesn't work
• The image and details in each item block within Testimonial section doesn't align
• Technologies Used button doesn't work
• To Top button doesn't work

TODO:

• Mainly create <noscript> tags and show below items
• Contact information must be shown even when JavaScript is disabled
• Bio section to show the social button names
• Find alternative ways to show all information in the Skills section
• Show at least the CV in Word document link
• Contact Now button can be removed or give internal link that points to the new noscript contact content
• Create styles for before and after pseudo classes to contain all information aligned with the item block within Testimonial section
• Technologies button can be disabled and show all information
• To Top button to show the name

Current page looks awful.

• Create an acceptable 404 page and specify in .htaccess file.

Current print version doesn't show all the information.

• Improve current print CSS style to accommodate all information.

Currently the site is a static HTML site with JavaScript back-end for form processing. At present there are practical issues in implementing Google's reCaptcha control in a static website.

• Find a simple and effective Captcha control to implement
• Find better ways to implement reCaptcha

As per the report from favicon checker there are many favicon images needs to be created.
Favicon report

Currently the modals (Contact modal & Footer tech modal) are CSS positioned fixed. Because of that the content below can't be seen by scrolling.

• Make the position absolute and adjust the top/bottom position accordingly for each

• Try to come out of the dilemma to add section title for the skillset and the testimonials.

When clicked for download, the CV in PDF document opens in another browser tab.

• Make it to force download

Currently to load Font-Awesome it needs 3 requests (one css file from its site itself + one actual min css + actual woff2 font file) in Chrome and Firefox. In IE Edge it takes 5 requests (above 3 + 2 XmlHttpRequest).

The current site needs 23 icons only. So I needed to download only this subset. Found Fontello online utility to create subset font for this purpose.

• Try Fontello created subset font or embedded css from Fontello.

I need to find a solution to avoid getting lots of spam emails.

Still there are two CSP issues shows in Chrome browser console.

• I need to find a fix to overcome the issue in style-src CSP directive

jQuery JavaScript Library v3.1.1

Line no: 4791
tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];