.hintrc

@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "scrollbar-width",
+          "scrollbar-color",
+          "content-visibility"
+        ]
+      }
+    ]
+  }
+}

.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+    "deploy.reloaded": {
+        "packages": [
+            {
+                "name": "Version 2.3.4",
+                "description": "Package version 2.3.4",
+                "files": [
+                    "**/*.html",
+                    "**/*.css",
+                    "**/*.js",
+                    "favicon/*",
+                    "site.webmanifest"
+                ],
+                "exclude": [
+                    ".gitea/**",
+                    ".vscode/**"
+                ]
+            }
+        ],
+        "targets": [
+            {
+                "type": "local",
+                "name": "nginx live",
+                "description": "nginx live folder",
+
+                "dir": "Z:/mnt/drive1/profile"
+            }
+        ]
+    }
+}

README.md

@@ -1,2 +1,3 @@
 # Profile-Page
 
+My profile page, describing my work experience and certifications/achievements.

css/font-styles.css

@@ -0,0 +1,69 @@
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+
+.sedan-sc-regular {
+    font-family: "Sedan SC", serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+/* <uniquifier>: Use a unique and descriptive class name */
+/* <weight>: Use a value from 100 to 700 */
+/* .josefin-slab-<uniquifier> {
+    font-family: "Josefin Slab", serif;
+    font-optical-sizing: auto;
+    font-weight: <weight>;
+    font-style: normal;
+  }
+*/
+
+.josefin-slab-500 {
+    font-family: "Josefin Slab", serif;
+    font-optical-sizing: auto;
+    font-weight: 500;
+    font-style: normal;
+}
+
+/* <uniquifier>: Use a unique and descriptive class name */
+/* <weight>: Use a value from 400 to 900 */
+.playfair-display-700 {
+    font-family: "Playfair Display", serif;
+    font-optical-sizing: auto;
+    font-weight: 700;
+    font-style: normal;
+}
+
+.playfair-display-400 {
+    font-family: "Playfair Display", serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.oswald-display-700 {
+    font-family: "Oswald", serif;
+    font-optical-sizing: auto;
+    font-weight: 700;
+    font-style: normal;
+}
+
+.oswald-display-400 {
+    font-family: "Oswald", serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+}

css/styles.css

@@ -0,0 +1,89 @@
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #3b3b3b #202020;
+}
+
+/* This class is applied while fonts are still loading. */
+html.wf-loading #hero {
+    opacity: 0;
+}
+/* This class is applied when all fonts are loaded */
+html.wf-active #hero {
+    opacity: 100%;
+}
+
+body {
+    background-color: black;
+    color: whitesmoke;
+    width: 95dvw;
+}
+
+#hero-section {
+    width: 100dvw;
+    height: 100dvh;
+    align-content: center;
+    margin: 0;
+    padding: 0;
+    /* position: absolute;
+    left:0;
+    right: 0; */
+    transition: 3s ease-in;
+    transition-property: opacity;
+}
+
+#hero {
+    font-size: 7em;
+    line-height: 0.85;
+    text-align: center;
+    font-variant-caps: petite-caps;
+    font-weight: bold;
+    top: 45dvh;
+    width: 100%;
+}
+
+#hero-titles {
+    text-align: center;
+    font-size: 2em;
+    font-variant-caps: all-petite-caps;
+    width: 100%;
+    text-align: center;
+}
+
+#arrow-hint {
+    position: absolute;
+    top: 94dvh;
+    /*left: 50vh;    */
+    width: 98dvw;
+    text-align: center;
+    color: rgb(255, 255, 255);
+    opacity: 0%;
+    transition: 4s ease-in-out 13s;
+    transition-property: opacity, visibility;
+}
+
+#certifications-page {
+    width: 98dvw;
+    height: 100dvh;
+    vertical-align: top;
+}
+
+#certifications-title {
+    font-size: 4em;
+    line-height: 0.85;
+    text-align: center;
+    font-variant-caps: petite-caps;
+}
+
+.certification {
+    font-size: 1em;
+    text-align: center;
+}
+
+#page-content {
+    /* opacity: 0%;
+    visibility: hidden; */
+    transition: 3s ease-in 500ms;
+    margin: 0 auto;
+    padding: 10px;
+    position: relative;
+}

index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
+
+    <title>Nathan Peckham</title>
+
+    <meta property="og:locale" content="en_US">
+    <meta property="og:type" content="profile">
+    <meta property="og:title" content="Nathan Peckham">
+    <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">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/font-styles.css">
+    <!-- Google WebFont library for loading custom fonts. Helps to avoid FOUT, among other things. -->
+    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+    <script src="scripts/font-scripts.js"></script>
+    <script src="scripts/scripts.js"></script>
+    
+</head>
+
+<body>
+    <div id="page-content">
+        <div id="hero-section">
+            <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">expand_circle_down</div>
+        </div>
+        <div id="certifications-page">
+            <div id="certifications-title" class="josefin-slab-500">Certifications</div>
+            <div class="certification playfair-display-400">Google Professional Certificate</div>
+        </div>
+    </div>
+</body>
+
+</html>

scripts/font-scripts.js

@@ -0,0 +1,5 @@
+WebFont.load({
+    google: {
+        families: ['Oswald', 'Josefin Slab', 'Playfair Display', 'Sedan SC', 'Material Symbols Outlined']
+    }
+});

scripts/scripts.js

@@ -0,0 +1,30 @@
+
+// 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;
+}

site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Nathan Peckham Profile Page",
+    "short_name": "Nate Profile",
+    "icons": [
+        {
+            "src": "favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}