This is a new start – the entire writing system is now based on Ghost API, a light-weight blogging system where I can write all contents in a nice and clean editor with draft saving at all time.

Ghost supports a lot of different types of content to be inserted, e.g. text, heading, images (three different styles), citation (two different styles), embed, code box, inline code block, and button. I might not use all of them in my writings, so I simply make this to inspire you how everything should look like. They are lovely artifacts for me as I crafted and fine-tuned them for more than 30 hours.

The design of my portfolio is highly inspired by Paco Coursey. If you compare the two, you may find some similar simplicity design like the typography consideration – I really think it is way over comfortable.

Heading Styles

Ghost supports 6 types of headings in total. I will not always start using them from the first heading as it is really big when there will be only one hierarchy of headings.

Heading 1

Heading 2

Heading 3

Citation Styles

The citation (blockquote) is a great way to emphasize a quote or a paragraph. It is also a good way to separate the content from the main text.

Since I was in my middle school, I started building websites (not using a modern solution though). Two years ago, I learned Vue, a language I felt so confused on. Half year ago, I met React, and this is how all stories started. Without learning all these things, I may still stick with WorkPress while posting something. It works great, not really painful, but I cannot do much with it if I have no experience on website development. Yeah, I will never regret this decision at all because building a website with CSS and HTML from ground up is way better than using a GUI editor to style the page.

Unordered List Styles

• This is an unordered list.
  • Nested item.
• It is a great way to list out some points.
• It is also a good way to separate the content from the main text.

Ordered List Styles

1. This is an ordered list.
   1. Nested item. Here is a long text example to test the edge case. Here is a long text example to test the edge case. Here is a long text example to test the edge case. Here is a long text example to test the edge case. Here is a long text example to test the edge case.
   2. Nested item.
2. It is a great way to list out some points.
3. It is also a good way to separate the content from the main text.

Code Block Styles

This is an inline code block that can be used to represent a variable or function name.

In most cases, showing a snippet of code requires a code box.

def hello():
    print("Hello, world!")

hello()