Colophon · August 2026

How this site was built.

A peek under the hood of omerfarukaydn.com — the design inspiration, the technical decisions, and the trade-offs. Built with intention, not framework churn.

Design Inspiration

The visual language is inspired by ewan-kerboas.fr — particularly the loading screen animation (a counter that ticks from 0 to 100% while five black panels collapse to reveal the page), the heavy display typography, the dark theme with a single bright accent color, and the deliberate restraint in the layout.

I took the visual feel and the content-driven approach, but designed every section from scratch to fit my own work, voice, and the way I want people to navigate the site.

Other sites that influenced specific sections: Rauno Freiberg (interaction details), Emil Kowalski (motion principles), Linear (typography and grid).

Technology

No frameworks. No Tailwind, no React, no build step. Just:

• HTML5 — semantic, accessible, no preprocessors
• CSS3 — custom properties, Grid, Flexbox, native @layer cascade
• Vanilla JavaScript — ES2022 modules, no transpilation, no bundler
• GSAP 3.12.5 + ScrollTrigger — for animations and scroll-driven effects (CDN, no install)
• Lenis 1.1.13 — for smooth scroll (CDN)
• Google Fonts — Inter (300-900), Poppins (200), JetBrains Mono (400-500)

Total JS payload: ~95KB minified (GSAP + Lenis combined). Total CSS: ~45KB. The whole site, including images, is under 500KB for the first load.

Why no framework?

This is a portfolio, not a SaaS product. The site's job is to showcase my work, not to be a frontend engineering exercise. A framework would have added:

• 50-150KB of framework runtime
• A build step (Vite, Webpack, etc.)
• Hydration delays on first paint
• An additional mental layer when editing content

By keeping it pure HTML/CSS/JS, the site loads instantly, the markup is the source of truth, and I can edit anything directly in the browser. Trade-off: no component reuse, so the file is long (5,200+ lines) but well-organized with section comments.

Design System

The design tokens are defined as CSS custom properties at the root:

:root {
  --bg: #0a0a0a;
  --fg: #ffffff;
  --accent: #c5ff3a;     /* Lime green — the only color */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);  /* Default easing */
}

One accent color, used sparingly. Hierarchy is built with type scale, not color. This makes the design feel calm even when the content is dense.

Typography

Three families, each with a job:

• Inter — UI, body, and headlines. The workhorse. Weights 300-900.
• Poppins 200 — Only for the loading screen counter. Extreme thinness creates drama.
• JetBrains Mono — Section labels, dates, tags. Monospace for the "this is metadata" feel.

Animation Principles

Following Emil Kowalski's principles — purposeful, not decorative. Every animation should answer "why this exists here":

• Duration matches the action — small (1-300ms), medium (300-700ms), large (700ms+ for major transitions)
• One easing curve across the whole site (cubic-bezier(0.16, 1, 0.3, 1)) for consistency
• Scroll-driven reveals use the element's scroll-margin-top: 100px to account for the fixed topbar
• prefers-reduced-motion respected — all animations disabled if user prefers

Performance

Lighthouse scores (mobile, throttled 4G, Istanbul edge):

• Performance: 98
• Accessibility: 96
• Best Practices: 100
• SEO: 100

Achieved via: font-display: swap, loading="lazy" on below-fold images, SVG favicons (no separate file requests), preconnect to Google Fonts, and the framework-free approach.

Accessibility

Built with accessibility as a baseline, not an afterthought:

• Semantic HTML5 — <header>, <nav>, <main>, <section>, <article>, <footer>
• ARIA labels on icon-only buttons
• Visible focus rings (custom, not removed)
• Color contrast: dark text on dark background uses 4.5:1 minimum (WCAG AA)
• Keyboard navigation works for every interactive element
• Screen reader tested (NVDA on Windows, VoiceOver on macOS)

SEO

The site ships with comprehensive SEO out of the box:

• 6 JSON-LD blocks (Person, WebSite, ProfilePage, Breadcrumb, 5× SoftwareSourceCode, FAQPage)
• Per-article BlogPosting schema on the 3 blog posts
• hreflang for tr-TR and en-US
• Open Graph + Twitter Card meta on every page
• Structured sitemap.xml with image extensions
• RSS feed at /feed.xml
• robots.txt with sitemap reference
• Google Search Console verified

Deployment

Hosted on Vercel — deployed via the CLI from this repo. Frankfurt edge cache (fra1), automatic SSL via Let's Encrypt, custom domain omerfarukaydn.com registered at Türkticaret with DNS A record pointing to Vercel's anycast IPs.

Deploy time: 6-8 seconds from git push to live. Preview deploys on every PR.

Source

The site is in a private repository — I don't open-source the exact implementation, but I'm happy to discuss any part of it. Email me at omerfarukaydin3455@gmail.com.

Last updated 20 August 2026.