nwpeckham/Profile-Page
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Back to the original design, but with better fonts and better font management.

Browse source
This commit is contained in:
Nathan Peckham 2024-06-10 12:40:45 -05:00
parent 1e649ba557
commit ffa2c14119
6 changed files with 64 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.vscode/settings.json vendored
View file

@ -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
View file

22
css/styles.css
View 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
View file

@ -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">&nbsp;</div>
<div id="hero" class="playfair-display-700">Nathan Peckham</div>
<div id="hero-titles" class="playfair-display-400">&nbsp;</div>
<div id="arrow-hint" class="material-symbols-outlined">arrow_downward</div>
</div>
<div id="certifications-page">

8
scripts/font-scripts.js Normal file
View 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']
}
});

30
scripts/scripts.js
View file

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