Terminal-window-style portfolio interface with a draggable and resizable terminal component
portfolioInTerminal — React Portfolio Template
By raulpy271
A single-page portfolio template built with React that mimics a macOS terminal window. The terminal component is draggable and resizable, and content is managed centrally as text objects.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
What stands out
A quick read of the recorded project description.
Content is centralized in the contentEN object under src/text/; editing the text replaces personal information
New display sections can be added by adding properties to the content object
Supports multiple languages: create a similarly structured text object and import it in textManager.js
README provides GitHub Pages deployment steps, including using a custom short-address repository
MIT license, allowing free use, modification, commercial use, and distribution
Template Details
This is a React-based single-page application (SPA) portfolio template styled to look like a macOS terminal window. The terminal itself is a draggable, resizable React component that displays personal information in sections such as "About Me"; the author uses it as a personal portfolio.
Content maintenance is centralized in the contentEN object under the src/text/ path. Editing that object replaces the text in each section; adding properties to the object creates new sections. To support other languages, create a similarly structured object in the same path and import it in src/text/textManager.js. The README recommends reading the files under src/text/ directly to learn how to edit, extend sections, and add multiple languages.
The template provides GitHub Pages deployment instructions: install gh-pages as a dev dependency, set the homepage field in package.json to an address like http://{username}.github.io/{repo-name}, then run npm run deploy. To use a short address such as {username}.github.io, you need to create an additional repository with the same name and publish the build output to that repository via git remote and gh-pages commands.
The repository uses the MIT license, allowing free use, modification, commercial use, and distribution of this version of the code, provided the copyright notice and full license notice are retained when distributing. Licenses for third-party assets such as demo images, fonts, and icons must be checked separately; external services such as domains and hosting may incur additional charges.
Is it right for your project?
Use Cases
- A developer wants a terminal-style personal portfolio page
- Needs to separate portfolio content from interface code for easy repeated text edits
- Wants to add language versions other than English to the portfolio
- Plans to deploy a static portfolio to GitHub Pages
Suitable For
- Developers familiar with React who can read the src/text/ source to adjust content
- Users who accept the terminal visual style and do not need a conventional image-and-text portfolio layout
- People who host code on GitHub and are willing to follow the README steps to deploy to GitHub Pages
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
First fork and clone the repository, then edit the personal information in the contentEN object under the src/text/ path
- 2
To add a section, add a property to that content object; for multiple languages, create a similarly structured object and import it in src/text/textManager.js
- 3
Before deploying to GitHub Pages, install the gh-pages dev dependency and set the target address in the homepage field of package.json
- 4
To use a short address like {username}.github.io, create a repository with the same name and publish the build output via git remote and gh-pages commands
- 5
Before use, check the licenses for third-party assets such as demo images, fonts, and icons; MIT covers only this version of the code
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in a public repository under the MIT license; the free scope is this version of the code and does not imply that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version of the code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Using this template requires forking and cloning the repository, then locally editing the contentEN object under src/text/ to fill in personal information; the template itself contains no ready-made content, so you must prepare your own copy.
- Multilingual support requires creating a similarly structured text object under src/text/ and importing it in textManager.js; the template does not include content in other languages.
- Deployment relies on the GitHub Pages service, requiring installation of the gh-pages dev dependency and configuration of the homepage field in package.json; this is an external hosting service.
- To use a short address like {username}.github.io, you need to create an additional repository with the same name and publish the build output via git remote and gh-pages commands.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; do not judge solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
To use this page, first fork this repository and clone it on your machine, so you will can add your information.
Original README
Or if you want to add support to another language you should create an object like these in the mentioned path and import it in the `src/text/textManager.js` file.
Original README
Install github pages as dev dependecies:
Original README
https://github.com/raulpy271/portfolioInTerminal/blob/master/LICENSEhttps://github.com/raulpy271/portfolioInTerminal/blob/master/README.mdTo use it, the user should create a repository named `{username}.github.io`.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 87 / 100
- Technologies
- React
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-07-26
- Screenshot last checked
- 2026-10-03
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies React as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: 011edcdaf1a97ac3a7ac5c24442684308b1c55309b7ef1bd6c1b3660b9b6b237
2026-10-03T00:02:41.961Z
Source file / repository# Portfolio In Terminal Style

This is a SPA in reactJS with a MacOS terminal style. The terminal is a draggable and resizable React component and has sections about me, so it's will be my personal portfolio for while.
See the [demo](https://raulpy271.github.io) page.
If you are interested in using this app for your portfolio, see the sections: [How to setup](#how-to-setup) and [Deploy](#deploy).
#### To turn the terminal draggable i used this [library](https://github.com/raulpy271/DraggableDialog)
## How to setup
To use this page, first fork this repository and clone it on your machine, so you will can add your information.
To edit the sections and put your information you should edit the `contentEN` object in the `src/text/` path. Besides, you can add more sections creating more properties to the object.
Or if you want to add support to another language you should create an object like these in the mentioned path and import it in the `src/text/textManager.js` file.
Read the files of the `src/text/` path and you'll understand more about how to edit, add more sections, or support for multiples languages.
If something isn't clear feels free to open an issue.
## Deploy
After making your changes, you can deploy the app on github pages. The steps are:
Install github pages as dev dependecies:
```sh
npm install gh-pages --save-dev
```
Put the link of your homepage in the `homepage` properties of `package.json`, the link is like this `http://{username}.github.io/{repo-name}`.
After all, run the command:
```sh
npm run deploy
```
And the application will be deployed in the `homepage` link.
## Deploy in another repository
Following the steps above, I get a repository with the source code in the branch `main` and another branch with the bundled version of the source. Besides, I get the link `https://raulpy271.github.io/portfolioInTerminal` to access the page.
The problem is that this link is too large, I want to use `https://raulpy271.github.io`. To use it, the user should create a repository named `{username}.github.io`.
But to deploy it, I should explicitly tell to github pages the new repository link. To make this I will add a remote branch in git and use this branch in the command `gh-pages`, See the steps:
```sh
git remote add homepage https://github.com/raulpy271/raulpy271.github.io
```
I added a new remote called `homepage`, and then will create a new bundled source in the directory `build`:
```sh
npx react-scripts build
```
And then I will use the files of the above directory and the new remote branch in `gh-pages`:
```sh
npx gh-pages -d build -o homepage
```
Now, the app is deployed 🚀! And I get a short link and a separate version with the production-ready code.
Explore similar templates
Compare previews and descriptions within the same stack and category.

react-portfolio-template
A React-based developer portfolio template for showcasing projects, work history, and skills. It offers a multi-component layout, dark and light modes, and responsive mobile adaptation, with text and images editable in src/components.
React · Portfolio

personal-website-react
A single-page developer portfolio template built with React and Material-UI, driven by a JSON Resume-compliant resume.json. It offers light/dark theme switching with localStorage persistence, a clean responsive layout, and Create React App tooling for simple builds and static deployment.
React · Portfolio

karngyan.com
A personal website and blog template for developers, built with TanStack Start, React 19, Tailwind CSS v4, and shadcn/ui. It uses MDX for articles with Shiki highlighting and GFM tables, and automatically generates RSS, sitemap, robots.txt, llms.txt, and OG images.
React · Portfolio

react-portfolio-template
A React portfolio template by Ryan Balieiro with a fixed sidebar and page-turn transitions on desktop, bottom navigation on mobile, multilingual support, light/dark themes, and content components for experience, education, skills, projects, and testimonials.
React · Portfolio

portfolio
A data scientist personal portfolio template built with React and MUI, with content centrally managed through configuration files in the assets directory.
React · Portfolio

react-portfolio
A React 16 and Material-UI developer portfolio template that centralizes personal information in a JSON Resume-compliant resume.json, with light/dark theme switching saved to local storage. It currently provides portfolio display only; resume page templates and structured data enhancements are still planned.
React · Portfolio
