Como fazer um Terminal como o Website do Portfólio

Pradyuman Dixit Blocked Desbloquear Seguir Seguindo 11 de janeiro

Vamos codificar um site de portfólio que se parece com um Terminal.

Você é um codificador? Você gosta de programar? Você já usou o Terminal? Você deseja ter um site de portfólio que se pareça com um Terminal?

Bem, isso é o que vamos fazer neste artigo.

Vamos começar com o resultado em si, o que vamos construir aqui, é o que eu uso para o meu site de portfólios criativos. Vá e verifique o seguinte link, Abra o seguinte link em uma nova aba, eu vou esperar…

Se parece com isso.

Não quer ir para um novo link? Você vai sentir falta de algo grande, mas de qualquer maneira aqui está a imagem.

site de portfólio baseado em terminal

Você gostou? Quer construir isso por si mesmo? Então leia junto…

Portanto, este é o meu portfólio pessoal de sites que hospedei em páginas do GitHub . Você também pode hospedá-lo no GitHub Pages, ou você pode usar outro serviço que implanta seu código do GitHub (de graça!), Como o Netlify .

Se você quiser usar as páginas do GitHub, vá ao GitHub , crie um novo repositório e nomeie-o como [seu-nome de usuário] .github.io .

Você precisa colocar seu próprio nome de usuário no colchete acima, o que também diferencia maiúsculas de minúsculas.

Se você não quiser usar o GitHub Pages, então você pode nomear o repositório como quiser.

Agora vamos entrar em algum código.

Primeiro vamos criar um arquivo HTML para sua página da web. O código html é muito simples de entender, já que a maior parte da magia que faremos é em JavaScript ou CSS.

Eu nomeei o arquivo index.html para isso. O código será assim:

 <html> 
<cabeça>
<title> CodeNerve </ title>
<script type = "text / javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script>
<link rel = "stylesheet" type = "text / css" href = "index.css">
</ head>
<body>
<script type = "text / javascript" src = "index.js">
</ script>
<div id = "console"> </ div>
<script type = "text / javascript", src = "index2.js">
</ script>
</ body>
</ html>

Isso é apenas HTML simples para fazer a base do nosso portfólio.

Agora podemos torná-lo um pouco melhor e fazer com que pareça um terminal. É aí que o CSS é nosso salvador. Para CSS, tornaremos o fundo preto, o texto do terminal em branco e os "rótulos" em verde brilhante.

O código para o arquivo CSS, index.css , será algo como isto:

 body { 
cor de fundo: # 000
}

#console {
font-family: correio, monospace;
cor: #fff;
largura: 750 px;
margin-left: auto;
margem direita: auto;
margem superior: 100px;
tamanho da fonte: 14px;
}

uma {
cor: # 0bc;
text-decoration: nenhum;
}

#uma {
cor: # 0f0;
}

#c {
cor: # 0bc;
}

#b {
cor: # ff0096;
}

#k {
animação: mudança 1s;
}

#op {
cor: # 888888
}

@keyframes change {
0% {cor: # 0f0; }
50% {cor: # 0f0; }
99% {cor: preto; }
}

Feito isso, agora temos que escrever código para a digitação automática de texto e para o próprio texto. Primeiro, vamos fazer nós mesmos pela parte de digitação automática de texto que faremos usando JavaScript .

O código para o arquivo index.js seria algo como isto:

 var Typer = { 
texto: null,
accessCountimer: null,
índice: 0,
velocidade: 2,
Arquivo:"",
accessCount: 0,
deniedCount: 0,
init: function () {
accessCountimer = setInterval (function () {Typer.updLstChr ();}, 500);
$ .get (Typer.file, function (data) {
Typer.text = dados;
Typer.text = Typer.text.slice (0, Typer.text.length-1);
});
}

content: function () {
return $ ("# console"). html ();
}

escreva: function (str) {
$ ("# console"). append (str);
retorna falso;
}

addText: function (key) {

if (key.keyCode == 18) {
Typer.accessCount ++;

if (Typer.accessCount> = 3) {
Typer.makeAccess ();
}
}

else if (key.keyCode == 20) {
Typer.deniedCount ++;

if (Typer.deniedCount> = 3) {
Typer.makeDenied ();
}
}

else if (key.keyCode == 27) {
Typer.hidepop ();
}

else if (Typer.text) {
var cont = Typer.content ();
if (cont.substring (cont.length-1, cont.length) == "|")
$ ("# console"). html ($ ("# console"). html (). substring (0, cont.length-1));
if (key.keyCode! = 8) {
Typer.index + = Typer.speed;
}
outro {
if (Typer.index> 0)
Typer.index- = Typer.speed;
}
var text = Typer.text.substring (0, Typer.index)
var rtn = new RegExp (" n", "g");

$ ("# console"). html (text.replace (rtn, "<br/>"));
window.scrollBy (0,50);
}

if (key.preventDefault && key.keyCode! = 122) {
key.preventDefault ()
};

if (key.keyCode! = 122) {// de outra forma previne o comportamento padrão das chaves
key.returnValue = false;
}
}

updLstChr: function () {
var cont = this.content ();

if (cont.substring (cont.length-1, cont.length) == "|")
$ ("# console"). html ($ ("# console"). html (). substring (0, cont.length-1));

outro
this.write ("|"); // mais escrevê-lo
}
}

Este código acima digita o que vemos no terminal. Agora vamos definir a velocidade de digitação e fazer com que a url apareça como url.

Adicione o seguinte código abaixo do código acima, no mesmo arquivo, index.js .

 function replaceUrls (text) { 
var http = text.indexOf ("http: //");
var space = text.indexOf (". me", http);

if (espaço! = -1) {
var url = text.slice (http, espaço-1);
return text.replace (url, "<a href="" + url + "">" + url + "</a>");
}

outro {
texto de retorno
}
}

Typer.speed = 3;
Typer.file = "[seu nome] .txt"; // adicione seu próprio nome aqui
Typer.init ();

var timer = setInterval ("t ();", 30);
função t () {
Typer.addText ({"keyCode": 123748});

if (Typer.index> Typer.text.length) {
clearInterval (temporizador);
}
}

Agora tudo está configurado para o site do nosso portfólio. Apreciar!!

Mas espere,

Onde está o texto que queremos ter, certamente qualquer código acima não deu o texto a ser digitado, e certamente nada disso é ML ou AI , que irá obter o texto para nós automaticamente.

Então faça um arquivo com seu nome como o nome do arquivo, com extensão .txt . O nome do arquivo deve ser como [seu nome] .txt .

Adicione os seguintes detalhes e substitua pelo texto que você deseja ter em seu portfólio.

 <span id = "a"> seu primeiro nome @ seu último nome </ span>: <span id = "b"> ~ </ span> <span id = "c"> $ </ span> cd CodeNerve / <! - laglaglaglaglaglag -> About_Us 
<span id = "a"> seu primeiro nome @ seu último nome </ span>: <span id = "b"> ~ </ span> <span id = "c"> $ </ span> cat <! - laglaglaglaglaglaglaglaglag -> [seu nome] .txt <br/> <br/>
Minha citação de código favorita, "<span id =" k "> Citação que você gosta </ span>". <! - sjkfhskjf ->

Olá! Este é o site portflio na pele de um terminal. <! - laglaglaglaglaglaglaglaglaglaglaglag -> <p> Você pode ver que é assim que o seu portfólio seria. </ P>
<p> Você pode se apresentar aqui. </ p> <! - bitlagbitlagbitlagbitlagbitlagbitlag ->
<p> Você também pode dizer o que você trabalhou e sabe e quais habilidades você tem, você também pode dar um link para o seu portfólio profissional aqui <a href="link"> portfólio </a>. </ p> <! - delaydelaydelaydelaydelaydelaydelay ->
<p> Fale mais sobre você. <br> <br> <br> Dê seus links de projeto ou algo parecido. Aqui você vai </a>.
<p> Você pode fornecer links para outros perfis profissionais que você possui na Internet, aqui: <a href="link1"> Perfil1 </a> <br> <a href="link2"> Perfil2 </a> e <a href="link3"> Perfil3 </a>. </ p>

Você também pode fornecer seu ID de e-mail para entrar em contato com <! - lightdelayhere ->, sinta-se à vontade para me enviar um e-mail em <! - longlonglongcomment -> <a href="Your email ID"> E-mail </a> .

<p> Felicidades! </ p>

E estamos todos prontos, agora com certeza 🙂

Você pode encontrar o código fonte completo para isso aqui.

Se você já usou o GitHub Pages, seu site aparecerá em [seu-nome de usuário] .github.io.

Se você não usou páginas do GitHub, mas um site como o Netlify. Em seguida, vá para Netlify, faça o login e clique no botão esverdeado dizendo: novo site do git .

Implante o código do GitHub e ele fornecerá uma URL em que seu site está presente.

Você criou um site pessoal em uma skin de um terminal.

O que você está esperando? Vá e mostre !!