Could use some feedback on my portfolio page

Career Advice
1

I just finished my portfolio page. I was able to load the files and folders in my public_html folder where I have my WordPress files. All is good except I tried to load some code into the .htaccess file to hide the *.html file extensions but it didn’t work. Does anyone know whether or not changes like that happen immediately or do you need to wait or clear your cache?

Besides that issue, I would love input on the design, the copy/words I use, the sections I included, and the ONE project I have linked to. Some notes:

  1. I only have 1 project at this time. I added a 2nd project card because I will be starting on that project tomorrow. Also, the live link to that one project is to CodePen. I need to clean up the HTML & JavaScript files before I load those files online. Once that is done, I’ll push it all to GitHub. Hopefully, I have all of that done by tonight.
  2. The about section → It’s probably too long. Let me know what sentences/paragraphs I should dump. Also, I saw a portfolio site where the person added a few of her photos. I used to be into outdoor photography big time ($2000+ in gear) so I included a few of mine that I like. Should I remove those photos?

I did just catch one issue. When I click on the Live and Repo links on the one project card, it causes the card to flip. The js to flip the card is:

const flip1 = document.getElementById("card1-flip");
const flip2 = document.getElementById("card2-flip");

flip1.addEventListener('click', () => flip1.classList.toggle('show-answer'));
flip2.addEventListener('click', () => flip2.classList.toggle('show-answer'));

How would I exclude clicks on those links from activating the toggle? Use an if statement?

1 Like
2

Hi @kernix.
Amit Here.

Notes:
1 - Great, Good luck!
2 - I think it’s fine. Here are examples of sites I came across looking for the same:

https://www.jason.af/ (Jason has provided configurable Bio content :slight_smile:, It’s kind of cool. To pull off same functionality you might have to use JavaScript)

jason.af (Longer version)

Issues

I) Hiding html files via .htaccess file :

I guess if you dig more you’ll able to resolve this. (It’s been so long for me to have checked WP site :dizzy_face:)

II)I did just catch one issue. When I click on the Live and Repo links on the one project card, it causes the card to flip. The js to flip the card is:

It’s because you’ve click event set for whole card and “live” and “repo” (Anchor elements ) are children of this card (parent element) hence once user clicks it, It ends up toggling class and you see the card flip.

Solution:
You can stop event propagation and avoid triggering this click handler once user clicks these (“live” and “repo”)

Resources:

Thanks. Hope it helps!

3

Nice job on this. There are some issues to look at but overall this is very well done. A few things to think about:

  • I see you have added the aria-label attribute to the hamburger icon. This is excellent. It shows that you have given some thought to accessibility. To be truly accessible you’ll need one more aria attribute, the aria-expanded attribute (this will go on the button). When the menu is not showing (not expanded) then the button should have aria-expanded="false". When the menu is showing then the button should have aria-expanded="true". You’ll have to use JS to change the value. This attribute is for screen reader users. Whenever you have a feature that toggles the visibility of content then you have to use aria-expanded to let screen readers users know what state the content is in. Just remember, aria-expanded goes on the control (the element doing the toggling) not the element that is being toggled.

  • I think you need to clean up your heading structure a little. There are some things you have marked as headings which really aren’t headings. To start with, although I know that it seems like this should be a separate heading, the phrase “Front-end developer & designer” just beneath your name is really not a heading. You can add it inside the h1 if you want or it can just be a <p> below the h1. The next sentence after that (" Applying my love of learning towards web design & development") is really not a heading either. Headings are used to organize content. These “fake” headings I’ve mentioned aren’t doing that, they are just content about you.

  • After the h1 at the top, the first heading on the page is “my projects” which would be an h2. Then the title of each project would be an h3 (as you currently have them). Since “my toolkit” and “about me” are at the same level as “my projects” they should be changed to h2s. The “examples of my outdoor photography” heading is part of “about me” so it would stay an h3. The last heading (" Let me know how I can help you!") is on the same level as the other h2s so it should be an h2.

  • Concerning the h4s, “Technologies used” can definitely be an h4 but you don’t want to include the actual technologies. Those would most likely be in a list below the h4. You can still style them to look the way they do now, but semantically they are a separate element. And you already have a list below that h4 which is describing the highlights of the project. I would add an h4 heading above that list, something like “Highlights” of “Overview” so it is clear to screen reader users what the list represents. The other h4s on the flip side are good.

  • Concerning the flip side, I don’t think it is possible to flip the card with just the keyboard. You should always make sure that all functionality on your page is reachable by keyboard only. (Imagine if a potential employer were looking at this and they could only use the keyboard). So you’ll definitely want to add a button that allows the card to be flipped by keypress. Also, this is technically a disclosure widget and so for accessibility reasons the content that is currently not showing on the page (that is currently on the backside) should be hidden from screen readers and other assistive technology. Explaining how to make these flip cards accessible will take more time than I have now. I just wanted to make you aware that there are issues with them and you will need to do some research if you want to make them accessible. At the least, I would definitely add a button so the card can be flipped using the keyboard.

  • The list of tools under the “my toolkit” header should probably be an actual list (<ol>). The images for each should have empty alt text (alt=""). This is because you already have the actual text on the page just after each image, so having that same text in the alt attribute is duplicating what is already there which is somewhat annoying for screen reader users. This is one of the few instances where it is OK to have empty alt text.

  • Speaking of alt text, you usually don’t want to include words like “image” and “photo” in the text as it is implied and adds unnecessary words for screen reader users. The alt text for the winter landscape at the top is adequate but I think you could describe it a little more because there are a lot of different types of winter landscapes. Pretend you are describing it to a blind person. Same thing with your personal photos. For example, the third one (Reflection in water), what is being reflected in the water? By the way, these are very nice photos.

  • Also, for your personal photos, because you have the photo information in the title and alt attributes, people who aren’t using a mouse can’t see that information because they have no way to hover over the photo. I think you should probably use a <figure> tag for these and then add a <figcaption> for the photo information which will always be shown. Be sure not to duplicate information in both the figcaption and the alt text. The alt text should be more for describing what is in the image. The figcaption would be for additional information, such as where the picture was taken, a title (if there is one), copyright information, and so on, basically any information that someone couldn’t get from just looking at the photo.

1 Like
4

Thanks. I only mentioned WP because I wasn’t sure I could add additional files and folders in the root but you can. I may try the htaccess code either at the vendor beginning of the file. I’m going to try and make the click ONLY of the flip icon or pull the links off the card.

5

Thanks, not sure why I missed all the heading mistakes. I changed all of them as well as the alt tags, but I tried using figure and figcaption for my photos but they didn’t display right with the flex CSS I had. They are just examples of my photography, almost an aside. I’ll have to look into the aria-expanded.

I’m going to leave the technologies as is - I feel the cards are already too big. I could remove that heading and just have it as my first bullet. What do you think of that?

7

Wow, that is quite a reduction. Do you really think I short shorten it to that? No photos either? Leave my photo though, right? It’s late and I’m going to call it a night. I added that text in red and I’ll sleep on it. I’ll take a look again in the morning - thanks for the input!

8

I’m going to suggest you change the CSS and do the HTML correctly. Correct HTML semantics should almost always come first over CSS styling. There is always a way to get CSS to do what you want with whatever HTML you have.

9

Ok, I must have done something wrong originally, but it is displaying good now except my figcaption is exceeding the width of the image. I also changed the technologies H4 to a paragraph.

10

This is just an error in your CSS. By default the figcaption is a child of the figure element and should be contained by it. I’m sure you will be able to figure it out.

11

It’s more than my CSS - now the last flex item (my figure block) is resizing based on the length of the text in the figcaption. Why would it do that? Over an hour - what a nightmare. I’ll try to position the text on top of the image, otherwise, I’m going back to what I had. This shouldn’t happen. How is it not constrained to the parent.

12

I can’t really help you if I can’t see what you are doing. Any way you can put your new stuff somewhere where we can see it?

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.