Devlin Peck
My eLearning website and portfolio have come a long way over the past several years, and each variation of my website has worked for me in different ways.
This article highlights that evolution. Enjoy!
I built my first portfolio website during the first semester of my Master’s program, which is right when I was breaking into the field. I used Wix, which is a tool that lets you create websites very easily and quickly.
I included a small handful of my early portfolio pieces on the homepage. The write-ups were no longer than a paragraph, and people had to select the image to experience the full project.
I also included a blog, which is where I wrote about my experiences as an instructional design Master’s student and early victories as a freelance eLearning designer.
This version of my portfolio site also had a very basic “Bio” page where people could learn more about who I was and what I did.
Overall, I did not love this portfolio. Wix restricts your ability to customize your site in many ways, and their mobile-responsiveness was not very good for tablets at the time. This frustrated me, so I was eager to find a solution that gave me more control.
With that being said, this portfolio site did land me my first few freelance projects, and it helped me sustain myself as a Master’s student.
After getting my first portfolio site online, I decided that it was time to learn to code websites myself. I had played around with HTML, CSS and JavaScript in the past, but at this point, I was ready to get serious.
I spent 6 months on freeCodeCamp and Treehouse to relearn the front-end web stack from the ground up. During this time, I was also working on a completely custom portfolio website — one where I wrote every line of code myself.
This was a huge challenge because I wanted the site to be completely responsive, and I handled much of the responsiveness with vanilla JavaScript.
Building this website took a lot of trial and error: I’d identify what I wanted my website to do, and then I’d work away at the problem for hours until I made progress. And sometimes, my attempts would fail and I’d be right back where I started. Then, I’d try again the next night (and the next night, and the next night, and the next night…) until I figured it out.
The ~1,000 hours or so that I spent learning this tech stack and building my portfolio site turned out to be worth it. I learned so much about web development, and I’ve used the web dev skills on countless eLearning and xAPI projects that I otherwise wouldn’t have had the confidence or skill set to take on.
On top of that, this portfolio site brought my business to the next level when it went live. Clients would find me on LinkedIn, visit my portfolio, and then reach out to me via email to discuss their projects. Due to all of the outreach, this site helped me close $200k in sales during the first year out of my Master’s program.
The site itself included a large grid of my eLearning and instructional design projects on the homepage, and when someone clicked on one, my write-up would expand from beneath the row.
I also included an “About” page, blog, and tutorials section. I wrote several tutorials during this time that helped people upload their eLearning projects to Amazon S3 and leverage xAPI to collect valuable learning data, and this is when I started getting a small stream of traffic from search engines.
This site also made it onto a couple of industry featured portfolio lists, so overall, it was a big success.
After spending a bit of time in the industry, I started to get disillusioned with the lack of focus on analysis, evaluation, and results. I wanted to work on more projects that produced measurable results for the organizations that I worked with. However, most of the clients that came to me wanted eLearning courses.
Because of this, I decided to revamp my website once again. Rather than funnel people to my eLearning portfolio, which would inevitably result in people reaching out to me about eLearning projects, I wanted my website to serve as a form of performance support for L&D practitioners and leaders.
For example, I wanted someone to be able to search Google for “How to Conduct a Needs Assessment” and find one of my articles outlining exactly how to do this.
I was also ready to pump out a ton of content on performance consulting and results-oriented instructional design. My strategy for the new website focused on SEO and readability. I wanted my site to perform very well on a wide variety of devices, and I wanted the spotlight to be on the content itself.
Gatsby.js was a perfect solution for this. It’s a JavaScript framework that’s used to build extremely high-performing web apps that are SEO-friendly. I found a great, minimal Gatsy.js starter that focused on performance and typography, so that’s where I started from.
Fortunately, I was comfortable modifying the starter website, which required skills with React.js and CSS. I learned React.js, which is another JavaScript library, by taking an excellent course on Scrimba. After fiddling with the starter for around a week, I began migrating all of my content to the new site. I also removed my portfolio from the site completely.
Once it was ready, I hosted the site with Netlify, an open-source service that’s built on fast AWS servers worldwide. My site’s traffic soared overnight due to the increased website performance and faster hosting.
I spent months churning out performance consulting articles and tutorials. However, the inquiries about performance consulting did not come. I spoke to people at some of the most well-known L&D companies and performance consultants alike, and they all confirmed that much of their work is still producing eLearning without conducting a thorough analysis and evaluation.
Recognizing that the market truly wanted eLearning, and not performance-focused solutions, I decided to bring more emphasis back to my eLearning skills. This was an easy choice considering how much fun I was having figuring out tough technical problems for my clients, developing complex Storyline interactions, and working with SMEs to create scenario-based courses.
So, I began bringing my eLearning projects back online with a portfolio page and brief write-ups for each.
I also decided to spend a month building a super thorough guide about how to become an instructional designer...something that I had wanted to do for a while at that point. This guide wound up performing very well in organic searches, eventually reaching the #1 spot for people who search “how to become an instructional designer” in the United States.
This led to many new instructional designers reaching out to me for help, and it even helped me land a new client.
Despite the site’s speed and readability, I couldn’t modify this site as much as I wanted to. My React.js knowledge was at the beginner-intermediate level, and implementing big changes to the Gatsby.js site would require a much more advanced command of React. Because of this, I was searching for something that I would be able to customize more easily and rapidly.
This section includes an affiliate link. Using it will help support me and the content on this site :)
After learning about the no-code movement and Webflow in particular, I knew that I was onto something big. Webflow is a visual design tool that lets you modify HTML, CSS, and JavaScript on your website without having to write any code. They also provide fast hosting built on AWS servers worldwide (just like Netlify, which I used to host my previous website).
Before diving into Webflow, I decided to design my site in Adobe XD. This allowed me to iterate quickly, and it ensured that my design would be refined before I started building in Webflow.
My main goal with this website was to increase the number of business leads that came my way. To accomplish this, I added large Call-to-Action buttons directing people to contact me. I also Included social proof in the form of testimonials and a brand bar listing some of the more well-known brands that I had worked with (at least, the ones that I was able to disclose).
When it came to the portfolio, I rewrote the write-ups for all of my projects. This time, I added a ton of detail about my process, and I livened them up with screenshots and videos. The new write-ups tell clear stories about how I've handled the design and development of a wide array of eLearning projects.
To add to the visual appeal of the site, I worked with my illustrator to add illustrated cover photos for every article and tutorial.
While the site has only been live for a week or two, it has been effective so far. My organic search impressions are steadily rising, and I’ve generated a handful of new leads for xAPI and eLearning work since launch.
My website has been the single biggest tool in growing my business. In fact, if I didn't have a website, my business probably wouldn't exist.
Because of this, I have made constant efforts to improve and optimize my website to get closer to my desired results. It has been quite the journey to get to where I am now, but I am very happy with the Webflow site and the results I'm seeing so far. Because Webflow makes it so easy to design new pages (and it performs very well), I expect to grow with this site for the foreseeable future.
If you're a fellow instructional designer or eLearning developer, then feel free to share your site! I love checking out other portfolio sites to find inspiration or give feedback. Also, all feedback on my current site is very appreciated, so send any emails or LinkedIn messages my way.
.jpg)