How To Host A Portfolio Site That Fits On One Page

You've got the work: projects, photos, drawings, maybe a few sketches. Applications open soon and every one of them has a box labelled "portfolio link".

A one-page portfolio is the right answer for most people at this stage. One scrolling page, your best four to six projects, a short bio and a way to contact you. And if you've never had to host a portfolio site before, one page makes that the quick part. It's a folder with an index.html in it, and any static host will have it live in a minute.

The part that takes real thought is the images. Portfolio work is heavy, the person judging it is often on a phone between meetings, and a page that takes eight seconds to show the first project has already lost them.

The worked example below is an architecture student's portfolio, because few portfolios are heavier: around forty images, most of them renders and drawings, plus a PDF version on the side.

What Is A One-Page Portfolio?

A one-page portfolio is a single long web page that shows your best projects one after another, with a short introduction at the top and contact details at the bottom. There are no separate project pages to click into.

It works because of how portfolios get looked at. A recruiter or a tutor gives each one a minute or two, scrolling, not clicking. One page means nothing is hidden behind a link they'll never press.

It also makes you edit. Four strong projects beat twelve average ones, and a single page forces that choice. You'll outgrow it once you have more than six or seven projects that each need a full case study. Until then, one page is plenty.

What Does A One-Page Portfolio Need Before You Host It?

Six things, and none of them are about the host:

• An index.html at the top of the folder. That's the page visitors land on. If your site came out of a tool as a ZIP, check how the archive is packed before uploading.
• Images resized for the screen, not straight out of Rhino, Lumion or your camera.
• A small menu that jumps to each project.
• A page title and description in the <head>, because that's what shows when the link is pasted into an email or a chat.
• Alt text on every image. "Ground floor plan, community library project" helps screen reader users and tells search engines what's there.
• A way to reach you, an email link or a form, near the bottom and again at the top.

Walkthrough: An Architecture Student's Portfolio, Hosted In An Evening

Picture a final-year architecture student with five projects. Each one has a hero render, two or three drawings, and a paragraph. That's about 40 images, and when you first export them, the folder is well over 300 MB.

That's the problem to solve. The page itself is ten minutes of work.

Step 1: Pick The Right Format For Each Image

Architecture portfolios mix two very different kinds of image, and each one wants a different format:

The common mistake is the opposite: every image saved as PNG at full resolution, because that's what the export dialog defaulted to. A single render saved that way can be bigger than a whole well-built portfolio.

Step 2: Resize To The Size It's Shown At

A full-width render on a large laptop screen needs to be about 2,000 pixels wide. A drawing shown at half width needs about 1,200. Anything bigger is weight your visitor downloads and never sees.

Resize first, then compress. A free image compressor that runs in your browser will show you the before and after sizes, and a render that started at 12 MB often lands under 400 KB with no visible difference on screen.

Then add loading="lazy" to every image below the first screen, so the browser only fetches them as the visitor scrolls. Don't add it to the first image, because that one should load straight away. web.dev on lazy loading images, and which ones to leave alone

Step 3: Add Section Links

Give each project section an id, like <section id="library">, and put a small menu at the top with links like <a href="#library">Community Library</a>. A click jumps straight to that project, and the address changes to end in #library, so you can send a tutor a link to one specific project.

Step 4: Keep The PDF Version Beside It

Many architecture firms still ask for a PDF portfolio, often with a size cap in the job advert. Export one, compress it, and put it in the same folder as portfolio.pdf, with a "Download PDF" link on the page. naming the PDF so its link never breaks takes two minutes, and it saves you a dead link on every application already sent.

Step 5: Upload And Check It On A Phone

Upload the whole folder: page, stylesheet, images, PDF. With OxyPages that's a folder or ZIP upload into a free account, and the site is live on a subdomain over HTTPS in seconds. If you zipped the folder itself rather than its contents, the extra wrapping folder is removed for you. The free plan holds 25 MB, which fits forty renders compressed to around 300 KB each, about 12 MB, plus a lean PDF. It won't fit the 300 MB raw export, which is one more reason to do step 2 properly. A personal portfolio or CV counts as personal use there, so you don't need a paid plan for it.

Then scroll the whole thing on your phone, away from your Wi-Fi. If the first render takes more than a couple of seconds to appear, go back to step 2.

Where Should You Host A Portfolio Site?

Use a platform to be discovered and your own site for the link on your CV. Those are different jobs, and the best setup usually does both.

I'd post the projects on Behance and still keep my own site as the link that goes on applications. The site is the thing you control, and it doesn't change when a platform redesigns.

Should You Use Your Own Domain For A Portfolio?

Yes, once it goes on a CV or an application. A free subdomain is fine while you're drafting and sharing with tutors. Your own domain, ideally your name, looks finished, and it survives you moving to a different host later.

Keep it simple: firstname-lastname.com, or .design or .studio if those are taken. Avoid anything you'd have to spell out over the phone.

On OxyPages a custom domain is a paid feature, from $5 a month on Lite. If the domain has to be free to connect as well, GitHub Pages and Netlify both do it at no cost, and their free storage is far larger: GitHub Pages allows a published site of up to 1 GB. GitHub's documented limits for Pages sites

When You've Outgrown One Page

One page stops working once each project needs its own long story. If you have ten projects, or every project has a brief, a process section and twenty drawings, give each its own page and keep the homepage as an index.

It's also the wrong shape if you want to post updates every week. A blog or a journal needs a CMS or a builder you can edit from your phone, and a hand-built static page makes that a chore. Squarespace or Wix would serve you better there.

And if your work is mostly video, a static host isn't where the files should live. Upload them to a video platform and embed the player on your page.

What To Do Next

1. Pick your best four to six projects and cut the rest.
2. Export each image in the right format, at the size it's shown at.
3. Compress everything, and add loading="lazy" below the first screen.
4. Add the section menu, the page title and alt text.
5. Put a compressed PDF version in the same folder.
6. Upload, check it on a phone, then put the link on your CV.

For the general picture of how any static site goes online, the static hosting guide covers what every upload has in common. When your folder is ready, put your portfolio online and get the link for your CV. A portfolio of your own work fits the free plan, so you can start a free account with no card needed.