Hi, I'm Lillian, the Director of Career Services at DigitalCrafts. A big part of what I do is individually review student resumes and portfolios. Here at DigitalCrafts, we provide students with a Career Services Toolkit, which outlines how to do everything from crafting your portfolio to passing a technical interview. My original idea for this post was to follow the guidelines provided in the Career Services toolkit to the letter, offering additional tips based on my experience to other new developers as I went along. This plan was, however, almost immediately derailed. It turns out that I would never pass my own review, but I still came out of the experience with some tips to share.
Tip #1: Plan Ahead!
I wasted a lot of time getting started on themes and then changing my mind and starting over. It's important to really sketch out your ideas and let it sit, so that you can be sure that's what you want. Your portfolio is personal, something that you want to represent yourself. Look and what other people are doing, and if you are angling to be a front-end developer or designer, it's important to be caught up on the latest trends in web design. That doesn't mean you need to have the loudest, most cutting-edge theme. This is, after all, something you want to be relevant for a while, without having to constantly update based on the latest fashion. It does, however, mean that you should be aware that light backgrounds and sharp edges are common. Some places I looked for inspiration before setting out are Themeforest and Dribbble.com. Codyhouse also has a lot of really cool features that you can and should incorporate.
Tip #2: Don't Use A Template!
I know I'm not a designer, and I immediately felt overwhelmed by the idea of building a portfolio from scratch, so I opted to follow a template, which the Career Toolkit does not recommend doing. Following a template was a mistake. I ended up gutting it almost entirely, which left me with a lot of code I didn't need and wasted time. And because I used a template, no matter how customized it is, I have to credit the author. And as I was working through my portfolio, I realized I could have (somewhat) easily done this myself. It's a static one page HTML layout, not the complicated endeavor I had built in my head. It's also a good HTML/CSS refresher from the first weeks of class.
However, I recognize that some people are as stubborn as myself and that I can't convince everyone to start from scratch. So, if you know you can't (or just don't want to) put together a visually appealing landing page to save your life, let me save you some time. Using a template also meant a lot of time searching for "the one." I waded through a bunch of spam filled free WordPress and PHP template sites getting too scared to download anything before finding some legitimate sites that fit my criteria. Startbootstrap.com has a limited but good selection. Plus, you can fork all of their templates in GitHub and get started right away. Freebiesbug.com has a bigger selection, and you can search based on language. I personally ended up going with a simple design from bootstrapious.com.
Tip #3: Make It All About You!
I will be the first to admit I am minimalist to a fault. The sooner brutalism dies the happier I will be. So I knew going in that I wanted a simple, easy whitespace design. But what I ended up with was a boring portfolio, lacking in any sort of expression or personality. Don't make the same mistake! Include things that are specific to you, and why you like to code. I opted out of a landing section, but this is a good place to show what you are all about. Too often I see people leave stock images in this important, attention-grabbing section. Cool, that is a beautiful land/cityscape. Now tell me what it has to do with you. Are you a photographer? Do you like hiking? If there's nothing that relates a cover photo to who you are, you need to change it. And if it does relate, don't leave the reader wondering. Include a sentence or two about it in your bio.
Tip #4 Buy a Custom Domain!
Custom domains are cheap, easy, and very professional looking. I went with a commercial site, bought a domain, spent 20 minutes panicking thinking I needed to pay monthly to have a site deployed, realized I just need to customize the DSN, deployed to netlify.com so that changes to the GitHub repo will be automatically updated, and after a few minutes I had my own site ready to go! There are many other versions of this story that you can try for yourself, including options from AWS. If you're not ready for this kind of commitment, you can set up a GitHub Page from your repo and it will be free forever, but without a custom domain.
Tip #5: Give Yourself Time!
Making a portfolio, like every other coding project I have ever done, took more time than I thought it would. Not building the site itself, but completing all the other little details I needed to have things looking polished. For your projects, it's not enough to have a good looking functional live demo, you also need to have a well done, descriptive ReadMe file that includes screenshots and code snippets, something I did not do because I ran out of time. You should try out different color schemes and positionings. Did you remember to change the title in your HTML? We even recommend making a video walkthrough of your projects. Basically, there are a million little things that you can do to make your portfolio the best possible version. Start from the top and work your way down. Once you get the biggest things out of the way, you can start focusing on the details. All of these things coming together is what creates a professional site and will impress employers.
Tip #6: Icon Consistency is Important!
Icons, you need them for your skill section and for your contact information and you want them to be consistently styled. Font Awesome is, in fact, awesome. Link it as a style sheet and you have access to over 3,000 logos at your fingertips. Flaticon is another great place for free vector icons. They have more creative options and you can get themes in packs. Devicon has most programming languages.
Tip #7: Random Design Thoughts Thrown Into One Last Tip!
Your portfolio is to feature your projects. You need to make them visually appealing. I often see distorted thumbnails, which is a terrible way to turn someone off of a project you have put a lot of hard work into. There are lots of different ways you can style with CSS to make sure this doesn't happen, depending on how you are styling this section. It's also important to make sure your images are small so that your page doesn't take a long time to load.
Easy on the animation. Yes, animation is cool, but too much is distracting. Don't overdo it, and have things run once instead of on a loop.
Check your copy! It's easy to put in an extra space or wrong word when writing in your code editor. Any word processor will do. I personally use Grammarly.
Lastly, have someone else look at your portfolio. If they aren't a programmer, even better. Maybe you only take into account 10% of their feedback, but it's always good to get someone else's opinion.