Shane Fontane

Shane Fontane

Skip to process

Portfolio process / Grammarly

Behind
this design.

I used Codex to design and build this portfolio in the browser. My work at Grammarly became the first complete test—and this is the framework, feedback loop, and editing behind it.

View the finished Grammarly story
A symbolic six-person team walking through a white studio
Generated image / the six-person team I led at Grammarly

Start with evidence, not aspiration.

The first build gave me something to react to.

“Make a cultural object, not a portfolio.”

I began with a detailed brief and an expectedly low bar: generate a rough baseline. The first build wasn’t precious. It made the distance between the words and the experience visible.

Brief → generation 01 → useful disagreement

I split Codex into three roles.

The maker didn’t approve its own work.

  1. 01

    Creative director

    Protected the thesis, narrative, art direction, typography, motion, voice, and originality.

  2. 02

    Design engineer

    Built the responsive, accessible production experience in Next.js—and proved it in the browser.

  3. 03

    Experience critic

    Reviewed actual desktop and mobile renders, named the clichés, and said what to remove.

The early prototypes showed me what was missing.

Early Emil Kowalski design + motion

Early Jakub Krehel UX

Later Peter G. Yang no-ai-slop

I installed specialist skills when the work exposed a gap. Design and motion came first. The anti-slop pass arrived later, when the problem became language.

I turned a Pinterest board into rules.

I shared 47 pins and extracted seven signals—not compositions to copy.

Pinterest board examples pairing automotive precision with rave-flyer typography
01 / automotive + rave
Pinterest board examples using fashion imagery, halftone texture, and red editorial type
02 / red editorial systems
Pinterest board examples combining music posters, cultural objects, newsprint, and rough type
03 / objects + print residue
  1. 01

    Precision / friction

    Luxury precision colliding with subcultural roughness.

  2. 02

    Cultural matter

    Automotive, fashion, music, magazines, cassettes, posters—real objects, not abstract mood.

  3. 03

    Controlled palette

    Black, white, gray, bone, silver. Red interrupts. Acid appears only as a shock.

  4. 04

    Editorial scale

    Severe crops, enormous type, isolated objects, dense information, deliberate empty space.

  5. 05

    Surface tension

    Glossy metal and fashion photography beside xerox grain, halftone, torn paper, newsprint.

  6. 06

    Type has a job

    Editorial architecture or evidence—not an identity-animation gimmick.

  7. 07

    Mechanical motion

    Crop, track, expose, stack, cut, register. No soft morphs, glow, or generative fields.

The browser became the design tool.

Working prototypes tested color, shape, scale, balance, typography, imagery, pacing—and how the system behaved on desktop and mobile.

Browser process slide documenting the rejected master scene and the blocker it exposed
01 / rejectedThe wrong idea made the problem legible.
Browser process slide documenting the final precision edit
02 / refinedThe last 0.01 became a mechanical edit.
Mobile browser proof showing the approved composition locked at its resting state
03 / responsiveThe same system held on mobile.

I stopped designing the whole site.

One story.
Grammarly.

I chose one story as the first complete test. Every design decision had to work there before it could be reused anywhere else.

Scores protected what worked. Blockers set the next edit.

A rising score protected validated decisions. When a score stayed flat, I killed the hypothesis instead of adding decoration.

  1. Master scene

    Rejected

  2. Hero plus cuts

    Closer

  3. Toy

    Same

  4. Rhodia accumulation

    Closer

  5. Shared print system

    Closer

  6. Borderless field

    Closer

  7. Native UI shape

    Closer

  8. Knockout type

    Closer

  9. Hero boundaries

    Closer

  10. Type rebalance

    Closer

  11. Exact extraction

    None

Generated images became specific through direction.

Symbolic six-person design team
Symbolic reconstruction / six-person team
Generated still life of used Rhodia notebooks
Personal artifact / generated still life

Codex generated the team and Rhodia still life. I directed the people, objects, crops, and treatment, then supplied the personal details it couldn’t know. I really used the Rhodia notebook at Grammarly; this final image is a symbolic reconstruction.

STATIC V11 / 10.0

The page had to work before it moved.

“I wasn’t going to use movement to rescue shit input.”

The resting composition reached 10/10 first. Motion could deepen engagement; it couldn’t be asked to fix the design.

Kling supplied one loop.

One seamless 7.04-second walking loop. Codex built the browser sequence around it: camera, paper, Rhodia, written revenue proof, cursor.

Symbolic team walking in a white studio
00:07.04 / seamlessEvery layer returns to the 10/10 rest.
  1. Camera
  2. Paper
  3. Rhodia
  4. Proof
  5. Cursor

Then I edited the words.

Elevated cross-functional collaboration to unlock transformative impact.

Built the Growth Design function.

Peter G. Yang’s no-ai-slop skill made the first pass. I reviewed the result and edited it again for honesty, cohesion, and clarity.

Each chapter became its own artifact.

At the end of Direction, Motion, and Story, I asked Codex to capture the iterative cycle as a standalone HTML story: failures, scores, decisions, final proof.

Direction process artifact
01 / Direction
Motion process artifact
02 / Motion
Story and content process artifact
03 / Story

Black / bone / red. Prose / evidence / atmosphere.

Then I cut 42 slides to 30—and 30 to one page.

4214 Direction
14 Motion
14 Story

3010 Direction
11 Motion
09 Story

1This page

I kept the reusable methods and removed the exhaustive archaeology.