Created navbar, started working on cover area, non finished js typewr…

…ighter function
Aron-Lomner · Nov 5, 2023 · 77fb176 · 77fb176
1 parent 02bb351
commit 77fb176
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 0 deletions.
diff --git a/assets/images/me.png b/assets/images/me.png
diff --git a/index.html b/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>Aron Lomner</title>
+  </head>
+  <body>
+    <div id="navbar">
+      <div id="logo"><a href="">Aron Lomner</a></div>
+      <div class="buttons">
+        <div id="projects"><a href="">Projects</a></div>
+        <div id="about-me"><a href="">About Me</a></div>
+        <div id="contact"><a href="">Contact Me</a></div>
+        <div id="resume"><a href="">Resume</a></div>
+      </div>
+    </div>
+    <div id="asci-art">
+      <pre>
+ _       __     __                        
+| |     / /__  / /________  ____ ___  ___ 
+| | /| / / _ \/ / ___/ __ \/ __ `__ \/ _ \
+| |/ |/ /  __/ / /__/ /_/ / / / / / /  __/
+|__/|__/\___/_/\___/\____/_/ /_/ /_/\___/ 
+      </pre>
+      <pre>
+   __      
+  / /_____ 
+ / __/ __ \
+/ /_/ /_/ /
+\__/\____/ 
+      </pre>
+      <pre>
+    ___                    _      
+   /   |  _________  ____ ( )_____
+  / /| | / ___/ __ \/ __ \|// ___/
+ / ___ |/ /  / /_/ / / / / (__  ) 
+/_/  |_/_/   \____/_/ /_/ /____/  
+      </pre>
+      <pre>
+ _       __     __         _ __       ______
+| |     / /__  / /_  _____(_) /____  / / / /
+| | /| / / _ \/ __ \/ ___/ / __/ _ \/ / / / 
+| |/ |/ /  __/ /_/ (__  ) / /_/  __/_/_/_/  
+|__/|__/\___/_.___/____/_/\__/\___(_|_|_)
+      </pre>
+    </div>
+    <div id="cover">
+      <img id="me" src="/assets/images/me.png" />
+      <div id="container">
+        <div id="greeting"></div>
+        <div id="name"></div>
+        <div id="occupation"></div>
+      </div>
+    </div>
+  </body>
+  <script type="module" src="/js/main.js"></script>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,18 @@
+import { typeWrighter } from "./utils.js";
+
+async function initialize(){
+    let greeting = document.getElementById("greeting")
+    let pause = typeWrighter(greeting, "Hello, I'm")
+    await sleep(pause);
+    let name = document.getElementById("name");
+    pause = typeWrighter(name, "Aron Lomner");
+    await sleep(pause);
+    let occupation = document.getElementById("occupation")
+    typeWrighter(occupation, "Fullstack developer");
+}
+
+initialize();
+
+async function sleep(time) {
+    return new Promise((resolve) => setTimeout(resolve, time));
+}
diff --git a/js/utils.js b/js/utils.js
@@ -0,0 +1,25 @@
+/**
+ * Simulates typing effect on a given HTML element to display a message.
+ * @param {HTMLElement} element - The HTML element to display the typing effect.
+ * @param {string} message - The message to be 'typed' on the element.
+ * @returns {void}
+ */
+export function typeWrighter(element, message) {
+    let typed = '';
+    let c = 0;
+    const loop = (i) =>  {
+        if (i < message.length) {
+            let cursor = c % 10 < 5 ? '|' : '';            
+            element.textContent = typed + message[i] + cursor;
+            typed += message[Math.floor(i)];
+
+            i+=1;
+            c++;
+            setTimeout(() => loop(i), 100)
+        } else {
+            element.textContent = typed;
+        }
+    }
+    loop(0);
+    return message.length * 100;
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,63 @@
+* {
+    margin:0;
+    padding: 0;
+}
+body {
+    background-color: black;
+    color: #39FF14;
+}
+#navbar{
+    font-family: "Orbitron";
+    display:  flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 50px;
+    background-color: rgb(0, 0, 0);
+    border: 2px solid;
+}
+.buttons {
+    display:  flex;
+}
+.buttons div {
+    margin: 10px;
+}
+.buttons a {
+    color: inherit;
+    text-decoration: none;
+}
+.buttons a:hover {
+    text-decoration: underline #39FF14 3px;
+}
+#logo a{
+    display: flex;
+    justify-content: center; /* Align horizontal */
+    align-items: center; /* Align vertical */
+    margin-left: 10px;
+    padding: 5px;
+    font-weight: bolder;
+    background-color: #000000;
+    border-right: 2px solid #39FF14;
+    border-top: 2px solid #39FF14;
+    color: inherit;
+    text-decoration: none;
+}
+#asci-art {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: auto;
+    margin-right: auto;
+}
+pre {
+    display: inline-block;
+    margin: 5px;
+}
+/* Cover */
+#cover {
+    display: flex;
+    align-items: center;
+}
+
+#me {
+    margin: 20px 50px 20px 20px;
+    width: 500px;
+}