back to the makercraft · how this site came together

What stayed. What I left behind.

This site keeps a record of how it was made. Every change below comes from the project’s decision notes and version history, with a date, a reason and a source. The discarded directions are part of the story too.

timeframe
July–October 2026
source
project notes and Git history
try it
the Inspect button reveals how each screen is built

Before and after.

A discarded opening with the line “Imagino. Desenho. Faço funcionar.” (“I imagine. I design. I make it work.”) over screenshots of three projects.
discarded · Oct 5
The restored opening, asking what happens when we trade experience for speed, set in orange Mango on navy.
kept
The original opening returns. The line “Imagino. Desenho. Faço funcionar.” (“I imagine. I design. I make it work.”) was “discarded because it fell outside the scope.” The question about trading experience for speed returned to the opening. docs/design/2026-10-05-recalibracao
A gallery of vertical strips, with MC Doceria expanded in the center.
discarded · Oct 5
The current gallery, with layered panels, an index of five projects and the decisions behind each one.
kept
The gallery gained depth. The strip layout “improved the page, but still felt plain and dull.” It gave way to layered panels, with drag navigation, an index and the decisions behind each project. docs/design/2026-10-05-folio
The Manifesto cover in September, with MANIFESTO set in blocks and the line “Every choice has consequences.”
discarded · Sep
The current Manifesto cover, with “Every choice has consequences” alongside three typographic panels.
kept
A shared visual language for Manifesto and Artisan. The block-based cover gave way to “Every choice has consequences,” alongside three typographic panels: form, code and meaning. docs/design/2026-10-06-manifesto-artesao
A discarded mobile layout with Patric Teixeira’s name filling the entire width.
discarded · Oct 6
The approved mobile layout, with the name set in compact Mango within the column.
kept
The name fits the column. “The attempt to stretch the name across the full width and move the images aside was rejected.” The name stayed in compact Mango, with the portrait and panels in their original positions. docs/design/2026-10-06-entrada-obras
The services shown as a list on mobile, with the first card expanded.
discarded · Oct 6
Services as stacked cards on mobile: the second card slides over the first.
kept
Services become a stack. The list became a stack of cards, using position:sticky and native scrolling. A card only sticks in place once all of its content has moved through the viewport. docs/design/2026-10-06-servicos-cards

The timeline.

  1. The question mark opens the site.

    The drawn question mark becomes the opening’s first gesture.

    discarded an opening that spent 4.7 seconds drawing the logo before revealing the page. “Two marks appeared in succession… and the only color outside the palette” was on the first screen.

    docs/DOCUMENTACAO.md

  2. Navigation becomes a floor plan. Contact moves into the footer.

    Destinations are arranged like a floor plan, and contact appears at the end of every page.

    discarded the navigation table, which “was the most generic part of the site,” and contact hidden behind a button: “a channel behind a toggle is one fewer way to get in touch.”

    6cc3824 · 1516cb3

  3. The Manifesto panels stop dancing.

    The Manifesto composition becomes continuous and stable.

    discarded the panels’ choreographed movement. “Geometry is architecture, not ballet.”

    dfabcbc · docs/SPEC-manifesto-composicao-continua.md

  4. A quieter cursor.

    A small diamond that expands over clickable elements. Nothing more.

    discarded the crosshair spanning the screen and its coordinate readout, which “competed with the text and showed information nobody had asked for.”

    shared/cursor.js

  5. Describing the work on its own terms.

    Each case study makes only claims its source material supports.

    discarded the “business problem → solution” angle, which “invented claims the text did not support,” and direct benefits that “introduced the agency-speak the rest of the site rejects.”

    c0027cd · docs/superpowers/specs/2026-08-04-portfolio-lingua-do-cliente-design.md

  6. Navy and orange.

    The active pages adopt a navy #141E30 and orange palette.

    113d5ea · e962488

  7. References and the first discarded direction.

    The three-body field stays in entreMultiversos, where it belongs.

    discarded the portfolio’s orbital field. “The references were applied too conservatively, carrying the personal site’s theme over into the professional one.”

    docs/analises/2026-10-05-referencias-portfolio

  8. Recalibration.

    The original opening returns and the gallery gains depth.

    discarded the opening “Imagino. Desenho. Faço funcionar.” and the strip gallery.

    docs/design/2026-10-05-recalibracao · docs/design/2026-10-05-folio

  9. One visual language.

    Manifesto and Artisan use the opening’s spatial language in their own layouts.

    discarded the maker’s name stretched to a monumental scale and “PATRIC’S” in the header.

    276f512 · docs/design/2026-10-06-entrada-obras

  10. The first impression.

    Fonts return to standalone files, the opening shrinks from 22.3 to 11.0 screens, and body copy moves away from orange. The first word’s timing stays unchanged: “Showing the word sooner would change the opening’s signature gesture.”

    discarded the gallery reflection, made of “five duplicated, flipped and blurred images,” and base64 fonts: “decoding the data URL is as simple as downloading the file.”

    63ab450 · docs/analises/2026-10-06-awwwards-p0 · docs/FONTES.md

  11. No letter is lost.

    Title letters move between pages, with unused letters collected in the type case. Each project takes on the client’s identity. Inspect reveals the page’s construction, the contact form creates a stamp, visitors choose how much motion to use, and the page reports its resource size.

    docs/analises/2026-10-07-awwwards-p1-p2

Other things left out.

  • Sound. “The site will be silent.” docs/DOCUMENTACAO.md
  • A diagonal bar behind the portrait. “A design that needs constant hand-holding can’t stand on its own.” docs/DOCUMENTACAO.md
  • A simulated terminal and operating system, suggested by a reference: “There is no reason to bring in fictional files, a terminal or a simulated boot sequence.” docs/analises/2026-10-05-referencias-portfolio
  • A thumbnail grid, a conventional hero and a standard carousel. They have been ruled out since the beginning. docs/IDEIAS-DESIGN.md

What was measured.

The homepage before and after the October 6 revision: load timings and transferred bytes on mobile with simulated 4G; scroll distance, contrast and alignment on desktop. Sources: docs/analises/2026-10-06-awwwards-p0 and docs/analises/2026-10-06-alinhamentos.
metricbeforeafter
First Contentful Paint (FCP)2.95 s1.29 s
Largest Contentful Paint (LCP)6.02 s4.02 s
transferred1,048 KB396 KB
screen heights to the first project (1440 px)22,311,0
body copy contrast5,95:112,92:1
misaligned baselines in the Manifesto10.56 px0 px

The footer reports the size of the resources this page has loaded.

No letter is lost. Some ideas are left behind — and they’re part of the story too.