diff --git a/static/main/css/index.css b/static/main/css/index.css index 48a6892..6fcf601 100644 --- a/static/main/css/index.css +++ b/static/main/css/index.css @@ -1,25 +1,24 @@ -h1, -p { - color: var(--text-color); - font-size: 20px; +#landing { + display: flex; + height: 100%; text-align: center; - margin-top: 10px; + margin: 1rem; } -a { - text-decoration: none; - color: var(--link-text-color); -} - -a:hover { - text-decoration: underline; -} - -.center { - margin: 0; +.landing-title { position: absolute; - top: 50%; - left: 50%; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + margin: 1rem; + padding: 1rem; + left: 0; + right: 0; + top: 30%; +} +img { + width: 40%; +} + +.text { + font-size: 3rem; + font-weight: 700; + text-align: center; } diff --git a/static/main/css/layout.css b/static/main/css/layout.css index 0dc728f..36f787d 100644 --- a/static/main/css/layout.css +++ b/static/main/css/layout.css @@ -10,7 +10,7 @@ --clr-secondary-hover: hsl(210, 3%, 73%); --clr-secondary-link: hsl(212, 100%, 67%); - font-family: roboto, helvetica, arial, sans-serif; + font-family: "Roboto", arial, sans-serif; } html, @@ -24,11 +24,8 @@ body { overflow-x: hidden; } -main { - min-height: 100%; -} - /* Utility classes */ + .flex { display: flex; gap: var(--gap, 1rem); diff --git a/static/main/js/typewriter.js b/static/main/js/typewriter.js new file mode 100644 index 0000000..afc76ee --- /dev/null +++ b/static/main/js/typewriter.js @@ -0,0 +1,45 @@ +const TEXT_DISPLAY = document.getElementById("text") +const PHRASES = ["Software Developer", "Jedi"] +let i = 0 +let j = 0 +let current_phrase = [] +let is_deleting = false +let is_end = false + +typewriter = () => { + is_end = false + TEXT_DISPLAY.innerHTML = current_phrase.join("") + + if (i < PHRASES.length) { + if (!is_deleting && j <= PHRASES[i].length) { + current_phrase.push(PHRASES[i][j]) + j++ + TEXT_DISPLAY.innerHTML = current_phrase.join("") + } + if (is_deleting && j <= PHRASES[i].length) { + current_phrase.pop(PHRASES[i][j]) + j-- + TEXT_DISPLAY.innerHTML = current_phrase.join("") + } + + if (j == PHRASES[i].length) { + is_end = true + is_deleting = true + } + + if (is_deleting && j === 0) { + current_phrase = [] + is_deleting = false + i++ + if (i === PHRASES.length) { + i = 0 + } + } + } + const TYPING_SPEED = Math.random() * 300 + const DELETE_SPEED = Math.random() * 100 + const TIME = is_end ? 2000 : is_deleting ? DELETE_SPEED : TYPING_SPEED + setTimeout(typewriter, TIME) +} + +window.addEventListener("load", typewriter) diff --git a/templates/layout.html b/templates/layout.html index fd846eb..0a8d2ce 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -5,6 +5,10 @@ + + + {% block title %}{% endblock %} @@ -18,36 +22,32 @@ -
-
-
-
- - - -
- - -
-
- {% block content %}{% endblock %} -
+
+
+ + +
-
+ + + +
+ {% block content %}{% endblock %} +
diff --git a/templates/main/index.html b/templates/main/index.html index e69e6a2..5f1a177 100644 --- a/templates/main/index.html +++ b/templates/main/index.html @@ -5,16 +5,19 @@ + {% endblock %} {% block content %} -
- Hello there. -

- I'm Kristofers Solo -

-

- Jedi -

+
+
+
+ Hello there. +
+

+ I'm Kristofers Solo +

+

+
{% endblock %}