All Posts

New Brand, Who Dis?

  • #branding
  • #technology
  • #content-creation

After reading How to Market Yourself by swyx, I got inspired to revamp my online presence starting with the visual aspects of my brand.

I identified two key components of my online brand: social profiles (Twitter, GitHub, LinkedIn, Facebook…), and my website. I noticed that I wasn’t being consistent across them. I had two different profile pictures and different bios across the platforms.

Social Profiles

The most important part for my social profiles — besides posting content — was to use a consistent profile picture. A profile picture works like a company logo. You want it to be easily recognized.

I wanted to have my face on it because faces attract user attention as they do for YouTube video thumbnails.

For identifying what kind of profile picture I needed, I scanned through all profile pictures of the people I follow on Twitter. The profiles I follow are more likely to match my branding preferences and my targeted audience. I selected 18 of them in a moodboard and highlighted the ones that caught my attention the most.

Profile Picture Moodboard

I noticed that bright pictures with a zoomed-in face and a high contrast with the background were the most eye-catching ones. So I calculated the opposite colors of my skin to identify the ideal background color for my picture.

Profile Picture Colors

Then I found a scenario that matched the color and took some pictures of myself with the help of my girlfriend. Finally, with macOS Photos, I edited the picture to make it brighter and more colorful.

Profile Picture

Personal Website

I already had an existing website made with the Gatsby starter, Lumen. However, it was devoided of a distinct visual identity and was missing some features I wanted to add.

Gatsby did well its job as a static site generator. But I wanted to take the oportunity to move to Next.js, which is my preferred framework for web apps.

Before designing the website, I began the work by identifying my goals and target audience:

  • Sell myself to potential employers: startup founders
  • Build an audience of readers: startup founders and influencers

From the goals, I listed the associated features:

  • Sell myself to potential employers: startup founders
    • About page
      • Bio
      • Tech Skills
    • Portfolio page
    • Profile picture
    • Startup-oriented branding
  • Build an audience of readers: startup founders and influencers
    • RSS support
    • Commenting
    • Post sharing
      • Hacker News
      • Twitter
      • Reddit
      • LinkedIn
      • Facebook
    • Topics
      • #technology
      • #startups
      • #liberty
      • #ethics
      • #culture
      • #content-creation

With that, I had a clear image of what I wanted for my website.

Design

As I did for my profile picture, I put together a moodboard. I looked for websites that had a cyberpunk feeling which was the esthetic that I had an affinity for my brand.

Website Moodboard

Then I inspected the fonts and colors of the websites to help me choose the ones for my own. With all of that, I was able to define the colors and typography of my website.

Styleguide

I had everything I needed to fully design the website. I started by designing the desktop mockups on Figma since I expected my website to be primarily accessed on desktop.

I made sure to effectively use all useful Figma features such as Auto layout, components and, styles. After a few days of work, I had my all my mockups ready and filled with content for desktop, table, and mobile.

With the mockups, I built the prototypes that I shared with some trusted friends to receive early-feedback.

Finally, I made a design system and published all the designs on Zeplin for development handoff.

Development

For the first iteration of my website, I wanted to have it available in a week. So I decided to cut development features such as TypeScript and tests. The website didn't have much complexity. I wasn’t expecting many bugs while developing.

I started by implementing the layout components and the global SCSS code. Then I worked on a page-by-page basis until arriving at the posts page. This page contains the Post component, which uses react-markdown with a few custom renderers for rendering the content written in Markdown.

One of the renderers I implemented uses remark-directives for defining shortcodes such as for embedding Figma files in my posts:

Figma Shortcode

::figma{url='https://www.figma.com/file/dBF5UcvvdzhuzEd4ZYTgux/?node-id=65%3A0'}

Shortcodes Handler

leafDirective: ({ attributes, name }) => {
  if (name === 'figma') {
    return (
      <iframe
        allowFullScreen
        src={`https://www.figma.com/embed?embed_host=share&url=${attributes.url}`}
      />
    );
  }
}

In a couple of days, I was able to fully implement the website and deploy it on Vercel.

I made the website public on GitHub for any interested person to access the implementation details.

.
├── public
│   ├── fonts
│   └── images
└── src
    ├── components
    │   ├── About
    │   │   ├── MainInterestsList
    │   │   │   └── InterestItem
    │   │   └── SkillsList
    │   │       └── SkillItem
    │   ├── BlogHomeButton
    │   ├── GoogleTagManager
    │   ├── Icon
    │   ├── Pagination
    │   ├── Post
    │   │   └── PostMetadata
    │   │       └── Tags
    │   ├── PostFeed
    │   ├── Profile
    │   └── Work
    ├── constants
    ├── content
    │   └── posts
    ├── hooks
    ├── layouts
    │   ├── DefaultLayout
    │   │   ├── Sidebar
    │   │   │   ├── Menu
    │   │   │   └── SocialLinks
    │   └── SingleColumnLayout
    │       └── Footer
    ├── lib
    ├── pages
    └── styles

Future Improvements

There are still many features and code quality enhancements I want to bring to the codebase that would make the codebase exemplar. I will be adding these in my free time. For now, I'm listing them on the website's README.md file.

Final Brand

With the website done, I re-used its visual identity on my social profiles.

Twitter Profile

Now there was only one missing piece and also the most important: content.

To complete my new brand, I need to keep consistently producing content on my blog and social media. Starting with this blog post.