Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I have a few suggestions just to tweak things though:
Centre the main content holder on the right (like you have with your hero section at the top), it doesn't quite look correct with the white space all on the right.
As people scroll the highlighted section in the menu on the left should update to show where they are on the page.
The download resume button tries to save a .html file, this should almost certainly be a PDF.
Your social links are missing https:// at the beginning, so when you click them they try and find the resource on your server rather than going to the site you want them to go to.
Accessibility
and the one I always go on about.....accessibility.
Your social icons need some text that screen reader users can access (see visually hidden text section).
If using a keyboard when I Tab to your "Recent Works" images they disappear.
Visually Hidden Text
Visually hidden text is the most robust way of providing information to screen readers.
In your current implementation you only have icons within the links. This means there is no way to determine any text for that link (as icons are not understood by browsers when building the accessibility tree - which is used by screen readers to read parts of the page).
What visually hidden text does is provide text that is usable by screen readers but does not change the page visually.
Example for Visually Hidden Text
In this example I have adjusted the HTML for your telegram link to give you an example of how to do this. (I also fixed the issue with the hyperlink itself as stated earlier!)
HTML
<ahref="https://t.me/sickotoy"class="home__social-link"><iclass="bx bxl-telegram"></i><spanclass="visually-hidden">Connect with me on Telegram</span></a>
CSS
.visually-hidden{border:0;padding:0;margin:0;position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px1px1px1px);/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */clip:rect(1px,1px,1px,1px);/*maybe deprecated but we need to support legacy browsers */clip-path:inset(50%);/*modern browsers, clip-path works inwards from each corner*/white-space:nowrap;/* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */}
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Iām confused, is this not an actual site? I would imagine you would want to fix the things on the current site as otherwise why did you want feedback?
Anyway I may have just misunderstood, good luck with the next project š
Looks great, very nice design!
I have a few suggestions just to tweak things though:
.htmlfile, this should almost certainly be a PDF.https://at the beginning, so when you click them they try and find the resource on your server rather than going to the site you want them to go to.Accessibility
and the one I always go on about.....accessibility.
Visually Hidden Text
Visually hidden text is the most robust way of providing information to screen readers.
In your current implementation you only have icons within the links. This means there is no way to determine any text for that link (as icons are not understood by browsers when building the accessibility tree - which is used by screen readers to read parts of the page).
What visually hidden text does is provide text that is usable by screen readers but does not change the page visually.
Example for Visually Hidden Text
In this example I have adjusted the HTML for your telegram link to give you an example of how to do this. (I also fixed the issue with the hyperlink itself as stated earlier!)
HTML
CSS
Thanks for your feedback I'll consider them for my next project
Iām confused, is this not an actual site? I would imagine you would want to fix the things on the current site as otherwise why did you want feedback?
Anyway I may have just misunderstood, good luck with the next project š
No it's not an actual project, it's just a practice