Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hassanzouhar/terminal_cv
R2C Terminal is an interactive web-based terminal that serves as a dynamic and stylish resume. It uses modern web technologies to create a terminal-like interface where users can explore your resume, projects, and contact information through various commands.
https://github.com/hassanzouhar/terminal_cv
css emulator html javascript js resume showcase terminal
Last synced: about 1 month ago
JSON representation
R2C Terminal is an interactive web-based terminal that serves as a dynamic and stylish resume. It uses modern web technologies to create a terminal-like interface where users can explore your resume, projects, and contact information through various commands.
- Host: GitHub
- URL: https://github.com/hassanzouhar/terminal_cv
- Owner: hassanzouhar
- Created: 2024-07-13T23:24:21.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-14T19:14:22.000Z (6 months ago)
- Last Synced: 2024-10-12T22:25:27.867Z (3 months ago)
- Topics: css, emulator, html, javascript, js, resume, showcase, terminal
- Language: JavaScript
- Homepage: https://terminal.r2c.world/
- Size: 20.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Terminal CV
Terminal CV is a retro-styled terminal emulator for displaying an interactive resume. It combines HTML, CSS, and JavaScript to create a unique way to showcase your professional information.
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Commands](#commands)
- [Configuration](#configuration)
- [Customization](#customization)
- [Contributing](#contributing)
- [License](#license)
## Features
- Interactive terminal-style CV
- Customizable commands and themes
- Lightweight and responsive design
- Easy to configure and extend
## Installation
1. **Clone the repository**:
```sh
git clone https://github.com/hassanzouhar/terminal_cv.git
```
2. **Navigate to the project directory**:
```sh
cd terminal_cv
```
3. **Open `index.html` in your browser**:
Simply open the `index.html` file in your preferred browser to see the terminal CV in action.
## Usage
- The terminal CV can be used as a personal webpage to showcase your resume in an interactive format.
- You can navigate through different sections using terminal-like commands.
## Commands
- `help` - Show available commands
- `clear` - Clear the terminal
- `about` - Display information about me
- `skills` - List my technical skills
- `experience` - Show my work experience
- `education` - Display my educational background
- `projects` - List my notable projects
- `contact` - Show my contact information
## Configuration
The configuration of the terminal CV can be customized through the `config.js` file. Here is a brief overview:
### config.js
```javascript
const config = {
ascii: [
"██████╗ ████████╗ ███████╗ ██████╗ ███╗ ███╗",
"██╔══██╗ ╚══██╔══╝ ██╔════╝ ██╔══██╗ ████╗ ████║",
"██████╔╝ ╔══╗ ██║ █████╗ ██████╔╝ ██╔████╔██║",
"██╔══██╗ ╚██╝ ██║ ██╔══╝ ██╔══██╗ ██║╚██╔╝██║",
"██║ ██║ ██║ ███████╗ ██║ ██║ ██║ ╚═╝ ██║",
"╚═╝ ╚═╝ ╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝"
],
title: "This is R-Term, a retro styled terminal emulator built on HTML/JS/CSS.",
username: "rebel",
hostname: "r2c.world",
repoLink: "https://github.com/hassanzouhar/terminal_cv",
social: {
email: "[email protected]",
github: "https://github.com/hassanzouhar",
linkedin: "https://linkedin.com/hassanzouhar"
},
aboutGreeting: "Hi there. Welcome to the R2C Project Directory.",
projects: [
["Lorem ipsum", "Doomsday Machine Club", "https://github.com/hassanzouhar/terminal_cv"],
["R2C Terminal", "Terminal Directory", "https://github.com/hassanzouhar/terminal_cv"]
],
colors: {
background: "#1c1c1c",
foreground: "#d4d4d4",
banner: "#ffcc00",
border: {
visible: true,
color: "#444444"
},
prompt: {
default: "#d4d4d4",
user: "#00ff00",
host: "#00bfff",
input: "#ff69b4"
},
link: {
text: "#00bfff",
highlightColor: "#ff69b4",
highlightText: "#1c1c1c"
},
commands: {
textColor: "#ffcc00"
}
}
};
```
## Customization
### HTML
The main HTML structure is defined in `index.html`:
```html
Terminal CV
@
:
~
$
```
### JavaScript
The logic for handling terminal commands and interactions is in `commands.js` and `terminal.js`:
#### commands.js
```javascript
const commands = {
help: () => `
Available commands:
help - Show this help message
clear - Clear the terminal
about - Display information about me
skills - List my technical skills
experience - Show my work experience
education - Display my educational background
projects - List my notable projects
contact - Show my contact information
`,
clear: () => {
window.terminalUtils.clearTerminal();
return '';
},
about: () => `
About Me:
Name: ${cvData.name}
Title: ${cvData.title}
Summary: ${cvData.summary}
`,
skills: () => `
Technical Skills:
${cvData.skills.map(skill => `• ${skill}`).join('\n')}
`,
experience: () => `
Work Experience:
${cvData.experience.map(job => `
${window.terminalUtils.createExpandableSection(
`${job.position} at ${job.company}`,
`Duration: ${job.duration}
Responsibilities:
${job.responsibilities.map(resp => `• ${resp}`).join('\n')}`
)}
`).join('\n')}
`,
education: () => `
Education:
${cvData.education.map(edu => `
Institution: ${edu.institution}
Degree: ${edu.degree}
Year: ${edu.year}
`).join('\n')}
`,
projects: () => `
Notable Projects:
${cvData.projects.map(project => `
${window.terminalUtils.createExpandableSection(
project.name,
`Description: ${project.description}
Technologies: ${project.technologies.join(', ')}`
)}
`).join('\n')}
`,
contact: () => `
Contact Information:
• Email: ${cvData.contact.email}
• Phone: ${cvData.contact.phone}
• LinkedIn: ${cvData.contact.linkedin}
• GitHub: ${cvData.contact.github}
`
,
// Easter egg command
sudo: () => "Nice try, but you don't have root access here! 😉",
// Default handler for unknown commands
default: (command) => `Command not found: ${command}. Type 'help' for available commands.`
};
// Function to process commands
function processCommand(input) {
const [command, ...args] = input.toLowerCase().trim().split(' ');
if (commands.hasOwnProperty(command)) {
return commands[command](args);
} else {
return commands.default(command);
}
}
// Make processCommand available globally
window.processCommand = processCommand;
```
#### terminal.js
```javascript
const terminalOutput = document.getElementById('terminal-output');
const terminalInput = document.getElementById('terminal-input');
const prompt = document.getElementById('prompt');
let historyIndex = 0;
let tempInput = "";
const HISTORY = [];
// Apply colors from config
applyColors(config.colors);
function applyColors(colors) {
document.body.style.backgroundColor = colors.background;
document.body.style.color = colors.foreground;
terminalInput.style.color = colors.prompt.input;
if (colors.border.visible) {
document.getElementById('terminal').style.border = `2px solid ${colors.border.color}`;
}
document.getElementById('user').textContent = config.username;
document.getElementById('user').style.color = colors.prompt.user;
document.getElementById('host').textContent = config.hostname;
document.getElementById('host').style.color = colors.prompt.host;
}
// Initialize the terminal
function initTerminal() {
displayBanner();
terminalInput.addEventListener('keydown', handleInput);
window.addEventListener('click', () => terminalInput.focus());
}
// Display welcome banner
function displayBanner() {
const banner = `
${config.ascii.join('\n')}
${config.title}
Type 'help' to see available commands.
`;
appendToTerminal(banner);
}
// Handle user input
function handleInput(e) {
switch(e.key) {
case 'Enter':
e.preventDefault();
processInput();
break;
case 'ArrowUp':
e.preventDefault();
navigateHistory('up');
break;
case 'ArrowDown':
e.preventDefault();
navigateHistory('down');
break;
case 'Tab':
e.preventDefault();
autocomplete();
break;
}
}
// Process the entered input
function processInput() {
const input = terminalInput.value.trim();
const commandLineDiv = document.createElement('div');
commandLineDiv.className = 'command-line';
commandLineDiv.innerHTML = `${prompt.innerHTML} ${input}`;
terminalOutput.appendChild(commandLineDiv);
if (input !== '') {
HISTORY.push(input);
historyIndex = HISTORY.length;
const output = window.processCommand(input); // Ensure processCommand is called correctly
appendToTerminal(output);
}
terminalInput.value = '';
scrollToBottom();
}
// Utility functions
function appendToTerminal(text) {
const output = document.createElement('div');
output.innerHTML = text;
output.style.whiteSpace = 'pre-wrap';
terminalOutput.appendChild(output);
}
function clearTerminal() {
terminalOutput.innerHTML = '';
displayBanner();
}
function scrollToBottom() {
terminalOutput.scrollTop = terminalOutput.scrollHeight;
}
// Initialize the terminal when the page loads
window.addEventListener('load', initTerminal);
```
### CSS
The styles for the terminal CV are defined in `styles.css`:
```css
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200;300;400;600&family=Pixelify+Sans&family=VT323&display=swap');
:root {
--background: #1c1c1c;
--foreground: #d4d4d4;
--prompt: #00ff00;
--input: #ff69b4;
--link: #00bfff;
--highlight: #ffcc00;
--border-color: #444444;
}
html, body {
height: 100%;
font-size: 16px;
margin: 0;
padding: 0;
font-family: 'IBM Plex Mono', monospace;
background: var(--background);
color: var(--foreground);
}
body {
display: flex;
justify-content: center;
align-items: center;
}
#terminal {
width: 90%;
max-width: 800px;
height: 80%;
background: rgba(0, 0, 0, 0.85);
border: 2px solid var(--border-color);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
overflow: hidden;
}
#terminal-output {
flex-grow: 1;
padding: 10px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
white-space: pre-wrap;
word-wrap: break-word;
font-size: 14px;
line-height: 1.5;
}
#terminal-output::-webkit-scrollbar {
display: none;
}
#input-line {
display: flex;
align-items: center;
padding: 10px;
background: var(--background);
border-top: 2px solid var(--border-color);
}
#terminal-input {
font-family: 'IBM Plex Mono', monospace;
padding: 0;
margin: 0;
border: none;
resize: none;
outline: none;
font-size: 16px;
background-color: transparent;
flex-grow: 1;
color: var(--input);
}
a {
color: var(--link);
text-decoration: none;
}
a:hover {
color: var(--highlight);
}
.command-line {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-bottom: 10px;
}
.command-line .prompt {
flex-shrink: 0;
margin-right: 5px;
white-space: nowrap;
color: var(--prompt);
}
.command-line .command {
word-break: break-all;
}
.highlight {
color: var(--highlight);
font-weight: 600;
}
@media (max-width: 600px) {
body {
font-size: 10px;
}
#terminal-input {
font-size: 10px;
}
#terminal-output p, #terminal-output div {
line-height: 14px;
}
pre {
line-height: 12px !important;
font-size: 9px;
}
}
```
## Contributing
Contributions are welcome! Please open an issue or submit a pull request for any improvements or suggestions.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.