~/portfolio-builder/frontend-developers
A frontend portfolio with the polish you'd ship at work
A frontend developer's portfolio is a live code sample, so a sloppy one is worse than none. FNJ's AI builder designs yours at desktop, tablet and phone widths, with semantic headings, real flex and grid layouts and image dimensions set to avoid layout shift. Export it as Next.js, read the code, and add the interactions that show off what you do best.
- 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 frontend 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
Your focus: design systems, accessibility, performance or animation.
- 02
UI showcase
Projects with screenshots, live demos and repos.
- 03
Craft notes
Short write-ups on how you solved hard UI problems.
- 04
Stack
Frameworks, styling and testing tools.
- 05
Experience
Roles and products.
- 06
Contact
Email and profiles.
Made for frontend developers, not for everyone
01
Responsive from the start
Every page designed at 1440, 810 and 390 pixels wide, with flex and grid layouts rather than absolutely positioned boxes.
02
Markup you'd sign off
Semantic headings and landmarks, alt text fields, width and height on images: a sound base to build on.
03
A canvas for your demos
Use the designed shell for the site, then add your own components and interactions to the exported project.
Starter prompt
A prompt written for frontend 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 frontend developer's or design engineer's site whose precision you admire.
The builder takes a reference's look (layout, type, palette, spacing), never its words or images.
Build a frontend developer portfolio for [your name], a frontend developer specialising in [React, design systems and accessibility]. Open with a crisp introduction and my focus areas. Add a 'UI showcase' section with four projects (large screenshot, short description, tags, live demo and GitHub buttons), a 'Craft notes' section with three short write-ups, a stack section, an experience section and a contact section. Precise and modern: a geometric sans-serif, a monospace for labels, subtle borders, lots of whitespace and a single vivid accent.
How it works
01
Describe your frontend 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
Frontend developers: questions
- Won't a generated portfolio undersell my frontend skills?
- Use it for the shell: layout, type and responsive structure. Then add the interactive pieces that show your craft to the exported Next.js project, where they're entirely your code.
- Is the output accessible?
- It uses semantic headings and landmarks, alt text for images and real text rather than images of text. Check it with your usual tools; you control the code after export.
- Does it use Tailwind?
- Styles export as one plain CSS file generated from the design, with a class per element and a media query per breakpoint. You can add Tailwind to the exported project if you prefer it.
- Can I add animations?
- The builder designs layout and style rather than animation sequences. Add motion in the exported code, where you can make it respect reduced-motion settings.
Related portfolio builders
Start from a polished shell, finish in code
The builder opens with your frontend developer prompt filled in. You edit it, add a reference, and watch the first version take shape.