Seromitschu Terminal Portfolio

• This website made by Seromitschu.
  
• Click to see the current trial site. Live Demo

Build With

This project was built using these technologies.

• JavaScript
• HTML
• CSS
  Languages ​​were used while making this website.
• Vercel
  Deploying service.
• Visual Studio Code
  Code Editor
• Font Awesome
  Icons

Getting Started

• Download project and open in your code editor.
• Run index.html.

Now you can customize and use the website according to you!

• If you want, you can activate your website using vercel.

Customize

Below I will tell you some things so that you do not have any difficulties while customizing your website.

Commands

Command Template:

• The current scheme of commands is as follows.

if(value === "Command Usage"){
    //// Maintenance Mod
    if(config.seromitschu.system.mods.maintenance === true){
        return;
    }
    trueValue(value);
    consoleSucess(value);
    createText("Text Reply");
    createCode("Text Title", "Text Description");
    //// Command History
    saveHistory(document.querySelector("input").value.trim().toLowerCase());
}

  //// Command Not Found
  else{
    if(config.seromitschu.system.mods.maintenance === true){
      return;
    }
    falseValue(value);
    consoleError(value);
    createText(`<i class="fa-solid fa-square-xmark error"></i> "<span class="error">${value}</span>" ${config.seromitschu.commands.commandNotFound}`);
    //// Command History
    saveHistory(document.querySelector("input").value + `&nbsp; <i class="fa-solid fa-square-xmark error"></i>`.trim().toLowerCase());
  }
}

True & False Value:

• This feature allows the command entered by the visitor to be painted in the color with the valid meaning while it is running, and change it to the color with the invalid meaning when it is not running.

function trueValue(value){
  const div = document.createElement("section");
  div.setAttribute("class", "type2");
  const i = document.createElement("i");
  i.setAttribute("class", "fas fa-angle-right icone");
  const mensagem = document.createElement("h2");
  mensagem.setAttribute("class", "sucess");
  mensagem.textContent = `${value}`;
  div.appendChild(i);
  div.appendChild(mensagem);
  app.appendChild(div);
}

function falseValue(value){
  const div = document.createElement("section");
  div.setAttribute("class", "type2");
  const i = document.createElement("i");
  i.setAttribute("class", "fas fa-angle-right icone error");
  const mensagem = document.createElement("h2");
  mensagem.setAttribute("class", "error")
  mensagem.textContent = `${value}`;
  div.appendChild(i);
  div.appendChild(mensagem);
  app.appendChild(div);
}

• True Value:
  

• False Value:
  

Console Sucess, Warn, Error:

• It allows you to monitor command statuses from the console in a simple way.

function consoleSucess(value){
  console.log(`%c Sucess: ${value} - Date & Time: ${Date()}`, `color: #5AD786`);
}

function consoleError(value){
  console.log(`%c Error: ${value} - Date & Time: ${Date()}`, `color: #F78F85`);
}

function consoleWarn(value){
  console.log(`%c Warn: ${value} - Date & Time: ${Date()}`, `color: #FABD2F`);
}

• Console:
  

Create Text and Create Code:

• Styles of response to the command typed by the visitor.

function createText(text, classname){
  const p = document.createElement("p");
  p.innerHTML = text;
  app.appendChild(p);
}

function createCode(code, text){
  const p = document.createElement("p");
  p.setAttribute("class", "code");
  p.innerHTML = `${code}: <span class='text'> ${text} </span>`;
  app.appendChild(p);
}

• Create Text:
  

• Create Code:
  

Open Terminal:

• Texts that will be reflected on the screen when the terminal is opened.

async function openTerminal(){
  createText(config.seromitschu.welcome.first);
  await delay(config.seromitschu.delays.welcome.first);
  createText(config.seromitschu.welcome.second);
  await delay(config.seromitschu.delays.welcome.second);
  createText(config.seromitschu.welcome.commands);
  newLine();
}

• Open Terminal:
  

New Line:

• Simple new line.

function newLine(){
  const p = document.createElement("p");
  const span1 = document.createElement("span");
  const span2 = document.createElement("span");
  p.setAttribute("class", "path");
  p.textContent = config.seromitschu.path.who;
  span1.textContent = config.seromitschu.path.preposition;
  span2.textContent = config.seromitschu.path.file;
  p.appendChild(span1);
  p.appendChild(span2);
  app.appendChild(p);
  const div = document.createElement("div");
  div.setAttribute("class", "type");
  const i = document.createElement("i");
  i.setAttribute("class", "fas fa-angle-right icone");
  const input = document.createElement("input");
  div.appendChild(i);
  div.appendChild(input);
  app.appendChild(div);
  input.focus();
}

• New Line:
  

Colors

• Color chart.

:root {
  --white: #FFFFFF;
  --black: #000000;
  --blue: #9CEAF3;
  --pink: #F78F85;
  --red: #F5544D;
  --yellow: #FABD2F;
  --green: #47D043;
  --wheat: #F0D098;
  --navyBlue: #6A77D2;
  --turquoise: #9CEAF3;
  --sucessGreen: #5AD786;
  --errorRed: #F78F85;
}

Don't forget to give a ⭐ if you like the project!