Made basic, typing and styled homepage

CallumGilly · CallumGilly · commit 46dab5e9c15b · 2022-10-13T22:29:36.000+01:00
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# Themes I Like:
+
+https://andrewbanchich.github.io/forty-jekyll-theme/
+
+https://bepatrickdavid.com
+
+https://tobiasahlin.com
diff --git a/index.html b/index.html
@@ -1,9 +1,27 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <title>Callum Gilchrist</title>
+    
+    <link rel="stylesheet" href="main.css">
 
+    
   </head>
   <body>
-    This site is still being built. We hope to break free from the 1990's web design era.
+    <div class="central">
+      <!-- Prints out $Callum Gilchrist using javascript-->
+      <h1 class="consoleStyle" id="NameTitle"></h1>
+      <!-- Prints out Computer Science Student and General Nerd Using javascript -->
+      <h2 class="consoleStyle" id="SubTitle"></h2>
+    </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="indexScripts.js"></script>
   </body>
 </html>
diff --git a/indexScripts.js b/indexScripts.js
@@ -0,0 +1,45 @@
+//Sets the speed in mili seconds between each char;
+let typeSpeed = 200;
+
+//Sets the data to be typed
+let toType = ["$Callum Gilchrist","Computer Science Student and General Nerd"]; //Array of strings at first, then should become and array or reversed arrays
+let currentLine = 0;
+let typed = "";
+
+//Makes the data to be typed usable with pop().
+for (var ai = 0; ai < toType.length; ai++) {
+  toType[ai] = toType[ai].split("").reverse();
+}
+
+async function typeHeadings() {
+  //Ignores timer for single spaces.
+  if (toType[currentLine][toType[currentLine].length - 1] == " ") {
+    typed += toType[currentLine].pop();
+  }
+  typed += toType[currentLine].pop();
+  
+  //Writes to the current line.
+  switch (currentLine) {
+    case 0:
+      $("#NameTitle").text(typed);
+      break;
+    case 1:
+      $("#SubTitle").text(typed);
+      break;
+    default:
+      break;
+  }
+
+  //If not at the end of the line, call the function again to print all the next letters.
+  if (toType[currentLine].length !== 0) {
+    setTimeout(typeHeadings, typeSpeed);
+  //Once the end of a line is reached print the next line if there is one.
+  } else if (currentLine + 1 < toType.length){
+      typed = "";
+      currentLine += 1;
+      typeSpeed = 100;
+      setTimeout(typeHeadings, typeSpeed);
+  }
+}
+
+typeHeadings();
diff --git a/main.css b/main.css
@@ -0,0 +1,23 @@
+body {
+  background-color: black;
+  color: white;
+}
+
+#NameTitle {
+  font-size: 40px;
+}
+
+.consoleStyle {
+  color: darkgreen;
+  font-family: monospace;
+  text-align: center;
+}
+
+.central {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 10px;
+  padding: 10px;
+}
