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)
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 👍
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!
My pleasure. Speaking of images, another quick win, which just popped in my mind, would be to set these as lazy loaded.
Have fun 🤟
A fantastic idea!
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/
A handy extension! Thanks for your guidance!
Anytime. It really improves on a11y.
In Realme C2
Sweet!
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.
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!
Good job :)
Thank you!
"JAM Stack (Learning)" is exceeding the edge on mobile browser, which in turn causes horizontal scrollbar.
Thanks for letting me know. May I ask what your screen width is so I can get my css fixed?
I was visiting from Moto x4 device using Chrome Android.
Thanks! I already created a work item for this :)
"Node.JS" should be "Node.js" per official site.
"Express.JS" should be "Express.js" per Wikipedia.
Thanks, will fix!
Very well made. I would add favicon, you can use this tool realfavicongenerator.net/ to generate cross browser one.
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!
Someone asked me about how to design I showed this profile.
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...
Nice Job !
Thank you!