How I Built & Launched A Personal Website In 1 Hour

How I Built & Launched A Personal Website In 1 Hour

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.

1. 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:

  1. Craft a nice personal pitch about what I work on (products and services) and how I work with others.
  2. Include a list of resources that I always get asked to recommend like books, marketing stacks and tech stacks.
  3. 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.”

2. The design concept

I outlined some design concept for how my website should look like:

  1. A homepage that starts off with personal bio
  2. Homepage has sub-sections
  3. Each sub-section is used to organize one big idea
  4. Bigger collection of contents will be organized into a separate page
  5. 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

3. 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.

5. 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.

Getting started with carrd.co

6. 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 the homepage bio section of my site

6. 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)
Adding sub-section to the homepage

7. 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
Footer design of my personal site

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”)
Adding footer elements in carrd.co

8. 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”

A new page separated from homepage — Book list page

10. Publish & launch

Note: To add more sections and separate pages, repeat the above steps to build 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: https://whizzoe.carrd.co

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

11. When are you launching?

If you’re in a business, check out what I’m launching to help product business with landing page and refined product pitches. Click here 🙌

Looking to hire remote role for your company & distributed team? Please let me know here 💪

😍【1】Find me on Personal Site / Twitter  /  LinkedIn

👉【2】 In case you miss out, I can send my upcoming resources to your inbox — Click here to join my newsletter ↗️

Close Menu