Portfolio website review

Career Advice
1

Hey guys, I have created a portfolio website using HTML and CSS and deployed to netlify. I am a software engineer with more than 7 years of experience with expertise in Data Science technologies and I have been trying to find a job in the field of data science for quite some time but could not find one. Please do take a look at my site and let me know if you have any feedback.

https://www.jinudaniel.com/

2 Likes
2

Hello Jinu.

Portfolio looks well done. One thing to add: Your My Work section with the pictures means little to nothing. I suggest adding text over the image when the cursor hovers over the images.

Keep it up.

3

Thank you. I had tried to add a title on the hover of the image but could not accomplish this. I will try again and see if I am able to do this.

4

Itā€™s a nice looking page.

  1. I agree that the project images should have some information attached to them. It doesnā€™t have to be hover text it can also just be some text at the bottom (or side) of each picture.

  2. Iā€™d give the .portfolio grid some spacing. And give the images width: 100% so they take up the full grid cell so you donā€™t get the background color on the right side when the grid is stacked fully.

.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-width: 1200px;
  margin: auto;
  gap: 20px;
}

  1. I would probably make the project links open in a new tab.

  2. I feel like the legibility of some text can be improved. For the text with the background image I can see you tested using background-blend-mode so I guess you also think it can be made less distracting. You can try editing the image or you can make it an element so you can blur it a bit using a CSS filter. For the text on the about-me section, it is a very wispy font and you have to be careful with both the color and size. I would bump up the size a little and maybe move the dark gray a little closer to black.

1 Like
5

Thanks for the feedback.

  1. Adding a text for the images is something that i want to implement. Tried a couple of ideas but that did not work.
  2. Let me add the css.
  3. I think this will create issues in mobile devices. Opening in a new tab will leads to lots of tabs in mobile devices which I think will hamper user experience. Let me know if you think otherwise.
  4. I agree with you when you say that I need to blur the bg image for my services section.
6

You are probably right about the links and as long as the code pages open in a new tab like they do it works as expected (i.e. new site === new tab/window).

What issues are you having making the info overlay for the project cards?

7

First, let me say this. Iā€™m literally like a month into coding myself, so take what I say with a grain of salt.

Your page looks too similar to this FCC article. Iā€™d hate for an employer to come across this article and then your portfolio and immediately think, ā€œHe/she just copied and pasted this codeā€. Maybe take some time to change the colors and/or background images? Make it suit you.

Iā€™m still in the process of learning how to really make code ā€œmy ownā€, rather than just copy and pasting myself.

But, at least you are using FCC articlesā€¦ :grinning:
Iā€™m rooting for you!

8

I think the website is stunning.

Under ā€˜What I doā€™, I would change the text for Data Science and Machine learning slightly.

Get rid of the sentences that start with ā€˜Orā€™. i.e.

Do you want to understand cause and effect? or do you wantā€¦

Change to Do you want to extract ā€¦

Also under Machine Learning paragraph, take out ā€˜for exampleā€™ so you have: In recent projects I have predicted taxi fare rates and classified reddit posts.

Just my advice. Looks great!

9

I was able to overlay the text on the images but the animations were a bit off.

10

Yes you are right. I should have credited the article when I asked the question. I am not that good with CSS but yes I intend to customize the portfolio a bit to suit my style in the long run. I hope i am able to achieve that.

11

Thanks for the suggestions. I will make the changes.

12

Your portfolio looks nice!
I would make two changes:
What I Do section -> I feel thereā€™s not enough contrast between your background image and the thin white text. Iā€™d suggest change or darken the image and make the font-size of the text a bigger/bolder.
My Work section -> Add some descriptive text over your images, you can do this by setting the images as background and text inside or relative positioning the text over the images.

13

Thanks for your feedback and apologies for replying late. Got stuck with some other commitments. I have increased the font size for what I do section and in My Work section if I hover over the image I was able to add the text. Let me know your thoughts on the changes.

14

I was able to overlay the text in the images and the changes are live. Let me know your thoughts on the changes.

15

Looks good. I would add a transition to .portfolio__item__text and maybe increase the opacity to 0.9 so the text is a little more legible.

You may want to use a CDN for your images. It is a little unfortunate that some of the image load times are so slow. The services-bg.jpg which is part of the above the fold, for me at least, takes almost 3 seconds to load.

16

Thanks again for the feedback. Added transition for the text and increased the opacity to 0.9. I could also see that some of the images take a lot of time. Let me try the CDN for images and get back to you.