A few years ago I built a portfolio for my work. I didn't like it and decided to rebuild it from scratch. My design and front-end skills have dramatically improved since then, so I wanted something nicer.

Note: you can view the source code on GitHub, and the site itself here.

Designing

The project's purpose

The purpose for my portfolio is to effectively communicate who I am and the value I can provide to prospective employers.

I figured the best way to do this is through a fluid, single-page journey that provides a complete picture for who I am, my values, skillset, notable projects, and references.

Once the user reaches the end they'd have a complete understanding of who I am and what value I can provide. And because the content is honest and straightforward, it's naturally going to attract people who align with my values and repel anyone who isn't.

Leaving a great first impression is very important, so alongside refining the copy, I also wanted to make sure the design was on-point too. As a result I spent most of my time on these things.

The design process

Choosing a domain

Some of the ideas for domains I came up with include:

  • danieljs.me
  • danieljs.tech
  • devarity.tech

Devarity is the company I operate my side-projects and freelancing under. I wanted to keep my branding personal so I decided not to use this domain.

danieljs.me made sense for my personal blog, so I used danieljs.tech for my portfolio. Both reference each other and are consistent because the TLD is the same.

Inspiration

A brilliant website I use for design inspiration is Dribbble. In this case, I searched for "portfolio" to find relevant inspiration. I also used some sites I've come across and liked:

Sketch App homepage

Sketch's homepage is super nice, I love their brand's style; particular the font, colour scheme, and general UI style. It had the largest influence on the design.

Helen Tran's portfolio design

Helen Tran's portfolio design is very nice. I like the simplicity, font, and bold colours.

My blog

I like the layout of my blog's homepage, which is using the Horace Ghost theme. The font, colour scheme, and styles and particularly nice.

Apple MacBook Pro landing page

I also really like Apple's landing pages for their products. They're spacious, incredibly engaging, and guide the user through a fluid journey of the product and what it offers.

Antun Debak's portfolio

Antun Debak's portfolio is nice. I like the succinct introduction that quickly describes what he does and the value he provides, plus its style is unique.

Planning

As a starting point for the design I wrote a basic list for the site's structure:

  • Focus
    • Full-stack developer with diverse experience, but specialising in front-end development
    • Targeted towards employers who want to hire a skilled, well-rounded front-end or full-stack developer
  • Style
    • Simple
    • Spacious
    • Clean
    • To-the-point
    • Candid, approachable, and somewhat casual
  • Features
    • Modern SPA (Single-page Application)
    • PWA (Progressive Web App) functionality (offline support, pin to home screen)
    • A few simple/fluid animations so the site doesn't feel static
  • Sections
    • Hero
      • Avatar
      • Succint title and description that describes what I do
      • Social links
      • Background image
      • Short introduction
    • Values
      • A list of my core values and why they're important
    • Skillset
      • List and description of my skills
    • Showcase
      • A list of my best work
      • Short description for each project outlining problems I solved and value I achieved
      • Links to case studies, website links, and source code (where applicable)
    • About Me
      • Description on my background, who I am, and why I love to code
    • References
      • Nice things coworkers have said about me
      • Serves as evidence for my claims
    • Footer
      • Title/description prompting the user to get in touch
      • CTA to contact me
  • Navigation bar
    • Logo
    • Link to each section
    • "Get In Touch" button
    • Scrollspy underlines the active section as the user scrolls down the page
  • Sidebar
    • Slick sidebar menu for mobile devices

Building the design

Besides a few rough sketches on paper, I designed most of the project in my head.

I had a basic idea for what I wanted to build, then quickly built a mock-up using Twitter Bootstrap. The first iteration was terrible:

First design iteration

But through the process of iteration I slowly refined the design into something that felt right. This is usually how the design process goes for me.

In the future I'd like to master design software such as Sketch or Figma, but so far this process has worked fine for all my projects thus far.

Copy writing

When a user lands on your page you have about 7 seconds to entice them to stay. Therefore you need to communicate who you are, what you do, and the value you can provide them within this timeframe.

To do this you need to write a succinct title and description that summarises what you do. This is something all effective websites do; go and take a look at the landing pages for major internet companies and you'll see this.

In my case the title is "Daniel Spajic", which communicates the website is about a person. Below it is the subtitle, which says "Front-end engineer with a full-stack skillset", and clearly summarises both what I do and the value I can provide.

As for the rest of the copy, I made it succinct yet detailed, which is the sweet spot for getting your point across effectively. I also used design techniques to make it presentable and easily consumable, such as the use of spacing, italics, bold text, icons, and contrasting colours.

Building

Since picking up React and falling in love with it, I wanted to use it to build the site. From a bit of research I discovered Gatsby: a super fast static site generator for React.

It's super nice and very easy to use. It's optimised for the modern web and uses the latest technology, including GraphQL, Webpack, and code splitting. It handles build configuration for you and has tons of nice plugins, such as gatsby-image, which automatically optimises images for you (something that's usually a huge pain and thus rarely done properly).

Some of the libraries I used includes

I used markdown files to store most of the site's copy. Writing it directly in the HTML wasn't clean; markdown enables you to write markup without HTML tags.

I put the data for the references and portfolio items in YAML files, such as this:

- item:
  name: My portfolio
  description:
    "An appealing home for my life's work was needed, so I designed one. Since
    learning and falling in love with React, I decided to use Gatsby: a static
    site generator using React and optimised for the modern web."
  image: ../images/portfolio/portfolio.png
  year: 2018
  siteLink: https://danieljs.tech
  sourceCode: https://github.com/dspacejs/portfolio
  caseStudy: https://danieljs.me/building-my-portfolio
  skillsUsed:
    - Gatsby
    - React.js
    - GraphQL
    - Sass
    - PostCSS
    - Twitter Bootstrap
    - Netlify

Deploying

My typical go-to server provider is DigitalOcean, but this time I decided to try out Netlify: an all-in-one platform for deploying static sites.

Their service is awesome. It's super simple, auto-configures functionality such as HTTPS, and even has continuous integration built-in. The free plan also covered everything I need.

I also used Netlify to deploy two of the projects on my portfolio, rather than linking to the original sites themselves.

I did this because I have control over them and can showcase the exact work I did (not any edits that were made afterwards). I deployed Trausing on Heroku because it wasn't a static site.

Another thing I did was enforce unit tests to be run during the build process as an extra layer of insurance:

"scripts": {
  "build": "yarn run test && gatsby build",
  "test": "jest"
}

Conclusion

Overall the project took me about 107 hours. Note it could've been significantly shorter because I switched to Gatsby halfway through, but I was fine with putting in the time and effort because I wanted the final product to be very solid.