When it became clear that the time for a truly personal site had finally come, I wanted to build on a foundation with few obstacles for swift changes and additions in the future, using lean mostly decoupled components and an external system for maintaining content that could be switched or removed at any time. Strict concepts for usability, no fireworks, performance, and self-explanatory presentation.

My outset at the decision of even building my own site was strange — I had built a lot of different sites, both personal and commercial, though the sites most related to me were always project-related; projects, of course, that I've been an integral part of, but during all this time, I never just wrote one for myself as a very concentrated, decidedly personal, and independent presentation. The central idea therefore was to build something for the future, to accompany all evolving projects instead of being surpassed by them.

While this article aims to explore the graphical front-end side of https://augustfreytag.com, I'd like to dedicate a brief introduction text to the technical modules and infrastructure in use. Everything after this is entirely user-experience-related.

The site is built on Nuxt (https://nuxtjs.org/), combining Vue with server-side rendering. Data is initially accumulated and templates are prepared on a server ready for viewing; after transport, interactivity is re-enabled once a page has arrived at the visitor (a process usually called "hydration"). This project was initially built with nuxt-ts, though support for the TypeScript language (https://typescriptlang.org/) was later integrated into nuxt (https://typescript.nuxtjs.org), additional dependencies for this set-up are not required. The consistent use of TypeScript was a requisite from the first moment. Every single component and logic piece is written in TypeScript, with added definitions and models for externally retrieved data. Styling rules are put together in SCSS, starting with a base sheet and an optional sheet for each layout. For managing content, the open source Cockpit CMS was a prime choice. It stores all presentable data as records in table-like structures and manages media files in an asset catalogue. As the site is entirely read-only, no advanced database technologies are necessary.

Both the application and content management are served by NGINX (https://www.nginx.com) in a reverse-proxy set-up, for one forwarding all requests arriving over HTTP to a secure connection, and handling error page redirects to specific static sites that were generated ahead of time, if need be. The entire application is run within Docker, locally and in its production environment.

The life page is the heart of the site. It essentially outlines all major, minor, and commissioned projects in various categories. The most important part of this component was to give context on top of a base title and time span to give a better understanding of what was done and perhaps even what the results were in a specific task.

A major challenge was to reduce all the possible information of all life events into a set of key properties that can be used for all events in a single list. As we can see in the concept already, these were "Name", "Time", "Format", and "Role" at first. Added a bit later during conception were "Location" and "Context", the former showing the geographical development of different events, the latter taking the spot of a free-form field to give explanation on contents or notable achievements. The final listing has each of these properties in its header.

An omnipresent element is the title (or branding), part of the header and a special "introducer" on the landing page. It is the most prominent presentation of the site's font choice, "Paralucent", in the concept work and the first publication. Because of its prominence on the site, it should mediate an equally as prominent part of me — in this case, summarised current occupations. The individual titles can be interchanged or even shuffled in the final page.

Placed within now established header baselines, each major part of the site receives a navigation element. These can be used as an escape from any point in the site and can be found at a reliable, known location. The elements were later styled with an increased weight font for improved legibility, also considering different sizes of screens and reading conditions.

A design established from the earliest life event concepts is the use of recurring blips to represent the work's kind property by colour. Each of the primary kinds has an associated colour that is only used in that specific context. These blips can be found in other spots around the site and generally convey the same association wherever they appear, like for articles associated with a specific kind of work.

Additional to the kind blip, a textual representation of the form property and a brief label for the number of items of the graphical blocks associated with the record are included. To give a rough indication of the contents of a work item, image and video contents are counted individually. The number only has the purpose to provide a way to distinguish larger and smaller scale entries or even to notice changes in an entry's contents.

As most work showcases offer more insights into projects that are also listed as life events, the data of the associated event can be visualised alongside the showcase. This dedicated introduction section has more space available than the table-based layout in the life page rows and is allowed to be more detailed, like a dedicated section for meta data. It is the left-hand part of "data" and "description" of each work item.

The landing page has a "displaced header", moving the branding part of the header in a centre stage position, on top of an introductory image holder. It offers the space to display an almost screen-filling graphic or backdrop without taking away from navigation or preventing the visitor from scrolling.

Below the introducer, selected work showcases can be listed, highlighted most recent or spotlighted projects. The selection's tagline follows the same design language of life events and work listings used on other pages.

The footer component itself appears in all major layouts of the site and offer a secondary always available internal and external link option. It consists of four sections, all relating to some form of location. The first, personal mail and geographical, then personal site-internal, personal site-external and non-personal site-external. All list items of the "Public" section also include a platform-specific icon that was custom-made with officially available logos from respective press kits.