DEV Community

Cover image for Rate my portfolio site!
Cameron Thompson
Cameron Thompson

Posted on • Updated on

Rate my portfolio site!

Notice

This site design has since been changed and will now look different compared to the header image and the various screen shots in the comments below :)

I based my site off of Denis Ivy's portfolio tutorial, with some modifications. Original tutorial repo: https://github.com/divanov11/portfolio-website

Here is my site: https://cameronthompson.io

I would love to know what you guys think!

Top comments (25)

Collapse
 
daviddalbusco profile image
David Dal Busco

Really great work Cameron. I like the design, color palette and content. Moreover it loads quite quickly.

In terms of improvements, I would suggest the following:

  • run a Lighthouse test in Chrome. Most of the metrics are really good except accessibility. With three quick fix you will be able to enhance this score. It notably detects some text color contrasts which can be improved in terms of readability, it is also picky about the ordering of the title elements (h6 sorted/used before h3) and asking for a lang attribute on the page html

  • most images can be compressed a bit more. doing so you would even get a bit more performance. for such purpose I can suggest the use of compressor.io/. You can just drag and drop your images and it gives you back compressed images without much loosing quality, my go to handy tool for such quick process

Again, pretty cool portfolio, well done 👍

Collapse
 
cdthomp1 profile image
Cameron Thompson

Thanks, David! I will run lighthouse and get my site to have better numbers. As far as image compression, they seem to load fast enough that I would be okay not doing that. I might consider it if it is a bigger problem on slower networks. More testing with the dev tools for me!

Collapse
 
daviddalbusco profile image
David Dal Busco

My pleasure. Speaking of images, another quick win, which just popped in my mind, would be to set these as lazy loaded.

Have fun 🤟

Thread Thread
 
cdthomp1 profile image
Cameron Thompson

A fantastic idea!

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Love your portfolio site. Great projects.
Just have a few minor constant errors, you can use wave extension to check them out.
wave.webaim.org/extension/

Collapse
 
cdthomp1 profile image
Cameron Thompson

A handy extension! Thanks for your guidance!

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Anytime. It really improves on a11y.

Collapse
 
mzaini30 profile image
Zen

In Realme C2

Collapse
 
cdthomp1 profile image
Cameron Thompson

Sweet!

Collapse
 
ytrkptl profile image
Yatrik Patel

Hi there, cool website. I felt that most things look nice other than the links in the footer, which just need to be centered a bit more to align with the image right above it. Great job! I also like how you've kept it nice and simple.

Collapse
 
cdthomp1 profile image
Cameron Thompson

Thanks! I thought the footer looked a little off, but since I stare at it all the time I couldn't track it down, I will fix that!

Collapse
 
shkuvandikov profile image
shkuvandikov

Good job :)

Collapse
 
cdthomp1 profile image
Cameron Thompson

Thank you!

Collapse
 
yoursunny profile image
Junxiao Shi

"JAM Stack (Learning)" is exceeding the edge on mobile browser, which in turn causes horizontal scrollbar.

screenshot

Collapse
 
cdthomp1 profile image
Cameron Thompson

Thanks for letting me know. May I ask what your screen width is so I can get my css fixed?

Collapse
 
yoursunny profile image
Junxiao Shi

I was visiting from Moto x4 device using Chrome Android.

Thread Thread
 
cdthomp1 profile image
Cameron Thompson

Thanks! I already created a work item for this :)

Collapse
 
yoursunny profile image
Junxiao Shi

"Node.JS" should be "Node.js" per official site.

"Express.JS" should be "Express.js" per Wikipedia.

Collapse
 
cdthomp1 profile image
Cameron Thompson

Thanks, will fix!

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

Very well made. I would add favicon, you can use this tool realfavicongenerator.net/ to generate cross browser one.

Collapse
 
cdthomp1 profile image
Cameron Thompson

I have been thinking of one, but I can't seem to find one that I like. I will keep the site you mentioned in mind. Thanks!

Collapse
 
rahxuls profile image
Rahul

Someone asked me about how to design I showed this profile.

Collapse
 
cdthomp1 profile image
Cameron Thompson

Oh you are too kind. The design was primarily based off of Denis Ivy's portfolio tutorial, with some modifications. Original tutorial repo: github.com/divanov11/portfolio-web...

Collapse
 
cdjohnson97 profile image
cdjohnson97

Nice Job !

Collapse
 
cdthomp1 profile image
Cameron Thompson

Thank you!