Building an Effective Site for Personal Branding

Personal branding is an extremely important but often overlooked part of launching and growing your career as a web developer. In this guide I'll go over how to set up and create the most important part of your personal brand, the hub of your online presence, your website. If you follow along with this guide, you'll have your own personal website out in the wild to help you launch and grow your ideal career.

The Tech Stack

Since much of my audience consists of designers and developers, let's get started with the tech stack.

I won't spend too much time here, but rather I'll give you an overview of the tools I used and some resources you can follow along with to get a similar set up.

Most of this guide will be spent on the non-tech part of building your personal brand, things like setting effective goals, writing effective website copy, how to present your work, etc.

Every single one of the learning resources is free, and the tech stack I used has minimal expense. For anyone just getting started without tons of traffic to their site (which is me), the cost is zero.

Here's what I used to build this site:

  • Front End Framework: Next.js
  • Back End: Sanity.io
  • Hosting: Netlify
  • Styling: Tailwind

You can also see the repo for this site on GitHub.

I'll go through the learning resources I used in the relevant sections.

Phase 1 - Defining Your Goals

This is the most important piece of designing your personal site, and one that is often forgotten.

You need a solid foundation if your site is going to do any good.

Before writing any content or code, you need to establish what your goals for your career are, which will inform the goals for your site.

Let's ue me as an example. I have two main career goals, to get a job as a software engineer at Thorn, and to start and run a successful side business to bring in extra income.

Those two goals are what I should be building my site around.

I like to keep things simple so, I set up a goals.md file in the root of my site folder and write everything there. It's also where I write down my initial content based on my goals.

You can view the file on GitHub, but here's the gist of what I wrote down for my goals.

This site is meant to be the hub of my online presence and personal brand.

It should communicate what I do, who I do it for, and what people should do next.

The site has one primary goal and two secondary goals at the moment.

1. The primary goal of the site is to showcase my design and development skills to get a job as a software engineer at a company that uses React and allows me to work remotely, so my projects should focus on that. I also want to work for someone focused on building software that makes a difference in the world, so the language used in my content should focus on my desire to do the same.

2. The secondary goals of the site are to talk about the app I am creating, Scout, and the business I am starting to educate photographers on how to grow their business, Wild Wanderings. These goals can be accomplished later, as I have not made enough significant progress on them to show anything.

With these goals in mind I could begin writing my content.

So, before moving on to the content phase, make sure you have written down a specific goal for your site.

It's important to set goals the right way, and for that I will refer you to James Clear's Guide to Setting and Achieving Goals. This goal is going to serve as a foundation for everything you are doing on your site.

Before every change you make to your site and wevery piece of content you write, ask yourself if it is getting you closer to accomplishing that goal.

After you accomplish that goal, you can choose a new one, or switch to a habit-based goal. I highly recommend reading Atomic Habits by James Clear to learn how that can change your life.

Phase 2 - Writing Your Content

So we have our goal. In my case, I'm trying to get a job at a company where I can use my skills to make a positive contribution to the world while running a side business to bring in extra income.

Yours may be different.

You might be getting new clients, or starting a SaaS company.

The purpose of your site will determine the content you write.

So, with that in mind we are going to write the content for the first version of our site, a simple one pager.

It should have the following sections:

  • Hero
  • Projects
  • Contact

These three sections will serve as the foundation for your site.

Hero

First up, you want a hero section that gives a brief snippet of what you do, the elevator pitch.

Here's mine:

I design and develop websites to help make peoples' lives easier.

Using technologies like React, GraphQL, and Tailwind, I design and code websites and web applications for individuals, nonprofits, and businesses looking to make their mark on the world.

Here are some projects I've been working on.

That last line is just a lead in to the next section.

The first line gives a succint summary of what I do and why I do it.

The second line gives a bit more context into the how, the specific ways I accomplish those things.

Projects

Next up, you want to have a projects section that backs up your initial hero section.

If you don't have any projects to speak of, now is the time to make some.

Look at what you wrote in your hero section and your goals, create something that aligns with those things and put it out there for the world to see.

What I like to do here is give a brief summary of the project, and image that showcases it, and the link to a detailed writeup about the project goals, the process building it, and the results achieved.

If you can build projects for others and get their feedback to use in the writeup, even better.

Contact

Finally, you just want to provide a simple way for people to get in touch. List your email address and any relevant networks you may be on such as Twitter, Instagram, GitHub, Dribbble, etc.

For bonus points, provide a way for people to sign up via email and update them whenever you write something new.

Remember this is only the first draft of the site. We don't need a detailed About section yet because your hero section and projects give people the relevant information they need to know, at least the essentials.

We can focus on writing a great about page after we have our presence up and some content written.

Start small, then iterate.

Phase 3 - Setting Up Your Site

Start out with basics, you're going to make a simple, one page website with the essential information.

You've already got your content written, now it's time to actually get your site set up.

The reason I didn't go into the tech specifics in this post is because:

1. There are already great tutorials out there for this for my preferred tech stack, which I reference below

2. You should choose your tech stack based on your goals. The companies I want to work for use React, so that's the tech I chose to build this.

Choose your own tech stack based on what makes sense for you.

If you want to use the same tech stack as me, follow along with these two tutorials to get a site up and running using Next, Sanity, and Netlify.

Phase 4 - Designing Your Site

Now that you have the skeleton of your site built, it's time to start designing, I highly recommend Tailwind for designing, especially if you come from a development background.

If you are following along with the tech stack, review this tutorial to get Tailwind added to your project:

Up and Running with Tailwind and Next

While my design chops are decent and I'm constantly working on improving them, I don't think I am qualified to teach design, so I will refer you to the resources I used to learn it. The first is free, the other three are paid courses, but very highly recommended and well-worth the money.

Instead, I'll give you some basic principles to keep in mind, and leave the design details up to you.

First, every decision you make should be anchored to your original site goals.

Don't add a bunch of superfluous stuff without a good reason, keep your site simple and targeted.

Simple and user-friendly is better than beautiful.

If your site is accomplishing the goals you set for it, then the design is good.

If it isn't it's time to revisit it and iterate.

You can't know this for sure without creating an initial version and iterating over time.

So keep it simple and clean to start, and then iterate as you learn.

Phase 5 - Adding a Blog

You've now got a decent one page site designed, it's time to add a blog.

If you've been following along with my Next and Sanity setup, you've already created the basic functionality of a blog.

If you haven't get that functionality set up now, and we'll talk about how to write an effective blog.

Having a blog is huge for your personal brand.

It helps you stand out as an expert, both to potential clients and potential employers. But what should you write about? How often?

There are all kinds of different appraoches to blogging, but as with most things, most of that stuff is irrelevant when you are just getting started.

Right now, the most important thing is to do one simple thing:

Develop a writing habit.

That's it.

Don't worry about how good your writing is, how long, how much traffic it is getting, or any of those details until you have actually established a writing habit.

I recommend starting with something simple like writing for 15 minute every day.

Then you can simply publish posts as you finish them.

So what should you write about?

Starting out, you can simply write about what you are currently working on.

If you have already created projects, write about them (and link to them in your projects section).

Write about the process you go through, the goals you set out to accomplish, how you accomplish them, etc.

For example, my first post was about how I went from being a hobbyist to being a professional developer.

My first post on my new site was about building my new site (the one you are reading now).

Write about what you are working on, and write consistently.

You'll gradually learn more and more about what is working and what isn't as you go.

Install anayltics and a commenting functionality, interact with people and learn what needs you can fill of theirs, then write about those.

Phase 6 - Grow and Iterate

The goal of this guide has not been to leave you with the ultimate personal brand and site. That can only come with time and learning.

Which brings us to the final phase of this guide, growing and iterating.

Now that you have the initial version of your site built, it's time to start growing your audience and learning from them to make iterations to your site.

Start out by sharing things you have written with others in your field.

Post to social media, and reach out to any curated newsletters that are relevant.

Include a way for people to stay in touch, like an email sign up form, and notify those people whenever you write something new.

If you are looking for some proven strategies to write and grow an effective blog, check out Backlinko.

Install analytics and pay attention to what resonates the most with people.

Gradually you will start to learn what you should be writing about and what changes you can make.

Hopefully this guide has helped you do what is usually the hardest part of the process, start.

Just start building things and start writing, then learn as you go, and you'll be well on your way to an excellent and rewarding career.

My name is Ken. I design, code, and write.

I'm greatly interested in the process of taking websites, software, and digital products from idea all the way to execution and beyond.

I write about the intersection of design, development, marketing, and entrepreneurship, and how to build great things that make a difference.

If you'd like to keep up with what I'm doing and be notified when I write something new, you can do that by signing up right here.