Bolt Rebuilds: macOS-style portfolio website

This is the fourth installation of our Bolt Rebuilds series. If you want to see our other Bolt Rebuilds, check out #1 (adding assets to your project), #2 (import and customize open source components), and #3 (hand tracking).

The best portfolio sites on the internet are way more than just a list of past projects. They’re unique, quirky snapshots of who you are as a creative, a thinker, and a builder.

In this edition of Bolt Rebuilds, designer and power-user Jakub Skrzypczak walks through how to create a portfolio that truly stands out in a sea of static sites. 

Instead of building a traditional homepage with a few links to previous work, Jakub built a personal operating system that runs entirely in the browser. The finished product includes a desktop view, folders, apps, a terminal, mini games, settings, Easter eggs, and achievements. It’s surprisingly simple to build and a lot more interesting than a resume.

The inspiration for this tutorial comes from the new generation of unconventional websites taking both B2B and B2C audiences by storm, including PostHog and Oatly. These sites are playful, opinionated, and relentlessly engaging.

One note: In this rebuild, our goal wasn’t to copy any one site directly. Rather, we're channeling their spirit into a format that feels interactive, discoverable, and memorable.

The core idea: A portfolio disguised as an operating system

Fundamentally, of course, this is still a portfolio website. So it includes all the expected content:

• About

• Experience

• Projects

• Contact

• Testimonials

• Resume

  
  

But instead of presenting that content as sections on a page, Jakub repackaged it as an operating system. Visitors can peruse folders and open apps rather than click through a list of links.

Step 1: A single, high-level prompt

The first prompt is quite long. 

Jakub dropped it into Plan Mode to give Bolt a chance to map out the first iteration.

Prompt 1:

Create a macOS-inspired desktop operating system simulator that serves as an interactive portfolio website. Build a full-screen desktop environment where all portfolio content is presented through folders, files, and applications within the OS interface.

Core Requirements:

Desktop Environment:

Full-screen desktop with subtle monochrome wallpaper (gradient/grain texture)

Draggable desktop icons with selection states and hover feedback

Double-click to open functionality

Top menu bar with custom logo (left), dynamic app name (center), and system icons/clock (right)

Centered floating dock at bottom with app icons, running app indicators, and hover magnification

Window System:

Draggable windows with proper z-index stacking

macOS-style chrome: traffic light buttons, centered titles, rounded corners, subtle shadows

Smooth open/close animations (scale + fade)

Semi-transparent/blurred header bars

Portfolio Content as Desktop Items:

About Me - folder containing bio.txt and values.md files

Experience - folder with subfolders for each role/company

Projects - individual project files opening as custom apps or rich previews

Playground - experimental items and easter egg triggers

cv.pdf - opens in PDF viewer with download functionality

Trash - functional with drag-and-drop, empty animation

Email Client App - displays testimonials as emails with inbox interface

Terminal Application (Critical Feature):

Dark theme with monospace font and blinking cursor

Command history navigation (up/down arrows)

Discoverable help system listing all commands

Essential commands: help, about, projects, open <item>, ls, cat <file>, whoami, clear, cv, email, minesweeper, easter_eggs

Commands should open apps, focus windows, and trigger surprises

Additional Apps:

Finder: Grid view with navigation, breadcrumbs, back button

Image Viewer: Clean interface for project screenshots

PDF Viewer: Full CV display with scrolling and download

Minesweeper: Complete game with difficulty levels, timer, scoring

Visual Design:

2025 minimal aesthetic with subtle neobrutalist elements (5/10 intensity)

Monochrome palette (whites, grays, blacks) with restrained accent colors

SF Pro or Inter font family

Smooth micro-interactions and transitions throughout

Ensure full content visibility in windows without unnecessary clipping

Easter Eggs & Interactions:

Multiple hidden discoveries through keyboard shortcuts, terminal commands, UI element clicks

Secret modes and visual changes

Rewards for curious exploration without blocking main functionality

Technical Specifications:

Implement proper folder navigation with sidebar (like macOS Finder)

Maintain consistent navigation patterns throughout

Prioritize animation quality, visual polish, and smooth performance

Focus on delightful micro-interactions over flashy effects

Success Criteria:

The final product should feel like discovering someone's personality through their custom operating system - playful yet professional, creative yet polished, surprising yet intuitive. Users should think "This person built a thoughtful system" rather than "This is just another portfolio site."

Build this as a fully functional web-based desktop simulator with placeholder content that demonstrates the complete portfolio experience.

Bolt's responses:

1. Personal Content: Would you like me to use completely generic placeholder content (e.g., "John Doe, Software Developer") or should I create more specific placeholder text that you can easily replace with your actual information?

   
   

2. Project Count: How many portfolio projects should be included in the Projects folder? I'm planning for 4-6, but can adjust based on your needs.

   
   

3. Color Accent: While the design will be primarily monochromatic, would you like a subtle accent color for interactive elements (e.g., a muted blue, teal, or warm gray), or should it remain purely black/white/gray?

   
   

Jakub's answers:

1. generic, easily replaceable

2. 4 is fine!

3. warm gray sounds great!

for navigation - please make sure it feels like an OS and not a browser

The central goal of this format is to give the visitor the experience of discovering someone’s personality by exploring their custom operating system. 

Step 2: Refining our illusion (and adding more playful interactions)

As strong as the first iteration was, there are a couple small issues that break the immersion a bit. The next prompts focused on refinement.

Prompt 2

our windows are draggable and it works great, but we should also be able to resize them

Jakub also decided to give visitors a fun way to make themselves at home by letting them customize the background of the portfolio itself.

Prompt 3

in the 'system preferences' in the top navigation, please allow users to change wallpapers - add one more solid color, two gradients and a couple of images (you can use some nice pexels landscapes for now)

they should also have an option to enable screensaver and decide how quickly it should appear on screen when user is inactive

Bolt made a minor error with the screensaver, so you may need the below prompt to adjust the output. 

Prompt 4

toggle in the screensaver settings is a bit broken, please fix

Next, Jakub had some fun with the Trash icon. He introduced a few surprises for those compelled to explore by adding files that contain jokes, personal opinions, and other engaging surprises. 

Prompt 5

now let's add some fun files in the trash folder! visitor won't be able to actually open them, but each of them will display a small popup message when they try to :)

files:

passwords.txt (message: "Absolutely not. PS don't store your passwords in a .txt file like EVER)

journal_2020-2022.txt (message: "Nope. Nope. Nope.")

bank_transactions_2021.csv (message: “Financial data is not part of the portfolio.”)

side_projects_roi.csv (message: “Some metrics hurt more than they help.”)

This addition rewards curiosity without overwhelming the user. 

The following tweaks ensure everything works as expected:

Prompt 6

can we make sure that in trash the entire file name is displayed? also let's do the same for the items on the desktop

and let's remove the 'empty trash' option for now :)

Prompt 7

let's remove the closing 'x' in the trash file popup, as clicking OK closes it as well

Step 3: Adding games and achievements

Minesweeper is a classic, and it fit the aesthetic well. So Jakub added Snake, another nostalgic arcade game. 

Prompt 8

please add one more game to the bottom dock: Snake

it should follow the similar UI style and design as minesweeper :)

Step 4: Achievements

Next, Jakub added Achievements for yet another layer of depth. Achievements essentially turn the site into a small puzzle that rewards visitors for paying close attention. 

For example, one achievement is “Trash Explorer,” which unlocks after a visitor opens every file in the Trash. 

Prompt 9 (in cooperation with ChatGPT)

Add a lightweight, system-level Achievements feature to the OS. It should feel subtle, discoverable, and integrated — not like a game UI.

Navigation & Placement

Add a trophy icon (🏆 or similar) to the top-right system bar, positioned between the sound icon and the clock.

The icon should be minimal and visually consistent with other system icons.

Clicking the trophy icon opens the Achievements window.

Achievements Window

Opens as a standard OS window (same behavior as other system windows).

Display a list of all achievement names, always visible from the start.

Do not show requirements, progress, percentages, or explanations.

Achievement names themselves act as subtle hints.

Unlocked achievements should be visually distinguished (e.g. checkmark, brighter text, subtle icon).

Locked achievements remain visible but muted.

No “locked/unlocked” labels, no completion stats.

Example layout:

ACHIEVEMENTS

✓ First Boot

✓ Desktop Explorer

• Context Matters

• Trash Explorer

• First Mine

• Clean Board

• Gamer

• Time Well Spent

Achievement Notifications

When an achievement unlocks, show a subtle macOS-style notification:

Appears in the top-right corner

Small and unobtrusive

Fades out automatically

No modal dialogs

Optional soft system sound

Notification content:

Small trophy icon

Text:

“Achievement unlocked”

[Achievement Name]

Clicking the notification opens the Achievements window.

Tone & Behavior

Achievements should feel like the OS quietly noticing behavior.

No confetti, no animations, no celebration screens.

Calm, understated, system-native.

Curiosity-driven, not instructional.

Achievements to Implement

First Boot

Trigger: OS loads for the first time.

Desktop Explorer

Trigger: Open several different folders or files.

Context Matters

Trigger: Open both “About Me” files.

Reference Check

Trigger: Open the Email app.

Actually Read It

Trigger: Open the CV PDF.

Command Line Curious

Trigger: Enter any valid terminal command.

Help, Actually

Trigger: Use the help command in the terminal.

Trash Explorer

Trigger: Attempt to open all files currently in the Trash folder.

First Mine

Trigger: Lose a game of Minesweeper.

Clean Board

Trigger: Win a game of Minesweeper.

Just One More

Trigger: Play the same mini-game more than once.

Gamer

Trigger: Play both available mini-games at least once.

Optional Notes

Achievements should persist at least for the session.

Do not explain achievements anywhere in the UI.

The only clue should be the achievement name itself.

The trophy icon should subtly indicate when a new achievement has unlocked (brief glow or pulse).

A few additional prompts help to make the Achievement experience more intuitive and enticing for the user.

Prompt 10:

for the achievements list, please add a description of what user did to get it

if achievement is not yet completed, let's display ??? below the achievement please

Prompt 11:

let's go for reset achievements button - the 'restart' item in the 'portfolio OS' could work for that actually :)

Step 5: More bells & whistles

At this point, the operating system is fundamentally sound. Now that the core OS is in place, adding additional apps, games, achievements, embeds, and customizations is largely modular. 

Here’s what Jakub does to make the OS even more personalized and immersive:

Prompt 12:

let's add this spotify embed as another item in the bottom dock, it should act like all the other windows and display this embed: [embed Spotify code]

Prompt 13:

in system preferences, can we add a theme switcher, which would change how icons/windows/fonts look like? ideally like 5 different themes

The theme switcher needed a slight adjustment, so Jakub made the following change:

Prompt 14:

nice, but i think the windows all keep the default theme always? every UI element should adapt to the chosen style please

Finally, he bulked up the supply of available wallpapers. 

Prompt 15:

there we go! now let's add more wallpapers that are pictures, more that would fit those different styles!

Prompt 16: (those are names of the wallpapers Bolt added)

please change:

classic - vintage tech

terminal - minimal

nordic - aurora

retro - concrete

Final result: A portfolio that takes personalization and interactivity to a new level

OS-style websites are both scroll-stopping and undeniably engaging. And because almost everything is clickable, visitors have a clear incentive to explore and spend a little extra time on your site.

While a portfolio site is one of the more obvious use cases for this hyper-personalized approach to design, it may also make sense for your digital storefront if your brand is especially creative or playful.

Starting from a single prompt, Bolt helped us build:

• A desktop environment

• File-based navigation

• Apps and games

• Settings and themes

• Achievements and Easter eggs

  
  

We ended up with a portfolio website brimming with personality and ingenuity, which is perfect for those advertising their services in a competitive talent market.

Want to create your own OS-style portfolio or website? Build it with Bolt.