DEV Community

loading...
Cover image for Rate my portfolio site!

Rate my portfolio site!

cdthomp1 profile image Cameron Thompson Updated on ・1 min read

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!

Discussion (25)

pic
Editor guide
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 Author

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 Author

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 Author

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
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 Author

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
muhammadsiddiq profile image
MuhammadSiddiq

Good job :)

Collapse
cdthomp1 profile image
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 Author

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 Author

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 Author

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 Author

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 Author

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