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;
+}