Editorial Portfolio Landing Page

HTML · Tailwind CSS · JavaScript

codeinfoweb.com/design-prompts/editorial-portfolio

The prompt

AI Studio Prompt: Elias Novak, Front-End Developer Portfolio (HTML + Tailwind CSS)

Build a single-file responsive landing page in HTML with Tailwind CSS (CDN build), closely
following the attached reference design. Use the provided cut-out portrait image in the hero
section (transparent PNG, declared once as a CSS variable so it can be swapped with a URL).
No frameworks, no build step. Just one .html file that opens in a browser.

Take the layout and the visual system from the reference, never the words.

0. The person and the copy (read this first)

The reference is a structural guide only. Every word in the output is new. Nothing from the
original mockup survives, including the wordmark "MILAR", the ui/ux DESIGNER headline and all of
its body copy. Use the details below throughout, consistently.

Name:      Elias Novak
Wordmark:  NOVAK.        (Archivo 900, uppercase, the period in blue)
Role:      front-end developer & interface designer
Pitch:     builds fast, accessible marketing sites and product interfaces
           for small teams that ship on their own after handoff
Location:  Lisbon, working with clients across Europe
Email:     hello@eliasnovak.com
Socials:   @eliasnovak (X), /in/eliasnovak (LinkedIn), github.com/eliasnovak

Hero headline: keep the reference's two-line structure (serif italic, wide gap, serif italic on
line 1; one huge blue sans word on line 2), but the words are:

line 1:   I'm        front-end
line 2:   DEVELOPER

Service pills (12, for the scattered section): Landing Pages · Design Systems · Webflow Builds ·
Component Libraries · Marketing Sites · Accessibility Audits · Dashboards · Design to Code ·
Performance · Prototypes · CMS Setup · Interface Design

Copy rules: first person, specific, plain. No lorem ipsum, no agency filler ("pixel-perfect
solutions", "we deliver excellence"), no invented statistics, client counts or fake logos. Plan
names, feature lines, process steps and testimonials are all written fresh from the profile above.
Testimonial attributions use plausible first names with a role and company type, never a real
company's name.

1. Art direction

The whole page runs on one idea: electric blue against paper white, with a heavy grotesque
shouting and a high-contrast serif italic answering it. Every headline pairs the two voices.

Palette
  blue #2B3EFF: the loud accent, used on the full-bleed section, headline word and pill buttons
  ink #0B0B0B: serif italics, body text, logo
  paper #FFFFFF: page background
  smoke #8A8A8A: small supporting paragraphs
  stage #7C7A82: the muted grey behind the page frame (desktop only)

Nothing else. No third accent, no gradients, no drop shadows, no glassmorphism.

Type, load from Google Fonts:
- Archivo (or Inter) 700/800/900: uppercase display words and all UI text, tracking -0.03em
- Playfair Display italic 400/500: the italic display words and the pill tag labels

Rules: display lines mix the two families on the same baseline; sans words are uppercase, serif
words are lowercase italic. Body copy is 13–14px, 1.5 leading, max-w-[34ch], in smoke. Small
labels are uppercase, 11–12px, tracking-[0.08em], bold.

Shapes: buttons and tags are full pills (rounded-full). Everything else is a hard
rectangle. Pills are the only rounded thing on the page.

2. Page frame

Center the whole page in a max-w-[1200px] white column on the stage grey background so it reads
like a presented mockup (drop this frame below lg, mobile is edge-to-edge white).

3. Sections, in order

Section 1: Nav
Three-part row, h-20, generous side padding.
- Left: the wordmark NOVAK. in Archivo 900, uppercase, the period in blue
  (the reference's MILAR. must not appear anywhere in the output).
- Center: a pill button with a 1px ink/20 border, holding a small pencil/edit SVG icon then
  CHANGE THE MODE in 11px bold uppercase. Wire it to a real light/dark toggle: clicking swaps the
  page to ink background with paper text and keeps blue unchanged. Persist nothing.
- Right: a two-line hamburger (two 28px ink bars, 8px apart) that opens a simple full-screen menu.
- Center pill and hamburger collapse sensibly under md.

Section 2: Hero (uses the provided portrait)
This is the signature moment: the portrait is layered inside the headline.

- Line 1, centered: I'm in serif italic, a wide gap, then front-end in serif italic, both
  ink, around clamp(3.5rem, 9vw, 8rem).
- Line 2, centered: DEVELOPER in Archivo 900 uppercase, blue, much larger, at
  clamp(4.5rem, 15vw, 13rem), tracking -0.04em, sitting tight under line 1. Its nine letters let
  the portrait split it into DEVE + figure + OPER.
- The cut-out portrait sits between the two lines in z-order: absolutely positioned, centered,
  bottom-anchored, roughly 42% of the container width, z-index above line 1 but the blue
  DESIGNER letters must read as running behind the shoulders. Achieve this by putting the
  portrait above the whole headline stack and letting the word extend past both sides of the body,
  so it reads as DESI + figure + GNER.
- Render the portrait filter: grayscale(1) contrast(1.08) so it stays black-and-white against the
  blue.
- Bottom row of the hero, three columns aligned to the baseline:
  - Left: a short 40px ink rule, then three lines of 12px bold uppercase:
    SPECIALIZED IN REACT, DESIGN SYSTEMS, AND ACCESSIBLE FRONT-END BUILDS.
  - Center: a wide blue pill CTA LET'S CHAT in white 13px bold uppercase, overlapping the
    bottom of the portrait, px-16 py-5.
  - Right: a 13px smoke paragraph, two sentences in Elias's voice about shipping fast,
    accessible sites that the client's own team can maintain after handoff.
- Declare the image as --portrait: url('user.png') in :root with a comment saying to paste a URL
  there. Below md, drop the portrait to its own block above the headline and stack the bottom row.

Section 3: Services ("All your design needs")
Full-bleed blue block, tall, white text.
- Headline, left aligned: EVERYTHING in Archivo 900 uppercase white, then the build needs on the
  next line in Playfair italic white at a similar optical size.
- Top right: a 13px white/80 sentence on design and front-end living in one place, and a white pill
  button BOOK A CALL with ink text.
- Below, the key visual: 12 white pills scattered and overlapping, each holding one service from
  the list in Section 0 in black Playfair italic. Position them absolutely inside a
  relative container at varied top/left percentages with rotations between -12deg and +12deg,
  varied pill widths, and deliberate overlap so they look tossed on a table. Give each a subtle
  hover: lift -4px and straighten to 0deg. Below md, abandon the scatter and render them as a
  centered wrapping flex row with the same rotations kept small.

Section 4: Pricing plan
White. Centered headline PRICING in blue Archivo 900 + plan in ink Playfair italic.
Three plan cards in a 3-column grid (stack on mobile), each a hard-edged card with a 1px ink/15
border: plan name in bold uppercase, a big price, a one-line description, a ink/10 divider, then
4–5 feature lines each with a small check icon, and a pill CTA at the bottom. The middle card is
inverted to a solid blue background with white text and a white pill button, and carries a small
MOST POPULAR label.

4. Three additional sections (not in the reference, design them in the same language)

Section 5: Selected work
White. Left-aligned headline SELECTED (sans, ink) + work (serif italic, blue). A 12-column grid
of four project cards using hard-edged image slots, deliberately uneven: one tall card spanning
7 columns and two rows, then three smaller ones. Each slot is a grey #EDEDED placeholder driven by
its own CSS variable (--work-1 … --work-4) with a faint "paste --work-n" hint underneath that the
image covers once a URL is set. Under each slot: project name in bold uppercase and a serif italic
category. On hover, the card's title turns blue and a small arrow pill appears in the slot corner.

Section 6: Process
Full-bleed blue. Headline HOW IT (sans white) + works (serif italic white). Four numbered steps
in a row, separated by 1px white/25 vertical rules: an oversized outlined number (01–04, white
text with -webkit-text-stroke so it reads as an outline), a bold uppercase step title, and two
lines of white/75 copy. Steps stack into rows on mobile with horizontal rules instead.

Section 7: Testimonials
White. Headline KIND (sans, blue) + words (serif italic, ink). A single large centred quote in
Playfair italic at clamp(1.6rem, 3.5vw, 2.6rem), ink, with the client's name and role in small
bold uppercase beneath, plus a tiny circular avatar slot. Two circular pill arrow buttons (prev /
next) below the quote cycle through three quotes held in a small JS array. No library, just index
state and a text swap.

Closing: Footer CTA
Full-bleed ink block. Huge white sans LET'S SHIP + serif italic blue something fast, a blue
pill START A PROJECT, then a thin bottom bar with the NOVAK. mark, hello@eliasnovak.com, and
the three social links, separated by a white/20 rule.

5. Technical requirements

- Tailwind via CDN with a tailwind.config block defining the colour tokens and the two font
  families; everything else uses utility classes. Custom CSS only for the portrait variable, the
  grayscale filter, the scattered-pill positions and the number outline.
- Every image on the page comes from a CSS custom property declared in one :root block at the top
  of the file, with a comment header, so the entire site can be re-imaged by editing that block.
- Fully responsive from 360px up. The hero headline must never overflow horizontally; scale it with
  clamp() and let the portrait shrink with it.
- Accessibility: semantic header/section/footer, one h1, aria-hidden on decorative SVGs,
  aria-label on icon-only buttons, real mailto: links, a visible blue focus ring
  (outline-offset: 3px), and prefers-reduced-motion honoured.
- Motion is minimal and user-triggered only: pill hover lift, card title colour shift, mode toggle,
  testimonial swap. No scroll-triggered animation, no parallax, no autoplay.

Edit anything above before copying. Change the first line to rename the build, or the style word to shift the look.

About the editorial portfolio landing page prompt

A personal portfolio built on one idea: a cut-out portrait layered inside a giant two-line headline, with scattered service pills, pricing, a work grid and a mode toggle.

What you get

A hero where a cut-out portrait is layered between a serif italic first line and a huge blue sans word, so the figure splits the word in two
A full-bleed blue services block with twelve white pills scattered at absolute positions and varied rotations, each straightening on hover
A three-tier pricing row with an inverted blue middle card carrying a MOST POPULAR badge
An uneven twelve-column work grid whose image slots are driven by CSS variables, with a hover arrow pill in each corner
A four-step process band on blue with oversized outlined numbers drawn using -webkit-text-stroke
A light and dark mode toggle, a slide-in full-screen menu and a testimonial rotator, all in one small vanilla script

Techniques it uses

Worth knowing whether you run the prompt or write the code yourself.

Layering a cut-out portrait into type

The first headline line uses justify-between to open a wide gap in the middle. The portrait is absolutely positioned into that gap at a higher z-index than both lines, so the head fills the gap and the shoulders cover the middle of the word below.

Theme tokens instead of a dark variant

Light and dark are two classes that redefine six CSS variables. Elements use helper classes like themed-text-ink rather than dark: variants, so the toggle is a single class swap on one wrapper.

Outlined display numbers

-webkit-text-stroke: 1.5px with color: transparent turns any font weight into an outline. No SVG and no second font file.

Scattered pills that behave

Pills sit at percentage top and left values inside one relative container with a fixed height, each with its own rotation. On hover they lift, straighten to 0deg and raise their z-index so they never get clipped by a neighbour.

How to adapt it

Re-image the whole site from one block

Every image on the page reads from a custom property in a single :root block at the top of the file. Paste new URLs into --portrait and --work-1 through --work-4 and nothing else needs touching.

Change the accent

The palette is five tokens in the Tailwind config. Swap the blue value and the headline word, pill buttons, services band, process band and every hover state follow together.

Use your own name

Ask the model to swap the wordmark, the two headline words and the contact details. The layout holds as long as the second headline word stays long enough for the portrait to sit inside it.

Drop a section

Each section is a self-contained block with its own id. Delete the pricing or process markup and remove its entry from the drawer nav list. Nothing else depends on it.

Frequently asked questions

Which AI tools does this prompt work with?

It is plain text, so it works in Claude, ChatGPT, Cursor, Codex, v0 and any other model that writes code. Paste it as one message and ask for the complete file.

Do I need a build step for Tailwind?

No. The page loads Tailwind from the CDN and configures the colour and font tokens in an inline script, so the single HTML file opens straight in a browser.

What kind of portrait image do I need?

A cut-out PNG with a transparent background works best, because the figure has to sit over the headline with no visible box. The CSS applies grayscale so any photo matches the palette.

What happens to the layered hero on mobile?

Below the md breakpoint the portrait leaves the headline and becomes its own centred block above it, and the three-column bottom row stacks. The headline scales with clamp so it never causes sideways scroll.

Is the dark mode saved between visits?

No. The toggle holds the mode in a variable for the session only. Ask the model to add localStorage if you want it to persist.

Can I use this as a real portfolio?

Yes. Replace the name, copy, prices and project images. The markup is semantic with one h1, aria labels on icon-only buttons and a visible focus ring, so it is ready to ship.