A Portfolio for Hire

Your portfolio is not for you.

It’s for that non technical person trying to gauge their interest in you. It’s for the hiring managers that are on the fence about you. It’s a way to show your technical prowess.

It’s a representation of you!

The portfolio you present to the world should be simple, clean, easy to navigate, and aesthetically pleasing.

The first thing a person should see when they land on your website is, your hero section. You’ve seen a hero section before. It’s where they introduce themselves and what they can do for you.

So, in that idea, what is the first thing you should put in your hero section?

It should be two crucial things:

• Your Name

• Your Job Title

Here’s an example of code:

 <header>
    <nav>
     <ul>
      <li>Home</li>
      <li>Projects</li>
      <li>Contact</li>
     </ul>
    </nav>

    <section>
     <h1>Hi, I'm Jane Doe</h1>
     <h2>Front End Developer</h2>
     <p>Let me make your vision come true</p>
     <button>Contact Me</button>
    </section>
</header>

A message and a call to action button is optional.

The second part of your portfolio should be projects. This is where you list your skills, the project, and a brief summary of what the project is about. Speak to what problem this project solve. Have a visual or gif of the projects. Make it engaging and interactive.

Here’s an example:

<main>
        <h2>Skills</h2>
        <ul>
            <li>Javascript</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>React</li>
            <li>Tailwind</li>
        </ul>

        <section>
            <h2>Projects</h2>
            <div class="card">
                <h3>Project Name</h3>
                <img />
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati laboriosam adipisci quibusdam nulla iste a explicabo perspiciatis molestias est minus? Illum quia aut unde eveniet voluptatem earum recusandae fugiat iusto!</p>
                <p>Skills Used</p>
            </div>
            <div class="card">
                <h3>Project Name</h3>
                <img />
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati laboriosam adipisci quibusdam nulla iste a explicabo perspiciatis molestias est minus? Illum quia aut unde eveniet voluptatem earum recusandae fugiat iusto!</p>
                <p>Skills Used</p>
            </div>
        </section>
    </main>

The last section is a footer. This is where you put how recruiters or whoever views you website should contact you.

• Email Address

• Forms

• Phone Number

These are acceptable ways for someone to contact you. Whichever one you prefer, is the one you put down.

After this is done, you should have a presentable portfolio. There is no need for extravagant animations or additional information like a headshot. There is need to stress over the color scheme or the domain name of your portfolio.

Just get something clean and simple into the world and you adjust along the way.

Now for my non technical people, you don’t need to use the code above or have its structure. You can use no code websites like wix or squarespace. Whatever gets the job done is the one you should use!

Now, go build a portfolio a recruiter would love!