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 . También puede alojarlo en Páginas de GitHub, o puede usar otro servicio que implemente su código desde GitHub (¡gratis!), como . Páginas de GitHub Netlify Si desea utilizar las páginas de GitHub, vaya a cree un nuevo repositorio y . GitHub , 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, para esto. El código será así: index.html <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, se verá así: index.css 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 se vería así: index.js var Typer={texto: nulo,accessCountimer:null,index:0,speed:2,file:"",accessCount:0,deniedCount:0,init: function(){accessCountimer=setInterval(function(){Typer.updLstChr ();},500);$.get(Typer.file,function(data){Typer.text=data;Typer.text = Typer.text.slice(0, Typer.text.length-1);}) ;}, 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 , que obtendrá el texto para nosotros automáticamente. ciertamente nada de esto es ML o AI Así que haga un archivo con su nombre como nombre de archivo, con extensión . El nombre del archivo debe ser como . .txt [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/<!-- laglaglaglaglaglag -->Acerca de_nosotros<span id="a">su-nombre@su-apellido</span>:<span id="b">~</span>< span id="c">$</span> cat <!-- laglaglaglaglaglaglaglaglaglag -->[tu-nombre].txt<br/><br/>Mi cita en código favorita, "<span id="k"> Cita que te guste</span>". <!-- sjkfhskjf --> ¡Hola! Este es el sitio web de Portflio en la piel de una terminal.<!-- laglaglaglaglaglaglaglaglaglaglaglaglaglag --><p>Puedes ver eso, así es como se vería tu portafolio.</p><p>Puedes presentarte aquí. </p> <!-- bitlagbitlagbitlagbitlagbitlagbitlag --><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><!-- delaydelaydelaydelaydelaydelaydelay --><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><!-- moredelaymoredelaymoredelaymoredelaymoredelaymoredelay--><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<!-- levedelayaquí-->, siéntase libre de enviarme un correo electrónico a<!-- longlonglongcomment --><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 y le dará una URL donde está presente su sitio. Implemente el código de GitHub 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.
