Portfolio In Terminal Style

Portfolio In Terminal Style

Portfolio In Terminal Style is a ReactJS portfolio template that presents a developer's personal info inside a draggable, resizable MacOS-style terminal window. The template is a single-page application (SPA) with content-driven sections, and it is designed to be deployed for free on GitHub Pages.

What is Portfolio In Terminal Style?

Portfolio In Terminal Style is a single-page application (SPA) built with ReactJS that mimics a MacOS terminal interface. The creator uses it as a personal portfolio, and a live demo runs at https://raulpy271.github.io. The template reads user-edited content from a contentEN object in the src/text/ directory and renders that content as interactive terminal sections, making it a content-driven portfolio rather than a static page.

What makes Portfolio In Terminal Style stand out?

• Draggable terminal window — The terminal component can be dragged anywhere on the screen; the drag behavior comes from the author's DraggableDialog library.
• Resizable terminal — Users can resize the terminal window like a native desktop app, adjusting width and height to fit content.
• Content-driven sections — Edit the contentEN object in src/text/ to update your bio, projects, and other sections; adding new properties creates new terminal sections.
• Multi-language support — Create additional language objects in the same directory and import them in src/text/textManager.js to offer the portfolio in multiple languages.
• React with styled-components — The UI is styled with styled-components, and the repository topics also list react-redux, indicating state management integration.
• GitHub Pages deployment — Setup instructions cover installing gh-pages, setting the homepage field in package.json, and running npm run deploy to publish at a GitHub Pages URL.
• Short-URL deployment option — For a shorter link, the README shows how to deploy the production build to a separate username.github.io repository using a custom remote and the gh-pages command.

Who should use Portfolio In Terminal Style?

• Developers who want a portfolio that stands out from typical card-based layouts; they fork the repository, replace the sample content with their own details, and deploy to GitHub Pages.
• Tech job seekers who want to demonstrate familiarity with React, styled-components, and modern front-end tooling through the template's own stack.
• Multilingual portfolio owners who need to present the same information in more than one language by adding language objects to the text manager.

Use cases

• Showcase projects in a terminal UI: Paste your project names, descriptions, and links into the content object and present them as terminal commands and outputs.
• Experiment with reusable React components: The draggable terminal component is used in this template and can be extracted for other React applications.
• Learn GitHub Pages deployment flows: The README walks through both standard and custom-remote deployment, which is useful practice for any static site.

How does it work?

Start by forking the repository and cloning it locally. Edit the contentEN object (or create a new language object) in src/text/ to add your personal information, then deploy with npm run deploy after setting the homepage URL in package.json. The process is documented step by step in the README.

FAQ

How do I customize the portfolio content?

Open the contentEN object in src/text/ and change the values to your own information. To add more sections, create additional properties in that object; each property is rendered as a new terminal section.

How do I add support for another language?

Create a new language object in the same src/text/ directory, then import and register it in src/text/textManager.js. The README explains the structure of these objects, so follow the existing pattern.

How do I deploy to GitHub Pages?

Install gh-pages as a dev dependency, add your site URL to the homepage field in package.json, and run npm run deploy. This publishes the bundled app to the gh-pages branch of your repository.

Can I deploy to my own username.github.io domain?

Yes. Create a repository named username.github.io, add it as a git remote, build the project with npx react-scripts build, and run npx gh-pages -d build -o homepage to push the production files to that remote.