Back to the original design, but with better fonts and better font management.
This commit is contained in:
parent
1e649ba557
commit
ffa2c14119
6 changed files with 64 additions and 17 deletions
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
@ -21,7 +21,7 @@
|
|||
"name": "nginx live",
|
||||
"description": "nginx live folder",
|
||||
|
||||
"dir": "Z:/etc/nginx/sites-available/profile"
|
||||
"dir": "Z:/mnt/drive1/profile"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
0
css/font-styles.css
Normal file
0
css/font-styles.css
Normal file
|
@ -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;
|
||||
|
|
19
index.html
19
index.html
|
@ -15,26 +15,19 @@
|
|||
<meta property="og:description" content="Profile page of Nathan Peckham">
|
||||
<meta property="og:url" content="https://profile.kn8design.com">
|
||||
<meta property="og:site_name" content="Nathan Peckham">
|
||||
|
||||
<!-- Google WebFont library for loading custom fonts. Helps to avoid FOUT. -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
|
||||
<script>
|
||||
WebFont.load({
|
||||
google: {
|
||||
families: ['Oswald', 'Josefin Slab', 'Playfair Display', 'Sedan SC', 'Material Symbols Outlined']
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="scripts/scripts.js"></script>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link rel="stylesheet" href="css/font-styles.css">
|
||||
|
||||
<script src="scripts/font-scripts.js"></script>
|
||||
<script src="scripts/scripts.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="body-class">
|
||||
<div id="page-content">
|
||||
<div id="viewport-portal" data-hover-only="true" data-relative-input="true" pointer-events="true">
|
||||
<div id="hero" class="josefin-slab-500">Nathan Peckham</div>
|
||||
<div id="hero-titles" class="oswald-display-400"> </div>
|
||||
<div id="hero" class="playfair-display-700">Nathan Peckham</div>
|
||||
<div id="hero-titles" class="playfair-display-400"> </div>
|
||||
<div id="arrow-hint" class="material-symbols-outlined">arrow_downward</div>
|
||||
</div>
|
||||
<div id="certifications-page">
|
||||
|
|
8
scripts/font-scripts.js
Normal file
8
scripts/font-scripts.js
Normal file
|
@ -0,0 +1,8 @@
|
|||
// Google WebFont library for loading custom fonts. Helps to avoid FOUT.
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
|
||||
|
||||
WebFont.load({
|
||||
google: {
|
||||
families: ['Oswald', 'Josefin Slab', 'Playfair Display', 'Sedan SC', 'Material Symbols Outlined']
|
||||
}
|
||||
});
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue