New Brand, Who Dis?

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.

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.

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.

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.

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.

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.

Migrate to TypeScript

Set up ESLint, Prettier, commitlint, and lint-staged

Set up Jest and Cypress

Add tests

Migrate to Tailwind CSS

Add share buttons for posts

Add commenting feature

Add "Edit on GitHub" button to pages

Set up git-based CMS Forestry

Set up a newsletter

Final Brand

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

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.