Online Resume

Since I’ve started the search for the next chapter in my career I’ve been looking for two related but different types of roles. Either a Technical Support Engineer or Software Engineer.

For the Technical Support Engineer I’m looking for a role where I’m helping developers use a product. Something that gets fairly technical. Looking at code, troubleshooting API’s, testing SDK’s, etc. For Software Engineer, I’m looking for a Frontend or Frontend leaning role, ideally helping build a product.

For years I’ve had an online resume. It’s always been simple HTML and CSS. Something that is simple, loads quickly, lists all my experience, and that I could print to PDF when applying to roles. Because it is years old and I have lots of experience that is relative to the roles I’m applying for, the resume has become long. It also wasn’t focused on one of these roles in particular.

Last week I decided to update it with a few main goals in mind:

• Keep it simple and fast
• Be able to tailor it to both roles I’m looking for
• Have it look good
• Put to practice some of the accessibility areas I’ve been learning about

Keeping it Simple, Fast, and tailored

To keep it simple, fast and being able to tailor the resume for the two different roles I ended up going with Web Components. They are light weight and don’t need any external dependencies or frameworks. They are native to the browser and just work, but you can add interactivity and make things work well.

This was my first time building anything directly with web components, though I’ve played around and helped maintain some already built projects which use them. Still not sure I have things the most optimized or done the best, but it is a good start. It reduces code duplication and gives me the functionality I wanted.

Because there is so much overlap between my roles a lot of experience I had is applicable to both roles I’m applying for. So I didn’t want to have two separate versions of my resume where I had to update roles in multiple places if I made a change. That led me to JSON Resume, which is a project that maintains a standard format for resume data. This was really close to what I was looking for so I used this schema as a base but had to make a few changes so that it allowed me to specify which role experience applied to, and a couple of extra fields that I wanted to be able to display.

The web components take the JSON data and then parse and display it nicely.

Have it look good

Previously my resume was built to basically look like the print version, like a sheet of paper on the screen. Seeing as it was on screen and I could do more I wanted to take advantage of that.

The design is still pretty simple, but it looks a lot better than a sheet of paper now. For starters I’ve added a dark mode that is the default. I love dark mode. There is of course a toggle to go to light mode as well.

For both work and educational experience I was able to give it a bit of a timeline view with some scroll animations.

Though I wouldn’t include them in my printed resume I also am able to include pictures of both myself and people who have given me nice recommendations.

Mobile or smaller screen views is pretty much the same. I did customize some of the timeline view so it works better and also added a mobile menu for the different role toggles and dark mode toggle.

Then there is print styles. I still wanted to be able to print the resume from the browser so there is customized print styles so that it still looks good when printed. Very close to the original layout and design I had to begin with. Here I hide images, and recommendations all together.

Page breaks in the printable version still need some work as they don’t always break things up nicely.

Accessibility

Tying to be even more conscious about accessibility when building this. There is still more testing I need to do to make sure, but I’ve tried to make it work well.

• Keyboard accessible
• Announce when using the role toggles to acknowledge things changing
• Mobile menu having good focus management and being inert when not on screen
• Respects prefers-reduced-motion to disable animations

Again it still needs more testing, but I think this is a good start.

Wrapping up

Overall I’m pretty happy with the results. Though I’m sure I’ll keep picking away at it as I go.

If anyone takes a look at the site or code I’d be very happy to hear any feedback that you have.

The live version is at https://resume.sandymcfadden.com/ and the code can be found on GitHub at https://github.com/sandymcfadden/resume