$ ls -R ~/








Building A Resume Web App: Part 1


Date: 05/22/2019

Job hunting as a web designer & developer can be a challenge, especially when you’ve got a long history in the field.

I’ve always been taught to keep my resume short and to the point; Getting too deep can make potential employers gloss over everything, rather than absorb the critical information. As well, ensuring it is up-to-date takes time, and you can’t resend a resume to an employer after you’ve updated it. You’ll appear to be unorganized, in some cases, leaving you worse off than you were before.

That’s why I’m building myself a resume web app. Not only will this be easier to update, and will ensure employers have up-to-date information at an instant, but it also acts as a showcase for my skills in a live environment.

In my case, I want to work in React.js. I’ve already done some planning work with projects such as Where Does It Hurt?, but I’ve placed that on hold while I work on this and prepare for new hosting. So, I had to start somewhere.

Previously, I’ve always mocked up in Photoshop, but I wanted to expand my skills list more, so I decided to build the mockup of my resume web app using Adobe XD.

Mockup of resume web app in Adobe XD

Adobe XD made the experience pretty good, I must say! While I’d love to work with Sketch, I’m a PC user, so no luck there. Regardless, I was able to crank out the mockup of all the pages (as well as the mobile styles for the home screen and content screen template) within just a couple hours.

One of the most important reasons for mocking up something new like this, for me, is content planning. Figuring out all the details was critical in this situation, for one chief reason: I’m also building a REST API to serve the data.

This goes a little bit against my no-over-engineering philosophy, but I wanted to showcase my dev skills. React itself is actually pretty over-engineered; I could hand-code this in HTML, CSS and a little PHP for templating and be done in few hours. Hell, I may still go that route depending on performance once I switch to my VPS setup. I don’t wan’t my resume to error out for potential employers, that’s for sure!

What’s the next step in building my resume web app? In my case, I wanted to write the HTML & CSS templates outside of React in order to get all the styles set up and tested while trying to break the layout. This is my first production-level web app I’ve built using React, so doing that in it would just slow things down. As well, it allows me to get practice doing markup as part of a team again, rather than playing the sole rockstar designer/developer.

This actually went pretty fast; I’ve been writing HTML for 20 years, and CSS for about.. 17? 18? A long time, that’s for sure. Just a couple hours and I had the web app taken from XD to HTML/CSS.

I considered utilizing SCSS for this project, but it was pretty small, and honestly, SCSS is one of those things that you can just jump into with a reference handy any time you need to use it. No need to practice for me, and it would’ve just slowed the project down.

For the next step, I had planned on building the REST API, but I think I’ll actually go ahead and build the front-end in React with a JSON file for the data. That way, I can get it up and live sooner. Switching it over to the REST API after the fact will be simple, and it’ll help me keep performance in mind while I build.

For those who would like to see the project, I do plan on open sourcing it on my GitHub, so you’ll be able to utilize it yourself once I get the React system built. My actual resume web app will be password protected, due to requirements imposed by Quincy Media regarding showcasing work I’ve done for them, but at least you’ll be able to build your own, utilizing mine as a base!