Noa Veld

Portfolio as a macOS desktop

by Owais

Repo Live site

Description

Noa Veld is a portfolio that pretends to be someone's computer desktop. A portrait fills the screen, project files are scattered across the face, and you open them like real files: double-click, drag, throw, select and right-click. Windows tilt as you drag them and the dock spreads on hover. Every thumbnail is drawn in code, so the site needs no project images.

Use it for:

a designer's or developer's personal portfolio
a playful site that rewards poking around
a reference for desktop-style windows, icons and drag physics in plain JavaScript

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. Claude writes the HTML, CSS and JavaScript; no libraries are needed.
Make the wallpaper portrait
Use your own photo, or connect Higgsfield to Claude Code and generate a head-and-shoulders portrait with plenty of empty wall around the head. Put it in the folder and tell Claude the file name.
Preview and fix
Ask Claude to start a local preview and use it like a real desktop: double-click, drag and flick files, then try phone width. Ask for one fix per message.
Publish on GitHub Pages
Ask Claude to push the folder to a new GitHub repository. Then open the repository's Settings, choose Pages and deploy from the main branch.

Main prompt

Build a portfolio site for Noa Veld, a creative designer and developer, that looks and works like a computer desktop. Use plain HTML, CSS and JavaScript in three files, with no framework and no libraries.

The look: a full-screen portrait photo is the wallpaper, with project files scattered across the face like a cluttered desktop. On top sits translucent macOS-style chrome: a menu bar with wifi, battery and a clock, a small status widget, and a dock that spreads apart on hover.

It must behave like a real desktop:
- double-click to open a file, drag to move it, drag on empty space to select several, right-click for a menu, Esc to close
- Tab, Enter and the arrow keys work too
- files bob gently, lean toward the cursor, tilt while dragged and glide when flicked, bouncing off the edges
- "Clean Up" arranges the files in a grid

Place the files on a sunflower spiral around the face, clear of the menu bar and the dock.

Windows have red, yellow and green buttons and drag by the title bar; green zooms to full screen and red closes. Opening another project swaps the content inside the same window, and each project gets its own # link.

Use no project images. Draw every thumbnail and preview on a canvas in one of nine generative styles (spiral, blob, target, halftone, lines, bauhaus, type, poster, collage), seeded by the file name so it always looks the same, with film grain on top.

Keep all content (projects, folders, pages) in a few constants at the top of the script. Contact is a mailto link. Make every icon a real button and respect reduced motion.