Personal Portfolio - any feedback is appreciated

Hey everyone! I’ve spent quite a long time building out this personal portfolio and I’m always looking to improve.

I’ve only finished the first two certificates of freeCodeCamp so it’s mainly HTML and CSS with a little bit of Javascript to make it fun.

Link: https://davidcao.me/

4 Likes

Whoa! This is awesome for the first two certificates and inf freeCodeCamp is only the education you have in web design! Awesome practical usage man! BTW, how did you host this? Just soo cool

Hi @dcao !

I think your site looks good.

The only thing I had an issue with is some of the images were slow to load on my end.
Out of curiosity, I ran google lighthouse on your site and the scores were a little on the low side.

It might just be my current internet connection but I would check on that for your end.

Hope that helps!

Thanks for the kind words!

I hosted this on github-pages, it’s free and it works pretty good :slight_smile:
Here’s a link to the repository: https://github.com/dave-cao/davidPortfolio

All you need to do is put your files in a repository with an “index.html” file and turn on the “github-pages” in settings.

Thanks for the feedback! I realized that the images were sometimes slow as well, especially on phones or low-end laptops loading for the first time. I have the pictures accessed from in the HTML file.

Perhaps it’s due to too much CSS being used? I’m not too sure. Or maybe it’s a limitation of the hosting platform I’m using? (Github Pages). What do you think?

Again, thanks for the feedback!

Hey, this looks nice but the biggest thing that jumps out at me is that I can’t tell what is a link on the page. Don’t make people hunt around for your links and don’t make them look foolish clicking on things that they think are links but really aren’t. It should be 100% obvious from just looking at the page where the links are. Your links styling should be consistent across the page as well. Usually links are underlined but you could do a specific color if you want. Just make sure that whatever you do you do it the same way for all the links on the page. The only exceptions would be the nav links at the top and the links in the footer at the bottom. Those are expected to be links and thus don’t need to necessarily follow the link styling of the rest of the page.

3 Likes

When I looked at the lighthouse score, the first thing mentioned are properly sized images.

Quote from the google lighthouse audit
Serve images that are appropriately-sized to save cellular data and improve load time.

I would suggest running google lighthouse for both the mobile and desktop versions and reading through the results so you can further optimize the page.

1 Like

Haha, my initial purpose for putting obscure links was to have them as little easter eggs on the site that would take people to different things if they so happened to click on it.

However your feedback makes sense, I’ll take note of that. Thank you!

That makes sense, it would probably mean my images are too big, and it takes time for the CSS to resize them when it gets loaded onto the page.

I’ll make sure to run it through google lighthouse. Thank you!

1 Like

o this is very nice. Thanks for sharing.

Did you do the upward flowing square animations in the hero with @keyframes? Is it CSS only? It looks amazing to me.
And also that funky shaking on the projects. Good stuff

Good job! I particularly like the welcome page, well done.

I don’t know if you give it a thought, but what about font-family. I have the impression (I might be wrong) that you are using the default one, and there might another font-family that is better suited for your website.

Thanks for the feedback!

Yep, the square animations were made using @keyframes, so only CSS. The funky shaking was also made using @keyframes! I just followed some tutorials online so it was pretty easy to do. I’ll link them if you’re interested :).

Upward flowing square animation: https://www.youtube.com/watch?v=qx7pSLjLNQA
Funky shaking: https://www.w3schools.com/howto/howto_css_shake_image.asp

1 Like

Thanks for the feedback, always appreciated!

The font-family I’m using is called “Nanum Myeongjo”. To be honest I thought it looked pretty good but since you pointed it out, I’ll try testing out some different fonts and see if it looks better :0.