The Typical Developer Portfolio MUST Die

Today, we're diving into a topic that might ruffle some feathers: the traditional developer portfolio. It's time to rethink what we've been told about showcasing our skills. I've got Derek Wood with me, a seasoned web developer and director at Perpetual Education, who believes the typical developer portfolio just doesn't cut it anymore. We'll explore why the old patterns don't work and how you can create a more personalized and impactful portfolio that really tells your story and makes you stand out. Let's get into it and discover how you can showcase your true potential in a way that catches employers' eyes.

Derek Wood (guest):
Website - https://sheriffderek.consulting

---------------------------------------------------

🚀 Technical Mentorship - https://forms.gle/Ypde55JEQdtAftrBA
🎓 Webdev Career Help - https://calendly.com/donthedeveloper

Disclaimer: The following may contain product affiliate links. I may receive a commission if you make a purchase after clicking on one of these links. I will only ever provide affiliate links for apps that I've used and highly recommend.

My #1 recommended FRONTEND course (15% off):
https://v2.scrimba.com/the-frontend-developer-career-path-c0j?via=donthedeveloper

My #1 recommended BACKEND course:
boot.dev - Get 25% off your first payment with code "DONTHEDEVELOPER"

🤝 Join our junior friendly developer community:
https://discord.gg/donthedeveloper

Transcript

Don Hansen: 0:13

Welcome back to another WebDev Podcast episode where we help aspiring developers get jobs and junior developers grow. In this episode, we brought Derek back on and he is going to share with us why he thinks the normal developer portfolio must die, and he's going to give us some ideas on what he sees to be effective and try to give us a mindset, a perspective on how we should view the portfolio and what value it has when employers are looking at it. So let's dive into it. Derek, for people that haven't seen the previous episodes, can you share just a tiny bit about yourself?

Derek Wood: 0:50

Yep, my name's Derek Wood. I've been doing web dev for, I don't know, 13 years or so. Now I'm the director at Perpetual Education, which is an education consultancy, and I do a bunch of consulting and designing and building web applications.

Don Hansen: 1:05

Love it, all right. So there are other episodes where we brought him on. He's given a lot of good advice. People have loved his advice. So we're going to dive into this topic. So I'm kind of just going to start with, go ahead and just give me an idea of, like what you think about portfolios you've seen from new developers and where you think they're going wrong, and kind of just like what direction you want them to go into, and we'll kind of just take the conversation from there.

Derek Wood: 1:35

Yeah, I think that there has become this pattern. Maybe that's a good way to think about it, right Like the portfolio pattern has happened. Maybe it was a fine pattern to begin with, but once everyone starts to emulate the pattern and probably rounds it down each time, it's sort of copied. There's a couple of famous websites I meant to bring one up, but this young woman had a website you might've seen it's kind of like dark blue and has like green thin lines. But a lot of people grab that and just kind of change the words and kind of break the CSS a little bit usually and they use that. But this pattern in of itself isn't the problem. It's just that it's not a one-size-fits-all pattern and there are some definitely bad parts about it. So you can imagine, this pattern has a header and this header often is not sticky, which is one part that's interesting. And then the header sometimes has a logo.

Derek Wood: 2:34

A lot of people, just you know they're excited they have web design, graphic design, whatever they think they need a logo. A lot of people, just you know they're excited they would web design, graphic design, whatever they think they need a logo. Well, you don't, you don't necessarily need a logo, especially if you're not a graphic designer, maybe you should have your friend help you with it or something. But you know a lot of people learning web development aren't also spending time learning about visual language and you know the principles of graphic design and things like that. So they're kind of borrowing from a borrowed from a borrowed from a borrowed from a borrowed sort of rounded down web design. Look, so this header usually has an about skills, projects, contact. Maybe you can help me think of a few of the other ones that are usually on there and the main area is sort of a welcome. It usually has like a giant circle with a bad picture from maybe Christmas or something that you kind of cut out the rest of your fan. You know it's not a good picture, or it's really up close, or it's kind of like a fisheye. The size it doesn't really make sense with. The page doesn't match the logo. That has a little introduction and the introduction I mean it's good, you want to tell people where they are, what they're doing, I guess.

Derek Wood: 3:42

But they are usually things like I'm I wrote some of these down like I'm a supremely passionate, visionary developer with unquenchable love for code and insatiable desire to learn the latest techniques. There's these very over-the-top, you know, and it's endearing. Some people I know have similar things in theirs and they're excited, but they need to tone it down maybe a little bit. You know, I'm a developer who loves coding and learning new technologies. I enjoy building applications, solving problems. I want to become a full stack web developer.

Derek Wood: 4:16

Like that is like kind of the boring, obvious, right. Like I build websites that look beautiful and work. Any version of that could be up there. And then there's just overly technical ones that talk all about the, you know, react, node, mongo, to-do list, weather app, chat application or so, really on, like soft skills. So anyway, there's that like about section there and then often the next section is a section that just lists every icon, that of every like language or framework that they've ever used. So html5, css3, javascript, css3, javascript, typescript, and there's just this gigantic NASCAR grid of icons. And so then after that, then there's oftentimes like a skills section. So then it says HTML and then there's a bar graph or something. So you're like 80% good at HTML, 75% good at CSS, 98% good at JavaScript. So then that's the next section. That's often there.

Derek Wood: 5:22

Then the next section after that would be usually a grid of three projects from your bootcamp and we're talking to the people who are watching this. So I'm assuming that people are self-taught bootcamp graduates somewhere in the mix of learning and so they might have gone through some Udemy courses the Udemy course actually, probably I couldn't fully track it down, but I'm sure there's an origin of one of the or many of the boot camps that kind of just give you this template to work with, right, because you know it's reasonable, seemed reasonable, probably when it started. So I don't mean mean to give it a hard time, I'm just going to talk about how it's not working now. So the next thing would be the projects, and we'll talk about each of these sections. But the projects has these little story or something and then three thumbnails usually, and then each of the thumbnails has a little link and maybe a link to GitHub and a link to the real project. So you immediately go out of the website to this project.

Derek Wood: 6:22

Then the last part is a contact form usually, and it's usually centered and just basically proves you're bad at UI and unfortunately that's just how it works. And then you know a little footer and so this whole thing is usually a React website and it is built so that all the links are hash links that jump down to each of those sections. So it's a one-page portfolio and I think that we're using portfolio as kind of a noun here, maybe, or something, or as opposed to a concept of what proving your skills, proving your value, showing your history, showing your experience like what is that? What does that look like compared to this artifact that just sort of ends up being there? So that is the outline. I would like to talk about each of the sections. But what are you seeing those? Is that kind of similar to what you've seen?

Don Hansen: 7:26

Yeah, I've done hundreds of portfolio reviews and that's pretty average and I think you said it well like it kind of used to work and it doesn't work that well anymore and I like I'm under the impression like just don't even build a portfolio. If you're going to build something like that, like you can showcase your projects in other ways. But like, yeah, that that initial template that you said I've really thought about this pretty thoroughly template that you've said I've really thought about this pretty thoroughly and it almost is going to give employers fatigue of just like immediately when they identify that pattern, and that pattern is extremely common. That's not what's going to make you stand out, it just isn't. So I'm really interested to hear kind of like the pattern that you really want to encourage, because what you just described is like 95% of people's portfolios and I just don't think you stand out with it.

Derek Wood: 8:26

Yeah, and I think when people in a way I don't want to encourage any pattern, I want to encourage people to naturally come upon what works for them. But I could talk about what I do with the people I work with and a general structure that I think is just sort of natural. You have to take it where you want to go. But the problem with these portfolios is that people see them as this artifact that has to get done like a resume. So instead of seeing it as a playground, like a personal website that just happens to chronicle all the things that you're interested in and the things you're learning and just naturally explore whatever lists of code pens like articles you've written articles you like. I mean, we used to have all these weird things we did with blogging and you'd see somebody else's article you liked and then you write a little paragraph about it and share the link and you know there's all this different linking to each other stuff and that helps get people find you. Who knows if that's going to be true anymore with all the changes in how the browsers or how the search engines work. But the problem with the pattern is, first of all, it's recognizable. It's no longer cute and new, to have a list of all of the things you've used. I don't want to get lost here, but counter this with what does your average working developer's website look like? Usually, they kind of died off. They don't need it as much, in a way, because they're now working, and so it's usually just a little sentence in a contact form, maybe a link to their blog. It's a little downplayed and I don't think you necessarily need to do that. But I also know that you have to be honest with yourself. Not everyone is going to just be super gung-ho about making this beautiful portfolio website I use a lot of.

Derek Wood: 10:27

When I talk to people, I usually show them Lynn Fisher's website, linen Tonic, and you can see she saved an example of every website she's ever made. She's made one every year for like the last 15 years or something. She started just a little before me, and you can see the transition and and you know she's a good example though, because you go there and you're like what is this person into? It's pretty obvious. It's like they. They have all these cool, fun, whimsical things Every year. It's sort of a new trick. She's very tied to responsive web design and you know nice illustrations. You could see the aesthetic that she enjoys and you know, you get a real sense for what she's into and her skill level, and you know she's a superstar.

Derek Wood: 11:11

And so you can't just start with that, though A lot of people think, oh, I either have to have this amazing 3D portfolio and I have to go through this course to learn how to make a bedroom that you fly through and otherwise my website's dumb. But why can't you just start with some basic typography? I mean, your portfolio can kind of build naturally. For example, when I start helping people learn web development, I just want them to focus on what is there, what's in the browser by default, there's a bunch of user agent styles. Those are kind of weird. They're sort of like defaults, but there isn't really necessarily a true default, because each browser sort of implements them themselves. But you can kind of get rid of them, which might be the better option, just to use a reset to kind of clear them out. But now you have no styles, so now you kind of have to manually put them back in.

Derek Wood: 12:07

So you have to learn about maybe like character width units to have maybe a max width on your paragraphs. You might need to learn about sibling selectors so that you can say, oh, anytime a paragraph that is preceded by an H2, we want to have a margin top 1M. So then you're learning about relative units. You're learning about how my body copy and most of my copy should probably be relative units so that, like REM, so that the user can change them. At that point you should be able to create like a really nice, beautiful article.

Derek Wood: 12:44

You know, maybe many maybe make, maybe practice getting some fonts, so you have three articles that could be all the same markup and make them look totally different. You already have a nice project right there. I mean, that's probably. You probably know more about typography than most working web developers, so why not make that into like a little typography exploration? You could write a little article about what you learned and show them and link to them A nice little HTML website that says hey, I'm learning web development, here's my initial explorations of typography. It's clearly the most important thing. If you think about it. If you strip out the HTML or the CSS, then you at least have the semantic HTML Screen. Readers can use it. I think bots that are crawling your site can use it, and it's a good time to learn about accessibility. So right then, you can already learn to use the screen reader and use the accessibility tree in DevTools and stuff like that. So right off the bat you have a project and then, okay, what's next Like next?

Derek Wood: 13:47

maybe you want to put them in columns, or maybe you have some need for another type of responsive layout module or something. Or maybe the next thing you're going to explore is custom properties, because you really want to make that dark mode or whatever. So maybe you create ink and paper custom properties and then you're able to flip those based on some different things, so you can naturally start building up in whatever direction is interesting to you and just collecting these projects as you go and folding them back into your personal website. Because what's happening is people go through the projects. They make the Netflix clone, they make the superhero search engine, whatever the Udemy courses are and I respect those teachers and what they're doing, I've watched them all but the students usually try to get done with the course and then kind of put the feather in their cap of making the portfolio, which they often usually I find out after talking to people long enough that they just found it somewhere and grabbed it off GitHub. So to me, if you were building it the whole time and you were using it as this time capsule of practicing your version control and practicing branching off for features and even saving a history of oh well, this is what it was like one month in. This is what it was like two months in. You can go back and branch off of those various commits and things, but if you're folding that work back in the whole time, it will naturally create a portfolio of work. Maybe you get into CSS, maybe you freak out on SVG graphics or something. All you have to do is just know a little bit more about SVG graphics than someone else, which is real easy. And then there's a job that is specific in there and your portfolio can just show hundreds and hundreds of these things. You know, and there's lots of people who have done well in getting exposure.

Derek Wood: 15:46

And I don't know if this is really the story, but for me in my mind, like I saw Sarah Jasner making all these like wild code pens and stuff, and then I also simultaneously saw her speaking at conferences and you know I'm sure she did tons of work behind the scenes, but I think that just being going out there and making a bunch of cool stuff laser, panda things and talking about responsive SVGs and web stuff does start to help you find a niche in a natural way. But if everyone's trying to build the same weather app and tic-tac-toe game and whatever superhero search engine or Airbnb thing from the Udemy course, then you don't get that. You don't get that storyline because people are trying to finish that crud app instead of naturally exploring layer after layer after layer. They probably never had time or just the interest to say well, how do I make the most basic login I could ever make? Could I just save a password to the server? You know, just for fun, to make a page on my website that's hidden? Or do I have to install, like Next and Firebase and Prisma and TypeScript and all these things? No, so it's like they kind of jump over to the end of learning and then now they want to create this thing. That sort of shows them as an established developer, but what it shows them is sort of the opposite. They've made their page with React Nothing wrong with React.

Derek Wood: 17:23

I just don't think your personal website is the best use case for it, unless there's a ton of really interesting UI and you need to have like lots of state and updating things. Personally, I think it'd be nice to right click and view source of your website and be able to just see how it looks in there. Uh, or you know to have part of your website be static part of your website, be back in part of your website, be a client side, and you know, show that you've kind of explored that. Like, can you make a PHP form or go? You know whatever program, you know Python, whatever you're into. Ken, do you understand how to make a server-side form? Do you know how to progressively enhance a server-side form? Do you know how to handle a client-side only form? You know just kind of covering just kind of I don't know. I learned how to do this in elementary school but they just sort of made us take little steps Like do you fully understand this? Can you prove it? Can you show it to someone else? Do you fully? You know and move up a lot slower, and so these things will happen.

Derek Wood: 18:27

Naturally, you don't have to necessarily go out and write for CSS tricks or smashing or a list apart. You could start practicing writing for yourself. You could write for yourself on a sub stack. We definitely don't need more articles about how HTML works, how to make a div and how to make an H1. Maybe that's helpful to practice. But if you're going to do articles, you want to write about something interesting your angle. Why did you want to make this dark mode? Why did you want to make these different themes? What are some cool websites that you've seen that have different cool themes, things Like yeah. Anyway, I think that so that's like a natural progression could help you embed all of those things you're learning in your personal website and it will just naturally become a portfolio.

Derek Wood: 19:23

As it becomes bigger, you'll be forced to say, wow, there's too much things to fit on this page. I'm going to need another page. I'm going to need a list of links. I'm going to need some navigation. You know what? This doesn't fit on my homepage anymore. What am I going to do for small screens? I'm going to need to figure out some sort of interface where people can get to my things. Maybe I need to put some of these links in the footer. Maybe I need to have some subfolders. How am I going to make sure that these links and associated assets that are a level deeper are going to work? I mean, you're going to be forced to create yourself a little tiny framework of some sort. You're going to be forced to kind of figure out what is the root of this. Is there some way I can get the directory location? Is there some sort of mechanism in HTML to like reset the base URL?

Derek Wood: 20:23

You can learn all these things just one thing at a time, as necessary, and when you have multiple pages you run into these issues. When you have a single page, you don't. You kind of skip all the hard parts or interesting parts. You don't necessarily have any dynamic routing, so yeah, and you don't have many pages. So when you're learning HTML and CSS, you kind of make a page. It doesn't matter, everything's global.

Derek Wood: 20:50

But what if you have 100 projects? What if you have article pages? What if you have layout explorations or a collection of interesting forms, different ways to do forms, and then the forms have their own HTML and CSS, and then maybe you reuse those forms for other things, like even a contact form, even though that's kind of an anti-pattern. But all of these things then have to triangulate and work together. You're going to have to figure out some kind of global way to handle your typography, your type patterns. You know you're probably only going to have five, six, seven different sizes. So how do you do that so that the pages don't become all these one-off things? And then you'll start to notice. You know what I use. This chunk a lot. This is kind of maybe the before and after I use in my little project area, so I should make one of those, or I really want to embed a code pen in the middle of this like case study and writing case studies.

Derek Wood: 21:48

I think that in some ways, ux portfolios have the same pattern. They have their own pattern, because I review a lot of graphic design, ui, ux, type of product designer portfolios as well. They have their own problems with this kind of fake. Oh, what's your problem? Statement, what did you research? And it's just this picture of a million little sticky notes, totally meaningless. And then, oh, I upped the KPI by 20%. They have their own problem.

Derek Wood: 22:15

But how do you make this portfolio interesting? Like the point of it is to tell a story. What do you want? Who do you want to work for? What are you interested in? How do you fill that for them? If, like I was looking for, I was looking around, a company wanted somebody who knew about SVGs and accessibility. I just made them like an SVG with everything I knew about how to make it accessible, and I put in a code pen and I sent it to them. So sometimes you don't even need a portfolio. But if that was something I was interested in, I'd probably have a whole bunch of code pens, maybe a page with like 10 different code pens on it.

Derek Wood: 22:54

So I don't think that full stack application projects are always the right for everyone. I think it's important to kind of have a handle on what a full stack web application is. But you could pretty much do that with your personal site too. I mean, why can't you just make a journal and then have a little tiny connection to a JSON file and just have a little CRUD app that saves your daily journal through a form to that JSON file? I mean, you don't even need SQL, and then you can bump it up to SQL when you're feeling a little more confident. So anyway, I could just talk about that forever.

Derek Wood: 23:27

But I think that that's like the opposite of finding something off the shelf and plugging in your stuff, probably kind of breaking it all along the way, and then naturally building out all of these things as you explore. But I think a lot of the educational options out there don't really allow for that because they're a little more like watch what I do or follow this, and they don't have that personal connection to kind of mind you to practice, to get the repetition, to fold it back in. But most people aren't going to do that, I can tell you, I can tell anyone the exact portfolio that would get you hired. Like you know, cause I've shown it to people, I've shown it to employers I said, what if? What if I brought you somebody and they knew everything on this checklist, and they're like obviously I hired them. It's just, it's night and day when you see all of the stuff explored and all of this documented code and examples and things, and a site that feels nice and is consistent and shows that they're able to really handle many, many, many page dynamic linking, dynamic subpages, all of these things and to build this whole thing that works cohesively together. It's a lot different than oh, I shoved some thumbnails on a thing I found.

Derek Wood: 24:53

But also your website could be just a link to your contact and your five latest articles that you wrote. Maybe you're more about writing than the code. Or maybe it's just a page with your latest three code pens that you're really proud of. Or maybe it's a couple of case studies about just your process, like someone I'm working with right now is making this like wrestling aggregation news site, but you know they're not even making it yet. They're just writing articles about their research to start. So there's all sorts of angles.

Derek Wood: 25:27

I think that if you're looking to be a software engineer and you have a specific area that you think you want to work in, like optimizing databases or something. You should be exploring those things and showing lots of experience with that, because who am I going to hire to do that? Is somebody who's already been doing it and thinking about it and writing about it and showing examples of their explorations. Maybe they've found some cool tricks or maybe they've just compared some different techniques. Those are the people I would want to hire. But if everybody has the same portfolio, just slightly different CSS I don't know I don't think it's not going to work Then how are they going to judge you on anything it's?

Don Hansen: 26:11

not going to work, then how are they going to judge you on anything? Yeah, yeah, I appreciate your perspective. So I want to try to summarize a couple things and make sure that I fully understand and then link it with what I've seen. I I hate the question. So I, you know I used to host a lot of Q and A's. I hate the question when someone comes in and tells me or asked me, what do I need to build to impress a, an employer, what portfolio projects do I need to build? And it's a good question. But I hate why they're asking it. They're asking it because they want me to tell them the specific types of projects, the specific types of templates they need to build to impress employers.

Don Hansen: 26:57

And I think what is lost among many new developers and I call them cookie cutter developers they're just developers trying to create a bunch of templates to hopefully get hired, and that's it. There's no critical thought past that. It's, tell me, the easiest and quickest path to getting noticed by employers, to get hired. And they lose this sense of curiosity and wonder and enjoyment in coding and they lose a sense of exploration, of figuring out what they truly love building, because that's, that's what captures software engineers. That's that there are moments in just even your learning journey not necessarily even in your career where you're like, really like doing this thing. What do we really like doing this thing? Let's do more of it, let's explore this a bit more and whatever comes out of it I can showcase this, I can put it like this can become my portfolio projects. But there's a sense of exploration that is lost in many, many new developers and what you're describing is go through this process of like. You know you use this example of like, even if you just love writing. Start with that and see what it turns into, and you could build components of your portfolio like you can. And there are like kind of templated things that you could build that are going to reinforce your skills and show employers that you can do this stuff. But you know, if you love writing, what kind of like? Maybe you are building a CMS, maybe you are building something that is very unique to your articles and it just shows your evolution of like, what you're interested in, and it combines what you're with the action of actually writing it and being transparent and sharing your thoughts with the world. And then how does that, in a clean, beautiful way tie into your portfolio. Clean, beautiful way tie into your portfolio. You're almost like you look at this portfolio as this adventure and, like you said, the story and you just kind of keep adding to it where it makes sense.

Don Hansen: 28:58

As you continue to explore and you mentioned this idea of like one page applications limit you from really having to think about like content architecture and think about like okay, well, what pages do need to exist and when do I create these other pages? Or, more specifically, you're just like you were talking about the one page portfolio it. I do feel like people have that, they it. So I struggle with this. I mentioned so I wrote an entire blog post where I just link people to this, but I really struggle with trying to encourage people.

Don Hansen: 29:30

What the hell do you want to do?

Don Hansen: 29:32

Well, I don't know, didn't really build the right mindset of becoming this kind of like specialized developer that loves this certain thing, loves working with SVGs, loves working with animations, loves working with accessibility, or they just love database optimization.

Don Hansen: 29:59

It's like they they just went six to eight months just trying to learn this template and there's like no passion or interest, like there's nothing that makes them unique to bring onto a team that, like a lot of teams, want to hire someone that does bring unique, a unique perspective, because they care about this thing a lot more than everyone else on the team. That is a that is a really great opportunity to showcase why you stand out and why you should get hired. And you're right, a lot of these portfolios are just templates and they don't tell a story. They don't tell me anything about you. They don't tell me what you care about and where you started. Maybe you really sucked at this one thing that you are now incredibly passionate about. Like, let's see that progress. I would love that. That's freaking awesome. But I like this idea of kind of turning your portfolio into a story, and I mentioned this before. I think a lot of employers are just getting fatigued on portfolios because they're just these one page templates.

Derek Wood: 31:04

Yeah, well, on that note, don't send your portfolio to random places on the internet. I mean, probably nobody's going to see that. That's not how I would go about it too. So you think about the portfolio. I just don't even know what to call it. I hate, you know. Should we call it the personal website?

Derek Wood: 31:24

Your collection of work is more useful in other ways. It can be useful as a communication tool. You could create I think it was 37signals that has a blog post kind of showing all the people they hired and how personalized the applications were and things. And I just you know I know there's people out there saying I shouldn't have to be crazy obsessed with this. And you know I know there's people out there saying I shouldn't have to be crazy obsessed with this. And, and you know, ultra creative and I don't think everyone does. I'm just saying you have to. You have to play with what you have. Some people are going to be more creative, some people are going to have more quantity. Sometimes it's just quantity. Like if you have been working for three years, I can trust that you've seen a lot of stuff, but if everyone has the same kind of portfolio, you might be really great and this guy might be just completely scared to do anything when they get to work. So that just creates too much of a gamble. So whatever you need to do to make yourself feel established, make yourself feel that could be having less projects sometimes, because the projects are very like. Look at my toy thing I made.

Derek Wood: 32:35

Most web developers are talking about process. They're talking about, they're documenting what they're doing, they're working in public repos or something. There's all sorts of ways to show what you're doing without leaning on these little tiny projects. Maybe you actually have something in the app store, or maybe it's an unfinished project, but you have a timeline you want to share Anyway. So I guess what I was trying to say was I guess I forgot, I thought I had to, I thought I was onto something there. We were talking about the employers. Oh, I would say that your, your portfolio is just a great talking point.

Derek Wood: 33:18

When you're in the interview you can say check this out, check this out. I've done this, I've done this. You know older developers if they see that you've done some server side things and some progressive enhancement and you know how to, you know, possibly make some form validations. You haven't just only pieced everything together from pre-made options. They like that. So you can use it as a tour. You can tour them through the proof of your skills and the things and then you can use it to talk about everything. You can write case studies to prepare for that, to first of all get in the right mindset for thinking about how you were solving those problems in retrospect, but also then you can start to show oh, this was an interesting project.

Derek Wood: 33:59

It's sort of like what you guys are doing. I'm working with somebody who wants to work at maybe a language type company. They have a background in teaching and language so maybe they want to work at somewhere like Duolingo or something right. So if they're making some fun little code pens or little practices to learn some React or learn some Vue UI and they have a fun animation so that when you pick the right word for the question like what is this word or something they can say, look, I've been doing this. Or I thought this part of your site was really cool. Question like what is this word or something they can say, look, I've been doing this. Or I thought this part of your site was really cool, so I reworked it and kind of made it into my site for practice and put it into my layout, exploration collection or something like that, and you can reach out to those companies and you can say, hey, I really like that part of your thing. I've been working on some similar stuff. I'm you know, I'd love to know what you're looking for at your company. That could be to an individual person that could be.

Derek Wood: 34:58

You know a lot I think other parts of this are, and I took some notes on some other books as well but one of the people were saying he was kind of noting like that 5% of the companies are like these bang companies or big companies that a lot of people think they're going to go work at, but 95% of the companies are smaller companies. They're the guitar company that sells guitars. They're the company that made the website for this hard drive. They're the company that, whatever, makes these funny beakers. There's millions of companies out there. I mean I don't know if there's really millions, but there's a ton of companies out there and there's ways to get in touch with them and if you have this useful collection of work and story that you can kind of share around and show people in your local Slack, in your Discord, in your LinkedIn to be kind of posting these often, and you know I don't really like sucking up to people through social media, but this thing is like a machine for sharing your progress and I've heard so many stories on LinkedIn of people reaching out and saying, oh, I've been watching you, you didn't know anything, and now you know all this stuff. What's going on?

Derek Wood: 36:14

And if I see people posting about their work, I don't know. I just get the feeling like this person's an expert. They know what they're doing. They've spent a lot of time working with this. Maybe they're always talking about test-driven development. Maybe they're talking about they're exploring HTMX or something and I want to work on a new project. I'm going to say, oh, this person's been doing it for a while. I'm going to pull them in, either for consulting or to hire them or whatever it is. Just sharing and showing your interest will naturally kind of do those things.

Derek Wood: 36:42

But if you have a portfolio that isn't just this Hail Mary kind of hope, somebody looks at it, it just gives you a lot more to work with, a lot more for people to sink their teeth into and look through, and, hey, the whole site looks like a real site. When I click a page, everything doesn't shift, all weird, and it looks like a whole new CSS file got brought in and they don't seem to know the difference. Either this person has an eye for design or they have the knowledge that they don't, and they asked for some help from somebody else. Because even if your website's just black and white, one size font with just a little spacing, even if it's like code monospace font, it can look really nice. It's just about some common sense and I think what people are looking for is going to depend on the job.

Derek Wood: 37:31

But if you had to just go right down the middle, if you're someone who doesn't know what they want to do in web development, well, you should know some typography, you should know how to use custom properties, you should know how to kind of plan out a site that doesn't fall apart anytime you add something to it. You should, you know, have a little sense of some visual ideas, enough to talk to visual designers. You know, maybe have a little tiny experience with Figma, just so you can kind of know what those other people are working with and how it would translate. You know, why not have a project where you just this is a project I tell people to do a lot is go find an e-commerce product card that you like, that you think is cool. You know something with multiple colors and maybe a price. Maybe sometimes they're sold out or something. Take that, draw it out on paper. Okay, well, depends who you are.

Derek Wood: 38:24

Maybe the next thing to do is just write the HTML. But maybe you go make it in Figma, copy it perfectly in Figma, make a component out of it, name all the layers. It's pretty much like HTML now that they have auto layout, like there's no reason why you shouldn't you know, know a little bit of Figma, I guess, at this point. And so then you make the drawing, you make the Figma and then you make the live code. The live code could be static and then you could use React to make the buttons work, maybe change the colors Right there. That to me, would say, oh, this person knows what I need them to do at work. I need them to be able to take what the visual designers do and I need them to transfer it into reusable components that are part of a bigger system, that we can test and that aren't going to add to tech debt. If you can't do that, you're not hireable, and the problem with this website pattern is it doesn't show that you know anything about dynamic routing. It doesn't show that you know how to necessarily choose the right tool for the job.

Derek Wood: 39:27

React is maybe if you're using Next or something, but I mean React. Arguably we can say that Google's going to crawl it anyway, but I think that you should be using something that's probably server-side, just for fun to have. You can make other React projects, like try to get a project sort of in each. Maybe you make one project in PHP, maybe you make one in Laravel, maybe you make one in React or Next or something. You know they can have a few different things, but having the one main project that's all connected forces you to really come to terms with these problems that frameworks solve. Like why would we even need a framework if you can make mostly everything with very minimal PHP? Well, there is a point where you get to a point where you'll start to notice man.

Derek Wood: 40:15

This is a problem. I have to create this function to handle this and those functions will add up in some sort of functions file and that's what a framework becomes. So being able to tell that story. So the classic thing is you don't know how to make links to other pages, or at least I'm not sure. If you do Technically, you have this weird logo, the links. There's no accessibility taken into account. I mean, it's right there, I can right click it. I can't see the source, but I can see the representation of the DOM in the dev tools.

Derek Wood: 40:51

And if I see that you're using H1s five times on your page because you have certain fonts that are bigger and you've tied your font size to your H1s, you basically don't know the first day of HTML. So if you're out there and you're one of these people and I know you've talked to them where they're saying I've spent out 400, I've sent out 500, I've sent out 2,000 resumes, well, usually the resume sucks. Then usually, if they do get to your portfolio, it's basically just full of red flags. Don't know HTML, don't know CSS, have an overinflated sense of how much you know. You think you know 90% of HTML. I know like 30% of HTML and I'm like an expert, so those charts are silly. They're confusing at best. Just because you've used TypeScript for like two weeks doesn't mean you need a logo about it on your website. There's no point in having all those logos. They just say I'm a fresh grad who was told to make this thing, I'm new. They're like I'm new, I don't know what to do. Will anyone hire me? Is that the story you want to tell? I don't think anybody really wants to tell that story. I don't think anybody really wants to tell that story. But even when I sit with people and explain this to them, I've even gone to the extent a couple times of helping somebody rebuild their entire website and then they didn't even use it, like they just left the React one and yeah, I don't know.

Derek Wood: 42:27

And so then you have the contact form. You want to have a receipt of your emails to people. The contact form. Sometimes they don't work. They might say sent, but it's not the same as just give them an email address, unless your contact form is some type of really fun thing where you push a button and it turns into a rocket and it flies away and you're really trying to show off your user interface skills and something really special. Don't Don't do it. Just give them your email address, because then they can see if they sent it to you Later, they might find you. They might be like who is that guy? He never got back to me. I wanted to hire him. They don't have a receipt of it or anything. I mean, I guess you could write an article about this, why the contact form is problematic, how you could fix it. Could you then send them an email with a receipt? Yeah, probably A lot of transactional emails do those sorts of things, but could you make it for yourself?

Derek Wood: 43:29

You know, could you explain that? I mean, you could make a portfolio just with like 30 different headers, and that would be weird enough that you would stand out and they'd be like wow, this guy knows all about Flexbox and these weird fold up different mobile header patterns. Like just if you just do anything enough patterns, like just if you just do anything enough, it will add up. And so I I always thought I was leaning towards quality, but I started realizing that people get too, um, just too finicky and too perfectionist about it. So I started trying to get people just to do more quantity. So, whatever that might be. We started doing like a 30-day challenge. Even if you're terrible with the graphics program, who cares? Draw a square, that can be whatever it is. Do one graphic a day, maybe use the pen tool if that's what you're interested, whatever it is, so the quantity can really help. And then when we were learning HTML and CSS and responsive layouts, we kind of create this thing that we sort of call internally the layout garden, but all it is is a collection of layouts.

Derek Wood: 44:39

You can see on Jen Simmons she has grid land or layout land. You can see that she has this really awesome collection of all sorts of early grid exercises Because she's fighting the good fight to get grid and all those things in place for like a decade now and so she's being the feedback. She's helping, you know, the W3C she's works at like Apple now, at Safari and stuff. But all these years she's been saying how could we use grid, how you know what are all the cool things we could do with grid, how can we prove that this is useful and actually get the browsers to implement it and how can we find the edge cases and how can we inspire people to start using Like that story that she's telling.

Derek Wood: 45:21

I mean, obviously she's epic and has a whole career and everything to back all this stuff up. But I'm saying the bar is pretty low if you want to be epic, because most people aren't. So if you just start building things I mean, even with grid, there's so many things to explore. Like the people who made it tried to make it so it could do everything in the world, but hardly anyone knows how to actually use it or, like, actually do interesting graphic design things. So anything you can explore and collect and get just repetition with. If you make a hundred unique responsive layouts, no matter how dead simple they are, can't think of one. How about paragraph? You know, there you go. Paragraph.

Don Hansen: 46:02

That's all. It is A section with a paragraph in it.

Derek Wood: 46:05

All right, what's up next? Heading with paragraph All right, well, now you're going to have to think about how you're going to space those. All right, what's up next? Small little block of text for a small piece of article or figure, if you keep creating these things. But what people do is they just follow through with the course and then they get to the end and then they have this kind of weird next app that they barely understand and then it kind of dies on the vine and you see that it's a year old in their GitHub and they have this ugly thumbnail on the website and they have a link straight to it. No story about it, nothing about what they learned.

Derek Wood: 46:39

So I mean, each of these sections have a major problem. Like the header is a problem. The welcome area is usually not doing its job, although you do kind of have to have like a laser focus positioning statement, as like John Stark calls it. You can, like you need to tell them what you want. Like your elevator pitch a little bit right. Like I want to work at a company in gaming, and this is what these are my gaming explorations that I do, and I would say, if you're a front end developer, specifically, you should have something fun to interact with on that page, because if a recruiter is like, oh, what's this person doing? There's a slider or a button or something. They're like, oh, this is an interface, I'm using it. I have now confirmed this person knows how to build interfaces. You know the psychology here.

Derek Wood: 47:25

And then you don't need the list of technologies. You can put those in some sort of article or case study explaining why you chose them. That would be good. Then that would actually have some sort of context. You don't need a weird chart of what you think you're good at. It doesn't make any sense. However, if you really like bar graphs, please make up a weird bar graph and make it all animated and cool, but don't do it having to do with your skill levels with various technologies. And then the problem with the list most of the graphic design type of people I talk to about this stuff, like they still want you to put like a list of thumbnails so you can do that if you want. But I also just think a list of nice typography and the and you know the names of the projects and and what they are, or the names of the articles, like you can just say, like my latest, my latest work, and have three little links, you know, like link to one article you publish somewhere, link to one code pen, link to one case study, like that's really you can probably get away with that. Like less is more, if your stuff isn't very good, you don't need. You don't need to put like a weird weather app up there that you did a year ago that shows your skills of a year ago.

Derek Wood: 48:38

If you're going to do that, go back in and update it with all the new CSS you've had or something, and just like on a specific level, you need to have a cohesive visual language on your website and the problem with thumbnails is just an inherent problem. It's not really anyone's fault, but when you take a picture of a website and then you put it on another website, you now have conflicting typography, you have conflicting colors, so the type clashes, the colors clash. You know, have a friend of yours make an abstract little graphic for you that's the same colors as your website but kind of represents what you're doing. You know, put a snowflake on there for a weather app or something, but the actual thumbnail of the project needs to be doctored up in a way that still gets its point across and helps them. When they click that thumbnail and they come to the next page, they have that visual language repeated, so they know that they're in the right place.

Derek Wood: 49:32

And then you can start showing some of your process and some uglier thumbnails or something. But you could make them black and white, you could put a dark shadow over them and there's lots of ways to treat them. But then the padding on them has to be the same. If you're a front-end developer and someone's looking to hire you, they need to know that you understand that one thumbnail has 30 pixels of padding and one has 10. They don't look the same. One thumbnail has 30 pixels of padding and one has 10. They don't look the same. It's just this pattern. All it does is like show all the things that you don't know and well, that's what's happening, that's what's going to happen.

Derek Wood: 50:17

And I used to think well, I don't want to tell everyone the secret, but at this point people who don't want to better themselves won't anyway, so they're just going to stick with what they got and just hope that something around them will change. But people who maybe didn't think about it this way might start to reconsider, might kind of tear things down and think them back up. What is your storyline? Who do you want to work for? What would they need to see to know that you're the right person? And yeah, I think you do need to kind of choose companies specifically that you want to work with.

Derek Wood: 50:49

99% of the people I talk to say I'll do anything. I just want to be a developer and I'm like, well, what could I pay you to do for me today? What can I pay you $25 an hour for whatever? Whatever it is I mean, there's lots of things I'd pay people $200 an hour for it Cause I don't know how to do it or I do it slowly. But what can you do for me? What can you take off my plate that I can trust you can do, at least at a junior level and a lot of people have think that level's lower than it is. But I need you to be able to look at something and recreate it to some level of fidelity that's reasonable. I can't come back in and then go through and reread all your code and everything and stuff like that. I mean, of course, like if you're a teachable, I would just help you and the next time you would do better.

Derek Wood: 51:38

But, yeah, you just have to think about where you're going, what you want to do and, like, think of your portfolio as a design, just like when you design a function. Is it doing its job? Can you test it? Is it pure? Is it, does it have side effects? Is putting this project there possibly going to give people a bad feeling? If so, get rid of it. This is all about designing a system that does a job. So, is your portfolio doing its job? Do you even know what its job is? Can you measure its outcome? Like I would want somebody what do you and I this is another thing I tell people to do create like a style guide page or in a goals page to maybe even just get clear on what your goals are. If you're embarrassed to have them public, okay, you can hide them, but like, probably shouldn't be that embarrassed of your goals, maybe like six months, five years, 10 years, like what are your longer career trajectory here, because a lot of people want to get their first job, but you know, maybe you want to get a first job at a place that is going to be helpful to teach you and learn from, so you can that has like some goals there, but specifically the style guide page. What emotions do you want people to feel at your site? What, what is your visual language going for? Because it's it's.

Derek Wood: 52:56

You know, a lot of web developers haven't had a lot of experience with graphic design. I mean, I had to kind of relearn it or learn it as I went. It took a long time and it was all backwards. But now that I'm kind of in that mindset, you know, why do you choose a font? Why do you choose a color? It's hard when you just think, oh, I got to be creative and there's these smart graphic designers and they know everything and I'm just a developer.

Derek Wood: 53:20

But, like, break it down into something a little more simple. Is it readable? Because, like that's, I think we can all say that's fair and that's the first level of accessibility. Is it readable? Can you see, are things grouped in a way that I can bounce around and get choices to look at? Do you? Are you going for like an oldie look? Do you want it to look more handwritten? Do you want it to look futuristic, like a spaceship?

Derek Wood: 53:45

You can choose fonts and colors and all these things, but you have to establish what you're going for, and it might seem silly to say like I want to appear as a working web developer with experience with responsive layouts to some sort of expert level, or somebody who's ready to work on a design team, design a systems team, or somebody. I want to be the person who can come in at junior level and learn a ton about databases. I mean, I'm running out of examples all the time, but is your website doing that? Because if you don't write down what you think it's what you want it to do, it's going to be really hard to make any decisions or to measure whether or not it's happening. So you know, along with maybe you're like different typography and colors, on your style guide page you could just just say, like what you're going for, try your best to explain what that is. Then you could show it to your friends and show it to other people and say what do you think about when you come to this website?

Derek Wood: 54:46

What are your first impressions? How established would you say this person is? What is their expertise? What do you think somebody would hire them for? How many years of experience do you think they've had Things like that? I mean, you can test these things and there's tons of graphic designers out there who are willing to help you kind of work on some things together, do some trades, write an article together, go on a podcast, those sorts of things. So I think that's another angle, but I don't know. Just try something in that realm and with the repetition, stuff will happen. I'm kind of aiming for, like how can I enter the industry as an expert? But that might be unreasonable for most people, but I figure it's a good thing to shoot for, and then you land where you land and you naturally move from there there.

Don Hansen: 55:44

I like it. Um, I don't think I'm going to respond much to that. To be honest, I kind of want people to. Um, I want to hear what people think of that. Um, it's very, very thorough, but I think your perspective is really interesting and I want to hear what people think about it. Versus me, um, yeah, really responding to it, but I do have one question question why did you choose a beaker to drink out?

Derek Wood: 56:04

of oh um. Well, I actually got a beaker for halloween one year to put some like fizzy alcoholic beverage in here and just look like a mad scientist. However, it was around and now that I have it here, I do recommend it to people on their desk because it doesn't fall over. It's like one of those punching bags with the clown. Um, you know, I mean, I believe that's probably why they're made this way, but if you do have water on your desk or something, the beaker is great. I mean, I'm like punching it, it won't fall over, so won't get on your and also, people think it's pretty funny.

Don Hansen: 56:44

I think I'm going to steal that idea. I appreciate that. I think it'll be fun.

Derek Wood: 56:50

I was trying to drink. You know they say, if you like I weigh probably like 200 pounds right now or something and you say, if you like, half that and you, then you're supposed to drink that many liters or ounces or something. So for a while I was trying to drink two or three of these and the measuring kind of helped okay but there, I can see that all right.

Don Hansen: 57:12

Well, this is essentially the death of the old portfolio that 95 of people have, and if you want to stand out, um, I really want to hear what you thought of Derek's perspective on this. I do, um, so I'm going to leave it there. Derek, I really appreciate you coming on and sharing this. Um, if people want to reach out to you and connect with you, where could they do that?

Derek Wood: 57:35

Uh, you can visit my website. Sheriff Derek dot consulting and um, that's where it has information about me.

Don Hansen: 57:43

Awesome, all right, well, let us know what you thought in the comments. I definitely want to hear it, but, derek, thank you so much for coming on, yep.

Derek Wood: 57:51

Always a pleasure.