Recently, I started a new personal site that sums up the work I do, the current projects that I’m working on, and the opportunity I’m looking to get involved in.
This is the story of how I built and launched the site, and things I would consider interesting to include in a personal portfolio.
Idea and concept
The idea for my personal site is simple: to be able to share my work with others without spamming them a list of links.
Here’re some thought processes that I went through at the beginning:
- Craft a nice personal pitch about what I work on (products and services) and how I work with others.
- Include a list of resources that I always get asked to recommend like books, marketing stacks and tech stacks.
- My portfolio of speaking gigs and interviews that I’ve had collaborated with
If you failed to communicate with others about what you do, you have not told anyone about what you do.
The design concept
I outlined some design concept for how my website should look like:
- A homepage that starts off with a personal bio
- Homepage has sub-sections
- Each sub-section is used to organize one big idea
- Bigger collection of contents will be organized into a separate page
- A footer section on every page for quick navigation back-and-forth
No extravagant. No fancy colors. No glamour.
Just a minimalist site that tells a personal story and share resources.
“Design is not just about how it looks and what it feels like. Design is about how it works”. — Steve Jobs
The starting point
I wanted to be able to create and launch a site under 1 hour. I wanted to take an idea to live as soon as possible.
Therefore, I discarded these options right from the start:
- Code a website from scratch — Nope, I only had 1 hour to get it done
- Use self-hosted website solution — Nope, I didn’t want to spend money on hosting to test a website idea
- Use WordPress.com to create a free site — Nope, I hated my old personal site built on this platform due to limited customization
Solution
So, I decided to build my personal site with carrd.co.
It’s super fast, cheap and easy to customize. I fell in love with carrd.co like I did with avocado toast (Avocarrdco maybe?).
“Speed” is a free resource. Use it and launch something that matters today.
Getting started: carrd.co
By the time I’ve completed some brainstorming, I’ve already spent 15 minutes. It’s time to turn my ideas into a initial prototype.
I visited carrd.co and signed up for a free account.
Then, I clicked on start from scratch option on the right because I wanted to customize my own design and layout.
Building homepage
Here’s where I provide a quick intro about what I work on and what I do.
I’ve configured the Page canvas with settings like:
- Style: Wide box
- Position: Center
- Width: 62
- Background color: Blue
Then, I added 3 main elements with carrd.co to include my bio details (click on the “+” sign near the right corner):
- Divider (leave some spaces on the top)
- Image (my profile picture)
- Text (my name)
- Text (my main roles)
- Text (short descriptions about me)
- Icons (where I include my social account links)
- Divider (leave some spaces at the bottom)
Creating sub-sections
I created multiple sub-sections on the homepage. This will give extra information about everything I’ve mentioned in my homepage bio.
I’ve included things like:
- Products I build
- Services I do
- Personal goals 2019
- My speaking
- More about me
- Books I’ve done
- Send me message
To create sub-sections, start by adding “Container” followed by adding these elements:
- Text (Heading “Products I Build”)
- Buttons (“Upcoming app” with an external link)
- Table (list of items and descriptions)
Creating footer (to navigate)
Since I don’t like the idea of having navbar on my personal site, I opted a workaround to make navigation easier.
I included a footer that contains links that helps user to navigate to different pages of the site:
- Home
- I build
- I service
- About me
- Book list
- Chat
To create footer section, start by adding “Container” followed by adding these elements:
- Text (“See all”)
- Links (“Home, I build, I service, About me, Book list, Chat”)
Building separate pages (contents)
To organize bigger collection of contents (such as resources), I decided to link homepage to separate pages on the site.
I wanted 2 separate pages for:
- Book list
- About me
To split up your one-page site into different pages, you can add these elements:
- Control (“#books”)
- Container + Buttons (“Back to homepage”)
- Container + Text (“Books I’ve done”)
- Container (but Columns)
- Text (“2019 books”)
- Text (“list of 2019 books”)
This will separate the “Homepage” from a new page that I want to call “Book list”
Publish & launch
Note: To add more sections and separate pages, repeat the above steps to build a new container, element, and control in carrd.co
Okay, now at this point, I’ve already spent 55 minutes on building the personal site.
It’s time to launch it!
I can always adjust the design of my site later on. It’s better to launch it fast, see what’s not nice, then only spend time to adjust the site.
“The longer it takes to develop, the less likely it is to launch.” — Jason Fried
📝 Read this story later in Journal.
🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >
