Annie Liew: [00:00:00] Okay, so let’s get started. Hi everyone. My name is Annie and this Amara gave me a perfect segue into today’s. Talk on building an effective front end portfolio. So for those who don’t know me, my name is Annie. I’m just gonna go through an intro very quickly and talk about what we’re gonna cover. So my name is Annie.

I’m often known as Bon Benny online. I wasn’t always a developer. Actually. I actually have a bachelor of arts in multimedia design, and I worked as a designer. In Australian England for several years before I decided to become a poor English teacher now, so that wasn’t paying the bills. So I made the transition into engineering and as Jen said, I graduated in summer of 2019.

I’m currently in my second role at a startup as the front end engineering lead [00:01:00] in Toronto. So why am I here today? And what am I speaking to you about this? So I’ve been building portfolios for a little while. My first portfolios were physical art portfolios. I used to carry my artwork in presentation photos like this one, and I’d bring them to my art and design interviews.

These are some of the examples of tradit traditional medium work I did around that time, which would’ve been similar to the things that would’ve gone into. When I decided to get into design, not art, cuz no money in art. My portfolio became digital, but CD rom digital. So here’s a screen from my very first, from my interactive CD rom graduation portfolio.

And here’s a selection of digital interactive experiences and experimented experiments. I created around this time. The bottom one I’m particularly proud of it’s a rotoscope animation. So that was really fun to work on. [00:02:00] And anyway from these early portfolios, my, the work finally moved online into the various iterations of the websites that we see today.

So I built this very first one in notepad, and it was just HTML and CSS. When I moved to Canada from Japan, my second. Portfolio was a WordPress site. And cuz I thought I needed ACMs it’s based on a paid theme called code and I heavily customized it with my very poor CSR skills at the time.

And the latest version of my portfolio, which is my current one is one that I completed three years ago now, like time flies and this was my final bootcamp project. I designed and coded it in a week from scratch. And again, this is mostly just H and CSS, but it does have a little JavaScript this time and I built it in vs.

Code with version control. So I’m sharing all these with you to give you a brief [00:03:00] background of my experience building portfolios over the years, and this talk will cover some of the takeaways that I’ve learned during these different iterations. So after this session, my aim for you is that you know exactly what a portfolio is and the benefits of having one.

We’re gonna talk about how to get started and what to include. I’m gonna give you some practical tips. I’m gonna share lots and lots of examples, and hopefully you walk away with some solid, actionable steps. But most of all, I just really hope that you be inspired and have a lot of fun. So let’s get started.

And let me open this section up with a question. How do we convey what we about our worth and our value to complete strangers on the. So what is the portfolio? And do we actually need one? We’re not talking about stock or real estate portfolios here. A work [00:04:00] portfolio is a compilation of the materials that exemplifies things like your personality, your skills, your interests, qualifications, and even education.

And it provides insight into who you are, your work ethic and demonstrates the scope and quality of your experiences and abilities. So for writers, a portfolio, maybe a collection of articles and stories for photographers gallery of photographs for designers, or be the branding, the logo, the designs, and for today’s workshop, we’re specifically talking about developer portfolio.

now let’s talk about the two big reasons that people have portfolios. First one, surprise to get a job. So that’s pretty self explanatory. You wanna put your work out there, people see your work and they wanna hire you based on the work that they see. The second one. Is that portfolios are really good for personal branding and [00:05:00] to improve your online presence.

It’s very important in today’s world. Everyone’s, you Google everybody else. So it’s a really good way to make sure you are creating, curating the narrative that you want out there. And I’m gonna be cheeky. And a third one, another reason to have a portfolio is that it’s pretty fun to have.

You’re flexing your creative muscles. You’re building things from zeros and ones and you’re trying new things. And at the very end of it, you’re creating a very valuable digital asset for yourself. So maybe you’re not convinced. I like to argue that if you are a web developer and you are building things on the internet, then yes, you should definitely have a portfolio to showcase your web development work.

It’s more than just a collection of your work. Your portfolio is your work, but maybe you’re thinking, okay, I have a hub account I’m hired for the non-visual code that I write. [00:06:00] I don’t need a portfolio. You’re not wrong. You don’t need a portfolio, but remember a portfolio doesn’t just showcase your work.

It shows people who you are and what you are about. So if you have a website, you are gonna, that’s gonna level up your credibility or notch, and you’re gonna stand out big time against the developer who doesn’t have. So I hope you’re convinced. And let’s talk about what goes into building an online portfolio.

The first question we wanna ask ourselves is who are we building for? We might be tempted to think that we’re building for other developers, but if you are looking for work, you’re actually building for non-technical people who will be looking your portfolio first, such as recruiters and hiring manager.

And if you think it’s okay to just throw something very quickly together. Let me tell you first impressions count. There’s [00:07:00] a reason why companies spend millions of dollars on design and UX and marketing. So very important things to consider. Let’s talk about the three core things. That’s gonna go into a basic portfolio and this is the stuff that will get you hired.

And that’s your about section work and contact? So I would argue that your about section is one of the most important, but underrated sections of your site. It’s often one of the first stops that people go to when they learn on a website. Now think about how you Browe. Do you often click the about link of a company or website?

I know I do. I wanna see who built this site. What is the company about? What did they value? Pretty nosy and curious like that. If people are looking to work with you, they wanna make sure you’re not a serial killer or something. So you’d be doing yourself a disfavor to throw away this.

To tell the world who you [00:08:00] are, what matters to you, what you do and how you do it. I think you should add, I really highly recommend that you add a photo. Psychology tells us that we love looking at other people’s faces. It helps to build connection and adds personality to your site. It also reminds people that you are a real human, not a, just a faceless robot behind the.

But if you are, a bit shy about adding a photo, add an avatar or something similar, you wanna basically put a face to your name and just to caveat about your, about section. Just wanna share that your about bio isn’t. I mean your about paragraphs and write up, isn’t quite the same thing as your hero statement or bio.

Let me just show you an example of that. This is a example from Taylor hall. He is a designer and this is his hero statement or hero text right here. My name is Taylor hu and I build things on the internet super, super short. Now this is his actual about page where he actually goes into a lot more [00:09:00] detail about that.

So you can see the differences between that. And let’s talk about some tips when you’re writing your about section. So the first thing you wanna do is decide between the first person or the third person. First person is using I, me, we, this tends to carry across a lot more personal and the third person is Annie.

She and her, this is more professional. When you’re starting out in the industry, I’m gonna say I’m gonna recommend using the first person. It’s a lot more personal. You’re trying to build a personal connection, but as you get on with you into your career, a few years down, you can switch to the third person.

If you like, but in general, I’d recommend starting off with the first person at least. Then you wanna talk about your values, your backgrounds, your expertise, and your goals. Like how did you get here today? What are your credentials? What are your former jobs? And I wouldn’t recommend trying to hide your former jobs if you are transitioning from another field, because it can be very important.

And helps you to stand [00:10:00] out. If you talk about what excites you about, web development or what do you love doing and what value can you offer the potential reader, which is, sorry, which who could be your potential employer. And so those are legal things that you can add. And the final thing I recommend is to add something personal, to make it memorable.

So we want to help others relate to you and you wanna stand out as being authentically ill. You. You can use phrases, like when I’m not coding, I like to do ABC, or you can find me doing X, Y, Z. So these are some tips that if you’re struggling with writing in about page you can have a look into these.

So a couple of examples of some about pages Braden was a musician to, and he turned into a developer instantly that personal bit of information helps us to be like, oh, okay. This is something that’s unique about Brad. The one thing that I would change about this particular about search is that I would probably split the [00:11:00] text, the large body of text in 2, 3, 2 or three paragraphs, and this will help improve readability.

So when I’m just not looking at a big law of tax text, Here’s another example by Jenny. She essentially split her about, into a couple of sections. And when you group things into a bit of a list it’s very quick and easy to scan. So you notice that Braden, both Braden and Jenny have chosen to, to include their photos as well.

And I’m sure most of you, if not all, would’ve been drawn to the faces right away to help build that connection. Now let’s talk about number. which is work. And this is of course super, super important. The first tip that I can give you is to be selective quality over quantity. Your worst work will bring down the overall quality of your portfolio.

So remember that. And how do you find what work to put in your [00:12:00] portfolio? You can revisit and clean up your old project. You wanna demonstrate a range of skews and technology and project variety to show your versatility, especially when you’re early on in your career. And you’re not sure what kind of environment you wanna go into.

You might be an agency, a product, big tech, a startup. So there’s a few of those that you wanna consider examples of of projects you can put in could be a Photoshop conversion or website client, a JavaScript game. You could do a Cru app, which he stands for create read, update, and destroy or something that uses an API.

These are all great skills to have as a front end developer. You wanna make sure that you link to your live projects and your code. So those who don’t. No current Recode will look at your live ones and those who are interested in the quality of your code and how it’s written will have a look at your code, like your GitHub account.

In general, I do recommend a minimum of three projects that you’re proud of, but if you just have one and you [00:13:00] really wanna get started and build that portfolio, drop it in there. I think it’s a lot more important that you get something out there. And honestly, I’ve heard of folks getting jobs with just one project before they’ve even completed their portfolio.

It’s rare, but it does happen. So let’s just get started the next here’s examples of some portfolios that where people have added their work, Sharon has actually added four different. Projects in hers. And when you click on them, it shows a little mini description. It shows the technologies that she’s used, and you can see that it’s linked to her life and her GI her account.

On the other hand, RO who has a bit more experience has put just three projects, his recent projects. On his front landing page. And once he clicked into viewer projects that opens up a page with a lot more of his other projects, which I’m sure that he selected the best ones as well. So finally, the third one is your contact, make it easy for [00:14:00] people to contact you, especially when you’re starting out, or if you want other opportunities.

Once you go down further into your career, and if you are on social media, Drop your links for increased social proof. That you’re actually a real person. Some, a question that I get asked is should you include your resume? I don’t have a strong opinion on this one. So I’m gonna leave it up to you.

There’s pros and cons to both. And I think both arguments are perfectly balanced and valid. Some people like to link those for recruiters to easily download. I chose not to personally because I wanted my work to speak for itself first. And then if somebody is interested, then I’d like them to directly contact me for my resume.

But in this case, I feel like I have a strong enough portfolio of work that I don’t need to have my P my resume up there right away. Now, if you are using a form, I would recommend using an API to manage. It just makes it really quick. These are a few APIs that you can use [00:15:00] for me personally, on my website.

I use form spree super, super easy to use. So that’s the one that I’m just gonna recommend off the bat. I’m familiar with it. It’s just plug it in and go. Some examples of the contact page. So here’s Brittany, she has just a really short write up. She’s actually introdu included, Hey, her email right here.

And you can see her social links there and a nice little form there. On the other hand, parvo has also in included his social links, but he has a button that actually opens up into a email app. So two slightly different approaches to the contact page. Now, if you are thinking, okay, there’s, you know about work, contact these three things, they’re pretty simple.

And you’re thinking maybe it’s way too simple, but let me show you a very effective example of a portfolio that only uses these three. Deja is on a designer we’ve over 10 years of experience. It’s literally just [00:16:00] about work and contact. Let me just switch over here to the real site over here.

So he’s about, this is his hero statement over here, a design and build digital products. And as we scroll down, nice photo of him, and then we get more into the details of who he. When we look at his work over here, this captures all his, the works that he’s done, a selection of them. And once you click in, you see as well, it will have a lot more quite of a description and finally the contact.

So he’s not even got a simple form here. He’s got his. Email address and then his social links over there. So there’s an example of using just the three, three core things. So I hope that helps to convince you, but here are some other things like bonus things that you can add to your portfolio. If you like the first one very easy is the skills, your skills, the tools, and the technology that you can use.

You can simply add icons or you can [00:17:00] create a completely new section for it. And write some more stuff. If you want. The next one, if is your blog and technical writing, you can easily add a link to your navigation menu. And this helps people to know about the things that you like writing about and have some expertise in.

If later down your career, maybe even earlier, you can throw things like your media experiences, appearances, your talks and your wards. And the final thing is testimonials. If you’ve done any kind of work for people, ask them to write something nice for you. Social proof is one of the most powerful tools is that your disposal that you can use.

And that’s why reviews are such a big thing for people. We tend to place some importance in what other people say. So let’s look have let’s look quickly, look at some quick examples. So Becky for her skills have, has just added a bunch of the logos of the technology that she uses. Whereas Jack, on the other hand has created [00:18:00] a, has written a full.

Write up about the stuff that he’s actually used. I probably wouldn’t quite recommend putting a bar for your progress of your skills. Like he did off here to front end back and react. Cuz it’s hard to say what is a hundred percent like when you get to that a hundred percent?

Are you just the God of, front end or react or something? So I’ll probably stay away a little bit about from that, but that’s just my feeling about that. Here’s an example of a blog by Sarah ner. She’s been around for a while. Amazing developer. So she’s got a lot of, posts on her personal blog.

When we’re looking into media, Hannah’s done something really interesting about what, about how she’s with her website, the really old windows, operating system. And she’s chosen to add her awards and her talks and everything this way. On the other hand, Taylor has listed her interviews in a more of a blog light a blog [00:19:00] light way on her website.

So testimonials and clients, Dan found a bunch of nice people to write. Nice, nice stuff for him over here. And then Matt Farley on the other hand has chosen to use just logo. so you can see there’s a lot of different ways that you can add or, extras to your portfolio. And it doesn’t necessarily need to be one way, just make it what works for you.

Okay. So how do we get started now that what content to include? which are three main ones are about work and content. You can start thinking about building your website. And the first thing I wanna say to you is use whatever you’re comfortable with. If you wanna use WordPress, go for it, HTML and CSS, do it.

Whatever is easiest for you to get started. Here’s a great tweet from Danny Thompson that I really love. [00:20:00] Like I mentioned, my current dev portfolio is largely just H Chanel and CS. And guess what that portfolio got me hired. It doesn’t need to be complicated. The second thing I wanna. About is, if you are, if you’re not a designer, don’t be afraid to use templates and customize them to make it your own.

You literally save yourself hours of anguish over fonts and colors and all those small details that you have to consider. If you design your portfolio from scratch, a lot of great sites use templates and you shouldn’t feel ashamed of using so, so here are three places that you can look for templates and.

Choose a free one. Choose a paid one. I’ve done both. It’s all good. And if you like to manipulate images, here are three free programs that you can use. Photoshop, Canva, and Figma. If you don’t have Photoshop or one of those other paid ones, here’s a [00:21:00] very quick step by step to do. The first thing you wanna do is register a domain name.

Now you don’t necessarily need a custom domain name, but cost about, two lattes, a. and they really make a big difference to your credibility. The next thing to do after that is get hosting like Netlify Heroku. I think Heroku is paid now and get hub pages still free for sale. And then there’s traditional hosting like blue holes, host Gator.

So get some hosting over there. The third thing after that, once you build your portfolio, you register dominate, you got hosting, you build your portfolio is to deploy your portfolio and share it with the world. Now, this is pretty important. Tell your friends and family and share it with your social network.

Admittedly, I didn’t share mine until like later, but it’s a really good way to celebrate, this win that you have and then continue to iterate the first iteration of your portfolio out there. Isn’t your final one? So this is one of the examples for me, one of the very first times in 2020 [00:22:00] that I actually shared my portfolio on a.

It’s actually quite difficult for me to put myself out there and promote myself. You need gotta be that sales person, but you gotta do it. And gradually over time you become a lot more comfortable doing it. And so we’re gonna get to the the part three, which is some bonus tips for you. so a few things that I’ve talked about the first one is you wanna remember that done is better than perfect.

And mentally I do struggle with this one. My portfolios take a long time to designing code, so I’m really lucky that my latest one was. A boot camp project. So I had only a week to do it. There’s a lot of things I still want to do with it, but it got me. My first job in tech and done is better than perfect.

You can iterate on it and make it better down the track. Now, something to consider is to think about user experience. People will leave bad websites that are difficult. So maybe you’ve had the experience, often it’s banking websites, and unfortunately partner just have to [00:23:00] tough those ones. But when you visit a website, that’s easy to use.

It’s such a delight and potential employers. When they visit your site, they’re gonna notice that you actually care about their experience. Make it easy for people to read and navigate and find your information and work. Think about responsive design, accessibility, and perform. a lot of people, access websites on their phones.

And so think about those touch points and do not force them to download a 20 megabyte, image, please. You’d be surprised how often that happens and then just keep it simple. If all else fails, keep it simple. Don’t be afraid to show your personality. Remember at the end of the day, People hire people they wanna work with.

You’re not a machine and don’t be afraid to experiment with your portfolio a little bit. If you’re doing it yourself, you can check out a bunch of other portfolios and you start to recognize [00:24:00] patterns you like, and you can take those into your portfolio and ask for feedback. This is a big one. The more feedback you ask for the faster you level up.

Oh. I want you to think of your portfolio as this amazing work in progress. It’s a living, breathing document that’s ever evolving and growing alongside with you in your career. Lynn Fisher is a designer and a developer. She’s a great example of this mentality. So every year, since 2007 she’s, she creates a new portfolio.

She’s learned more during the time technology changes than she’s constantly updating her. Now beyond just the website, here are four other ways that you can showcase yourself. They don’t. The ways of you can, that you can supplement your portfolio. The first one is losing a blogging platform.

If you don’t wanna host your blog on your web, in your own website, you can have a really, cool GitHub [00:25:00] profile. If you do a lot of illustrative or visual stuff called pen or something similar, it’s a really great place to have it on. Then there’s also a poly work as. But just remember they’re not replacements for food portfolios, so I’m just gonna very quickly run through.

So for the blog, we have hash note over here with SC sky and then with IU she’s on dev two oh T two. Kirk over here has a really nice GI hub profile. He’s written a few things about himself to personalize. He’s added his latest blog post and just on the topic of iteration. So this is what he said to.

Mine took a lot of iterations, but slowly for sure it’s coming together is something I like definitely wasn’t, this six months ago. So get started and you can iterate on the, as you go along in cold pan, we have Sarah and Elizabeth. They both do a lot of visual, like CSS, art, and animations.

So cold. Pen’s a great place for them to host some of their work and be discovered that way. [00:26:00] And on poly work poly work is really cool because you can list a lot of the things that you do outside of just your job. So here are a few examples. You can see of some profiles there, so just wrapping up cuz I’m running out time.

And just so if we have time for a quick Q and a, so the first one, why do we have portfolio? We wanna show the world who you are, what you are about and to help stand out against other people. I want you to think of your portfolio as this living, breathing, ever, evolving compilation of materials that showcases your personality and your work, something that grows with your career.

And why do we have one to get work, to increase your personal branding and online presence. And, you have a bit of fun and frustration learning and trading your own, owning your own digital. The three must for portfolio is about work and contact. Beyond that other materials that you can add is testimonials or companies you’ve worked [00:27:00] with skills, the tools, the technology you use and your blog or technical writing, as well as any talks, media appearances, or words that you’ve gotten early, bill will be whatever tech you are comfortable in, and don’t be afraid to.

Some place do not be afraid, but just customize them to make it your own. Make sure to think about the user experience and some other preexisting alternatives for developers include blogging platforms like medium dev dot two. Oh an awesome kicker ski hub profile code pan, or similar slides where people can see your code.

Poly work. And that wraps it up. Thank you very much. I can be found at bomb beco on Twitter, and that is my website over.

Jen Looper: Wow. That was a wonderful presentation and very beautiful. And now I feel like I have to tear my website to shreds again and redo it.

Annie Liew: oh, I’ve been wanting to redo mine for the last three years.

It hasn’t happened. [00:28:00]

Jen Looper: oh, no,

I think one’s gonna happen will be my holiday project. Wonderful presentation. Thank you so much. We have a couple questions that came through and we have a little bit of time question for you about. Portfolio. Is that a good idea? You mentioned using these, the GitHub pages to enhance your per your professional presence online, but some folks are wondering if you can just use that as a replacement for your portfolio.

What’s your suggestion on

Annie Liew: that? So I think if you really don’t want to have a portfolio, I still think a portfolio is a great way to. To have, because it makes you help you to stand out against someone who doesn’t have it. So technically you can, and you should definitely have a GitHub profile and use that.

But even if you just have a free one page, page with a bit of bio and about and a photo or something like that is way above someone who doesn’t have that. So I would still recommend having one, but if you really don’t, want one, you’ll get her profile. Like your very decked out GI her profile is still a good way to.

Jen Looper: Yeah. [00:29:00] One of our speakers today, Julia EUT has inspired me to boost up my GitHub presentation. Yeah, that’s very exciting. And another question was, does it add value to add logos of client projects on your landing page are images of projects. What’s

Annie Liew: your main, yeah, that’s a really good one.

I think at the end of the day, we’re all very visual people, and companies spend a lot of. On their branding and their logos to make it very instantly recognizable for people. So for me, I would recognize, for example, the McDonald’s logo is a good example. I would recognize those golden arches a lot more faster than I could probably read the words McDonald’s.

So in that respect, if you’re thinking about it from psychology and you want people to just recognize and have that brand recognition that you’ve worked with these great companies or people. Then having the logos, I think definitely add value. And, they say your image speaks a thousand words.

So having an image of the work that you’ve done, as opposed to a heavy war of text, helps to break your content up a little bit for one thing. [00:30:00] And it just helps them like to guide your visitor along along the page, your content.

Jen Looper: Yeah, I think taking those screenshots is important anyway, for your own, for just logging your own progression as a developer because the web changes so quickly and things disappear anyway.

So just grab those screenshots lots of folks are asking for your slides. I don’t know what you would like to do about that, but lots

Annie Liew: of interest. So this is, yeah, for sure. This is the talk I’ve done before. So I did have slides, but I’ll create a updated PDF of mine and I’ll send you a link when I’m done and you can feel free to share that one and put that under the.

The stream afterwards,

Jen Looper: fantastic. Fantastic. Yes. Lots of people. Very excited by these. Thanks everyone. Yeah. So I’m just looking through the chat for any other questions, but yeah, I think that we can go ahead and thank you so much for such a wonderful presentation. We’re gonna take another little short break and then our next speaker is if Yoman WSU, who’s gonna be talking about, it’s funny, how.

Our talks [00:31:00] progressed because we started with, getting excited about this field and now we have our portfolio and next we’re gonna be talking about adding a headless CMS to a next JS site. So we’re like leveling up. So by the end of the day, man, we’re gonna be, we’re gonna be solid.

So this is great. All right. Thank you so much, Annie. Really appreciate your time and a wonderful talk. Thank

Annie Liew: you.