On my Opus Growth hosting server
[server name], build a horizontal-scroll portfolio site for
[office or photographer name]. What I do: [architecture, interior design or photography; which kind of work], city:
[city, district], founding year and team:
[year, headcount, founder's name]. Projects: [for each, name, place, year, status, floor area or shoot type, one-sentence summary, question, approach, process, materials or technique, at least two photo links]. Ongoing work:
[name, place, year, one sentence]. Professional registration:
[if any]. Contact:
[email],
[phone],
[WhatsApp number],
[address]. Domain:
[domain].
Pages: home (/: hero, horizontal project gallery, approach, FAQ), a page per project (/projeler/
[project-name]/: full-width image, fact sheet, question, approach, process, materials, a second image, link to the next project), office and contact (/ofis/, with the contact section at the #iletisim anchor), privacy and KVKK (/gizlilik/) and 404.html. No form; email, phone and a WhatsApp link with a prefilled message are enough. If an ongoing project has no detail page, do not make its card a link.
Style: a calm, gallery-like portfolio. Limestone background, dark text, sharp corners and thin rules; the accent colour appears only on hover and focus. A Fontshare serif display face (for example Erode) and a plain grotesque body face (for example Archivo). On desktop the hero fills the screen so the gallery starts below the first view.
Motion rules (the hardest part, follow them to the letter):
1. Libraries: GSAP 3.13 core, ScrollTrigger and Lenis, on the home page and the project pages. SplitText and Swiper are NOT loaded; no scripts at all on the office and privacy pages.
2. The default HTML and CSS is a vertical stack: one column on phones, a two-column grid on desktop. Without JS, with reduced motion and on phones the gallery stays like that.
3. Let CSS, not JS, build the horizontal layout: at 768 px and wider and when the `.anim` class is present, the track is `display:flex`, `width:max-content` and `height:calc(100vh - header height)` from the first paint, and the wrapper scrolls on its own with `overflow-x:auto`. That way the layout does not change when JS arrives (CLS 0), and if the library never arrives the gallery can still be scrolled sideways.
4. With gsap.matchMedia, only for `(min-width: 768px)`, pin the wrapper with ScrollTrigger, scrub 0.8, an end equal to the track's overflow ("+=" + (track.scrollWidth - innerWidth)) and invalidateOnRefresh on; add a class that gives the wrapper `overflow:hidden`. A thin progress line advances with scaleX.
5. Image reveal: gallery images open from left to right with containerAnimation, from clip-path `inset(0 100% 0 0)` to `inset(0)`. Never hide the panel visible in the first view or the hero image. On phones and on project pages only images that are below the screen at load open upwards with clip-path.
6. Keyboard: when Tab reaches a card that is off screen in the track, the browser scrolls the wrapper internally and the card disappears. On focusin, reset the wrapper's scrollLeft to 0 and scroll the page to the vertical position where the card comes into view (scrollTrigger.start + (end - start) * the card's left offset / total overflow). Without this step the third card reached with Tab stayed off screen in the demo.
7. Enable Lenis only on `(pointer: fine)` devices and connect it to ScrollTrigger.update; for in-page links such as #projeler, move focus to the target after scrolling.
Setup and known traps (each one cost points or broke something in the demo measurement, do not skip any):
1. If a live site is already on the server, tell me first, because setup overwrites index.html and the assets folder. Preview scaffold_site with confirm=false and call confirm=true after my approval. Then read site_design_guide and site_seo_guide. Before writing code, put the design direction (typography, colour, grid, signature element, motion language and the libraries that will NOT be loaded) in a short ART.md outside assets and show it to me.
2. Compile Tailwind, do not load it from the CDN. Install `npm i -D tailwindcss@3` with site_run_command and background=true, and watch it with site_command_status. The content paths in `tailwind.config.js` must cover every HTML file, every template and every JS file that writes classes. `_src/tw.css` holds an `@import "../assets/app.css";` line and the three `@tailwind` lines; compile it into one file with `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. Remove the cdn.tailwindcss.com script and the inline tailwind.config from the pages and link only `/assets/site.css`. Recompile after every HTML change.
3. Self-host the fonts. First check that the Fontshare family you pick has the Turkish letters (ş, ğ, ı, İ, ç, ö, ü): in the demo Tanker had no dotless ı and Outfit had no ş, ğ or İ, so those letters would fall back to another font in headings. Download each weight's woff2 separately with site_fetch into `assets/fonts/`, write the @font-face rules with `font-display: swap` into `assets/app.css` (design-check looks for the custom font there) and check the font-family name in the CSS you downloaded. Preload the heading and body fonts used above the fold on every page with `<link rel="preload" as="font" type="font/woff2" crossorigin>`, before the stylesheet; do not preload more than two files, because preloading a third weight in the demo made mobile LCP 0.2 seconds longer. Most Fontshare fonts lack the ₺ sign, so write "TL" for prices.
4. Make the menu and footer static HTML. Do not load chrome.js or site.config.js on the pages. Write a small `chrome-stamp.mjs` that reads the nav list from site.config.js and stamps `_src/header.tpl` and `_src/footer.tpl` between the `<!-- nav:start --><!-- nav:end -->` and `<!-- footer:start --><!-- footer:end -->` markers on every page, adding aria-current="page" to the active link. Templates must not end in .html and must use placeholders like `
[[NAV]]` instead of `{{...}}`. Build the mobile menu without JS using `<details>`. Keep the organisation name, address and phone as plain text in the footer, and make every touch target at least 44x44 px, footer and breadcrumb links included.
5. Convert images while downloading them with site_fetch: write the same photo with resize="480x", "800x" and "1200x", image_format="webp", quality=65 to separate files. site_fetch never crops; when an Unsplash photo needs another ratio, download the cropped version by adding parameters such as `?w=1600&h=1200&fit=crop` to its URL. Give every `<img>` srcset, sizes and a width and height that match the real ratio. The main above-the-fold image gets fetchpriority="high" and is not lazy; the others get loading="lazy" decoding="async". If the main image fills the screen on mobile, serve a smaller crop with `<picture>`.
6. Write the SVG version of the logo as favicon.svg with site_write_file and add `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` to every page. Without a favicon the browser logs a 404 and Best Practices drops to 96.
7. HTML validator rules: start with an upper-case `<!DOCTYPE html>`, use ` ` for the spaces in the visible text of tel: links, never use a style="" attribute, give every button type="button", and do not put a `<details>` inside a `<figure>` after its figcaption.
8. Download the motion libraries (GSAP, ScrollTrigger, Lenis) from jsdelivr into `assets/vendor/` with site_fetch, pin the version and load them only on the home page and the project pages. Do not use `<script defer>`; put a small loader at the end of the page that waits for the load event, two requestAnimationFrame calls and then requestIdleCallback, and appends the scripts in order with async=false. A one-line script in `<head>` adds the `js` class to `<html>` and the `anim` class unless prefers-reduced-motion is "reduce"; without `anim` the loader downloads nothing. Define hidden start states only under `.anim`, and add a CSS animation as a safety net that reveals every hidden element after 2.5 seconds in case the library never arrives. In earlier demos deferred libraries pushed mobile LCP to 3.2 seconds; with this loader the pages measured 99 to 100. Name the attribute for scroll-revealed elements data-reveal; design-check only recognises motion by that name.
SEO, AEO and GEO:
1. Use directory-style URLs with a trailing slash (/projeler/
[project-name]/, /ofis/, /gizlilik/). Fill in the seo block of site.config.js and run `node seo-stamp.mjs`. Write the page-specific schema (home WebPage and FAQPage; each project page a WebPage with a CreativeWork as mainEntity, including dateCreated, locationCreated and image; office AboutPage with a Person for the founder; BreadcrumbList on inner pages. For an architecture or photography studio with an office, businessType ProfessionalService) in separate `<script type="application/ld+json">` blocks and link them to the base graph by @id. Do not nest BreadcrumbList inside @graph; keep it in its own block, because that is the only way seo-check sees it.
2. Keep titles at 60 characters or fewer (seo-check flags anything over 65 as an error), descriptions between 120 and 158 characters, one h1 per page and no skipped heading levels (an h3 straight after the h1 dropped accessibility to 98). Every page needs at least 150 words of main content; contact and privacy pages tend to fall short.
3. The first paragraph of every page answers the page's question directly. Write page-specific FAQs with `<details>` and mark them up as FAQPage. Show the publishing organisation and a "Last updated" date in `<time>`.
4. In robots.txt, write down and justify your decision for GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot and CCBot, and point to the sitemap. Give sitemap.xml real lastmod dates. llms.txt holds an accurate two-sentence summary of the site, the key facts and a list of the important pages.
5. No invention: do not write reviews, ratings, awards, customer counts, certificates, opening hours, coordinates or prices without asking me. Leave any field you do not know out of the schema entirely.
Gates (in order; do not say "done" until all pass):
1. With site_run_command run `node chrome-stamp.mjs`, the Tailwind build, `node seo-stamp.mjs`, `node seo-check.mjs` (0 errors, 0 warnings), `node design-check.mjs` (0 errors; justify any remaining warning) and `npx html-validate "**/*.html"` (0 errors).
2. View every page with site_preview using view="mobile" and view="desktop". site_preview captures the page with motion turned off (reduced-motion); if content is missing in that capture, the motionless state is broken. Lazy images further down may be blank in the full-page capture; do not count that as an error, but check their paths.
3. Run core_web_vitals with strategy="mobile" and strategy="desktop" for every page. Acceptance: on mobile Performance at least 95 and Accessibility, Best Practices and SEO 100; on desktop all four at least 95. For a page that misses, find the slow file with resources=true, fix it and measure again. Then run seo_audit on the home page with strategy="mobile" and runs=2. No address outside your own domain may remain in the network request list.
4. No horizontal scrolling at 360, 390, 768 and 1440 px, touch targets of at least 44 px and no console errors. The site must also look flawless inside a 390x790 and a 1440x898 frame, as on the prompt pages.
Motion check: site_preview cannot show motion, so tell me what to look for in my own browser. On desktop, the gallery should stick to the top when you reach the Projects section, cards should flow left as you scroll down, images should open from left to right and the progress line should fill; after the last card the page returns to normal flow. When tabbing between cards, the focused card must always be on screen. On a phone and with reduce motion on, the gallery is a stack of cards and nothing sticks.
After publishing: preview the `/assets/* Cache-Control: public, max-age=31536000, immutable` rule with site_headers and apply it after my approval; from then on, version the file name whenever CSS or JS changes (site-v2.css and so on). Submit sitemap.xml with gsc_submit_sitemap and check the home page with gsc_url_inspect. Finally give me: a per-page score table (page, four mobile scores, four desktop scores, LCP, CLS), the gate results, the result of the interactions you tried in a browser and the list of fixes you applied.
