Portfolio maker. Your website from a simple form.
You, name, role & photo
About
What I do, services
Skills / tech stack
Projects / work
Experience
Education
Certifications
Achievements
Contact & socials
Generated on your device, nothing is uploaded. The download is one self-contained index.html with zero dependencies.
Host it free in 3 minutes (GitHub Pages)
- Create a free account at github.com and make a new repository named yourusername.github.io
- Click Add file → Upload files and upload the index.html you downloaded here
- Wait ~1 minute, your portfolio is live at https://yourusername.github.io 🎉
Alternative: drag the file onto Netlify Drop (app.netlify.com/drop) for an instant URL. Need a PDF resume too? Use our Resume Builder.
A real website, without the website builder
Fill in your name, projects, experience and skills; pick Midnight Dev, Clean Editorial or Cyber Terminal; and the generator writes a complete standalone website, semantic HTML, responsive CSS, scroll animations, initials avatar or your own photo, all in one file with zero dependencies. Toggle any section off to shape it into a CV site, a freelance portfolio or a student project showcase. Your draft autosaves in this browser and can be exported as JSON, and the finished site uploads to GitHub Pages or Netlify Drop in minutes. No account, nothing uploaded, free forever.
How to use the Portfolio Maker
This tool turns a form into a complete one page portfolio website. You fill in your details, pick one of three themes, and watch a live preview; when you are happy it writes a single index.html file with the styles, a small script and your photo all inside it. It is aimed at students, freelancers and job seekers who want a personal site without learning a website builder.
Step by step
-
Pick a theme
Click Midnight Dev, Clean Editorial or Cyber Terminal at the top of the form. Midnight Dev is selected first. Set an Accent color for buttons, links and the avatar, and a Font style: Theme default, Modern Sans, Editorial Serif or Monospace.
-
Add your name and photo
Open You, name, role & photo and fill in Full name, Role / headline and Tagline (one friendly line). Press Upload photo to add a picture; it is cropped to a centered square. Without a photo the site shows your initials on a circle in your accent color. Remove takes the photo away again.
-
Fill in the sections
Open each section and type your content. About takes a paragraph, Skills / tech stack takes a comma separated list that becomes chips, and Achievements takes One per line. For services, projects, experience, education and certifications, press the add button, such as + Add project, for each entry and the cross in its corner to delete it.
-
Choose what appears
Every section header except the first has a show checkbox. Untick it to leave that section off the site. Sections you leave empty are dropped automatically, except Contact, which stays while its box is ticked.
-
Add contact details
In Contact & socials, an Email adds a Get in touch button under your name and a Say hello button in the contact section, and a Resume PDF link adds a Download CV button. Phone and Location appear in the contact section. GitHub URL, LinkedIn URL, X / Twitter URL and Other website appear as links under your name. Untick the footer credit checkbox at the end of the section if you do not want that line on your site.
-
Check the preview
The live preview redraws a moment after each change. Switch between Desktop and Phone, which narrows the preview to 392 pixels, to see how the site reads on a small screen.
-
Download and publish
Press Download website to save index.html, or Copy HTML to put the code on your clipboard. To publish free on GitHub Pages, create a repository named yourusername.github.io and upload the file, as the box under the preview explains.
What you get
- One index.html file with its styles, a small script and your photo built in. It needs no other files and loads nothing from other sites.
- A sticky top bar with your initials as the logo, links to About, Projects and Experience when those sections have content, and a Contact link while that section is shown. On screens 700 pixels wide or narrower the links are hidden.
- The browser tab title is your name and role. The search description is the first 155 characters of your About text, or your tagline if About is empty.
- Next to Get in touch the site shows Download CV when you add a Resume PDF link, or a GitHub button if you only gave a GitHub URL.
Tips and common mistakes
- On a first visit the form is filled with an example student's details. Replace every field or press Start blank, so example links such as example.com do not end up on your site.
- Restore example content replaces your draft straight away with no confirmation. Press Save JSON first if you might want your work back.
- Your draft, photo included, saves itself in this browser as you type. Clearing site data deletes it, so keep a Save JSON file and use Load JSON on another device.
- If you leave the Accent color at its default purple, Cyber Terminal uses green and Clean Editorial uses a rust tone. Pick any other color to use it on every theme.
- The Contact section is shown whenever its show box is ticked, even with no details filled in. Untick it if you have nothing to list there.
- In project descriptions, say what the project does and add one concrete result, as the field's hint suggests.
Privacy and limits
The form, the photo cropping and the website are all handled in your own browser. Nothing is uploaded. Your draft, including the cropped photo, is saved only in this browser's local storage, and the tool shows a warning if the browser refuses to save it.
Everything a first website needs.
Frequently asked questions.
Is Portfolio Maker free?
Is it private? Is my data or photo uploaded anywhere?
How do I put my portfolio online?
Will I lose my draft if I close the tab?
Can I edit the exported website afterwards?
Published · Last updated .
