Skip to content

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.

License

Notifications You must be signed in to change notification settings

mustafadalga/cv-terminal-builder

Repository files navigation

💻 CV Terminal Builder

A powerful and customizable online interactive CV generator with terminal aesthetics

CV Terminal Builder



📖 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": ["📧 john.doe@example.com", "📞 +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": ["📧 john.doe@example.com", "📞 +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": "john.doe@example.com",
  "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

Generating CV Terminal Website

Sure! Here's a brief summary of the steps to generate and deploy your CV Terminal Website:

Generating 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

cv terminal builder

License

License

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages