Since the beginning of the year I've spent an excessive amount of time on tech twitter, slowly and steadily building an audience.
As a means to give back to the community and in order to build myself a portfolio of free products (which I also plan on expanding to paid products later on) I recently created a free portfolio template, mainly targeted to (beginner) developers.
From the beginning I knew, I wanted to create a portfolio template as my first product, because I come across of novice developers who are trying to build their portfolio. Often times (frontend) developers can be exceptional problem solvers and write decent code even as juniors, but struggle a lot with (UI) design.
Since this is something that I consider myself pretty well-versed in, I decided to offer this template to help them showcase their work in a way, that's not only pleasant to look at, but is also accessible at least to some degree.
I'm in no way an accessibility expert, but I try to apply the knowledge I have to all products I design.The least I can do is aiming for WCAG AA color contrast standards.
Ask audience first
So the first thing I did, was to ask people on twitter, what kind of content they'd expect to find in a developer's portfolio.
The takeaway was, that I portfolio should include:
- Who you are
- What you do
- Examples of your work
- How to get in contact
Also it should be simple to navigate and easily accessible from any device.
The first desgin
Based on the results of my tiny survey, I then started to create a mockup of the template in Figma. I've been using Figma for a while now, both for my personal projects, as well as at my day job and got quite comfortable with it's features.
Coming from Adobe XD it was super easy to transition to Figma, as both tools are pretty similar. One thing that makes me love Figma is the fact, that it can be fully used in the browser.
To get some insipiration for the colors, I used Actionable Color Palettes, decided for a color palette and tweaked the colors a tiny bit to meet the afforementioned a11y standards. For the contrast checking I usually resort to colorable.
After sketching out the first draft, I decided, that it would be cool, to give people the opportunity to easily customize the accent color used in the template and thus decided to look for some more colors, that fit the overall look and feel of the design.
As soon as I had something to show, I went back to twitter to showcase my work once more and get some feedback. The overall sentiment seemed to be very positive with minor suggestions in terms of content and increased whitespace in some places.
I applied the feedback and finished the mockup. Again, I then tweeted the final result, announcing that I would be launching it as a free HTML/CSS/JS template soon after. The reactions were super positive and a lot of people showed interest in the product.
Finally coding
So the next day I sat down and started implementing the portfolio in code. I coded everything from scratch in about 8 hours. The best thing? No dependencies! There's just an HTML, a CSS and a JS file and a few SVG graphics. I wanted something slim and easy to set up and customize. No heavy boilerplating, nothing. If you wanted, you could just open the HTML file in a text editor on your phone, replace the texts and you're ready to deploy.
I launched it like 15 minutes after writing the last line of code on a saturday evening. Which in retrospect might not have been the best decission. But, I just wanted to get something out there finally! For the next launch I will definitely pick a better time (there are actually less users active on the weekend) and maybe review the code once or twice and let some people take a look at it beforehand.
What happened next
In 24 hours I gathered 103 views and 19 downloads on gumroad.
Compared to the amount of people that priorly reached out to me and showed interest, it's not that much, but still I'm pretty satisfied with the results. Now almost a week later the product has 142 views and 28 downloads. Also one of them even decided to pay actual money for the FREE template, which is just mind blowing!
In order to reach all those views and conversions I did several things. First, I DM'ed all of the people on twitter, who previously showed interest in the product. On top of that I reached out to some of my friends on twitter, asking if they would help spreading the word about the free template.
So as you can see, I haven't done a lot of marketing for the product yet. The next steps will include writing better marketing copy, create marketing images and promote the template not only on twitter, but also on other platforms, such as facebook (especially developer groups on there) and reddit. Of cours, even this blog post is a way of marketing the template!
Next steps
After I'm done with all of the marketing experiments, I will then work on transforming the template into a version to use with next.js (maybe also gatsby!) and on top of that I will create a full-fletched WordPress Theme from it. These will probably be paid products, but very low-price ( < $5.00 ). Also, of course there will be more template from me in the future! I plan on creating a template for SaaS-Products next. Also I plan on building an enitre UI library with a lot of page templates, layouts and examples. So stay tuned for that!
Cheers
Nathan
You can find the free portfolio template for developers at aptex.gumroad.com!
Top comments (2)
This is great insight! Thank you for sharing it!
BTW I love your template, it's simple, great colors, great layout. Will definitely recommend it.
Thank you so much!
I'd love if you could leave this as a rating on gumroad as well!