Cómo hacer un sitio web de cartera como terminal para usted

Pradyuman Dixit2019/01/12

Codifiquemos un sitio web de cartera que se parezca a una Terminal.

featured image - Cómo hacer un sitio web de cartera como terminal para usted

Codifiquemos un sitio web de cartera que se parezca a una Terminal.

¿Eres un codificador? ¿Disfrutas programando? ¿Alguna vez has usado Terminal? ¿Desea tener un sitio web de cartera que se parece a una Terminal?

Bueno, esto es lo que vamos a hacer en este artículo.

Comencemos con el resultado en sí mismo, lo que vamos a construir aquí, es lo que uso para mi sitio web de portafolio creativo. Vaya y consulte el siguiente enlace, abra el siguiente enlace en una nueva pestaña, esperaré...

Se parece a esto.

¿No quieres ir a un nuevo enlace? Te perderás algo grandioso, pero de todos modos aquí está la imagen.

¿Te gustó? ¿Quieres construir esto por ti mismo? Entonces sigue leyendo...

Esta es mi cartera de sitios web personales que he alojado en Páginas de GitHub . También puede alojarlo en Páginas de GitHub, o puede usar otro servicio que implemente su código desde GitHub (¡gratis!), como Netlify .

Si desea utilizar las páginas de GitHub, vaya a GitHub , cree un nuevo repositorio y asígnele el nombre [su-nombre de usuario].github.io .

Tienes que poner tu propio nombre de usuario en el paréntesis anterior, que también distingue entre mayúsculas y minúsculas.

Si no desea utilizar las páginas de GitHub, puede nombrar el repositorio como desee.

Ahora entremos en algo de código.

Primero, hagamos un archivo HTML para su página web. El código html es muy sencillo de entender, ya que la mayor parte de la magia que haremos será en JavaScript o CSS.

Nombré el archivo, index.html para esto. El código será así:

<html><head><title>CodeNerve</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min. js"></script><link rel="hoja de estilo" type="text/css" href="index.css"></head><body><script type="text/javascript" src="index. js"></script><div id="consola"></div><script type="text/javascript", src="index2.js"></script></body></html>

Eso es solo HTML simple para hacer la base de nuestra cartera.

Ahora podemos mejorar su apariencia y hacer que se vea como una terminal. Ahí es donde CSS es nuestro salvador. Para CSS, haremos que el fondo sea negro, el texto del terminal blanco y las "etiquetas" de color verde brillante.

El código para el archivo CSS, index.css se verá así:

cuerpo {color de fondo: #000}

#console {font-family: courier, monospace;color: #fff;width:750px;margin-left:auto;margin-right:auto;margin-top:100px;font-size:14px;}

a {color: #0bc;decoración de texto: ninguno;}

#a {color: #0f0;}

#c {color: #0bc;}

#b {color: #ff0096;}

#k {animación: cambiar 1s;}

#op{color: #888888}

@keyframes cambia {0% { color: #0f0; }50% { color: #0f0; }99% { color: negro; }}

Una vez hecho esto, ahora tenemos que escribir el código para la escritura automática de texto y el texto en sí. Primero, terminemos con la parte de escritura automática de texto que haremos usando JavaScript .

El código para el archivo index.js se vería así:

 content:function(){ return $("#console").html(); }, write:function(str){ $("#console").append(str); return false; }, 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; } else { 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){ // otherway prevent keys default behavior 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)); else this.write("|"); // else write it }

}

Este código anterior escribe lo que vemos en la terminal. Ahora establezcamos la velocidad de escritura y hagamos que las URL aparezcan como URL.

Agregue el siguiente código debajo del código anterior, en el mismo archivo, index.js .

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

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

}

Typer.speed=3;Typer.file="[tu-nombre].txt"; // agrega tu propio nombre hereTyper.init();

var timer = setInterval("t();", 30);función t() {Typer.addText({"keyCode": 123748});

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

}

Ahora todo está configurado para nuestro sitio web de cartera. ¡¡Disfrutar!!

Pero espera,

¿Dónde está el texto que queremos tener? Ciertamente ninguno de los códigos anteriores proporcionó el texto para escribir, y ciertamente nada de esto es ML o AI , que obtendrá el texto para nosotros automáticamente.

Así que haga un archivo con su nombre como nombre de archivo, con extensión .txt . El nombre del archivo debe ser como [tu-nombre].txt .

Agregue los siguientes detalles y reemplácelos con el texto que desea tener en su cartera.

<span id="a">tu-nombre@tu-apellido</span>:<span id="b">~</span><span id="c">$</span> cd CodeNerve/Acerca de_nosotros<span id="a">su-nombre@su-apellido</span>:<span id="b">~</span>< span id="c">$</span> cat [tu-nombre].txt<br/><br/>Mi cita en código favorita, "<span id="k"> Cita que te guste</span>".

¡Hola! Este es el sitio web de Portflio en la piel de una terminal.<p>Puedes ver eso, así es como se vería tu portafolio.</p><p>Puedes presentarte aquí. </p> <p> También puedes decir lo que has trabajado y conocido y qué habilidades tienes, también puedes dar un enlace a tu cartera profesional aquí<a href="link"> portfolio</a>.</p><p>Cuéntanos más sobre ti. <br><br><br>Proporcione enlaces a su proyecto o algo por el estilo. <a href="link"> Aquí tienes</a>.</p><p> Puedes dar enlaces a otros perfiles profesionales que tengas en Internet, aquí: <br> < a href="enlace1">Perfil1</a> <br> <a href="enlace2">Perfil2</a> y <br> <a href="enlace3">Perfil3</a>.</p>

También puede proporcionar su ID de correo electrónico para contactarlo, siéntase libre de enviarme un correo electrónico a<a href="Su ID de correo electrónico">Correo electrónico</a> .

<p>¡Salud!</p>

Y ya hemos terminado, ahora seguro :)

Puede encontrar el código fuente completo para esto aquí.

Si ha utilizado Páginas de GitHub, su sitio web aparecerá en [su nombre de usuario].github.io.

Si no has usado GitHub Pages, sino un sitio web como Netlify. Luego vaya a Netlify, inicie sesión y haga clic en el botón verde que dice, nuevo sitio de git .

Implemente el código de GitHub y le dará una URL donde está presente su sitio.

Usted mismo ha construido un sitio web personal en una piel de una Terminal.

¿Que estas esperando? ¡¡Ve y presume!!

Lea mi publicación anterior sobre la creación de una aplicación de seguimiento ocular y detección de rostros para principiantes.