For a simple portfolio site (like the one you are looking at right now) I wanted to keep as much of the code and services in-house as possible. One of the facets of my portfolio was to be a mini-blog documenting my learning and work in bite-sized articles. I decided to build a block-style page template component set I could use for my projects and mini-blog.

Since I was using Typescript, here are the types:

I decided on a layout structure that consisted of a layered tiered cake model. Each block stretches the full width of the screen and uses grid layout for mobile and flex-row layout for larger screens.

Sections can be empty, or contain up to 4 elements and an optional weight parameter to set flex sizing (default is 1) and optional align parameter to set text alignment per section (default is left). The elements (heading, text, image, and list) are laid out within a section in a predefined order, but work well with one, all, or none of the elements present.

The Components

Adding tailwind styles in the components and placing each element type in its own sub-component allowed me to quickly make adjustments to the formatting and composition of this layout structure as I developed it.

My projects and blog entries are now housed in a simple object that have their own types with a shared [content] field that holds the content blocks associated with the article or project. This allows reuse of the component and layout structure across my page and saves me a lot of time and headaches.

Here is an example I used for this blog entry: