Deskside 3D Portfolio Website Template

A public portfolio for one product designer, presented inside a single small 3D scene. A beige 1980s computer and a glazed mug sit on a desk, modeled in code with Three.js, and the computer’s screen shows the selected project. A row of labeled keys along the bottom changes the project, and each press clicks the key down and flickers the screen like a CRT. The camera drifts slightly with the pointer, and dragging orbits a little before it springs back. Click the screen and the camera moves in to open the case study as an ordinary scrolling page, and Escape returns you to the desk. A live clock and a short fortune sit in the corners. Press I for a plain text index, which is the home page on phones, with reduced motion, or without WebGL. Case studies give the client, year, role, and team, then the problem, decisions, and outcome, with live demos built from real React components, image pairs, video, quotes, before and after sliders, and metrics. About lists services, experience, and clients with a CV download, and the contact form saves each message to the database and emails you once you set your address. There are no accounts or admin screens: projects are files you change by asking the agent. Includes 8 fictional projects. Built with Layerwise, React, Three.js, and TanStack Start.

Use Deskside for a product designer who wants a portfolio people remember. In the live demo, press the keys along the bottom to change the project on the computer’s screen, then click the screen to open its case study. Sam Ibarra and every client are fictional, so replace them before you publish.

• A single 3D desk scene modeled in code, with a computer whose screen shows the selected project, labeled keys that change it with a CRT flicker, a camera that follows the pointer, a live clock, and a short fortune.
• A plain text index one keypress away, which is the home page on phones, with reduced motion, or without WebGL, and case studies that open from the screen as ordinary scrolling pages.
• Work, an About page with a CV download, a contact form with a honeypot and a rate limit, and eight fictional projects whose screens are real React components, plus a script that renders those screens to stills.

The template opens as a local project you can change through the conversation or the code editor. You can inspect the source for this template version before choosing how to extend it.

1. 1
   Install Layerwise and sign in. Choose Use this template, select a team and project name in the app, then choose Copy to Layerwise. Wait for setup and the local preview to finish.
2. 2
   Start in src/portfolio.config.ts for your name, role, city and time zone, tagline, bio, social links, fonts, colors, fortunes, and ownerEmail. Each project is one file and one folder in src/content/work, and order in src/content/work/index.ts sets the keys on the desk, which has room for ten. New images should go through pnpm add-images. You can do all of this by asking the agent and attaching your screens.
3. 3
   Ask for the change in the project conversation. This prompt is a starting point; adjust it to describe your intended result.

   Make this portfolio mine: I’m Ana Ruiz, a product designer in Madrid. Set the clock to Madrid time and write five new fortunes in my voice. Remove the sample projects and add three from the screens I attached, using pnpm add-images, each with its own key on the desk. Keep the computer, the keys, and the text index. Check the desk, the index, and one case study at phone width.

• On the home page at desktop width, press a key along the bottom, and the screen should flicker to that project. Click the screen, and the case study should open as a page. Press Escape to return to the desk.
• Press I to switch to the text index, then press it again to go back. With reduced motion turned on in your system settings, reload, and the index should open with a still of the desk.
• On a phone-width window, the home page should be the text index with no sideways scrolling. Send the form on Contact and confirm the message appears in the contact_messages table under Database in Local.

New projects on paid plans start private, so turn off Private in the Publish menu before sharing your site. Local and published apps use separate databases, so messages sent to the preview won’t appear on the live site. Email only sends after the first publish and only once ownerEmail is set; until then, read messages under Database. Replace the fictional owner, clients, figures, and social links before you publish. Passwords for private case studies, a CMS, and a blog are not included.

Use the local preview controls to test the affected path. When it works, publish a release and repeat the check at the live URL. For saved records or accounts, read about the separate Local and Online databases.

• How to Build a UX Designer Portfolio with AIBuild a UX designer portfolio in Layerwise where visitors can try your work, with live product demos, purposeful motion, and 3D that falls back well.