~/portfolio-builder/web-developers
A web developer portfolio of sites that actually shipped
Web developers are hired on live sites, so the portfolio should be a well-presented list of them: each with the client, the stack, what you were responsible for and a link that works. FNJ's AI builder designs that showcase from your description and a reference, and hands you the code to host, extend or show off.
- Next.js project
- Static HTML
- Push to GitHub
- No FNJ runtime
The same sample at phone width. The builder designs every page at desktop, tablet and phone widths.
The sample, section by section
What a web developer website needs
The sections the builder can design for you, and the job each one does. The starter prompt asks for these; add or drop any of them in your own words.
- 01
Intro
What kind of sites you build and for whom.
- 02
Shipped sites
Framed screenshots, stack, role and URL.
- 03
How I build
Your standards for speed, accessibility and SEO.
- 04
Stack
CMSs, frameworks and hosting you use.
- 05
Contact
Email and availability.
Made for web developers, not for everyone
01
Live sites front and centre
Each site in a browser frame with its URL, stack and your role, linked to the real thing.
02
Your part, made clear
Built from a design, designed and built, or rebuilt for speed: each project says what you did.
03
Practice what you preach
Export semantic, responsive code and host it yourself, the same way you'd ship a client's site.
Starter prompt
A prompt written for web developers
It opens in the builder ready to edit. Replace the words in brackets with your own details, change anything else you like, then add a reference.
Reference to add
A web developer's or small agency's site that presents projects clearly.
The builder takes a reference's look (layout, type, palette, spacing), never its words or images.
Build a web developer portfolio for [your name], a web developer who builds [marketing sites and web apps] with [Next.js, WordPress, Shopify]. Open with a clear introduction. Add a 'Shipped sites' section with six projects, each shown in a browser frame with the client, my role, the stack and a 'Visit site' button, a 'How I build' section on performance, accessibility and SEO, a stack section and a contact section. Clean and practical: a sturdy sans-serif, plenty of whitespace, subtle borders and a calm accent colour.
How it works
01
Describe your web developer site
Open the builder with the starter prompt, fill in your details and add a screenshot or link of a site you'd like yours to look like. A reference is required: it's what makes the design yours rather than a template.
02
Watch it design every page
The builder plans the pages, palette and type, then builds each page section by section on a canvas at desktop, tablet and phone widths while you watch.
03
Refine it, then take the code
Ask for changes in plain words or edit by hand, upload your own screenshots, then download a Next.js project or static HTML, or push it to your GitHub, and host it where you like.
What it costs: From $25/month, or $29 once for 50 credits that never expire. No FNJ hosting fee: you host the exported site. See plans
Web developers: questions
- How is this different from the web designer page?
- That page leans on design packages and visual work; this one presents shipped sites with the stack and your technical role. Ask the builder for whatever mix fits you.
- Can I build client sites with FNJ?
- Yes. The Agency plan is for building client sites, each exported as code you hand over or host.
- Can I import a site I already built?
- Not into the builder. You can use its address as a reference so the new design borrows its look, or show it in your portfolio as a framed screenshot with a link.
- Can visitors contact me through a form?
- The builder doesn't make forms; use an email or calendar button, or add a form to the exported code.
Related portfolio builders
Show the sites, the stack and the links
The builder opens with your web developer prompt filled in. You edit it, add a reference, and watch the first version take shape.