need to fix about

index.html

@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="src/css/style.css">
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="https://kit.fontawesome.com/d5effce557.js" crossorigin="anonymous"></script>
   <title>WebShell</title>
 </head>
 

src/commands.ts

@@ -23,8 +23,8 @@ const DEFAULTOBJ = {
 const WHOAMIOBJ = {
   "message" : [
     [
-    "In the kaleidoscope of existence,",
-    "I am but a reflection questioning the enigma - "
+      "In the kaleidoscope of existence,",
+      "I am but a reflection questioning the enigma - "
     ],
     [
       "Amidst cosmic whispers,",
@@ -36,6 +36,16 @@ const WHOAMIOBJ = {
       "I am a note inquiring its own melody,",
       "harmonizing with the universal query - ",
     ],
+    [
+      "As stardust contemplating its journey,",
+      "I ponder the cosmic query,",
+      "silently asking - ",
+    ],
+    [
+      "In the tapestry of reality,",
+      "I am the thread of self-inquiry,",
+      "weaving through the eternal question - "
+    ],
   ],
 }
 
@@ -63,6 +73,19 @@ const HELPOBJ = {
   ],
 }
 
+const ABOUTOBJ = {
+  "message": "Hi I'm Nathan.",
+  "github": [
+    "github/nasan016",
+    "https://github.com/nasan016",
+  ],
+  "linkedin": [
+    "linkedin/nathanielmacapinlac",
+    "https://linkedin.com/nathanielmacapinlac",
+  ],
+  "email": "[email protected]"
+}
+
 const CREATEBANNER = () : string[] => {
   const banner : string[] = [];
   banner.push("<br>")
@@ -111,13 +134,55 @@ const CREATEWHOAMI = () : string[] => {
   })
 
   whoami.push("<br>");
+
   return whoami;
 }
 
-console.log(CREATEWHOAMI())
+const CREATEABOUT = () : string[] => {
+  const about : string[] = [];
+
+  const SPACE = "&nbsp;"
+
+  const EMAIL = "email"
+  const GITHUB = "github"
+  const LINKEDIN = "linkedin"
+
+  const email = "<i class='fa-solid fa-envelope'></i> Email"  
+  const github = "<i class='fa-brands fa-github'></i> Github"
+  const linkedin = "<i class='fa-brands fa-linkedin'></i> LinkedIn"
+  let string = ""
+
+  about.push("<br>")
+  about.push(ABOUTOBJ.message)
+  about.push("<br>")
+  string += SPACE.repeat(2)
+  string += email
+  string += SPACE.repeat(17 - EMAIL.length)
+  string += `<a target='_blank' href='${ABOUTOBJ.email}'>${ABOUTOBJ.email}</a>`
+  about.push(string)
+
+  string = ''
+  string += SPACE.repeat(2)
+  string += github
+  string += SPACE.repeat(17 - GITHUB.length)
+  string += `<a target='_blank' href='${ABOUTOBJ.github[1]}'>${ABOUTOBJ.github[0]}</a>`
+  about.push(string)
+
+  string = ''
+  string += SPACE.repeat(2)
+  string += linkedin
+  string += SPACE.repeat(17 - LINKEDIN.length)  
+  string += `<a target='_blank' href='${ABOUTOBJ.linkedin[1]}'>${ABOUTOBJ.linkedin[0]}</a>`
+  about.push(string)
+
+  about.push("<br>")
+  return about
+}
+
 const CREATEHELP = () : string[] => {
   const help : string[] = []
   help.push("<br>")
+
   HELPOBJ.commands.forEach((ele) => {
     const SPACE = "&nbsp;";
     let string = "";

src/css/style.css

@@ -150,4 +150,9 @@ a {
     0 0 7px #fff,
     0 0 151px var(--border);
   color: #FD9BDB;
+}
+
+.output {
+  font-weight: 400 !important;
+  color: #FF7685
 }

src/main.ts

@@ -23,7 +23,6 @@ function userInputHandler(e : KeyboardEvent) {
   switch(key) {
     case "Enter":
       enterKey();
-      SCROLLTOBOTTOM();
       break;
   }
 }
@@ -32,6 +31,7 @@ function enterKey() {
   const resetInput = "";
   userInput = USERINPUT.value;
   userInput = userInput.trim();
+  let newUserInput = `<span class='output'>${userInput}</span>`
 
   //if clear then early return
   if (userInput === 'clear') {
@@ -42,7 +42,7 @@ function enterKey() {
   }
 
   const DIV = document.createElement("div");
-  DIV.innerHTML = PROMPT.innerHTML.concat(" ", userInput);  
+  DIV.innerHTML = PROMPT.innerHTML.concat(" ", newUserInput);  
   WRITELINES.parentNode!.insertBefore(DIV, WRITELINES);
 
   /*
@@ -75,6 +75,9 @@ function commandHandler(input : string) {
     case 'whoami':
       writeLines(CREATEWHOAMI())
       break;
+    case 'about':
+      writeLines(CREATEABOUT())
+      break;
     default:
       writeLines(DEFAULT)
       break;