from104.github.io

서기현(from104)의 개인 사이트 — 포트폴리오 + 블로그. Quasar (Vue 3 · Vite) SPA로 만들었고, GitHub Actions로 자동 배포됩니다.

🔗 https://from104.github.io

기술 스택

• Quasar 2 (Vue 3 Composition API, Vite)
• 마크다운 블로그 엔진 (의존성 최소 — markdown-it + 직접 만든 frontmatter 파서)
• 다크모드 (시스템 설정 자동 + 수동 토글 기억)
• 접근성 우선 설계 (키보드 포커스, 한국어 줄바꿈, 확대 허용)

개발

npm install
npm run dev        # http://localhost:9100

빌드

npm run build      # dist/spa 생성 + GitHub Pages용 404 fallback
npm run preview    # 빌드 결과를 로컬에서 미리보기

글 쓰기

src/posts/ 에 .md 파일을 추가하면 끝. 파일명이 그대로 URL slug가 됩니다.

---
title: 글 제목
date: 2026-05-30
tags: [태그1, 태그2]
description: 목록과 SEO에 쓰일 한 줄 요약
draft: false        # true면 빌드에서 제외
---

본문은 평범한 마크다운으로.

배포

main 브랜치에 push하면 .github/workflows/deploy.yml 이 자동으로 빌드 후 GitHub Pages에 배포합니다. (저장소 Settings → Pages → Source를 GitHub Actions로 설정)

구조

src/
├── boot/dark.js          # 다크모드 복원
├── components/           # ProjectCard 등
├── css/                  # 전역 스타일, 브랜드 변수
├── data/projects.js      # 포트폴리오 데이터 (여기만 고치면 됨)
├── layouts/MainLayout.vue
├── lib/posts.js          # 블로그 엔진
├── lib/format.js
├── pages/                # 홈/소개/프로젝트/블로그/포스트/404
├── posts/*.md            # 블로그 글
└── router/

scripts/spa-fallback.mjs  # 빌드 후 404.html + .nojekyll 생성

참고 — Flathub 검증

이 도메인은 io.github.from104.* reverse-DNS 앱 ID(QCalc 등)의 소유권 근거이기도 합니다. 검증은 GitHub 계정 기반이라 사이트 내용과 무관하지만, 도메인은 계속 살아 있어야 합니다.