<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
background-color: #121212;
color: #8bc34a;
font-family: 'Press Start 2P', monospace;
padding: 20px;
line-height: 1.6;
margin: 0;
}
.terminal {
max-width: 800px;
margin: 20px auto;
background-color: #000;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
cursor: text;
}
.terminal-header {
background: linear-gradient(to right, #333, #111);
padding: 10px;
border-radius: 10px 10px 0 0;
margin: -20px -20px 20px -20px;
text-align: center;
font-size: 14px;
font-weight: bold;
}
.prompt {
color: #8bc34a;
margin-bottom: 10px;
}
.user {
color: #ffc107;
}
.hostname {
color: #03a9f4;
}
.directory {
color: #e91e63;
}
.command-input {
background: transparent;
border: none;
color: #8bc34a;
font-family: inherit;
font-size: inherit;
width: 80%;
outline: none;
margin-left: 5px;
cursor: text;
line-height: 1.6; /* Adjust line height to prevent overlap */
padding: 2px;
}
.output {
color: #8bc34a;
margin-left: 10px;
margin-bottom: 20px;
white-space: pre-wrap;
}
.hidden {
display: none;
}
.cursor {
animation: blink 1s infinite;
display: inline-block;
width: 8px;
height: 16px;
background: #8bc34a;
margin-left: 5px;
vertical-align: middle;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.help-text {
color: #999;
font-style: italic;
}
.error {
color: #ff5555;
}
.success {
color: #8bc34a;
}
.highlight {
color: #ffc107;
}
</style>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';">
</head>
<body>
<div class="terminal">
<div class="terminal-header">Mohammad Abir Abbas - Retro CV</div>
<div id="terminal-content">
<div class="output">Welcome to my portfolio! I am eager to explore potential opportunities. Please type 'help' to see the available commands.</div>
<div id="command-history"></div>
<div class="prompt">
<span class="user">abir</span>@<span class="hostname">portfolio</span>:<span class="directory">~</span>$ <input type="text" class="command-input" id="command-input" autofocus>
</div>
</div>
</div>
<script>
const commandHistory = document.getElementById('command-history');
const commandInput = document.getElementById('command-input');
const data = {
profile: `Full Name: Mohammad Abir Abbas
Location: Chattogram, Bangladesh
Contact:
- Phone: +8801841603542
- Email: [email protected]
- LinkedIn: www.linkedin.com/in/abir-abbas
- Portfolio: linktr.ee/uknowWhoAb1r
Top Skills:
- Start-up Leadership
- Start-up Ventures
- Rust Jobs
Languages:
- Bengali (Native or Bilingual)
- German (Goethe Zertifikat A2) (Elementary)
- English (IELTS 7.5) (Native or Bilingual)
Certifications:
- Docker Training Course for the Absolute Beginner
- Langchain x Autonomous GPT Agents Hackathon Certificate
- Jira Fundamentals Badge
- Master In-Demand Professional Soft Skills
- Leading with a Growth Mindset
Honors and Awards:
- Certificate of Proficiency in Digital Competence
- Goethe A2 Certification
- Wolfsburg Homie Certificate of Appreciation
- Certificate of Achievement
`,
experience: `Experience:
Deep Blue Digital (Co-Founder) - September 2024 to Present
- Explore our established digital goods marketplace
- Instant access to all purchases
- Seller-friendly environment with global visibility
- Secure transactions
- Wide range of digital products
Techstack: WordPress, CMS
Newest Addition: PC Web App
HNM IT Solutions (IT Support Technician) - October 2023 to January 2024
- Update router software to enhance security, improve functionality, and ensure compatibility
- Troubleshoot network issues using diagnostics and verifying configurations
- Systematically eliminate potential sources of network problems
MTC (AV Hannover Messe) - April 2023 to April 2023
- Spearheaded kitchen operations, crafting diverse dishes while prioritizing quality and safety
- Demonstrated teamwork & time management excellence in a fast-paced environment, boosting customer service & culinary standards
Fieldsports GmbH (Data Miner) - July 2020 to October 2020
- Mined 3,000 travel contacts & info using Python (Beautiful Soup & HTML), launching a travel website!`,
education: `Education:
42 Wolfsburg (Computer Software Engineering, Peer Programming on C and C++) - April 2022 to July 2024
Chittagong University of Engineering & Technology (Bachelor's degree, Mechanical Engineering) - 2013 to 2017
Dhaka College (HSC) - 2010 to 2012
Chittagong Collegiate School (SSC) - 2005 to 2010
42 The Network - 2022 to 2024`
};
const commands = {
help: 'Available commands:n' +
'profile - Display personal informationn' +
'skills - List technical and soft skillsn' +
'exp - Show work experiencen' +
'certs - View certificationsn' +
'awards - Show honors and awardsn' +
'motto - Display personal motton' +
'edu - Show educational backgroundn' +
'clear - Clear the terminaln' +
'contact - Show contact informationn' +
'ls - List all available commandsn' +
'whoami - Display current user info',
ls: 'profile skills exp certs awards motto edu contact',
whoami: 'abir - AI Developer | Rust | Creator of Rusty',
contact: `Contact Information:
- Phone: <a href="tel:+8801841603542">+8801841603542</a>
- Email: <a href="mailto:[email protected]">[email protected]</a>
- LinkedIn: <a href="https://www.linkedin.com/in/abir-abbas" target="_blank">www.linkedin.com/in/abir-abbas</a>
- Portfolio: <a href="https://linktr.ee/uknowWhoAb1r" target="_blank">linktr.ee/uknowWhoAb1r</a>`
};
// Function to sanitize output to prevent XSS
function sanitizeHTML(str) {
const div = document.createElement('div');
div.innerText = str;
return div.innerHTML;
}
function addToHistory(command, output, isError = false) {
const promptHtml = `<div class="prompt"><span class="user">abir</span>@<span class="hostname">portfolio</span>:<span class="directory">~</span>$ ${sanitizeHTML(command)}</div>`;
const outputHtml = `<div class="output ${isError ? 'error' : ''}">${sanitizeHTML(output)}</div>`;
commandHistory.innerHTML += promptHtml + outputHtml;
}
function handleCommand(command) {
const cmd = command.toLowerCase().trim();
if (cmd === '') return;
let output;
switch(cmd) {
case 'help':
output = commands.help;
break;
case 'profile':
output = data.profile;
break;
case 'skills':
output = data.profile.split('nnTop Skills:')[1].trim();
break;
case 'exp':
output = data.experience;
break;
case 'certs':
output = data.profile.split('nnCertifications:')[1].trim();
break;
case 'awards':
output = data.profile.split('nnHonors and Awards:')[1].trim();
break;
case 'motto':
output = "Precision Engineering, Visionary Innovation - Ignite Your Tech Ascent";
break;
case 'edu':
output = data.education;
break;
case 'clear':
commandHistory.innerHTML = '';
return;
case 'ls':
output = commands.ls;
break;
case 'whoami':
output = commands.whoami;
break;
case 'contact':
output = commands.contact;
break;
default:
output = `Command not found: ${sanitizeHTML(cmd)}. Type 'help' for available commands.`;
addToHistory(command, output, true);
return;
}
addToHistory(command, output);
}
commandInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const command = this.value;
handleCommand(command);
this.value = '';
window.scrollTo(0, document.body.scrollHeight);
}
});
// Auto-focus input when clicking anywhere in the terminal
document.querySelector('.terminal').addEventListener('click', function() {
commandInput.focus();
});
// Initial help message
addToHistory('help', commands.help);
</script>
</body>
</html>
Output from above
“I implemented a Content Security Policy (CSP) to enhance security on my website, but it caused my website to break. Specifically, external fonts, inline scripts, and some commands are not functioning correctly. I’ve tried multiple ways to fix the handling logic, but nothing seems to work. Below, I’ll share the original output and the changes I made. Can someone help me resolve this issue?”