Initial commit
This commit is contained in:
parent
ba9d90cb93
commit
148dd7fb98
GPG Key ID:
A047E76CC4582988
136
index.html
Normal file
136
index.html
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Portfolio</title>
|
||||||
|
<link style="text/css" rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="terminal">
|
||||||
|
<div id="welcome-text"></div>
|
||||||
|
<div id="input-line" style="display: none;">
|
||||||
|
<span id="prompt">$</span>
|
||||||
|
<input type="text" id="user-input" autofocus>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const terminal = document.getElementById('terminal');
|
||||||
|
const userInput = document.getElementById('user-input');
|
||||||
|
const welcomeText = document.getElementById('welcome-text');
|
||||||
|
const inputLine = document.getElementById('input-line');
|
||||||
|
|
||||||
|
let currentLanguage = 'fr';
|
||||||
|
|
||||||
|
const translations = {
|
||||||
|
fr: {
|
||||||
|
welcome: "Bienvenue dans le Portfolio de Thomas Brasdefer.\nTapez 'help' pour voir la liste des commandes disponibles. Type 'language' to switch to English.",
|
||||||
|
help: "Affiche la liste des commandes disponibles",
|
||||||
|
about: "À propos de moi",
|
||||||
|
skills: "Mes compétences",
|
||||||
|
projects: "Mes projets",
|
||||||
|
contact: "Mes coordonnées",
|
||||||
|
clear: "Efface l'écran",
|
||||||
|
language: "Change la langue (fr/en)",
|
||||||
|
languageChanged: "Langue changée en français",
|
||||||
|
commandNotRecognized: "Commande non reconnue: {0}. Tapez 'help' pour voir la liste des commandes.",
|
||||||
|
availableCommands: "Commandes disponibles:"
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
welcome: "Welcome to Thomas Brasdefer's Portfolio.\nType 'help' to see the list of available commands. Tapez 'language' pour passer en français.",
|
||||||
|
help: "Display the list of available commands",
|
||||||
|
about: "About me",
|
||||||
|
skills: "My skills",
|
||||||
|
projects: "My projects",
|
||||||
|
contact: "My contact information",
|
||||||
|
clear: "Clear the screen",
|
||||||
|
language: "Change language (fr/en)",
|
||||||
|
languageChanged: "Language changed to English",
|
||||||
|
commandNotRecognized: "Command not recognized: {0}. Type 'help' to see the list of commands.",
|
||||||
|
availableCommands: "Available commands:"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const commandResponses = {
|
||||||
|
about: {
|
||||||
|
fr: "Actuellement élève ingénieur en informatique, je suis particulièrement intéressé par le développement bas niveau, la programmation logique, la cybersécurité, la cryptographie et ,dans une certaine mesure, l'intelligence artificielle. Je suis plutôt sensible aux questions de l'open source et du logiciel libre.\n\nJe cultive également un certain intérêt pour la philosophie « classique », plus particulièrement la philosophie aristotélicienne et scolastique.\nJe suis aussi assez friand de l'histoire de France lors du XIIe siècle (la « Renaissance du Moyen Âge ») et plus largement lors du reigne de la dynastie des Capétiens direct.\nMais je dois admettre que, les années n'aidant pas, j'ai de moins en moins de temps à consacrer à ces sujets.",
|
||||||
|
en: "Currently a student in computer engineering, I'm particularly interested in low-level programming, logic programming, cybersecurity, cryptography and, to a certain extent, artificial intelligence. I'm very interested in open source and free software.\n\nI also cultivate a certain interest in “classical” philosophy, particularly Aristotelian and Scholastic philosophy.\nI'm also quite fond of French history during the 12th century (the “Renaissance of the Middle Ages”) and more broadly during the reign of the direct Capetian dynasty.\nBut I have to admit that, as the years go by, I have less and less time to devote to these subjects."
|
||||||
|
},
|
||||||
|
skills: {
|
||||||
|
fr: "Langages:\n- C\n- Java\n- Python\n- Prolog\n- HTML/CSS/Javascript/PHP\n\nFrameworks:\n- Flask\n- Spring Boot\n\nOutils:\n- Git\n- Docker\n\n Systèmes:\n- Linux (Debian/Ubuntu/Arch)\n- Windows",
|
||||||
|
en: "Languages:\n- C\n- Java\n- Python\n- Prolog\n- HTML/CSS/Javascript/PHP\n\nFrameworks:\n- Flask\n- Spring Boot\n\nTools:\n- Git\n- Docker\n\n OS:\n- Linux (Debian/Ubuntu/Arch)\n- Windows"
|
||||||
|
},
|
||||||
|
projects: {
|
||||||
|
fr: "1. <a href='' target='_blank'>Ce portfolio</a> (HTML, CSS, JavaScript)\n2. <a href='' target='_blank'>Générateur de documentation Prolog</a> (Prolog)",
|
||||||
|
en: "1. <a href='' target='_blank'>This portfolio</a> (HTML, CSS, JavaScript)\n2. <a href='' target='_blank'>Prolog documentation generator</a> (Prolog)"
|
||||||
|
},
|
||||||
|
contact: {
|
||||||
|
fr: "Email: <a href='mailto:thomas@hexasec.io'>thomas@hexasec.io</a>\nLinkedIn: <a href='https://www.linkedin.com/in/thomas-brasdefer-2ab818275' target='_blank'>Thomas Brasdefer</a>\nGitea: <a href='https://gitea.hexasec.io/tombdf' target='_blank'>tombdf</a>",
|
||||||
|
en: "Email: <a href='mailto:thomas@hexasec.io'>thomas@hexasec.io</a>\nLinkedIn: <a href='https://www.linkedin.com/in/thomas-brasdefer-2ab818275' target='_blank'>Thomas Brasdefer</a>\nGitea: <a href='https://gitea.hexasec.io/tombdf' target='_blank'>tombdf</a>"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function typeText(text, element, speed = 50) {
|
||||||
|
let i = 0;
|
||||||
|
element.innerHTML = '';
|
||||||
|
function type() {
|
||||||
|
if (i < text.length) {
|
||||||
|
element.innerHTML += text.charAt(i);
|
||||||
|
i++;
|
||||||
|
setTimeout(type, speed);
|
||||||
|
} else {
|
||||||
|
inputLine.style.display = 'flex';
|
||||||
|
userInput.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
type();
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
typeText(translations[currentLanguage].welcome, welcomeText);
|
||||||
|
}
|
||||||
|
|
||||||
|
userInput.addEventListener('keydown', function(event) {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
const command = userInput.value.trim().toLowerCase();
|
||||||
|
addToTerminal(`$ ${command}`);
|
||||||
|
processCommand(command);
|
||||||
|
userInput.value = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function addToTerminal(text) {
|
||||||
|
const output = document.createElement('div');
|
||||||
|
output.classList.add('output');
|
||||||
|
output.innerHTML = text;
|
||||||
|
terminal.insertBefore(output, inputLine);
|
||||||
|
terminal.scrollTop = terminal.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
function processCommand(command) {
|
||||||
|
if (command === 'help') {
|
||||||
|
let helpText = translations[currentLanguage].availableCommands + '\n\n';
|
||||||
|
for (let cmd in translations[currentLanguage]) {
|
||||||
|
if (cmd !== 'welcome' && cmd !== 'languageChanged' && cmd !== 'commandNotRecognized' && cmd !== 'availableCommands') {
|
||||||
|
helpText += `${cmd}: ${translations[currentLanguage][cmd]}\n`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
addToTerminal(helpText);
|
||||||
|
} else if (command === 'clear') {
|
||||||
|
const outputs = document.querySelectorAll('.output');
|
||||||
|
outputs.forEach(output => output.remove());
|
||||||
|
welcomeText.innerHTML = '';
|
||||||
|
} else if (command === 'language') {
|
||||||
|
currentLanguage = currentLanguage === 'fr' ? 'en' : 'fr';
|
||||||
|
addToTerminal(translations[currentLanguage].languageChanged);
|
||||||
|
} else if (commandResponses.hasOwnProperty(command)) {
|
||||||
|
addToTerminal(commandResponses[command][currentLanguage]);
|
||||||
|
} else {
|
||||||
|
addToTerminal(translations[currentLanguage].commandNotRecognized.replace('{0}', command));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
47
style.css
Normal file
47
style.css
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
background-color: #000;
|
||||||
|
color: #0f0;
|
||||||
|
}
|
||||||
|
#terminal {
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
#input-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#prompt {
|
||||||
|
color: #0f0;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
#user-input {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #0f0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
#user-input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.output {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
#welcome-text {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.output a {
|
||||||
|
color: #0ff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.output a:hover {
|
||||||
|
color: #ff0;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user