Question about icons and SVG

#1

I’m doing one of P1XT’s projects from his front-end guide, cloning this resume template: https://creativemarket.com/ikonome/686585-Material-Resume-Blue/screenshots/#screenshot3

Here’s what I have so far:

My question is what should I do for the circle and bar icons on the resume? I don’t have access to any of the icons/images from the template. Should these be simple stock images or should I attempt to do them with SVG? On my codepen I have attempted to do them using SVG but is this the wrong approach? Should I just find stock images for the circles and bars?

Screenshot from 2017-10-20 15-39-20
Screenshot from 2017-10-20 15-39-20748×170 37.9 KB

#2

Do whatever you want or whatever you want to showcase. Perhaps it’s even doable through pure css without the code being too ugly.

#3

You can always use a library to do the work for you:
https://kimmobrunfeldt.github.io/progressbar.js/

However, imho don’t use progress bars for skills. Use UX features only for specific and predictable reasons (i.e. user is waiting for something - use case for progress bar). Skill bars are completely relative by who is looking at it, unclear and hard to understand, and often points out weakness in other skills.

progress bar abuse (must watch)

Honest way to show skills on progress bars
portfolio design mistakes
progress bars are just plain wrong

2 Likes
#4

I hear ya, but this isn’t my resume. I’m just attempting to clone the design for practice.

#5