The styling
Download more icon variants from https://tabler-icons.io/i/photoPhoto by Hal Gatewood / Unsplash
The styling
May 08, 2022
This weekly update post is used for showcasing the styling of my new portfolio.

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

Heading 4

Heading 5
Heading 6

Citation Styles

Ghost has 2 types of citations (by default having no place to put the name of original author).

The first citation style:

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.

The second citation style:

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.

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.

This is a code box. No syntax highlight for now, but I will make one in the future as it is required for a Computer Science blog.
The caption of a code box

$\LaTeX$ Support

As an academic writer, $\LaTeX$ is the most important feature across all scenarios including note-taking, paper-writing, blogging, and a lot more. So, the most important thing is to make my portfolio supporting $\LaTeX$. And now, it is up and running. In this site, the math typesetting library I chose is KaTeX. Let's see how it looks like: $f(x) = x \cdot \frac{\pi}{20}$.

And it also supports an equation box:

$$ \Delta_{k,j} = \eta \cdot \Delta_{k-1,j} + \alpha \frac{d\cdot l(w_k)}{dw_{k,j}} $$