# 03 — Pocket Observatory

Original, untested prompt. Inspired by the tactile interface idea in [Angel's portfolio](https://x.com/Angaisb_/status/2095964361105789424), whose [own short prompt is public](https://x.com/Angaisb_/status/2095970578989449325).

## Short brief

Build a distinctive portfolio website for a fictional creative technologist. Make it feel like a small, beautifully made pocket observatory with a luminous display and tactile controls. Visitors should enjoy exploring it and still find the work and contact information easily.

## Directed production brief

Create “Pocket Observatory,” a portfolio for the fictional creative technologist Avery Vale. The page centers on an original pocket instrument with a ceramic-white housing, dark glass screen, a copper rotary dial, and two tactile buttons. Design its own proportions and visual identity. Use precise reflections, recesses, and shadows sparingly so it feels physical without making text harder to read.

The instrument's screen contains a small star map and three sections: Work, About, and Contact. Turning the dial or pressing arrow keys changes the selected section. A button opens it. Normal pointer, touch, and keyboard navigation must also work. Focus states should be visible. Provide a plain, accessible text view containing the same portfolio content.

Use three fictional projects with honest demo labels: a marine observation tool, a kinetic typography system, and a mechanical learning exhibit. Write concise project descriptions. Use a clearly fictional contact address rather than sending messages or connecting a form. Put all content in one editable data file.

Give the opening one memorable interaction: moving the dial smoothly shifts the constellation and highlights the selected project. After that, prioritize reading and navigation. Respect reduced-motion preferences. On a narrow screen, redesign the instrument placement and content area so the project text remains comfortably readable and controls remain touch-sized.

Use the installed website-building workflow. Use CSS, SVG, or a light 3D layer as appropriate; choose the simplest stack that achieves the visual goal. Avoid heavyweight rendering that compromises the core experience. Use available fonts and original geometry. Record dependencies and asset origins.

Build, run, and inspect the actual website. Verify all sections, keyboard navigation, focus, reduced motion, a phone layout, and a desktop layout. Correct material defects once. Deliver the editable project, runnable build instructions, actual desktop/phone screenshots, a brief demonstration capture, and a README showing how to replace the fictional identity and projects.

Work locally in a fresh task-owned project. Make routine creative choices. Do not deploy, purchase assets, connect accounts, or send any contact message. Save the first result before any human-directed revision.

## Useful correction

On the phone layout, the instrument occupies too much height before the selected project becomes readable. Recompose the housing and content while preserving the dial interaction and identity. Verify keyboard and touch access after the change.
