Build a cozy personal internet space with Claude

What a personal internet space actually is

A normal portfolio is a stack of sections you scroll through: hero, about, work, contact. A personal internet space throws that structure out. You get one wide canvas with lots of quiet white space, and the things you care about are placed on it as discrete objects: a notebook, a polaroid, a playlist, a half-finished project. Navigation is exploration. You click an object and it opens. Nothing scrolls past you in a set order, so the visitor wanders instead of skimming, and wandering is what makes it stick in their memory.

It reads like a designer-only thing. It is not. The whole thing is one HTML file, and Claude writes that file for you while you describe the room in normal sentences.

Step one: write your ten objects

Do this in a notes app before you open Claude. It takes five minutes and it is the difference between a site that feels like you and a site that feels like a template. List ten things that would be in the room if someone visited you: not job titles, actual things.

1. 📓 Two things you make. Projects, writing, a side thing nobody paid you for. For each one write the outcome in a single line, for example "a Notion system that runs my whole content calendar".
2. 📚 Two things you consume. A book you have reread, a channel you never skip, an album on repeat. These are the objects strangers actually click first, because they are the human ones.
3. 🪴 Two things from your physical space. Your desk, your plant, your coffee order, the light in your room at 4pm. This is where the cosiness comes from.
4. 🧠 Two opinions. Things you believe about your work that not everyone agrees with. One line each. This is what makes a hiring manager remember you.
5. 💌 Two ways to reach you. Email, one social, and if you are job hunting, a plain link to your CV. Keep these as objects too, not a footer.

The build prompt

Open a new chat at claude.ai or the Claude app and paste this with your ten objects filled in. Claude builds it as an Artifact, a live preview you can click around in right there in the chat (how artifacts work). The free plan can do this, though you will hit usage limits sooner, so keep the room to one chat.

Build me a single-page personal website in the style people call a "personal internet space": one large calm canvas with my favourite things placed on it as separate objects, explored by clicking rather than by scrolling.

Make it one self-contained HTML file with the CSS and JavaScript inline, no frameworks, no build step, no external libraries except Google Fonts. The page must fit the viewport with no vertical scrolling on desktop. Place my objects at deliberate, uneven positions across the canvas with a lot of empty space between them, so it feels like a room rather than a grid. Each object is a small piece of text with an optional emoji or simple CSS shape, and hovering one lifts it very slightly and shows its label. Clicking an object opens a small card in place, over the canvas, with that object's detail and a close button, and only one card can be open at a time. Pressing Escape closes it.

Design direction: a warm off-white background, one accent colour, generous spacing, and a serif font for headings with a clean sans for body text. Quiet and cosy, not corporate, and no drop shadows everywhere. Put my name in the top left in small text and nothing else that looks like a navigation bar.

Here are my objects, each with the label and the detail that opens when clicked:
1. [object] - [label] - [what the card says]
2. [object] - [label] - [what the card says]
3. [object] - [label] - [what the card says]
4. [object] - [label] - [what the card says]
5. [object] - [label] - [what the card says]
6. [object] - [label] - [what the card says]
7. [object] - [label] - [what the card says]
8. [object] - [label] - [what the card says]
9. [object] - [label] - [what the card says]
10. [object] - [label] - [what the card says]

Before you write any code, ask me up to four questions about anything you need to place these well.

The tweak loop, in normal sentences

The first version will be about 70 percent right. You do not need CSS vocabulary to fix the rest. Describe what you want the way you would to a friend, one change at a time, in the same chat. Real messages that work: "make the notebook bigger and move it away from the plant", "the background is too grey, warm it up", "the cards open too fast, slow that down", "everything is drifting to the left, spread it out". When you want a bigger pass, use this one.

The layout works, now I want the feeling right. Here is the mood I am going for: [describe it in your own words, for example "late afternoon light, secondhand bookshop, slightly imperfect"].

Adjust the palette, the typography, the spacing, and the motion to match that mood, and change nothing about which objects exist or what their cards say. Give me three distinct versions of the same room rather than one compromise: version one leans warm and paper-like, version two leans cool and quiet, version three is your own interpretation of my mood description. For each version, tell me in two lines what you changed and why it matches the mood, so I can learn the vocabulary. Keep every version accessible: real text rather than images of text, a colour contrast that passes for body copy, and motion that respects prefers-reduced-motion.

The phone fix (do not skip this)

Here is the thing that breaks every canvas-style site: objects positioned by hand look beautiful on a laptop and become an unreadable pile on a phone. Most of your visitors are on a phone. Run this before you publish.

Now make this work properly on a phone without losing the feeling of a room.

On screens narrower than 700px, stop trying to hold the hand-placed positions. Instead, let the objects flow into a soft staggered single column with uneven left and right offsets so it still reads as scattered rather than as a list, and allow vertical scrolling only at that size. Make every object at least 44px tall and wide so it is comfortably tappable, replace hover states with a clear pressed state since phones have no hover, and make the detail cards open as a panel that slides up from the bottom and can be dismissed by tapping outside it.

Then check the whole page for anything that assumes a mouse or a wide screen, list what you found, and fix it. Tell me exactly which breakpoints you used so I can adjust them myself later.

The layer that gets you hired

Memorable gets you remembered. Proof gets you hired. If this site is doing any career work, one of your objects should quietly hold evidence: what you built, what changed because of it, and what it took. This prompt adds that without turning your room back into a resume.

I want two or three of my objects to carry real proof of my work without the site turning into a CV.

For each of these objects, restructure the card that opens so it holds four short parts: what the thing is in one sentence, the situation before it existed, what specifically changed after (with a real number if I give you one), and what I actually did. Keep every part to one or two lines and keep my voice, not corporate language. Here are the details: [paste the messy version of each project, including any numbers you have].

Then add one small object I have not thought of: a plain "what I am looking for right now" note in one honest sentence, positioned somewhere calm on the canvas. Draft three options for that sentence based on what you have learned about me. Do not add any other new objects.

Put it on a real link, free

An artifact link is fine for showing a friend, but a personal space should live at your own address. This takes about ten minutes and costs nothing unless you buy a domain.

1. 📄 Get the file. In the artifact panel, use the copy or download option to save the code as index.html. It has to be named exactly that. If Claude split it into separate CSS and JS, ask it to put everything back into one file first.
2. 🖼️ Sort your images, if any. Photos straight off a phone are several megabytes and will make the room load slowly. Compress them first with Squoosh (free, runs in your browser, nothing uploaded), then put them in the same folder and tell Claude the filenames so it wires them in.
3. 🚀 Drag it onto Netlify Drop. Go to app.netlify.com/drop and drag the folder holding your index.html into the page. You get a live URL in seconds. The free tier covers a personal site comfortably (Netlify pricing).
4. 🌱 Or use GitHub Pages. If you would rather it live in a repo you control, make a public repository, add index.html, and turn Pages on in the repository settings. Free, and the URL is yourname.github.io/reponame (GitHub's own walkthrough).
5. 💌 Point your own domain at it (optional). A .com is usually 10 to 20 dollars a year from any registrar. Both Netlify and GitHub Pages let you attach a custom domain for free on top of that, in their domain settings, so the only cost is the name itself (Netlify docs).
6. 🔁 Keep the chat. Do not close the Claude conversation. When you want to change the room next month, come back to that chat, describe the change, and download the updated file. That chat is now your CMS.

Proof

What artifacts are and how to use them (Claude Help Center)
Claude plans and what the free tier includes
Creating a GitHub Pages site (GitHub Docs)
prefers-reduced-motion (MDN)