Retro Computer Personal Website

Retro Computer Personal Website is an open-source portfolio template that presents a personal homepage as an interactive 3D retro computer, built entirely with TypeScript and the THREE.js WebGL library.

What is Retro Computer Personal Website?

This project transforms a personal website into a desktop-like experience. Instead of a conventional blog layout, visitors interact with a 3D model of a retro computer that contains a working UNIX-style shell, a virtual filesystem, and a markdown renderer. The site was created by developer Edward Hughes (the domain is edh.dev, formerly edwardh.io) during a university break, and it is distributed as open source with 428 GitHub stars.

Key Features

• Interactive 3D retro computer — A THREE.js-rendered computer model that users can click and interact with directly in the browser.
• Simple UNIX shell — A working command-line interface that visitors can use to run basic commands, mimicking a terminal inside the page.
• Virtual filesystem — The shell is backed by an in-browser filesystem that can store and retrieve files, making the terminal functional rather than decorative.
• Markdown interpreter and renderer — Content on the site is written in Markdown and converted to HTML by a custom interpreter built for the project.
• Text layout engine — A custom text-layout system positions and wraps text inside the 3D scene, allowing readable text on the computer screen.
• Shader support — The repository topics list shaders, indicating custom GLSL shader effects are used in the THREE.js rendering.
• TypeScript source — The entire codebase is written in TypeScript, providing type safety for the shell, filesystem, and renderer logic.

Who is it for?

Developers seeking a distinctive portfolio can adopt this project to display their work inside a simulated retro OS. Retro computing enthusiasts can explore a faithful interactive homage to classic computer UIs. WebGL developers can study a production example of THREE.js combined with a custom shell and filesystem.

What can you do with it?

• Developers: Replace the markdown content with your own bio and projects to launch a portfolio that stands out from static templates.
• Recruiters and visitors: Browse a site by typing commands in the terminal instead of scrolling, accessing files and pages through the simulated filesystem.
• WebGL hobbyists: Read the source to see how a custom text layout engine and shaders render UI elements inside a 3D scene.

How does it work?

Running the project requires Node.js and npm. After cloning the repository, run 'npm install' to install dependencies. Use 'npm run dev' to start a local development server at localhost:1234, or 'npm run build' to create a production-ready static site in the dist/ directory.

Pricing

The project is free and open source, published publicly on GitHub with 428 stars. There are no paid tiers or subscription requirements.

FAQ

Is Retro Computer Personal Website free?

Yes, the source code is publicly available on GitHub and can be downloaded, used, and modified for free. The repository has 428 stars at the time of writing.

Where can I see a live demo?

The live site is running at edh.dev, which is the author's personal website. It was formerly hosted at edwardh.io.

Can I use it for my own portfolio?

Yes. Because it is a personal website template, you can modify the markdown content, filesystem structure, and terminal commands to present your own projects and information. Build instructions are included in the repository.