💻 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:

{
  "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

{
  "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

{
  "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

License