Winsting Portfolio Website

Overview

A personal portfolio I built and run myself, live at winsting.kr.

The work entries are not in the code. They are in Firestore. I edit an item, upload images and drag the ordering from an /admin screen, without opening the repository to add a single entry.

Hybrid rendering

The problem with a static site whose data lives remotely: at first the browser fetched Firestore and drew the page, which meant search engines saw an empty shell. Two dozen works sat entirely outside the index.

So it now does both. At build time Firestore is read and every work is baked into static HTML (indexing, OG previews, first paint), while in the browser the same view is swapped for fresh data (edits appear without a redeploy). In an environment with no credentials, zero static detail pages are produced and the build still passes.

What got attention

Korean typesetting needed work. Line breaks were adjusted so particles and units do not split awkwardly, because Korean does not break on word boundaries by default and left alone it wraps anywhere.

Structured data switches JSON-LD type on what the work is: VideoGame for games, SoftwareApplication for apps. It is invisible on screen, so nobody would notice it breaking, which is why it is pinned down by unit tests.

On security, email sign-up is open at the project level, so a "logged in means allowed" rule blocks nothing. Every write is locked behind an admin UID comparison.

Cache and security headers are consolidated in firebase.json. A Netlify-style public/_headers file is silently ignored by Firebase, so without knowing that you assume the headers are applied when they are not.

Stack

Astro static output with plain .astro components (no runtime framework), CSS design tokens, Firebase (Auth, Firestore, Storage) and Hosting. Two locales, Korean and English. Pre-commit verification is a single npm run check (vitest → astro check → build).