Давайте создадим веб-сайт-портфолио, который выглядит как Терминал.
Ты программист? Вам нравится программировать? Вы когда-нибудь пользовались Терминалом? Вы хотите, чтобы веб-сайт портфолио выглядел как Терминал?
Что ж, этим мы и займемся в этой статье.
Начнем с самого результата. То, что мы собираемся здесь построить, я использую для своего веб-сайта творческого портфолио. Пойдите и проверьте следующую ссылку. Откройте следующую ссылку в новой вкладке, я подожду ...
Не хотите переходить по новой ссылке? Вы пропустите что-то грандиозное, но в любом случае вот изображение.
Тебе понравилось? Хотите построить это для себя? Тогда читайте дальше ...
Итак, это мое личное портфолио веб-сайтов, которое я разместил на страницах GitHub. Вы также можете разместить его на страницах GitHub Pages или использовать другую службу, которая развертывает ваш код с GitHub (бесплатно!), Например Netlify.
Если вы хотите использовать GitHub Pages, перейдите в GitHub, создайте новый репозиторий и назовите его [ваше-имя пользователя] .github.io.
Вы должны указать свое собственное имя пользователя в скобках выше, которые также чувствительны к регистру.
Если вы не хотите использовать GitHub Pages, вы можете дать репозиторию любое имя.
Теперь перейдем к коду.
Сначала давайте сделаем HTML-файл для вашей веб-страницы. Код html очень прост для понимания, поскольку большая часть магии, которую мы будем делать, заключается в JavaScript или CSS.
Я назвал этот файл 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="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>
Это простой HTML-код, который составляет основу нашего портфолио.
Теперь мы можем немного улучшить его внешний вид и сделать его похожим на терминал. Вот где CSS - наш спаситель. Для CSS мы сделаем фон черным, текст терминала - белым, а «метки» - ярко-зелеными.
Код файла CSS index.css будет выглядеть примерно так:
body {
background-color: #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;
text-decoration: none;
}
#a {
color: #0f0;
}
#c {
color: #0bc;
}
#b {
color: #ff0096;
}
#k {
animation: change 1s;
}
#op{
color: #888888
}
@keyframes change {
0% { color: #0f0; }
50% { color: #0f0; }
99% { color: black; }
}
После этого мы должны написать код для автоматического набора текста и самого текста. Во-первых, давайте займемся автоматическим вводом текста, который мы сделаем с помощью JavaScript.
Код файла index.js будет выглядеть примерно так:
var Typer={
text: null,
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
}
}
Этот приведенный выше код типизирует то, что мы видим на терминале. Теперь давайте установим скорость набора и сделаем URL-адрес похожим на url.
Добавьте следующий код под приведенным выше кодом в том же файле index.js.
function replaceUrls(text) {
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="[your-name].txt"; // add your own name here
Typer.init();
var timer = setInterval("t();", 30);
function t() {
Typer.addText({"keyCode": 123748});
if (Typer.index > Typer.text.length) {
clearInterval(timer);
}
}
Теперь все настроено для нашего сайта-портфолио. Наслаждаться!!
Но ждать,
Где текст, который мы хотим иметь? Разумеется, какой-либо из приведенных выше кодов не дал текст для ввода, и конечно же, это не ML или AI, который получит текст для нас автоматически .
Поэтому создайте файл с вашим именем в качестве имени файла с расширением .txt. Имя файла должно иметь вид [ваше-имя] .txt.
Добавьте следующие данные и замените текстом, который хотите включить в свое портфолио.
<span id="a">your-first-name@your-last-name</span>:<span id="b">~</span><span id="c">$</span> cd CodeNerve/<!-- laglaglaglaglaglag -->About_Us <span id="a">your-first-name@your-last-name</span>:<span id="b">~</span><span id="c">$</span> cat <!-- laglaglaglaglaglaglaglaglag -->[your-name].txt<br/><br/> My favorite code quote, "<span id="k">Quote you like</span>". <!-- sjkfhskjf --> Hey There! This is the portflio website in the skin of a terminal.<!-- laglaglaglaglaglaglaglaglaglaglaglag --><p>You can see that, this is how your portfolio would look like.</p> <p>You can introduce yourself here.</p> <!-- bitlagbitlagbitlagbitlagbitlagbitlag --> <p> You can also tell what you've worked and known and what skills you have, you can also give link to your professional portfolio here<a href="link"> portfolio</a>.</p><!-- delaydelaydelaydelaydelaydelaydelay --> <p>Tell more about yourself. <br><br><br>Give your project links or something like that. <a href="link"> Here you go</a>.</p><!-- moredelaymoredelaymoredelaymoredelaymoredelaymoredelay--> <p> You can give links to other professional profiles you have on Internet, here: <br> <a href="link1">Profile1</a> <br> <a href="link2">Profile2</a> and <br> <a href="link3">Profile3</a>.</p> You can also give your email ID for contacting you<!-- slightdelayhere-->, feel free to send me an email at<!-- longlonglongcomment --><a href="Your email ID">Email</a>. <p>Cheers!</p>
И мы все сделали, теперь точно :)
Вы можете найти полный исходный код для этого здесь.
Если вы использовали страницы GitHub, ваш веб-сайт будет отображаться по адресу [your-username] .github.io.
Если вы использовали не GitHub Pages, а такой веб-сайт, как Netlify. Затем перейдите в Netlify, войдите в систему и нажмите зеленоватую кнопку с надписью новый сайт от git.
Разверните код с GitHub, и он предоставит вам URL-адрес, по которому находится ваш сайт.
Вы создали себе личный сайт в оболочке Терминала.
Чего вы ждете? Иди и покажись !!
