diff --git a/.vscode/settings.json b/.vscode/settings.json index aead588..e97a43d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -21,7 +21,7 @@ "name": "nginx live", "description": "nginx live folder", - "dir": "Z:/etc/nginx/sites-available/profile" + "dir": "Z:/mnt/drive1/profile" } ] } diff --git a/css/font-styles.css b/css/font-styles.css new file mode 100644 index 0000000..e69de29 diff --git a/css/styles.css b/css/styles.css index 97acd4c..526ef14 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,3 +1,8 @@ +* { + scrollbar-width: thin; + scrollbar-color: #3b3b3b #202020; +} + .body-class { background-color: black; color: whitesmoke; @@ -9,8 +14,19 @@ line-height: 0.85; text-align: center; font-variant-caps: petite-caps; - top: 50dvh; + font-weight: bold; + top: 45dvh; width: 98dvw; + transition: 3s ease-in; + transition-property: opacity; +} + +html.wf-loading #hero { + opacity: 0; +} + +html.wf-active #hero { + } #hero-titles { @@ -68,8 +84,8 @@ } #page-content { - opacity: 0%; - visibility: hidden; + /* opacity: 0%; + visibility: hidden; */ transition: 3s ease-in 500ms; margin: 0 auto; padding: 10px; diff --git a/index.html b/index.html index c23b324..2fab97b 100644 --- a/index.html +++ b/index.html @@ -15,26 +15,19 @@ - - - - - + + + +
-
Nathan Peckham
-
 
+
Nathan Peckham
+
 
arrow_downward
diff --git a/scripts/font-scripts.js b/scripts/font-scripts.js new file mode 100644 index 0000000..641f0f9 --- /dev/null +++ b/scripts/font-scripts.js @@ -0,0 +1,8 @@ +// Google WebFont library for loading custom fonts. Helps to avoid FOUT. + + +WebFont.load({ + google: { + families: ['Oswald', 'Josefin Slab', 'Playfair Display', 'Sedan SC', 'Material Symbols Outlined'] + } +}); \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js index 8b13789..163c762 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1 +1,31 @@ +// Configuration options +const HERO_TITLE_INTERVAL = 4000; +const HERO_TITLE_LIST = ["Maker", "IT Support Specialist", "Nerd", "Homelab-er"]; + +let title_selector = 0; + +const hero_title_rotator = () => { + const hero_titles = document.querySelector("#hero-titles"); + hero_titles.innerHTML = HERO_TITLE_LIST[title_selector]; + title_selector = ++title_selector % HERO_TITLE_LIST.length; +} + + +window.onload = function(){ + console.debug("DOM Loaded"); + setInterval(hero_title_rotator, HERO_TITLE_INTERVAL); +}; + +window.onscroll = clearArrowHint; + +function clearArrowHint() { + console.debug("Clearing Arrow Hint"); + var arrow_hint = document.getElementById("arrow-hint"); + arrow_hint.style.transitionDelay = "0s"; + arrow_hint.style.transitionDuration = "1s"; + arrow_hint.style.transitionProperty = "opacity, visibility"; + arrow_hint.style.opacity = "0%"; + arrow_hint.style.visibility = "hidden"; + window.onscroll = null; +}