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

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

Source: Dev.to

tfish (a windows themed portfolio template with fully functional terminal and other features) ## the backstory ## what makes it different ## the terminal commands ## screenshots ## how to use it yourself ## adding your own terminal theme ## deployment ## why did i make this ## coming soon ## the tech stack ## try it yourself ## contributions ## final thoughts a portfolio that boots like an actual computer live demo: iamovi.github.io/tfish source code: github.com/iamovi/tfish 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? it's not just themed, it actually boots most "terminal-style" portfolios are just green text on a black background. tfish goes further: 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. once you boot in, you can use actual commands: type them in. it feels real. that's the point. yes, it's a template. yes, you can use it for your own portfolio. here's how: 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. want a custom theme? add it to the theme switcher: i've included ubuntu, windows cmd, powershell, hacker, and retro themes by default. make your own. deploy the dist folder to: 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. i'm actively working on adding more features to make this even more immersive: this project is actively maintained, so expect regular updates with new features! live demo: iamovi.github.io/tfish source code: github.com/iamovi/tfish 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. 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. live demo: iamovi.github.io/tfish source code: github.com/iamovi/tfish made with ❤️ by ovi ren, for developers who appreciate a good terminal Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: # 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 Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: # 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 COMMAND_BLOCK: # 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 CODE_BLOCK: 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 }; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 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 }; CODE_BLOCK: 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 }; COMMAND_BLOCK: npm run build # or bun run build Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: npm run build # or bun run build COMMAND_BLOCK: npm run build # or bun run build - 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 - 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... - github pages - anywhere that hosts static sites - 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 - react - component framework - typescript - type safety - vite - build tool - tailwind css - styling - shadcn/ui - ui components - lucide-react - icons