Junior Web Developer's Portfolio Reviewed By A Senior Silicon Valley Software Engineer.

so there's a lot of portfolio review videos out there that I've seen but most of them are actually from the perspective of a real hiring manager so what I've done this week is I've reached out to a guy called Syd past who runs a channel called DevOps directive now sit actually used to be a hiring manager in Silicon Valley so he's really well placed to tell me if my portfolio is gonna have the stuff required to get a job and hopefully you guys can look at this and see where your portfolio might need to improve as well I'd really love it if he checks his channel out he actually recently got the algo expert guy Clairmont comment on one of his videos so you know his content stopped here and yeah love if you guys went over there gave him a like a subscribe a comment just show him some love generally because he did a really excellent job of breaking down this portfolio problem and actually at the end of the video he gives us a really interesting insight to how much time a hiring manager has to look at these applications while some red flags that make him completely nope out of an application and what are some really impressive projects that you could potentially add to your portfolio so yeah I hope you enjoy the video if you do please do leave a like I mean certainly in the comment section down below to answer any animal for questions Syd what can a new bling like myself to get some of that sweet sweet salary that we just looked at okay what can we improve upon yeah I think I think the first thing is to think about who the audience for building out your portfolio really is and there's there's kind of two audiences I think that you should have in mind the first of which is that recruiter or HR manager who's gonna be the first one to look at it and mostly with that they're acting kind of as a gatekeeper you want to make sure that they see something that looks clean looks somewhat flashy maybe and they is gonna convince them that it's worthwhile to forward your your portfolio or your your resume along to the hiring manager who's going to do a little bit more of a deep dive I think the second audience that you're gonna try to be focused on and this one's actually the more important one I think making it past that first bar is a little easier this is gonna be hiring manager and they're really looking for three things within your portfolio one they want to know whether or not you can do the job if you could do the job great that that's sort of the technical bar that you need to meet the second one is are you going to be a good team member this is a little tougher to showcase within a fork you're really gonna pass this bar within discussions either a phone screen upfront or maybe like a culture fit in or interview when you get to the on-site stage and then the third one which is especially important at the junior level roles is how quickly you're going to be able to learn and progress and advance your technology skills to be able to make an impact that kind of feeds right back into that first bullet of whether or not you can do the job or not so for the next section of the video I wanted to just pull up Tom's portfolio website so we've got it here Thomas Jackson comm check it out you can see just already that it's built with Gatsby based on the favicon icon up here and I'm just gonna walk through the different projects and sort of highlight which aspects I think he really did well at and which aspects there's there's opportunity for improvement and I'm gonna start here actually just with the portfolio itself he didn't highlight this as a project but I think he potentially could have right we've built out this site with Gatsby I had to go I went and saw that he is using contentful as the backend and querying it to import these projects I think that interaction and sort of being able to utilize an external service like that and dig into the Gatsby documentation is an interesting aspect of this portfolio I think overall the design is clean we've got an about page a contact page for projects and so yeah I think I think overall we can tell hey he's he's put in an effort it looks clean he can certainly build websites he's he's built five from the look of it we've got five here plus the portfolio itself I'm sure there's more in the background but let's dive in on this first one so this is a this is a it looks like a website that he built as a part of a an interview process so it says his website I built for a code test I was given so presumably he was given some design and he was mimicking that design in the form of a website you know it's given like an a4 sheet of paper I printed out this very very professional south nice nice nice and so what with a with a test like that obviously my first impression here is that it's relatively small in scope because of that small scope it it may or may not as you progress it may or may not find a place within your portfolio right you may decide hey as I build more complex things I might yonk this one out and put in something that showcases a little more skills this does showcase hey you're able to use a framework like materialize in terms of the styling I see that you use sass so then if I were to go in and click the github link here what do I get so this is one theme that I'm probably going to hit on throughout is that when I go to the git repo right now I can see nothing right if we can just add a readme file to this top level we can highlight hey here the technologies I used here's how long it took me here's what I learned want to make it abundantly clear to the interviewer what the site is doing what skills it's showcasing so that I don't have to go dig in and say okay let me go look at his edit styles and see how he's using how he's using s CSS like I want I wanted to be super clear within ten seconds of looking at the repo what what's going on I think the portfolio you want to highlight the projects themselves and so ideally you'll have a live version a link they can click and see the project if that's not possible for whatever reason then having either screenshots or a video I think you used on this job scrape one is better than static images so yeah I think live sites the best if you can't have that have some sort of video or gif jiff however you say that showing the interactions and and sort of how you would you would interact with the site and then the fallback would just be a static image I think the technical details and sort of what the project is showcasing maybe having a sentence on the portfolio but then having a readme that makes it very clear on the github that's the best place for that so well has some good cheap hosting options that you might expect to host these projects are yeah for sure so if your site is only front-end I think github pages is an awesome option you can put your site in a github and it actually automatically updates and publishes the site of net liffe i is another good option if you then start to need a full-stack application so you're thinking front end and back end my co2 is just going to Google Cloud they have a free tier that includes one F one micro instance so that is a very small virtual machine that has like point two virtual CPU and 600 megabytes of RAM but you can run one for free all the time and so then you have a VM that you can do whatever you want with and you can run a real back-end if you want so yeah that that's kind of a quick look at his first project this materialized website I think ways to level up this this project if we want to keep it in the portfolio are going to be to add a readme to make it super clear what's going on what technologies are used and what skills they showcase and then also like we said use one of those free hosting options either github pages or netwo fie to make this site a live website that they can click the image and actually see the website versus just taking them to the github ok so let's take a look at the second project here in the portfolio title react website I think one one thing right off the bat is that making these themed for a specific purpose of yes this is react website but can we make it more niche or more specific to jump out to jump out at us might be one interesting tweak in this case we actually do see a live link to the website itself we can see it's hosted with github pages that's great we've got multiple pages here presumably using react router so that yeah cool so that that shows that he not only sort of put together a quick one-off but actually dope into the documentation and figured out how to how to deal with multiple pages within a react application the fact that it's using react and that is a an in-demand skill set is is is really the key here and showcasing hey I'm using not only react but I'm actually using some of the newer features like hooks I think within the github readme maybe you could highlight what you're using those hooks for how you found them to be but as you learn them versus some of the older techniques for handling the same type of thing I think might be an interesting thing to include okay so the third project that tom has here on his portfolio is job scrape so a web app that scrapes Google for jobs using puppeteer Express node and vanilla JavaScript so we've got a number of interesting technologies here I think that is that is good so two showcasing that he can take a piece of software go read the documentation and turn it into something that actually works if I click it where I go I go to the github ok it looks like we don't have a live site for this one but we do have a demo video so I'm going to open that up see what we got this is my best videography okaywe're screen recording he starts the server got those site running on localhost here elite hacking skills right here Manchester react boom and so this is using puppeteer to open up a Chrome browser so that one we saw sort of he was running the server it initiated puppeteer to go off and search he grabbed those jobs and then brought them back and displayed them on his page I think sort of incorporating those interesting external libraries like puppeteer like Express that's great and and showcases an interesting aspect one thing that I think he could have done is display do something interesting once with the data once he got it back right he he searched for the the job listings he got them and then he displayed them if we had done maybe even just a little bit of like analysis on them to say okay here the number of times that the word react was mentioned in the text sort of showcasing a value add on top of just taking the data from one place and putting it in another place I think would be one interesting thing to do again I feel like I'm I'm beating a dead horse here with the readme but just if we go here we want to see here here the interactions that this project took we we use puppeteer it loads Chrome we hit the API we get the data back we display it with XY and Z so I think sort of that would be one way to level it up if we could if we could have a live version that would be great this one I understand why you didn't because you've got the server-side doing real things yeah so it's a little tougher to sort of have running live you could put that on a VM within Google cloud or whatever cloud provider you wanted but it is certainly tougher to do that for something a project like this so this is something we've been talking about this week isn't it and you mentioned to me there's some of the more impressive projects that you've seen as a hiring manager ones they're kind of more full-stack projects do you might just like running as quickly through like what some of those cooler full-stack projects that you seen yeah I think whenever you can incorporate aspects of an application that are going to be found within the application that the job you're applying for has so that's going to be things like a real database on the backend user accounts and authentication and security more complex front-end interactions where you have a multi-step flow where like let's say it's a checkout flow where a user needs to put in some information about shipping and then some information about billing and sort of showcasing real ux flows and those interactions between the front and the back end or really are really impressive from a portfolio perspective awesome so you say you were a beginner again what kind of tech stack would you use to implement like a really simple full stack project what do you think is kind of like the lowest hanging fruit therefore full stack project honestly I think firebase might be the way to go firebase is a Google product they've made it very easy to do some pretty impressive things in terms of you don't have to implement all the authentication code yourself you can use their plug-in and then authenticate via Google their database they provide a no sequel database that actually I think is just charge per read and per write as well as storage amount so there's no or either minimal or no cost to sort of having it there in perpetuity and so something like that building out just a simple business web application with user accounts a real back-end and an interesting user experience I think would be really really impressive okay so we talked about a few things that could take this project to the next level there's one thing that I haven't yet it could be an option if we can't have a live hosted version of the site and that would be to add some scripts or like a make file to the github repo and instructions such that the viewer could instantiate it on their own system and see it working they're probably not going to but even just having instructions of hey if you wanted to run this you would run the run job scrape script runs great SH or dot bat whatever system you're on ok great so the final project we've got on this portfolio is this react asteroid app it's an application opening to click that just yet it's an application that tracks the number of asteroids near Earth using NASA's API react again that's great popular front-end framework and an external API so that's another another good sign is being able to authenticate and make a query to an external API and then consume that data because you're gonna be doing that all the time when you're building these websites not everything's gonna come from your own database oftentimes you're going to be pulling things in from from external sources like this so I'm going to open this in a new tab and see what we're working with here 18 asteroids last week also 2.0 what was was there it was there at one point oh it's just a bad joke maybe maybe increment it let's make it three you know turn it up to eleven okay so the my first impression here is that it reminds me quite a bit of sort of the traditional tutorial that everybody does when they first start learning react which is the to-do list right you can you can add a top item you can delete it to-do item it looks like you've you've implemented a little bit on top of that though we've at least changed the theme we've we've moved from two news to asteroids so that's good we're pulling in data from an external source and we have some interactivity here so I can I can delete it looks like I can delete I can add a new one yeah you definitely hit the nail on the head with its to do list application I think for this one what I did was I just did that ninjas to do missed up and then I was like what can I add on top of this to show where they'll be of extra value so it's definitely a learning process for me nice yes I really like the fact that this is showing a little bit more advanced react interactivity we've deletion and edit and adding functionality there are a few things that I'll point out that makes this a little bit of a funny choice in terms of the UX right so if we think about if we just think about the concept of what this application is doing it's providing us with a list of the asteroids in the last week for us to be able to then edit that list either we think NASA made a mistake and we know better or I guess I can't even think of another use case right so oh they named it wrong so that that interaction just doesn't really make all that much sense from a UX perspective or like deleting one like oh did NASA did NASA mess up and they added an asteroid that's really a comet or something like that so I think that is just sort of a UX if I go in here I think does this make sense from a business perspective that is missing but what could we do here instead of editing the name maybe we can add additional details so like we could say oh this can this asteroid or notes or something passed on Tuesday and something like that would just make more sense in the context of the overall application the other thing that I noticed is that refresh in the page makes all of our edits go away and so that's just another sort of UX thing that doesn't make sense and so I think just sort of thinking through what are the interactions that would make sense for this context and how do i implement them so that they're they're super clean had adding localstorage like you said as your last point it's actually relatively easy stairs now yeah local store to be good if you wanted to highlight a back end you could and wanted to take this project to the next level one idea that I had would be everyday query the the NASA API take those results and store them off in your own database so let's store them off in firebase or whatever and that would enable some interesting interactions like being able to filter and so ok don't just show me the last two weeks show me the last five months or show me specifically last Tuesday we could we could implement that functionality without a database as well right we could have a dynamic query that when we populate and say show me last two eh then it goes off API so I think that would that would potentially take it to the next level let's jump into the github for this one and for the fourth time I'll get to say add a readme the other thing that it's it's not a red flag but I notice here is that it's a single commit so to me that says I did all my work locally got it all cleaned up then pushed it right that's not how people generally use git in a professional setting you think about hey I'm gonna implement one distinct feature implement get that working so maybe for this one it's like for our initial commit we probably just run create react app we get that baseline we commit that then maybe it's okay let's add just the the astroid component the the one display component and then once we get that working we commit that and then we say okay let's add the asteroid list component once we get that working we commit that and so just seeing like here is the distinct code chunks along the way and I'm guilty of this as well on personal projects my might get history is a mess but just seeing a little bit more granularity and detail in the git history is one is another way to just sort of showcase to a hiring manager your maturity within the software engineering process great so as I talked about this one I highlighted a few ways that we could take this one to the next level we can add a readme we can clean up some of those user experience interactions that we talked about in terms of making them so they make a little more sense in the context of this application and then I think the really nice one would be that interactive piece of either being able to select a date or a date range and then make that query on the fly and/or persist that data to a database to showcase sort of more full stack more full stack capabilities we've also have an about page and a contact page on this portfolio site itself this looks like about the right length for an about page I can read it in 30 seconds see what he's what he's interested in I think including this piece about wanting to work on mobile applications and computer vision and natural language processing is good I think maybe if you were to choose your next portfolio project incorporating some even just a small element of any one of these three so either make it a mobile app have a compute vision element or an LP just two it might be a good way to sort of not just say that you're interested in these but hey here's something I'm doing to progress towards that end goal I think would be one good opportunity yeah there's also a contact page so we've got all the the details here to contact simple direct we can use this form presumably this will just send you an email so this is actually another five form so we're super easy to set up I basically did no coding to do this so yeah I'd recommend if you have a project like this guys hosting with that the fine you can just use the other five forms can you gives you a cheater way to get the back end without having to have a real back-end right like I said so I think we've firmly established that I'm not gonna get through Silicon Valley job I'm not gonna be stuck on a hundred eighty thousand and I'm really disappointed about that but I thought it'd be cool if you just ran me through what are some red flags or portfolios what's my amazing portfolios you've seen and what's the process of a hiring manager when you're looking at this kind of thing like how much time have you got for each portfolio how many of these things you looking at day and what's your full process when you're looking at them yeah exactly I would try to batch resume review and and portfolio review so you can't if you do it throughout the day there's too much context switching so you you sit down you see all the applications that have come in and you might try to run through I don't know fifteen of these things in one setting and so with that mass of inbound you really have to prioritize how you review them and so it's very much a first impression game if you a lot of a lot of things you look at it and immediately you say okay this just doesn't meet the bar and then no and then there's there's a handful maybe twenty percent that you see it and that thirty second glance you pass the bar and say okay this is this has got a clean UI these projects look reasonably impressive let me go dig in and see are some of these sound and next level things for example if I click into github can I see their code is laid out in a reasonable manner do they have a readme that has some of those aspects around automation or or setup instructions that are super clean are there more than just a front-end piece do they have the full stack built out and so those projects I might give I don't know two minutes each I mean like within a few minutes you can tell like if you're clicking around on a live site you can play with the interactions very quickly if you're looking at the code then it's probably more of a 10-minute endeavor to actually go in and see what's going on and yeah within within 2 to 10 minutes you can generally tell hey is this someone that I want to hop on the phone with for that next next phone screen or technical screen or whatever the next step is in the hiring process yeah that definitely really resonates with my experience they were like in the early stages there were just a lot a lot of noes and then you make something that's possible and all of a sudden you start getting that initial interest from the technical recruiter and then that next step as well I think it's also a game of quality over quantity having 10 simple tutorial applications doesn't get you anywhere having one really impressive project and then maybe a couple of filler projects if you don't have a full suite of awesome web apps to show but having one really standout project I think can really meet that that bar as I'm looking at a portfolio at least awesome so well some really awesome standout projects that you've seen in the past I think anything that incorporates a visually interesting front-end is good so I think I've seen things like algorithm visualizer so I think sorting algorithms or path finding algorithms and showcasing what's going on internal to those algorithms as they execute can be really visually interesting as well also projects that solve or attempt to solve a real business problem so let's build a clone of patreon let's build a clone of picker pick your favorite site implement a full-stack app that has a front-end back-end does user authentication interacts with external api's that sounds like a lot but with the tooling available these days it's it's actually not too hard to start to pull something like that together and make it look make it look passable awesome and what makes is just nope out on a portfolio after that initial 30 seconds I think the portfolio design itself if it's just completely ugly you might just know pout and not even look at the projects I think having 10 super simple small scope projects would be another one like be selective in which projects are making it making meeting the threshold to even put in the portfolio yes you want to have more than one but you want them all to be above a certain threshold equality so that you can show this is this is the quality of work that I put out and this is what you can expect if you're if you're going to hire me okay guys thank you very much for watching the video and if you'd like to check out suits channel I will leave a link in the description and there should be a video popping up now he actually got a claim on the algo expert guy that you might have seen in his billions of ads to comment on his most recent video so it's really good quality content I recommend you go ahead and watch that yeah and I think we'll both be in the comments section below when we said so you have any questions please do just leave them in the comment section below and yeah give us a like it'd be nice see ya alright come on over to my channel leave a comment telling me that you came from came from Tom's Channel that'd be great

Channel: Code Creative

Views: 23,419

Rating: 4.975976 out of 5

Keywords: portfolio review web dev, junior developer resume, web developer portfolio review

Id: 3W3QbpZlB7M

Length: 25min 33sec (1533 seconds)

Published: Sun Jun 28 2020