Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mustafadalga/cv-terminal-builder
This project is a unique CV Terminal Builder that allows users to create dynamic, interactive CVs in a terminal-like interface. It was built using React.js, Typescript and the xterm.js library.
https://github.com/mustafadalga/cv-terminal-builder
cv-builder developer-tools glassmorphism interactive-resume material-ui personal-portfolio reactjs resume-builder terminal-ui typescript vitejs xterm zustand
Last synced: 12 days ago
JSON representation
This project is a unique CV Terminal Builder that allows users to create dynamic, interactive CVs in a terminal-like interface. It was built using React.js, Typescript and the xterm.js library.
- Host: GitHub
- URL: https://github.com/mustafadalga/cv-terminal-builder
- Owner: mustafadalga
- License: gpl-3.0
- Created: 2023-06-23T22:08:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-10T07:58:10.000Z (over 1 year ago)
- Last Synced: 2024-11-17T13:20:39.942Z (2 months ago)
- Topics: cv-builder, developer-tools, glassmorphism, interactive-resume, material-ui, personal-portfolio, reactjs, resume-builder, terminal-ui, typescript, vitejs, xterm, zustand
- Language: TypeScript
- Homepage: https://cv-terminal-builder.netlify.app/
- Size: 150 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💻 CV Terminal Builder
**A powerful and customizable online interactive CV generator with terminal aesthetics**
📖 About |
💻 Features |
💻 Used Technologies |
📄 Preparing Your CV JSON |
👀 Demo |
💻 Examples |
🚀 Generating CV Terminal Website |
📷 Screenshots |
🚀 License## About CV Terminal Builder
CV Terminal Builder is a unique online tool for creating highly personalized CVs in the style of a terminal window. It offers a wide range of customization options to make your CV stand out from the crowd.You can set a variety of visual parameters, including background and text colors, font size and family, terminal dimensions, and many more. All changes are stored in your local browser storage, so you can easily pick up where you left off.
## Features
* ✏️ Prompt name customization
* 📄 CV upload from device or URL in JSON format
* 🌄 Page background image setting from device or URL
* 🎨 Page and terminal background color customization
* ✒️ Terminal text and cursor color customization
* 🪟 Terminal Glassmorphism effect
* 📏 Terminal size (cols/rows) customization
* 📝 Text font size and family customization
* 🖼️ Text and terminal box shadow application
* 🖼️ Terminal border style application
* 📏 Terminal margin and padding customization
* 💾 Changes are stored in local storage for convenient continuation## Used Technologies
* 🌟 React.js
* 🔤 Typescript
* 🧩 Zustand for state management
* 🎨 Material UI for user interface
* 🚀 Vite.js for build tool
* 🌈 Prismjs for code highlighting
* 💻 Xterm for terminal emulation## Preparing Your CV JSON
In order for the CV Terminal Builder to work correctly, you need to provide a valid CV JSON file. The CV JSON follows a specific schema where each object key must have an array as its value.
Here is an example of a valid CV JSON:
```json
{
"name": ["John Doe"],
"role": ["Front End Developer"],
"contact": ["📧 [email protected]", "📞 +1 123 456 7890"],
"experience": ["Company A - Front End Developer", "Company B - UI/UX Designer"],
"skills": ["HTML", "CSS", "JavaScript"],
"projects": ["Project A", "Project B", "Project C"],
"education": ["University A - Computer Science"]
}
```
Make sure to provide an array for each key in the CV JSON. If a key has only one value, it should still be placed in an array.## Examples
### Valid CV JSON
```json
{
"name": ["John Doe"],
"role": ["Front End Developer"],
"contact": ["📧 [email protected]", "📞 +1 123 456 7890"],
"experience": ["Company A - Front End Developer", "Company B - UI/UX Designer"],
"skills": ["HTML", "CSS", "JavaScript"],
"projects": ["Project A", "Project B", "Project C"],
"education": ["University A - Computer Science"]
}
```### Invalid CV JSON
```json
{
"name": "John Doe",
"role": "Front End Developer",
"contact": "[email protected]",
"experience": "Company A - Front End Developer",
"skills": "HTML, CSS, JavaScript",
"projects": "Project A",
"education": "University A - Computer Science"
}
```
In the invalid CV JSON example, each key does not have an array as its value, which will result in a validation error.## Demo
* 🔗 Check out https://mustafadalga.github.io, a website generated with the CV Terminal Builder.## Generating CV Terminal Website
Sure! Here's a brief summary of the steps to generate and deploy your CV Terminal Website:Generate Code → Copy Generated Code → Create an HTML File → Paste the Generated Code → Deploy Your CV Terminal Website
By following these steps, you'll be able to generate the code for your CV Terminal Website, create an HTML file with the code, and deploy the website to make it accessible online.
## Screenshots
![cv terminal builder](https://github.com/mustafadalga/cv-terminal-builder/assets/25087769/fde21e38-7505-4afe-9c55-38a3855ea1df)![cv terminal builder](https://github.com/mustafadalga/cv-terminal-builder/assets/25087769/c8034504-d269-4e16-8d46-f9a76155593a)
## License
[![License](https://img.shields.io/badge/LICENSE-GPL--3.0-orange)](https://github.com/mustafadalga/cv-terminal-builder/blob/main/LICENSE)