FNJ

~/portfolio-builder/react-developers

A React developer portfolio you get back as a Next.js project

A React developer's portfolio should be a React project you can extend. FNJ's AI builder designs the site, then exports it as a Next.js app: pages, reusable components and CSS, with no builder runtime. Push it to your GitHub, drop in your own components and interactive demos, and keep shipping it like any other repo.

Start your siteSee the sample site
  • Next.js project
  • Static HTML
  • Push to GitHub
  • No FNJ runtime
Sample site with fictional names, made to show the kind of site the builder designs. Yours is designed from your description and the reference you choose.

The same sample at phone width. The builder designs every page at desktop, tablet and phone widths.

The sample, section by section

What a React 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.

  1. 01

    Intro

    Your React focus: apps, design systems, performance.

  2. 02

    Projects

    Cards with demos, repos and stack tags.

  3. 03

    Components

    A showcase area for your own interactive demos.

  4. 04

    Open source

    Libraries and contributions.

  5. 05

    Experience

    Teams and products.

  6. 06

    Contact

    Email, GitHub and LinkedIn.

Made for React developers, not for everyone

Starter prompt

A prompt written for React 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 React developer's site or a component library's docs homepage with the look you want.

The builder takes a reference's look (layout, type, palette, spacing), never its words or images.

Use this prompt
Build a React developer portfolio for [your name], a React developer focused on [web apps / design systems / performance]. Open with a short introduction. Add a projects section with four project cards (screenshot, description, tags, demo and GitHub buttons), a 'Components' section with three framed placeholders where I'll add live React demos later, an open source section, an experience section and a contact section. Modern and crisp: an Inter-style sans-serif, monospace labels, a dark theme with React-blue accents and subtle borders.

How it works

  1. 01

    Describe your React 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.

  2. 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.

  3. 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

React developers: questions

Is the export really a React project?
Yes: the Next.js export is a React app with pages and reusable components. There's no FNJ runtime in it.
Can I add my own React components to it?
Yes, in the exported project. Changes made in code don't sync back to the builder's canvas, so treat the export as the point where you take over.
Does it use TypeScript and Tailwind?
TypeScript, yes: pages and components are .tsx files with a strict tsconfig. Styles are one plain CSS file generated from the design rather than Tailwind; add Tailwind afterwards if you prefer it.
Can I keep using the builder after I export?
Yes. Keep designing in the builder and export again, or push updates to GitHub; just don't hand-edit the same files you plan to overwrite.

Related portfolio builders

More for developers

Get a designed Next.js portfolio to build on

The builder opens with your React developer prompt filled in. You edit it, add a reference, and watch the first version take shape.

Start your siteAbout the AI builder