Ovi ren

Posted on Feb 5

i turned my portfolio into a bootable operating system (windows portfolio)

#webdev #typescript #react #portfolio

tfish (a windows themed portfolio template with fully functional terminal and other features)

a portfolio that boots like an actual computer

live demo: iamovi.github.io/tfish

source code: github.com/iamovi/tfish

the backstory

i wanted to make a portfolio. but not just any portfolio. i wanted something that would make people go "wait, what?" when they opened it.

so i built tfish - a fully interactive terminal-based portfolio that simulates an entire operating system experience. complete with BIOS boot sequence, login screen, draggable desktop icons, and a functional terminal.

because why show your projects in a normal grid layout when you can make people boot into your portfolio like it's 1995?

what makes it different

it's not just themed, it actually boots

most "terminal-style" portfolios are just green text on a black background. tfish goes further:

BIOS boot sequence with that authentic loading feel
actual login screen (username: user, password: pass)
draggable desktop icons that you can move around
working start menu with themes and wallpaper options
multiple terminal themes (ubuntu, windows cmd, powershell, hacker, retro)
customizable wallpapers
window management with minimize/maximize/close

built with modern tech

under the hood, it's React + TypeScript + Vite. shadcn/ui for components. tailwind for styling. everything you'd expect from a 2025 web app, packaged in a throwback OS interface.

the terminal commands

once you boot in, you can use actual commands:

help - see all available commands
about - learn about me (shows a profile picture and bio)
skills - view technical skills
projects - browse my projects
resume - download my resume
contact - get contact information
waifu - fetch random waifu in the terminal
joke - fetch jokes in terminal
clear - clear the terminal
exit - close the terminal
more commands will be added...

type them in. it feels real. that's the point.

screenshots

boot sequence	desktop view

terminal view	themes

how to use it yourself

yes, it's a template. yes, you can use it for your own portfolio. here's how:

# clone it
git clone https://github.com/iamovi/tfish.git
cd tfish

# install dependencies
npm install
# or
bun install

# run it
npm run dev
# or
bun dev

then customize it:

1. update your info in src/components/Terminal.tsx

change the welcome message, about section, skills, projects, and contact info. it's all in one file.

2. change the username

replace 'ren' with your username throughout the terminal prompts.

3. update the login screen

edit src/components/LoginScreen.tsx with your name.

4. swap the wallpaper

replace public/frieren.jpg with your own image.

5. customize desktop icons

edit src/components/DesktopIcons.tsx to add or remove icons.

6. add your own commands

create new terminal commands in the COMMANDS object.

full customization guide is in the github readme.

adding your own terminal theme

want a custom theme? add it to the theme switcher:

case 'yourtheme':
  return {
    bg: '#000000',           // background
    text: '#ffffff',         // text color
    prompt: 'user@host:~$',  // prompt
    header: 'Your Theme',    // window title
    welcome: WELCOME_MESSAGE,
    caret: '#ffffff'         // cursor
  };

i've included ubuntu, windows cmd, powershell, hacker, and retro themes by default. make your own.

deployment

build it:

npm run build
# or
bun run build

deploy the dist folder to:

vercel
netlify
github pages
anywhere that hosts static sites

why did i make this

honestly? because tech portfolios have gotten boring. everyone has the same hero section, the same project cards, the same "scroll down to learn more" animation.

i wanted something that felt different. something that made you interact with it. something that reminded you of the first time you opened a command line and felt like a hacker.

also, i just really like terminals.

coming soon

i'm actively working on adding more features to make this even more immersive:

youtube player - watch videos without leaving the OS
music player - play your favorite tracks in the background
file explorer - browse through a simulated file system
notepad - take notes in a classic text editor
calculator - because every OS needs one
games - maybe some retro games to kill time
custom apps - build and add your own desktop applications

this project is actively maintained, so expect regular updates with new features!

the tech stack

react - component framework
typescript - type safety
vite - build tool
tailwind css - styling
shadcn/ui - ui components
lucide-react - icons

try it yourself

live demo: iamovi.github.io/tfish

source code: github.com/iamovi/tfish

contributions

it's open source (MIT license). fork it. break it. make it better. send a PR. i'm open to new themes, new commands, new features.

if you end up using this for your portfolio, i'd love to see it. tag me or send a link.

final thoughts

tfish is what happens when you combine nostalgia for old operating systems with modern web development. it's a portfolio that doesn't take itself too seriously but still looks professional enough to send to actual employers.

it's for developers who want their portfolio to be a conversation starter. who want people to remember them because they had "that terminal portfolio that actually boots."

use it. customize it. make it yours.

that's all. go boot your portfolio.