Portfolio OS — Golan Sarig

ABOUT

This portfolio was built entirely through a conversation with Claude Code — Anthropic's AI coding agent. No pre-written templates, no boilerplate. Starting from a blank folder, every line of HTML, CSS, and JavaScript was generated, debugged, and refined in real time. Content was pulled directly from Notion via API, images were sourced and optimised, and the site was version-controlled and live on a custom domain — all within a single working day.

9h 41m From first conversation
to live deployment

5,388 Lines of code
generated

9 Pages built
from scratch

48 Images sourced
& managed

11 Git commits
across the day

7 Platforms
connected

THE STACK

🤖 CLAUDE
CODE

The AI brain. Generated all HTML, CSS and JavaScript. Fetched content from Notion's API, processed and downloaded images, managed git commits and pushes, debugged errors in real time, and iterated on design based on feedback — no human wrote a single line of code.

🐙 GITHUB

Version control and source of truth. Every change committed with a descriptive message. Full rollback capability at any point in the project. The remote repository is the bridge between local development and live deployment.

▲ VERCEL

Instant deployment. Connected to GitHub — every push to main triggers an automatic deploy. Live in ~30 seconds. Free tier. Custom domain routing via Wix DNS.

📝 NOTION

Content API and image source. The existing Notion workspace held all case study content, gallery images, and cover photos. Claude accessed the public Notion API to extract blocks, retrieve signed S3 image URLs, and download assets — no manual export required.

📄 GOOGLE
DRIVE

PDF hosting for Project Journals. Four weekly stakeholder journals were already stored in Drive. Embedded directly into the journals page as interactive iframes via Google's /preview URL — no re-upload needed.

🔤 GOOGLE
FONTS

Typography via CDN. Two typefaces define the visual identity: Space Grotesk for body and UI, and Press Start 2P for pixel-style labels and headings — loaded from Google Fonts with preconnect for performance.

🌐 WIX DNS

Domain management. The domain golansarig.com is registered through Wix. A CNAME record on the www subdomain points traffic to Vercel's infrastructure, decoupling hosting from the registrar.

BUILD LOG

11:43 AM

Initial commit — site is born

Homepage, 4 case study pages (Genesis, Converse, Lifestyle & Rewards, Simple Invest), and all core CSS written from scratch. Design system established: CSS variables, dark background, neon accents, dot-grid texture, pixel-font labels.

~12:00 PM

GitHub connected · Vercel deployed · Site goes live

Remote repository created. Vercel project linked to GitHub. First live URL available within minutes of the initial commit.

~1:00 PM

Other Work pages added + cards made clickable

Three new landing pages created for smaller projects: ASAP Warranty App, Logo Design, and Print work. Cards on the homepage linked to their respective pages.

~2:00 PM

Notion API integration — 23 images extracted

Accessed the Notion public API to extract page content and download gallery images for all three Other Work pages. Required debugging a 403 auth error (see Challenges). 23 images downloaded and referenced locally.

~3:30 PM

Cover images + hero consistency pass

Fetched cover images for all Other Work pages from Notion's signed S3 URLs. Identified a design inconsistency in the hero sections — restructured all three pages to match the unified .case-hero pattern used in case studies.

~5:00 PM

Lightbox launched across all 9 pages

Built a shared lightbox.js module — 156 lines of vanilla JS. Spring animation, backdrop blur, Escape key and click-outside to close. Injected into all pages via a single script tag. Hero images and nav excluded automatically.

~7:00 PM

Project Journals page deployed

New page built to host four weekly stakeholder journals. PDFs embedded as interactive Google Drive iframes in a 2×2 grid. Cover image sourced from Notion. Linked from the Genesis case study page.

9:24 PM

Final push — 9h 41m after the first line

Navigation, footer links, and UX polish across all pages finalised. 11 commits total. Site fully live and indexed.

KEY CHALLENGES

Notion API Access Blocked

Python requests to Notion's public API returned 403 Forbidden. The API is accessible from a browser but rejects non-browser clients by default.

FIX Added a full browser User-Agent header to all Python requests. Immediately resolved — no credentials or tokens required.

Signed Image URLs Truncated

Notion stores images as signed S3 URLs that expire. When passed to getSignedFileUrls, the URLs were being stored truncated — causing the signing call to fail with "Invalid secure file URL".

FIX Re-fetched all block data without truncation, extracted full URLs, then passed them to the signing endpoint for fresh download links.

Inconsistent Hero Design

The three Other Work pages were initially built with a different hero structure — a dark header band with the image placed separately below — while case study pages used a full-bleed image with gradient overlay and anchored title.

FIX Identified the reference pattern from the Converse page. Restructured all three Other Work heroes to use the identical .case-hero component.

Per-Page Embedded Styles

For speed and portability, each page has its own embedded <style> block rather than a shared stylesheet. This meant site-wide changes required editing multiple files in sync.

FIX Strict CSS variable discipline ensures global values (colors, shadows, fonts) are centralised in :root. One shared file (lightbox.js) proved the shared-module pattern for future refactoring.

REDESIGN READINESS

The site is built to be flipped. A full visual redesign — keeping all content and pages intact — is a realistic single-day effort. Here's the architecture that makes it possible:

CSS Variable System

All colours, glow values, and font families live in :root on every page. Changing the entire visual palette — background, accents, text — means editing ~8 variables. The structure and spacing remain untouched.

Extract a Shared Stylesheet

Moving the common CSS into a single /style.css file is the highest-leverage preparatory step. Once done, any future redesign becomes a single-file change that propagates across all 9 pages instantly.

Shared JS Modules Already Proven

lightbox.js is the first shared module — one file, included on all pages, self-contained with its own styles. Navigation, footer, and analytics scripts can follow the same pattern.

Identical Page Structure Across All 9 Files

Every page follows the same HTML skeleton: nav → hero → sections → footer. This consistency means structural redesign changes — new nav style, different section headers, updated cards — apply predictably everywhere.

Vercel + GitHub = Instant Iteration

Design changes deploy in ~30 seconds from a git push. Previous versions are always one git revert away. This makes design experimentation low-risk — ship fast, roll back faster.

Framework Migration Path

The clean semantic HTML maps 1:1 to any component framework (React, Svelte, Astro) if the site ever needs dynamic content, a CMS, or server-side rendering. Content is already structured — only the delivery layer would change.