💡 Project Overview
“Adding the flexibility of dynamic routing to the performance of a static site”
Traditional static hosting like GitHub Pages cannot execute server-side logic, forcing developers to rely on client-side scripts for tasks like localization.
I migrated this project to Cloudflare Pages to adopt a Hybrid Strategy: maintaining the fast performance of SSG (Static Site Generation) while utilizing Edge Functions (Middleware) to detect user language at the request level.
🛠 Tech Stack
- Framework: Svelte 5, SvelteKit (Adapter Cloudflare)
- Infrastructure: Cloudflare Pages (Functions)
- Styling: Pure CSS (CSS Variables)
- Content: Mdsvex
💻 Key Features
1. Hybrid UX (Resume + Portfolio)
Combined the information density of a Resume with the visual experience of a Portfolio. The home screen is designed as a ‘Resume’ to deliver core information quickly, while clicking ‘View Details’ transitions to a ‘Project Retrospective’ page.
2. Server-side Language Detection
export const handle: Handle = async ({ event, resolve }) => {
let locale = event.cookies.get(LANGUAGE_COOKIE) as 'ko' | 'en' | undefined;
if (!locale) {
const acceptLanguage = event.request.headers.get('accept-language');
locale = detectLanguageFromHeader(acceptLanguage);
}
event.locals.locale = locale;
const response = await resolve(event, {
transformPageChunk: ({ html }) => html.replace('%lang%', locale),
});
return response;
};Solved the ‘screen flickering’ issue common with client-side (navigator.language) detection.
By utilizing Cloudflare Functions, the app parses the Accept-Language header on the server side. This ensures the HTML is rendered in the user’s preferred language (English/Korean) before it even reaches the browser.
3. Web Standards & Performance Optimization
Achieved Performance 97, Accessibility/Best Practices 100.
Search engine indexing (SEO) was intentionally blocked (robots.txt) for privacy reasons, but all other aspects strictly adhere to web standards through semantic markup and image optimization.
4. Pure CSS Responsive Design
Designed a responsive layout using Pure CSS without heavy CSS frameworks.
Beyond simple resizing, I implemented optimized UI/UX for both Mobile and PC environments to ensure clear information delivery across all devices.
💬 Technical Decisions
1. Why migrate from GitHub Pages to Cloudflare Pages?
The biggest reason was the Initial Load Experience. To serve localized pages on static hosting like GitHub Pages, the browser must load a blank page, check the language via JavaScript, and then redirect. I considered this micro-flickering and delay detrimental to the user experience.
By intercepting requests via Cloudflare Functions, I could provide a perfectly rendered first screen without any delay.
2. Transition from Next.js to Svelte
Static exports in Next.js still incur Hydration overhead due to the React runtime. I judged this to be unnecessary for a content-focused portfolio site.
Svelte compiles components into optimized vanilla JS, resulting in a lighter runtime and faster First Contentful Paint (FCP), making it the most suitable tool for building a performance-centric static site.
3. SEO Score and Privacy
The SEO score of 66 on Lighthouse is an intentional design choice, not a technical flaw. To prevent sensitive personal information included in the resume from being indiscriminately exposed to search engines, I applied noindex. This decision prioritizes security and privacy.