Add content to homepage (#5)

darylf · Oct 25, 2024 · a3b204d · a3b204d
1 parent d4cc392
commit a3b204d
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 86 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,97 +1,96 @@
-html, body {
+html, body.homepage {
   height: 100%;
   display: flex;
   flex-direction: column;
-  font-size: 120%;
+  font-size: 24px;
 }
 
-body {
-  background: white url(/assets/images/spacecow_08.jpg) no-repeat fixed -125px -100px;
-  align-items: center;
-  padding: 0 2rem;
-  font-family: 'Merriweather Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+.main-logo {
+  position: absolute;
+  top: -125px;
+  left: -100px;
+  z-index: -100;
+}
+
+.homepage {
+  background: white;
+  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   text-align: center;
   color: #333;
 }
 
-main {
-  margin: auto; /* Combine the margin rules */
-  margin-top: auto;
-  margin-bottom: 1rem;
-  max-width: 30rem;
+.homepage p {
+  font-family: "Roboto", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+  font-size: 0.8rem;
 }
 
-header {
-  margin-bottom: 2rem;
+.homepage main {
+  margin: auto;
+  max-width: 30rem;
 }
 
-h1, h2 {
+.homepage .heading {
   margin: 0.4rem auto 0;
-  font-size: 1.4rem;
-  font-weight: 300;
   letter-spacing: -0.04em;
 }
 
-h1 {
+.homepage h1.heading {
+  font-size: 1.4rem;
   font-weight: 700;
 }
 
-p {
-  font-size: 0.8rem;
-  display: none;
+.homepage h2.heading {
+  font-size: 1.1rem;
+  font-weight: 300;
 }
 
-ul {
+.homepage .socials {
   display: flex;
   justify-content: center;
   list-style-type: none;
   padding: 0;
   margin: 0;
-  gap: 1.2rem; /* Use gap instead of margin for spacing between li elements */
+  gap: 1.2rem;
 }
 
-li {
+.homepage .socials li {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-/* .brand {
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  border-radius: 50%;
-  padding: 0.25em;
-} */
-
-/* Combine the similar styles for social media links */
-.twitter, .linkedin, .github, .lastfm {
-  /* border-style: solid; */
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
+.homepage .socials a {
+  color: red;
 }
 
-.twitter {
-  border-color: #1da1f2;
-}
-.linkedin {
-  border-color: #0A66C2;
+.homepage nav {
+  font-size: 1rem;
+  margin: 1rem;
 }
-.github {
-  border-color: #28a745;
+
+.homepage nav a {
+  margin: 1rem;
 }
-.lastfm {
-  border-color: #D51007;
+
+.homepage nav a:hover {
+  text-decoration: none;
 }
 
-@media (min-width: 500px) {
-  html, body {
-    font-size: 150%;
+@media (max-width: 850) {
+  .main-logo {
+    top: 0;
+    left: 0;
+    width: 50vh;
+    float: left;
+  }
+}
+@media (max-width: 600px) {
+  .main-logo {
+    display: none;
   }
-
   main {
     margin: auto;
-  }
-
-  p {
-    font-size: 0.7rem;
+    padding: 5em;
   }
 }
diff --git a/index.html b/index.html
@@ -1,35 +1,75 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="initial-scale=1, maximum-scale=4">
-  <title>Daryl Fritz &#8729; A Toronto based web developer</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather+Sans:300,700">
-  <link rel="stylesheet" type="text/css" href="/assets/css/main.css">
-  <link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon">
-  <link rel="canonical" href="https://darylfritz.com">
-</head>
-<body>
-  <main>
-    <header>
-      <h1>Daryl Fritz</h1>
-      <h2>Full Stack Developer</h2>
-    </header>
-    <ul>
-      <li><a rel="me" href="https://ca.linkedin.com/in/darylfritz" title="LinkedIn">
-        <img src="/assets/images/linkedin-in.svg" alt="LinkedIn logo" style="height:1.5rem;width:1.5rem;" class="brand linkedin">
-      </a></li>
-      <li><a rel="me" href="https://twitter.com/DarylFritz" title="X (formerly Twitter)">
-        <img src="/assets/images/x-twitter.svg" alt="Twitter logo" style="height:1.5rem;width:1.5rem;" class="brand twitter">
-      </a></li>
-      <li><a rel="me" href="https://github.com/DarylF" title="GitHub">
-        <img src="/assets/images/github-alt.svg" alt="Github logo" style="height:1.5rem;width:1.5rem;" class="brand github">
-      </a></li>
-      <li><a rel="me" href="https://www.last.fm/user/MadCowDzz" title="Last.fm">
-        <img src="/assets/images/lastfm.svg" alt="Last.fm logo" style="height:1.5rem;width:1.5rem;" class="brand lastfm">
-      </a></li>
-    </ul>
-  </main>
-  <script async src="//www.google-analytics.com/analytics.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="og:locale" content="en_US">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Daryl Fritz &#8729; Full-Stack Web Developer in Toronto | 20 Years Experience</title>
+
+    <meta name="description" content="Daryl Fritz, a Toronto-based full-stack web developer with 20 years of experience in C#, Java, and React. Passionate about AI, cloud computing, and innovative solutions.">
+    <meta name="author" content="Daryl Fritz">
+    <meta property="og:title" content="Daryl Fritz | Full-Stack Web Developer in Toronto">
+    <meta property="og:description" content="Daryl Fritz, a Toronto-based full-stack web developer with 20 years of experience.">
+    <meta property="og:image" content="/assets/images/spacecow_08.jpg">
+    <meta property="og:url" content="https://darylfritz.com">
+    <link rel="canonical" href="https://darylfritz.com">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather+Sans:300,700">
+    <link rel="stylesheet" href="/assets/css/main.css">
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Person",
+        "name": "Daryl Fritz",
+        "url": "https://darylfritz.com",
+        "sameAs": [
+          "https://www.linkedin.com/in/darylfritz",
+          "https://twitter.com/darylfritz",
+          "https://github.com/darylf",
+          "https://mastodon.social/@DarylFritz"
+        ],
+        "jobTitle": "Full-Stack Web Developer",
+        "address": {
+          "@type": "PostalAddress",
+          "addressLocality": "Toronto",
+          "addressCountry": "Canada"
+        },
+        "description": "Daryl Fritz is a full-stack web developer based in Toronto with over 20 years of experience in C#, Java, and React, specializing in AI and cloud computing.",
+        "image": "/assets/images/spacecow_08.jpg"
+      }
+      </script>
+  </head>
+  <body class="homepage">
+    <main>
+      <img src="/assets/images/spacecow_08.jpg" class="main-logo" alt="Daryl Fritz Full-Stack Developer Logo">
+      <h1 class="heading">Daryl Fritz</h1>
+      <h2 class="heading">Full-Stack Developer</h2>
+      <p>Hi, I’m Daryl, a full-stack developer from Canada with over 20 years of experience building scalable solutions. I specialize in C#, Java, TypeScript, and React, with a passion for AI and cloud computing. I’m always exploring new technologies to solve challenges and push innovation. Outside of work, I enjoy board games, travel, photography, and music, which keep me creative. </p>
+      <ul class="socials">
+        <li>
+          <a href="https://www.linkedin.com/in/darylfritz" rel="me" target="_blank" title="Follow Daryl on LinkedIn" aria-label="" style="display: block; height:1rem;width:1rem;color:#333;">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
+          </a>
+        </li>
+        <li>
+          <a href="https://twitter.com/darylfritz" rel="me" target="_blank" title="Follow Daryl on Twitter" aria-label="" style="display: block; height:1rem;width:1rem;color:#333;">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
+        </a>
+      </li>
+      <li>
+        <a href="https://github.com/darylf" rel="me" target="_blank" title="Follow Daryl on GitHub" aria-label="" style="display: block; height:1rem;width:1rem;color:#333;">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" fill="currentColor"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+        </a>
+      </li>
+        <li>
+          <a href="https://mastodon.social/@DarylFritz" rel="me" target="_blank" title="Follow Daryl on Mastodon" aria-label="" style="display: block; height:1rem;width:1rem;color:#333;">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
+          </a>
+        </li>
+      </ul>
+    </main>
+  </body>
 </html>