DEV Community

loading...
Cover image for The result of 6 month coding, my first Portfolio website, any suggestion?

The result of 6 month coding, my first Portfolio website, any suggestion?

chaveamin profile image chaveamin ・1 min read

Html, CSS and a little bit of JavaScript :)
Codepen
webhost

Discussion (4)

pic
Editor guide
Collapse
inhuofficial profile image
InHuOfficial • Edited

Looks great, very nice design!

I have a few suggestions just to tweak things though:

  1. 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.
  2. As people scroll the highlighted section in the menu on the left should update to show where they are on the page.
  3. The download resume button tries to save a .html file, this should almost certainly be a PDF.
  4. 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 contact form needs properly associated labels
  • 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

<a href="https://t.me/sickotoy" class="home__social-link">
    <i class="bx bxl-telegram"></i>
    <span class="visually-hidden">Connect with me on Telegram</span>
</a>
Enter fullscreen mode Exit fullscreen mode

CSS

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* 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 */
}
Enter fullscreen mode Exit fullscreen mode
Collapse
chaveamin profile image
chaveamin Author

Thanks for your feedback I'll consider them for my next project

Collapse
inhuofficial profile image
InHuOfficial

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 πŸ‘

Thread Thread
chaveamin profile image
chaveamin Author

No it's not an actual project, it's just a practice