DO Hackathon: Portfolio Design

Building a personal brand is important for any developer's career. Maintaining a portfolio is a great way to get an online presence. While resumes are limited by conventions and a piece of paper, portfolios can showcase your skills and experience in the best way possible.

In this article I will showcase and justify the design of my portfolio. Check it out at denniskrasnov.com.

Goal

My portfolio should:

• Showcase my skills and experience
• Make it easy for recruiters and hiring managers to access my resume
• Ultimately get me more job opportunities :)

Layout

Landing Section

The goal is to keep things short and simple, with a focus on benefits instead of features, ie. "developer available for hire" instead of "I'm a developer".

The button to download my resume provides a clear call to action. while the caricature adds some personality to the website :)

Skills Section

Most jobs look for a certain set of skills. The goal is to make it easy for the recruiter or hiring manager to check off these requirements.

Thus I logically divided my skills into six categories, and highlighted the important bits.

Content that is above the fold (visible without scrolling down) gets viewed the most. The skills section is important enough to put place near the top.

Testimonials Section

Social proof helps with credibility, whether it's reviews, recommendations, or testimonials.

Work Section

Obviously, work experience is very important when applying to jobs.

I stylized a standard resume layout to make it more pleasing to look at.

Projects Section

I have several notable side projects, and want to showcase them to their fullest potential.

Thus I created a catchy thumbnail for each project which leads to a case study (description, demo, and optionally highlights).

Education Section

Not much to say here, in my case I want to put more emphasis on everything else so I ordered this last.

Technology

My content doesn't change often, so a static website is all I need. I also want to use a JavaScript framework and SCSS.

I settled on Svelte and Sapper for several reasons:

• Working with Svelte feels very similar to working with vanilla HTML and CSS, it's simple and enjoyable
• Svelte is extremely lightweight
• Sapper compiles into a static website bundle (reactive Svelte sprinkled in where needed)
• Much like a class in an object oriented language, Svelte components are:
  • Reusable
  • Composable
  • Enables separation of concerns (JavaScript logic and scoped CSS)

Here's a snippet of code to demonstrate the kind of high level code that's possible with Svelte:

<Section id="skills" watermarkPadding dark>
    <WatermarkHeader title="skills" />
    <Skills>
        <Skill
            imageUrl="/skills/backend.svg"
            title="Backend Development"
            summary="<b>Spring</b>-based <b>Java/Kotlin</b> ..."
        />

        <!-- other skills ... -->

    </Skills>
</Section>

<!-- other sections ... -->

Right now I hard code website content in the code, but if I ever get tired of editing source code to change content, I can source the data from a content management system easily with minimal changes.

Conclusion

That covers the layout and the technologies that I used to make my portfolio.

Next up, I will cover how I deployed my portfolio.