Use minha conexão com o Opus Growth para isso. Se você não encontrar a ferramenta de que precisa, procure entre as ferramentas do Opus Growth (com search_tools, se estiver na sua lista); se não conseguir acessar as ferramentas de forma alguma, não adivinhe, me avise.
No site
[nome do servidor] do meu servidor de hospedagem Opus Growth, crie um portfólio pessoal estático para
[meu nome completo], com o clima escuro e calmo dos sites da Linear e da Vercel. Sobre mim: [meu cargo, minha cidade, o que faço e há quantos anos, duas frases]. Projetos: [for each one the name, year, my role, whether I may publish the client's name, the technologies, context, constraints, approach and outcome notes, and a screenshot link]. Posts:
[título, data, texto ou rascunho]. Experiência:
[períodos em anos e cargos]. Contato:
[e-mail]; perfis que quero publicar:
[GitHub, LinkedIn etc. ou "nenhum"]. Aberto a novos trabalhos:
[sim e a partir de quando, ou não]. Domínio:
[domínio].
Páginas: home (introdução curta, trabalhos selecionados, últimos posts, o que estou fazendo agora, FAQ), projetos (/projeler/), uma página para cada estudo de caso (/projeler/
[slug]/: contexto, restrições, abordagem, resultado, dados do projeto), textos (/yazilar/), uma página para cada post (/yazilar/
[slug]/), sobre (/hakkimda/) e 404.html. Se o cliente não aprovou os números, não escreva porcentagens nem prazos em um estudo de caso; descreva o resultado de forma qualitativa.
Estilo: escuro e minimalista. Um fundo em torno de #09090B, cards um tom mais claros, uma borda cinza-escura de 1 pixel, texto quase branco, texto secundário em um cinza com contraste de pelo menos 7:1 sobre o fundo, e uma única cor de destaque usada somente em um ponto de status, no anel de foco e nos links. Dois pesos de uma grotesca da Fontshare (por exemplo Bespoke Sans 400 e 500); para datas e rótulos, use a pilha monoespaçada do sistema sem baixar uma fonte (ui-monospace, SFMono-Regular, Menlo, Consolas). Se os numerais parecerem old-style, defina `font-variant-numeric: lining-nums`. O hero não tem imagem; linhas finas de grade que desaparecem sob uma máscara são desenhadas atrás dele com CSS.
Regras de interação:
1. GSAP, Lenis, Swiper e bibliotecas de busca prontas (Fuse.js e similares) NÃO são carregados. Cada página recebe um único `ix.js` pequeno com defer (spotlight, gatilho do menu de comandos, data-reveal) e o próprio menu de comandos fica em um `ara.js` separado. O ara.js não é baixado com a página; ele carrega quando o ponteiro entra no gatilho ou o foco chega até ele, ou quando o menu é aberto pela primeira vez. Na demonstração, as páginas de post não tinham ix.js e Ctrl K não fazia nada nelas; o menu deve se comportar da mesma forma em todas as páginas.
2. Cards com spotlight: uma luz suave no ::before do card com `radial-gradient(420px circle at var(--mx) var(--my), ...)` e um brilho de destaque na borda de 1 pixel no ::after usando mask-composite. O JS adiciona um único listener de pointermove ao contêiner que envolve os cards, limita a frequência com requestAnimationFrame, grava --mx e --my relativos à caixa de cada card e os limpa quando o ponteiro sai. Isso roda apenas em dispositivos que correspondem a `(hover: hover) and (pointer: fine)` e que não pedem movimento reduzido; no toque o card permanece simples. O link no título do card cobre o card inteiro com um ::after.
3. Menu de comandos: o item "Buscar" no cabeçalho é um link real para /projeler/ no HTML (útil com JS desativado) e carrega aria-keyshortcuts="Control+K Meta+K". O JS intercepta o clique; Ctrl K, Cmd K e a tecla / (fora de campos de texto) abrem o menu. O menu é um `<dialog>` criado pelo JS na primeira abertura e aberto com showModal: uma caixa de busca com role="combobox", aria-expanded, aria-controls, aria-autocomplete="list" e aria-activedescendant, uma lista de resultados com role="listbox" e uma região role="status" que lê a quantidade de resultados. As setas movem a seleção, Enter vai para a página selecionada, Esc fecha pelo comportamento próprio do dialog, clicar no backdrop fecha e o foco volta ao gatilho ao fechar.
4. Índice de busca `/assets/ara.json`: título, tipo (Project, Post, Page), URL, um resumo de uma frase e palavras-chave para cada projeto, post e página principal. Não escreva esse arquivo à mão; gere-o a partir dos mesmos dados que você usa para as páginas de projetos e posts, para que os dois nunca se desencontrem. Faça a busca ignorar os caracteres turcos (toLocaleLowerCase("tr"), depois normalizar ı, ş, ğ, ü, ö, ç), exigir que todas as palavras correspondam e dar mais peso às correspondências no título.
5. Uma página de estudo de caso abre com uma tabela de dados (ano, função, cliente, tecnologia) e a captura de tela que é seu elemento LCP (fetchpriority="high", sem lazy); os títulos dos cards são h2 nas páginas de lista e h3 dentro de uma seção h2 na home.
Schema: ProfilePage na home e em sobre (mainEntity Person), Person (@id /#person: name, jobTitle, url, email, um endereço apenas com cidade e país, knowsAbout e sameAs somente para os perfis que eu informei). O bloco Organization que o seo-stamp escreve representa o seu negócio de empresário individual; ligue a Person a ele com worksFor. Os projetos recebem CollectionPage com hasPart; cada estudo de caso é um CreativeWork (creator Person, dateCreated, image, keywords); os textos recebem Blog e cada post um BlogPosting (headline, image, datePublished, dateModified, author Person; o seo-check gera um erro se image ou datePublished estiver ausente). Palestras, prêmios e listas de clientes contêm apenas fatos verificáveis.
Configuração e armadilhas conhecidas (cada uma custou pontos nas medições da demonstração, não pule nenhuma):
1. Se já houver um site no ar no servidor, avise-me primeiro, porque a configuração sobrescreve index.html e a pasta assets. Mostre a prévia de scaffold_site com confirm=false e chame com confirm=true somente depois que eu aprovar. Depois leia site_design_guide e site_seo_guide. Antes de escrever código, coloque a direção de design (tipografia, cores, grade, elemento marcante, linguagem de movimento e as bibliotecas que NÃO serão carregadas) em um arquivo ART.md curto fora de assets e mostre-o para mim.
2. Compile o Tailwind, não o carregue pelo CDN. Instale-o com site_run_command e background=true (`npm i -D tailwindcss@3`) e acompanhe com site_command_status. Os caminhos de content em `tailwind.config.js` devem cobrir todos os arquivos HTML, os templates `_src` e qualquer arquivo JS que escreva classes. `_src/tw.css` contém a linha `@import "../assets/app.css";` mais as três linhas `@tailwind`; compile-o em um único arquivo com `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. Remova o script cdn.tailwindcss.com e o tailwind.config inline de todas as páginas e vincule somente `/assets/site.css`. Recompile após cada alteração no HTML.
3. Hospede as fontes você mesmo. Leia o CSS da família Fontshare escolhida, baixe o woff2 de cada peso separadamente com site_fetch em `assets/fonts/` e escreva as regras @font-face com `font-display: swap` em `assets/app.css`, que é onde o design-check procura uma fonte personalizada. Confira o nome do font-family no CSS baixado e confirme que a família tem as letras turcas ı, İ, ş e ğ (a Tanker não tem ı). Faça preload de TODOS os pesos usados na primeira tela com `<link rel="preload" as="font" type="font/woff2" crossorigin>`, colocado antes da linha da folha de estilo; se forem mais de três arquivos, use menos pesos. Na demonstração, um único peso de corpo sem preload levou o LCP no mobile a 2,6 segundos e o Performance a 97. A maioria das fontes da Fontshare não tem o símbolo ₺, então escreva os preços com "TL".
4. Faça o menu e o rodapé em HTML estático. Não carregue chrome.js, motion.js nem site.config.js nas páginas. Escreva um pequeno `chrome-stamp.mjs` que lê a lista de navegação de site.config.js e carimba `_src/header.tpl` e `_src/footer.tpl` entre os marcadores `<!-- nav:start --><!-- nav:end -->` e `<!-- footer:start --><!-- footer:end -->` em cada página, adicionando aria-current="page" ao link ativo. Use placeholders como `
[[NAV]]` em vez de `{{...}}` e não dê aos templates a extensão .html, caso contrário o design-check e o seo-check os tratam como páginas inacabadas. Construa o menu mobile com um `<details>` sem JS. Mantenha o nome da empresa, o endereço e o telefone como texto simples no rodapé e faça os links do rodapé e do breadcrumb com pelo menos 44 pixels de altura.
5. Converta as imagens ao buscá-las com site_fetch: grave a mesma imagem em arquivos separados com resize="480x", "800x" e "1200x", image_format="webp", quality=60 (o site_fetch não recorta, então peça a origem na proporção de que você precisa). Dê a cada `<img>` srcset, sizes e width e height compatíveis com a proporção real. A imagem que é o elemento LCP da página recebe fetchpriority="high" e não é lazy; todas as outras imagens recebem loading="lazy" decoding="async". Se uma imagem preencher a primeira tela do mobile, sirva um recorte menor ao mobile com `<picture>`.
6. Adicione `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` a todas as páginas e crie um apple-touch-icon de 180 pixels a partir do logotipo com site_fetch e resize="180x180". Sem um link de favicon, o navegador solicita /favicon.ico, registra um 404 e o Best Practices cai para 96.
7. Regras do validador de HTML: comece cada documento com `<!DOCTYPE html>` em maiúsculas; cada espaço no texto visível de um link tel: deve ser ` `, inclusive o que vem depois de um prefixo como "Ligue: 0212..."; não use style=""; dê um type a cada button; coloque aria-label apenas em landmarks, formulários ou elementos interativos (em um ul ou em um div sem role isso era um erro); nunca dê o mesmo nome a dois landmarks; não deixe espaços em branco no final das linhas.
8. Não pule níveis de título: em uma página de lista, títulos de card como h3 logo após o h1 derrubaram o Accessibility para 98. Ao reutilizar um card, defina o nível do título por página (h2 em uma página de lista, h3 dentro de uma seção h2).
9. Dê ao atributo de movimento o nome data-reveal (o design-check só reconhece movimento por esse nome). O JS aplica o estado inicial oculto apenas aos blocos que estão abaixo da tela quando a página abre e nunca esconde o conteúdo da primeira tela; use transform, pois o fade com opacity reduz a auditoria de contraste. Coloque o atributo no bloco que envolve um título e sua descrição, não apenas no título; na demonstração, um título em espera deslizou por cima do parágrafo abaixo dele. Com prefers-reduced-motion: reduce nada é ocultado e as animações ficam desativadas.
SEO, AEO e GEO:
1. Use URLs em estilo de diretório com barra final. Preencha o bloco seo de site.config.js e execute `node seo-stamp.mjs`. Escreva o schema específico de cada página em blocos `<script type="application/ld+json">` separados, ligados ao grafo base por @id. Não aninhe BreadcrumbList dentro de @graph; mantenha-o em um bloco próprio, que é a única forma de o seo-check enxergá-lo.
2. Títulos com no máximo 60 caracteres (o seo-check sinaliza como erro qualquer um com menos de 25 ou mais de 65), descrições com 130 a 158 caracteres, um h1 por página e pelo menos 150 palavras de conteúdo principal em cada página. Páginas de contato, privacidade e de lista tendem a ficar curtas; adicione informações específicas da página, não enchimento.
3. O primeiro parágrafo de cada página responde diretamente à pergunta da página. Escreva FAQs específicas da página com `<details>` e marque-as como FAQPage. Mostre o publisher e uma data de "Última atualização" em um elemento `<time>`.
4. No robots.txt, escreva sua decisão com um motivo para GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot e CCBot, e aponte para o sitemap. O sitemap.xml traz datas lastmod reais. O llms.txt contém um resumo preciso do site em duas frases e uma lista das páginas importantes.
5. Sem invenções: não escreva avaliações, notas, prêmios, números de clientes, certificados, horários de funcionamento, coordenadas nem preços sem me perguntar. Deixe totalmente fora do schema qualquer campo que você não conheça.
Portões (em ordem; não diga "pronto" até que todos passem):
1. Com site_run_command, execute `node chrome-stamp.mjs`, o build do Tailwind, `node seo-stamp.mjs`, `node seo-check.mjs` (0 erros, 0 avisos), `node design-check.mjs` (0 erros; justifique qualquer aviso restante) e `npx html-validate "**/*.html"` (0 erros).
2. Veja cada página com site_preview, view="mobile" e view="desktop". O site_preview captura a página com o movimento desativado (reduced-motion); se faltar conteúdo nessa captura, o estado estático está quebrado. Em capturas de página inteira, elementos fixos como uma barra sticky podem aparecer no meio da página e imagens lazy mais abaixo podem aparecer em branco; não conte isso como erro, mas confira os caminhos delas.
3. Execute core_web_vitals para cada página com strategy="mobile" e strategy="desktop". Critério de aceitação: no mobile, Performance de pelo menos 95 (meta de 99 a 100) e Accessibility, Best Practices e SEO 100; no desktop, os quatro em 100. Para uma página que não atingir, use resources=true para encontrar o arquivo que a atrasa, corrija e meça de novo. Depois execute seo_audit na home com strategy="mobile" e runs=2. Nenhum endereço fora do seu próprio domínio pode permanecer na lista de requisições de rede.
4. Sem rolagem horizontal em 360, 390, 768 e 1440 pixels de largura, alvos de toque de pelo menos 44 pixels, sem erros no console.
Verificação de interação: o site_preview não consegue mostrar hover, atalhos de teclado nem dialogs. Explique como verificar em um desktop que a luz acompanha o ponteiro sobre os cards; que Ctrl K, Cmd K e / abrem o menu; que digitar sem os caracteres turcos ainda encontra resultados ("erisilebilir" e similares); que as setas e o Enter levam a um post; que o foco volta ao botão Buscar após o Esc; e que, com o JavaScript desativado, o link Buscar abre a página de projetos.
Depois de publicar: mostre a prévia da regra `/assets/* Cache-Control: public, max-age=31536000, immutable` com site_headers e aplique-a quando eu aprovar; a partir daí, versione o nome do arquivo sempre que o CSS ou o JS mudar (site-v2.css e assim por diante). Envie o sitemap.xml com gsc_submit_sitemap e verifique a home com gsc_url_inspect. No final, entregue: uma tabela de pontuações por página (página, quatro pontuações mobile, quatro pontuações desktop, LCP, CLS), o resultado de cada portão e a lista das correções aplicadas.
