Skip to content

CLAUDE.md

Latest commit

 

History

History
22 lines (14 loc) · 5.28 KB

CLAUDE.md

File metadata and controls

22 lines (14 loc) · 5.28 KB
Raw

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

What this is

The NatoBytes website — a static site served by GitHub Pages from the main branch of natobytes.github.io. There is no build step, package manager, bundler, or test suite. Files are served as-is at the repo root. Deploy = commit to main and push; GitHub Pages publishes automatically.

To preview locally, serve the directory over HTTP (e.g. python3 -m http.server) rather than opening files directly, so root-relative paths and images resolve.

Structure & conventions

The repo hosts several independent pages that do not share assets or styling:

  • index.html — the root NatoBytes marketing landing page ("Coding to new heights"). Hand-written and self-contained: root-level styles.css (~640 lines, no framework) and main.js (scroll reveals, sticky-nav "altimeter" progress bar, mobile burger menu, the rubber-duck debugging quips). Aesthetic is "Two-Ink Ascent" — a risograph trail-map poster: Bricolage Grotesque (poster display) + Fraunces (warm serif body, with an inked drop cap + italic accent words) + Space Mono (print-style labels/ticks), all via one Google Fonts @import. Warm bone palette (--paper #F1EBDF, --ink #16130D) with vermillion (--red #E8481E) and duck-yellow (--yellow #FFCE2B) treated as two overprinting inks. Signatures: the hero + contact headlines are a two-ink overprint (a duck-yellow ghost layer offset by --misreg 3px under a vermillion mix-blend-mode:multiply layer — markup is paired .ghost/.ink spans, the .ghost is aria-hidden); hard flat poster box-shadows that "press" on hover; square rubber-stamp tags (not pills); yellow highlighter-swash section kickers (.secnum, no numbered "01 /" eyebrows); a topographic .topo contour SVG behind the hero; paper grain + .halftone dot fields. Ducks are hand-drawn inline SVG (incl. a single-ink .duck-glyph stamp) — never color emoji. The brief that drove it: stop looking AI-generated, feel "fun, modern, professional." Edit those two files directly. Assets are in assets/: the hero phones and the FarmaPerto portfolio card use app-home.webp / app-map.webp / app-detail.webp, which are downscaled regenerations of FarmaPerto/screenshots/{home,map,detail}.png (cwebp -q 82 -resize 680 0 …) — regenerate them if those source screenshots change. assets/og.png is the 1200×630 Open Graph share image. assets/logo.png is the 512×512 square brand mark used as the Organization logo in the homepage JSON-LD — it is rendered from assets/logo.svg (the same artwork as the inline nav SVG) via qlmanage -t -s 512 -o assets assets/logo.svg && mv assets/logo.svg.png assets/logo.png; regenerate both if the mark changes. The <head> also carries a schema.org JSON-LD @graph (Organization/ProfessionalService + WebSite + founder Person) — keep its facts (email, NIF/vatID, sameAs, locality) in sync with the visible page, and never add fabricated aggregateRating/review/address data. The portfolio "FarmaPerto" card links to the in-repo FarmaPerto/ page, and the portfolio section ends with a compact .side-trail strip ("Side trail · smaller things we've built") whose cards link smaller cross-repo tools — currently the Jira → Markdown converter at /jira-to-markdown/ and the mortgage early-repayment calculator at /simulador-amortizacao/.
  • FarmaPerto/ — self-contained landing page for the FarmaPerto app, served at /FarmaPerto/ (capital F and P — GitHub Pages URLs are case-sensitive; the old lowercase /farmaperto/ URLs are rescued by a case-correcting redirect in the root 404.html). Hand-written FarmaPerto/styles.css (~80 lines, no framework) and inline JS. Bilingual (PT/EN): both languages live in the same HTML inside [data-lang="pt"] / [data-lang="en"] blocks; an inline script toggles the .show class based on a language button, localStorage (fp_lang), then navigator.language. When editing copy, update both language blocks.
  • FarmaPerto/privacy/ — the bilingual (PT + EN on one page) privacy policy for FarmaPerto, linked from its footer.
  • privacy/pumppad.html — standalone privacy policy for a separate app (PumpPad).
  • google44dca4b016cf0a98.html — Google Search Console verification file; do not rename or delete.
  • SEO infra (site root): robots.txt (allows all, points to this repo's sitemap, to the jira-to-markdown repo's own sitemap, and to the simulador-amortizacao repo's sitemap-index), sitemap.xml (lists the homepage https://natobytes.com/, https://natobytes.com/FarmaPerto/, and the cross-repo pages https://natobytes.com/jira-to-markdown/, https://natobytes.com/Volts/, and https://natobytes.com/simulador-amortizacao/ — the privacy pages were intentionally left out and can be added later), and .nojekyll (stops GitHub Pages running Jekyll on this hand-written site). The portfolio "Side trail" cards link to the jira-to-markdown tool and the simulador-amortizacao tool for crawl discovery. All canonical URLs use the apex https://natobytes.com (per CNAME).

Each top-level page/app is independent. When adding a new product landing page, follow the FarmaPerto/ pattern (own folder, self-contained styles).