Added new files

new files
techvishnu · Dec 4, 2023 · 314a25e · 314a25e
1 parent aafada0
commit 314a25e
Show file tree

Hide file tree

Showing 7 changed files with 463 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,160 @@
+body {
+    margin: 0;
+    padding: 15px 20px;
+    min-height: 99%;
+    width: 100%;
+    min-width: 550px;
+    color: #518599;
+    /* background: #211D1B; */
+    background-image: url(/img/greatawall.jpg);
+    background-size: cover;
+    font-family: "JetBrains Mono", monospace;
+    overflow-x: hidden;
+    backdrop-filter: blur(5px); /* Adjust the value as needed for the desired blur effect */
+}
+
+::selection {
+    color: #211830;
+    background-color: #519975;
+}
+
+::-moz-selection {
+    color: #211830;
+    background-color: #519975;
+}
+
+textarea {
+    left: -1000px;
+    position: absolute;
+}
+
+b {
+    font-weight: bold;
+    text-decoration: underline;
+}
+
+/* Cursor Start */
+
+.cursor {
+    font-size: 12px;
+    color: #73ABAD;
+    background-color: #73ABAD;
+    position: relative;
+    opacity: 1;
+    height: 1.5em;
+    width: 10px;
+    max-width: 10px;
+    transform: translateY(4px);
+    overflow: hidden;
+    text-indent: -5px;
+    display: inline-block;
+    text-decoration: blink;
+    animation: blinker 1s linear infinite;
+}
+
+@keyframes blinker {
+    50% {
+        opacity: 0;
+    }
+}
+
+#command {
+    cursor: text;
+    height: 50px;
+    color: #73ABAD;
+}
+
+#liner {
+    line-height: 1.3em;
+    margin-top: -2px;
+    animation: show 0.5s ease forwards;
+    animation-delay: 1.2s;
+    opacity: 0;
+}
+
+#liner::before {
+    color: #995c51;
+    content: "guest@termofolio:~$";
+}
+
+#liner.password::before {
+    content: "Password:";
+}
+
+@keyframes show {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Cursor End */
+
+p {
+    display: block;
+    line-height: 1.3em;
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 0;
+    letter-spacing: 0.05em;
+    animation: typing 0.5s steps(30, end);
+}
+
+.no-animation {
+    animation: typing 0 steps(30, end);
+}
+
+.margin {
+    margin-left: 20px;
+}
+
+@keyframes typing {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+
+.index {
+    color: #DCDCCC;
+}
+
+.color2 {
+    color: #B89076;
+}
+
+.command {
+    color: #a873ad;
+    text-shadow: 0 0 5px #73ABAD;
+}
+
+.error {
+    color: #B89076;
+}
+
+.white {
+    color: #fff;
+}
+
+.inherit,
+a {
+    color: #9C8394;
+}
+
+a {
+    text-decoration: inherit;
+}
+
+a:hover {
+    background: #73ABAD;
+    color: #211830;
+}
+
+a:focus {
+    outline: 0;
+}
diff --git a/img/goku.gif b/img/goku.gif
diff --git a/img/greatawall.jpg b/img/greatawall.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <!-- gtag -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-QJ9TR5T9S2"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+        gtag('js', new Date());
+
+        gtag('config', 'G-QJ9TR5T9S2');
+    </script>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>termofolio</title>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
+    <link rel="icon" type="image/x-icon" href="img/goku.gif" />
+</head>
+
+<body>
+    <div id="terminal">
+        <a id="before"></a>
+    </div>
+    <div id="command" onclick="$('texter').focus();">
+        <textarea type="text" id="texter" onkeyup="typeIt(this, event)" onkeydown="typeIt(this, event); 
+                   moveIt(this.value.length, event)" onkeypress="typeIt(this, event);" autofocus></textarea>
+        <div id="liner">
+            <span id="typer"></span><b class="cursor" id="cursor">█</b>
+        </div>
+    </div>
+    <script src="js/cursor.js"></script>
+    <script src="js/commands.js"></script>
+    <script src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/commands.js b/js/commands.js
@@ -0,0 +1,71 @@
+var youtube = "https://www.youtube.com/technicalvishnu/";
+var twitter = "https://www.twitter.com/vishnu2k04/";
+var linkedin = "https://www.linkedin.com/in/forrestpknight/";
+var instagram = "https://www.instagram.com/forrestpknight/";
+var github = "https://github.com/forrestknight/";
+var email = 'mailto:forrest@fkcodes.com';
+var reddit = "https://www.reddit.com/user/OnlyMemer420/";
+
+intro = [
+    "<br>",
+    "Hey, I'm Vishnu! 👋",
+    "I'm a 19-year-old computer science student from India.",
+    "Passionate about Linux, video editing, and diving into DSA for college.",
+    "I enjoy working on small projects and have dabbled in creating YouTube videos.",
+    "Let's connect and embark on a journey to explore the tech world together! 🚀👨‍💻",
+    "<br>"
+]
+
+
+whoami = [
+        "<br>",
+        "You're the unsolved riddle wrapped in a mystery,",
+        "sprinkled with a dash of enigma",
+        "basically, the Sherlock Holmes of your own identity",
+        "<br>"
+];
+
+social = [
+    "<br>",
+    'youtube        <a href="' + youtube + '" target="_blank">youtube/technicalvishnu' + "</a>",
+    'twitter        <a href="' + twitter + '" target="_blank">twitter/vishnu2k04' + '</a>',
+    'linkedin       <a href="' + linkedin + '" target="_blank">linkedin/techvishnu' + "</a>",
+    'instagram      <a href="' + instagram + '" target="_blank">instagram/vishnu2ko4' + '</a>',
+    'github         <a href="' + github + '" target="_blank">github/techvishnu' + "</a>",
+    'reddit         <a href="' + reddit + '" target="_blank">reddit/OnlyMemer420' + "</a>",
+    "<br>"
+];
+
+
+projects = [
+    "<br>",
+    "Coming Soon.",
+    "<br>"
+];
+
+help = [
+    "<br>",
+    '<span class="command">whoami</span>         yea who are you?',
+    '<span class="command">intro</span>          Who is Vishnu?',    
+    '<span class="command">youtube</span>        My YouTube channel',
+    '<span class="command">social</span>         My Socials!!',
+    '<span class="command">projects</span>       some small projects',
+    '<span class="command">history</span>        Let\'s see what you\'ve been up to',
+    '<span class="command">help</span>           Even Saket knows what this does',
+    '<span class="command">clear</span>          breathe out',
+    '<span class="command">banner</span>         Display the header',
+    '<span class="command">email</span>          Never Spam me',
+    "<br>",
+];
+
+banner = [
+    '<span class="index">This is Termofolio </span>',
+    '<span class="color2">Welcome to my web terminal</span>',
+    "<span class=\"color2\">To summon the magical command list, simply cast</span> <span class=\"command\">'help'</span><span class=\"color2\">.</span>",
+    "     ____________________  __   _    ___________ __  ___   ____  __",
+    "    /_  __/ ____/ ____/ / / /  | |  / /  _/ ___// / / / | / / / / /",
+    "     / / / __/ / /   / /_/ /   | | / // / \\__ \/ /_/ /  |/ / / / / ",
+    "    / / / /___/ /___/ __  /    | |/ // / ___/ / __  / /|  / /_/ /  ",
+    "   /_/ /_____/\____/_/ /_/     |___/___//____/_/ /_/_/ |_/\____/   ",
+    "                                                                    ",
+]
diff --git a/js/cursor.js b/js/cursor.js
@@ -0,0 +1,38 @@
+function $(elid) {
+    return document.getElementById(elid);
+}
+
+var cursor;
+window.onload = init;
+
+function init() {
+    cursor = $("cursor");
+    cursor.style.left = "0px";
+}
+
+function nl2br(txt) {
+    return txt.replace(/\n/g, '');
+}
+
+function typeIt(from, e) {
+    e = e || window.event;
+    var w = $("typer");
+    var tw = from.value;
+    if (!pw) {
+        w.innerHTML = nl2br(tw);
+    }
+}
+
+function moveIt(count, e) {
+    e = e || window.event;
+    var keycode = e.keyCode || e.which;
+    if (keycode == 37 && parseInt(cursor.style.left) >= (0 - ((count - 1) * 10))) {
+        cursor.style.left = parseInt(cursor.style.left) - 10 + "px";
+    } else if (keycode == 39 && (parseInt(cursor.style.left) + 10) <= 0) {
+        cursor.style.left = parseInt(cursor.style.left) + 10 + "px";
+    }
+}
+
+function alert(txt) {
+    console.log(txt);
+}