Portfolio Site How-To For New Developers


I recently shared my portfolio site with the Free Code Camp Nashville group and got some inquiries into some of the technologies and features I used to build it. So I figured I’d share all aspects of the site and some steps to utilizing the same tools I did.

Should I build my site from scratch?

When I asked this question to the ever helpful NashDev community I received a resounding “No” from Senior devs. This might seem counter intuitive, however, the overall thought process was if you’re just starting out, unless you’re looking to be considered a designer, then using something someone else has already done very well as the base of your portfolio is better than building it yourself. Concentrate on highlighting the things that you are going to be doing in a potential job, not on the overall layout and design of your portfolio site. I decided to go with a template from HTML5 UP for a few reasons. First, they’re FREE as long as you keep the attribution. Second, AJ who creates these amazing templates is based out of Nashville just like me and had in the past connected me with some solid people to have beer/coffee with and discuss my career. Third, it’s a static site. That is, it’s 100% HTML, CSS & JavaScript so I would have many simple options for hosting when I got to that point. Lastly, all of the templates are responsive so if a potential hiring manager clicks through from their phone they’re going to get a great experience.

I’ve got my template, now what?

Fill er up with content! So this I don’t think I can help with too much. What you decide to include on your site is going to be up to you. However, as this is going to be something professional shy away from anything controversial. Keep it scoped around the skills you have and things you have built. A couple resources that I used for my site. The high-res background images I used all came from Unsplash. Unsplash describes itself as:

Beautiful, free photos.
Gifted by the world’s most generous community of photographers. 🎁

There aren’t that many coding images so once you’ve seen them you’ll start noticing them all over the web. Check them out and see if you can find interesting images that represent YOU and use them. Or don’t. Like I said, it’s up to you. Another cool place I found but didn’t get to integrate is Coverr which provides “beautiful, free videos for your homepage”. I still want to replace the top image on my site with one of their videos on a loop. I just haven’t spent the time to figure out how to implement it within the template I am using. All of my technology icons come from DEVICON which has sweet full color SVG’s. Note, if you don’t see it on the linked site check there GitHub repo here as I found not all the icons are on their site. Just look in the icons folder of the repo. I like these icons because since they’re SVG’s they they will look great no matter their scale. For example this Vim icon:

I implemented my contact for by using Formspree which is a sweet way to add a form to a site super simply. I wouldn’t suggest using them for a production app but for something like this they’re perfect. They also include reCAPTCHA by default so you won’t have to worry about spam.

It’s done! How should I host it?

Before moving on to picking a web host, I think you should get yourself a domain name. I’ve been an avid user of Namecheap (Full Disclosure: This is an affiliate link. I recommend them because I use them not because I can get 20% of your domain purchase.) for years and purchase all my domains through them. Try for a first name, last name domain. Stay away from domains that are truly vanity and try to stick to .com, .io, .me if you can. They’re just easier to remember in general. Once again, do what you want. This is just what I would do.

Now because you’ve built a static site there are MANY free options that you can use in conjunction with your domain name for hosting. I currently use Surge however, Now, GitHub Pages and Netlify are also very common, free and easy to use. If you’re looking for a more fully featured web host I currently use GeekGhost (Another affiliate link) and enjoy them. I haven’t had any issues, they allow Let’s Encrypt SSL Certificates (an easy and free way to get your site using HTTPS) and their base plan is only $3.50/mo! I won’t go through deploying your site and setting up your domain name as this will be different for each host you may use. Feel free to ask host specific questions in the comments.

I’m online, what now?

Honestly, not much. Just make sure to link to your site from your resume, on LinkedIn, etc… In addition, remember to keep your site updated as you gain new work experience, publish new projects, and acquire new skills. You never know who might be looking at your portfolio and decide they want to reach out to you!

πŸ‘‡ If you’ve enjoyed this post or found it useful please share it. πŸ‘‡