Building a Web Dev/Software Engineer Portfolio Step by Step
to help you stand out when applying for jobs
It has been about two months or so since the graduation of my coding boot camp. With the one-week break I gave myself right out of boot camp and also the winter holidays, I would say that I have been searching for a job for a total of 4–5 weeks. During these 4–5 weeks I have done several things to help me stand out when applying for jobs.
After talking to a number of boot camp graduates who are already working in the field, I received all sorts of advice such as how to approach studying data structures and algorithms, building what kinds of projects, and also what to include in my resume. One advice that I heard over and over again was having a portfolio website which showcased my resume and recent projects.
I initially applied to jobs without this portfolio because I was busy working on personal projects after boot camp. However, I recently finally had the time to put together a simple portfolio website. It’s too soon to say that it has helped boost my application, but something about entering or sending out my website with the application has given me so much more confidence and satisfaction.
Many of my boot camp cohort-mates have so created their personal website/portfolios. And the big question before even starting is whether to make the website from scratch or to use a pre-built portfolio template, which there are tons of out on the internet free of cost. I think the decision should be made based on whether you want it to make a project out of this to practice your skills or you just want a portfolio to use in your applications. I personally wanted to build it as soon as possible to use when applying to jobs, so I decided the best route would be to use a template.
My friend recommended that I use one of the templates on Bootstrap Made. He said that it was really easy to install and use which I found to be true when making my own portfolio. The first step is picking out the template of choice and downloading the zip file associated with it. Super simple.
After downloading the template, you can open up the files with a code editor and then open up index.html on your browser to use as reference when editing. You can use the command “open index.html” in the terminal within the file to open on a browser.
A big part of the process was to clean up the pre-existing code within the template. I had to figure out which parts of the template I was going to use or not use, and so there was a lot of deleting of code and files that went along with the parts deleted. I decided to just leave the header(hero), About Me, Resume and Portfolio sections. I also cleaned out the CSS file by deleting contents that correlated with the deleted contents of the HTML file.
After deciding on which sections you want to keep, all you have to do is replace the content with your own such as changing the pictures, bio, uploading your resume and demo videos of your projects. One new tag I learned about from uploading my youtube videos was <iframe>. This tag let me display my videos straight from YouTube onto my website.
One thing to make sure to include it the allowFullScreen property so that a viewer can make the videos full screen if they wish.
The last couple steps were to remove all traces of the template version, including the text and icon that goes inside the tab.
Changing the title tag in the head section of the index.html file can make the text of the tab change. For the icon at the left side of the tab, you can change them on line 13 of the code snippet below in the link tag with rel=”icon”. I just googled free icons, downloaded the image, moved the file into the img folder inside the assets folder and then changed the href file name to match the icon file name.
And that’s pretty much it code-wise for building your portfolio!
The final final step is deploying the website somewhere so that you can easily share it using a URL. I heard the easiest way to do this is to host your website on GitHub, which I haven’t done before, so I decided to try it out.
I followed the steps listed here, and it was definitely as simple and easy as I had heard. Here is the link to my portfolio!
Thanks for reading!
