Yuhao.app is a digital space I created with the intention of serving multiple purposes. It stands as a digital storefront for my array of apps and games, while also functioning as a platform to showcase my portfolio. Furthermore, it operates as a playground for my web-based projects, in addition to housing a blog where I organize my thoughts and insights.

When it came to the design aspect of the site, my primary goal was to strike a balance between a personal touch and a subdued, neutral aesthetic. Given that the site primarily represents my indie efforts, I aimed to steer clear of an overly industrial appearance. I am one person, and a personal site should always have a personality.

In the same time, the site itself shouldn’t take the center stage, and be overly distracting. It meant to be a platform for all of my projects.

Consequently, I made a decision to eschew the use of colors on the site, instead opting for a range of subtle grayscale tones. By employing this muted color palette, I aimed to ensure that the spotlight remains firmly on the vibrant and dynamic nature of the projects I present. This approach also provided me with the opportunity to prioritize and accentuate the design elements revolving around typography.

Technology

When it comes to technologies, my goals are: 1) Maxium user experience; I should be able to provide vistors of this site with a streamlined and intergrated experience. 1) Maxium developer experience; Developing for this site should be as simple as writing a static site, but have the full power of a web app. 3) Maxium writer experience; I have to be able use both Ulyssess and IA Writer for my blogs. 4) Cost and flexibility; hosting the site need not to be insanely expensive, and no vendor lock in.

yuhao.app

The site you are currently visiting

SvelteKit

Meta-Framework that powers everything

Ghost

Self-hosted headless CMS for /blog

Ghost

Self-hosted headless CMS for /salted

umami

Privacy focused, self-hosted analytics.

PocketBase

Self-hosted backend for Storage and Auth.

Vercel

Primary host (SvelteKit) for yuhao.app

Coolify

Open-source & self-hostable Heroku / Netlify / Vercel alternative.

Digital Ocean

My VPS (2vCPU & 4GB RAM) of choice, powers all self-hosted software.

Architecture Diagram of yuhao.app

Typography

Typography played a pivotal role in shaping the overall aesthetic of the site. And is the first thing I considered when designing this. As a colorless backdrop demanded attention to detail, I selected Vectora by Adrian Frutiger as the sans-serif font. Renowned for its suitability for contemporary displays, Vectora's slender profile exudes a distinctive charm. While deliberating on the choice of fonts, I considered Frutiger and Vesta but ultimately omitted them. Frutiger is too industrialist for a site like this. And although Vesta is designed to be the companion of my serif font of choice. Ultimately I prefer the slender looks of Vectora.

For the serif font, I opted for Capitolium 2 by Gerard Unger, drawn to the font's fusion of historical elements from sixteenth-century italics with a contemporary touch. This choice was influenced by my admiration for Unger's craftsmanship, as Capitolium 2 proved to be an ideal companion for presenting extensive paragraphs of text with clarity and elegance.

Anticipating the inclusion of Chinese and Japanese content on my site, I sought I would accommodate both languages seamlessly. Rather than selecting two separate fonts, I went with Ku Mincho, a typeface skillfully crafted by Julius Hui (許瀚文) and his team at Kowloon type. Known for its Ming-style design. The typeface elegant typeface also comes with a set of meticulous crafted Kana characters by Oryzae LLC (合同會社おりぜ). Special thanks to Kowloon Type for granting the permission to embed this font on this site.