What I Learned from Reviewing 50 Portfolios on Reddit in 3 Crazy Days

As a full-stack developer and lead engineer, I‘ve had plenty of experience reviewing portfolios, both from applicants to my company and from fellow web devs on Reddit looking for feedback. So when I decided to offer free, no-strings-attached portfolio reviews on r/webdev, I thought I‘d get maybe a dozen responses that I could casually work through in my spare time.

I could not have been more wrong. The response was overwhelming – within 24 hours, I had over 40 requests for review. By the 72 hour mark, I had analyzed 50 portfolios in depth and written up detailed notes on each. It was an incredible learning experience that gave me new insights into the state of our industry and the challenges new developers face in trying to demonstrate their skills.

For context, I‘ve spent over a decade in the web development industry, first as an individual contributor and now as an engineering manager. I‘ve worked on everything from small marketing sites to large-scale SaaS applications. My particular areas of expertise are front-end architecture, design systems, performance optimization, and accessibility. So those are the aspects I was paying the most attention to while reviewing these portfolios.

To be clear, this article is aimed at developers looking to create a portfolio that will help them get hired as a full-stack or front-end web developer, particularly in a design-focused role. If you have a different end goal in mind for your portfolio, not all of these lessons may apply.

With that background out of the way, let‘s dive into my key takeaways from this intensive portfolio review session.

By the Numbers: Most Common Portfolio Mistakes

Let‘s start with some hard data. Out of the 50 portfolios I reviewed, here were the most prevalent issues I encountered:

Issue	Percentage
Insufficient color contrast	86%
Lack of keyboard navigation	74%
No live demos of projects	68%
Overuse of frameworks/libraries	54%
Lack of responsive design	48%
Unconventional/confusing layout	44%
Typos or broken links	36%
Generic, untailored content	34%
No side projects	26%

As you can see, the vast majority of portfolios had significant accessibility issues, either from lack of keyboard controls, poor contrast, or both. This is really concerning to me, as it indicates that web accessibility is still not getting the attention it deserves from new developers.

Some of this is likely due to lack of awareness. If you‘re not used to navigating the web via keyboard or using assistive technology, you might not even realize the barriers you‘re putting up. But in my opinion, there‘s no excuse for inaccessible web development in 2023. It‘s not an edge case, it‘s a fundamental part of the job.

To illustrate, here‘s an example of a common keyboard navigation issue I encountered:

<nav>
  <a href="/">Home</a>
  <div class="dropdown">
    <span>Projects</span>
    <div class="dropdown-content">
      <a href="/project-1">Project 1</a>
      <a href="/project-2">Project 2</a>
    </div>
  </div>
  <a href="/contact">Contact</a>
</nav>

The problem here is that the "Projects" dropdown menu can‘t be triggered via keyboard, since it‘s relying on a hover event. Instead, you‘d need to add explicit keyboard event listeners:

const dropdown = document.querySelector(‘.dropdown‘);

dropdown.addEventListener(‘keydown‘, (e) => {
  if (e.key === ‘Enter‘) {
    dropdown.classList.toggle(‘active‘);
  }
});

That‘s just one small example. The reality is that making a site fully keyboard accessible often requires rethinking the design and interaction patterns from the ground up.

Poor color contrast is arguably an even more widespread issue. A whopping 86% of the portfolios I reviewed had text that failed WCAG contrast guidelines. Often this seemed to be in the name of following design trends – light gray text on white backgrounds was a common culprit.

But trendy or not, low contrast text can make your site borderline unusable for people with low vision or color blindness. It‘s an easy issue to catch if you use automated accessibility testing tools while you work. Personally, I‘m a big fan of the WAVE browser extension for on-the-fly contrast checking.

After accessibility, the next big issue I encountered was a lack of live project demos. When I‘m evaluating a developer, I want to see the actual, functioning apps you‘ve built. Screenshots and descriptions are great for providing context, but they‘re not enough by themselves.

Employers know this, which is why take-home coding challenges are so common in our industry. If your portfolio already includes polished examples of your work, you‘ll be that much further ahead. Fortunately, in the age of Heroku, Netlify, Vercel, and GitHub Pages, there‘s no shortage of free, easy hosting options for your portfolio projects. You just have to make it a priority.

Proving Your Skills with Side Projects

Looking beyond individual mistakes, one of the most revealing portfolio stats from my review was that only 74% included any side projects. When you‘re early in your career and most of your work experience is on private codebases, side projects are the best way to show off what you can do.

I get that it can be tough to find the time and motivation for side projects when you‘re already putting in long hours at your day job. But think of it as an investment in yourself and your career. The developers I‘ve seen get the most interesting opportunities are always the ones who are constantly tinkering with new technologies and ideas in their spare time.

Your side projects don‘t have to be huge, complex undertakings. In fact, I‘d argue that small, focused projects that solve a specific problem or explore a particular technology are better for your portfolio than sprawling, half-finished apps. The key is to pick something you‘re genuinely passionate about building and then take it all the way across the finish line.

For instance, one of the most impressive side projects I came across in my portfolio reviews was a custom-built mechanical keyboard configurator. The developer was an avid collector of rare keyboards and had gotten frustrated with the limitations of existing configurator sites. So he decided to build his own from scratch, with a completely custom PCB layout tool, real-time 3D rendering, and the ability to export configs for popular firmware like QMK and VIA.

Was it a particularly complex project from a technical perspective? Not necessarily. But it elegantly solved a real problem the developer was passionate about, and along the way he got to dig into technologies like Three.js and WebGL that he wouldn‘t have otherwise had exposure to. That kind of intrinsically motivated deep dive is what makes for a standout side project.

If you‘re struggling to come up with side project ideas, start by looking at your own hobbies and interests outside of coding. Chances are there‘s some problem or inefficiency in one of those areas that could be solved with a bit of web development. Alternatively, pick a new technology you‘re curious about and build a small project with it – a Chrome extension, a web-based game, a data visualization, etc. The possibilities are endless.

Tailoring Your Portfolio to Your Dream Job

Perhaps the most interesting pattern that emerged from my portfolio review data was the split between "generic" portfolios and those that were explicitly tailored to a specific company or role. Roughly a third of the portfolios I reviewed fell into the latter category, and on average, they were significantly stronger than the more generic ones.

When I say "tailored", I‘m not just talking about dropping a company‘s name in your cover letter. I mean really doing your research on the specific skills, technologies, and values that a given employer is looking for, and then shaping your whole portfolio around demonstrating those competencies.

For example, if you‘re gunning for a front-end role at a design agency, your portfolio should be a showcase of your CSS and interaction chops. On the other hand, if you‘re more interested in building data-intensive dashboards, your projects should lean heavily on technologies like D3.js and back-end APIs.

Of course, this doesn‘t mean you have to pigeonhole yourself into one narrow specialty. The developers I know who‘ve had the most successful careers are the ones who‘ve cultivated what I call "T-shaped" skills – deep expertise in one or two areas, supplemented by broad, generalist knowledge across the stack. The point is to be intentional about the story your portfolio tells about your abilities and interests.

One common mistake I saw in this regard was developers trying to pad out their skills list with every technology they‘d ever touched, no matter how briefly or tangentially. Paradoxically, this can actually make you look less qualified, not more. When I see 20+ skills crammed into a portfolio with no context, my first thought is that this person is probably a master of none.

Instead, focus on curating your list of skills and projects to paint a cohesive picture of who you are as a developer and what kind of work you want to be doing. Don‘t be afraid to leave things out that don‘t fit that narrative.

Polishing the Details

The final piece of the portfolio puzzle is all the little details that signal your professionalism and attention to detail. This is an area where many of the portfolios I reviewed fell short, with typos, broken links, inconsistent styling, and other rough edges.

I get it – when you‘ve been staring at your own portfolio for days or weeks on end, it‘s easy to go code-blind and miss small mistakes. But put yourself in the shoes of a hiring manager who‘s reviewing dozens of portfolios a day. Those tiny imperfections start to stand out and can make the difference between a callback and a pass.

My advice? Before you consider your portfolio "done", enlist a few friends or colleagues to give it a thorough once-over. Have them click every link, test every interactive element, and proofread every line of text. You might be surprised at the issues they catch that you missed.

Another detail that often goes overlooked is performance optimization. In my portfolio reviews, I encountered countless sites that took ages to load due to unoptimized images, bloated JavaScript libraries, and other common culprits. In a world where the average user will bounce after just a few seconds of waiting, a slow-loading portfolio can be a big turn-off.

Tools like Google‘s Lighthouse can be a huge help here by identifying performance bottlenecks and suggesting fixes. But even just being mindful of file sizes and page weight as you build can go a long way. For example, instead of dumping an entire CSS framework into your project, could you get away with just a handful of utility classes? Instead of a heavy JavaScript charting library, could you achieve the same effect with SVG and a bit of vanilla JS?

Remember, your portfolio is often the first impression you make on a potential employer. Taking the time to sand down the rough edges shows that you‘re serious about your craft and pay attention to the small stuff. And in an industry as competitive as ours, that can make all the difference.

Embrace the Journey

If there‘s one overarching lesson I took away from my three-day portfolio review marathon, it‘s that building a strong portfolio is a journey, not a destination. The best portfolios I saw weren‘t static monuments to past achievements, but living documents that evolved along with the developer‘s skills and interests.

In fact, some of the most promising portfolios I reviewed belonged to developers who were openly seeking feedback and iteration. They recognized that their portfolio was a work in progress and were eager to hear ideas for improvement. That growth mindset is exactly what employers are looking for in candidates.

So if you‘re reading this and feeling overwhelmed or discouraged about the state of your own portfolio, know that you‘re not alone. Every developer I know, myself included, has gone through the same struggles and doubts at some point. The key is to just keep building, keep learning, and keep seeking out constructive feedback.

Because here‘s the thing – your portfolio is never really "finished". There will always be new projects to add, new skills to showcase, and new ideas to explore. Embrace that iterative process and use it as a tool for continuous growth and improvement.

And if you‘re ever feeling stuck or in need of an outside perspective, don‘t be afraid to reach out to the wider web development community. As my portfolio review experience showed, there are plenty of folks out there who are more than happy to lend their expertise and insights to help you level up.

So keep at it, friends. Keep building cool stuff on the web and putting it out there for the world to see. Your dream job is within reach – you‘ve just got to keep pushing towards it, one line of code at a time.