Designer Portfolio Sitev0.1.1

Freelance designers get hired for how they work as much as for what they have made, and this Skill builds the site around both. You provide real services, projects, clients and answers; your agent hands back one offline HTML file of 19 pages, all on a white sheet framed by a thin lime border. The first screen has three columns: a short hello with your name and offer beside a lime pill, a portrait card with a copy-email button and a pulsing line saying when you are free, and a side column for an award, a two-tone job title and a proof figure. Evidence follows: eight client wordmarks drifting past, a near-black band whose numbers count up, a selected-work grid and testimonials that crossfade. The six case studies go past screenshots, since each closes on a working mock-up drawn in HTML: phone screens, print covers with a toggleable grid, a construction drawing, a tablet whose dial moves, a product range and a browser page. To turn interest into a brief there is a services index, a Services page (cards, phases, a table comparing them), four service pages whose price card stays in view, an FAQ searchable by topic, and a brief form that already knows which service sent the visitor. Also included: About with principles, career path and skills, a split on collaboration illustrated by two process photos, Testimonials, Work with filters and search, a lime closing band, privacy and a designed 404. Headlines are near-black Schibsted Grotesk, pairing an ink phrase with a gray one; Geist Mono sets small data labels, and lime is the only accent. Forms validate inline and tell the visitor the preview sends nothing.

How it works

1. Get four services with their real prices and timelines from the designer, plus six projects with measured results and a quote from each client, FAQ answers and a privacy text
2. Write the facts into brief.json following the schema; the build makes sure the price of each service, how many projects there are, the rating and the date you are next free match on every page
3. Swap the stand-in portrait, the studio pictures, each project cover and the client headshots for the designer's own
4. Run the build, which names every gap in the brief in a single pass, figures that contradict each other included
5. Validate, then try each filter, mock-up and form in the browser at widths of 390, 768, 1024 and 1440 px before handing it over

Checked before delivery

• validate.mjs passes: single file, one h1 per view, every link resolves, no browser storage API anywhere, no colour in hue 235-300, lime as the only accent, both fonts embedded, no names or sentences from the reference product
• Service prices, the project count, the referral share, the rating and the availability date agree everywhere they appear
• Hero copy button, menu sheet, carousel, FAQ accordions, work filters and search, every showcase, the brief form with its service preselect and the newsletter work at 1440, 1024, 768 and 390 px