Initial commit

matthewzring · Mar 14, 2024 · 1623b07 · 1623b07
commit 1623b07
Show file tree

Hide file tree

Showing 22 changed files with 214 additions and 0 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+matthewzring.dev
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# matthewzring.dev 
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+url: "https://matthewzring.dev" 
diff --git a/css/aos.css b/css/aos.css
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/fa-all.min.css b/css/fa-all.min.css
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,81 @@
+h1 {
+  font-family: "Raleway", sans-serif;
+}
+
+#hero {
+  width: 100%;
+  height: 100vh;
+  background: url("../images/hero-bg.jpg") top right no-repeat;
+  background-size: cover;
+  position: relative;
+}
+
+@media (min-width: 992px) {
+  #hero {
+    padding-left: 160px;
+  }
+}
+
+#hero:before {
+  content: "";
+  background: rgba(255, 255, 255, 0.8);
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+#hero h1 {
+  margin: 0;
+  font-size: 64px;
+  font-weight: 700;
+  line-height: 56px;
+  color: #45505b;
+}
+
+#hero p {
+  color: #45505b;
+  margin: 15px 0 0 0;
+  font-size: 26px;
+  font-family: "Poppins", sans-serif;
+}
+
+#hero p span {
+  color: #0563bb;
+  letter-spacing: 1px;
+}
+
+#hero .social-links {
+  margin-top: 30px;
+}
+
+#hero .social-links a {
+  font-size: 24px;
+  display: inline-block;
+  color: #45505b;
+  line-height: 1;
+  margin-right: 20px;
+  transition: 0.3s;
+}
+
+#hero .social-links a:hover {
+  color: #0563bb;
+}
+
+@media (max-width: 992px) {
+  #hero {
+    text-align: center;
+  }
+
+  #hero h1 {
+    font-size: 32px;
+    line-height: 36px;
+  }
+
+  #hero p {
+    margin-top: 10px;
+    font-size: 20px;
+    line-height: 24px;
+  }
+}
diff --git a/fonts/fa-brands-400.ttf b/fonts/fa-brands-400.ttf
diff --git a/fonts/fa-brands-400.woff2 b/fonts/fa-brands-400.woff2
diff --git a/fonts/fa-regular-400.ttf b/fonts/fa-regular-400.ttf
diff --git a/fonts/fa-regular-400.woff2 b/fonts/fa-regular-400.woff2
diff --git a/fonts/fa-solid-900.ttf b/fonts/fa-solid-900.ttf
diff --git a/fonts/fa-solid-900.woff2 b/fonts/fa-solid-900.woff2
diff --git a/fonts/fa-v4compatibility.ttf b/fonts/fa-v4compatibility.ttf
diff --git a/fonts/fa-v4compatibility.woff2 b/fonts/fa-v4compatibility.woff2
diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/images/hero-bg.jpg b/images/hero-bg.jpg
diff --git a/images/matt.png b/images/matt.png
diff --git a/index.html b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<!--
+
+Welcome to my website!
+
+Wait a second... why are you here? No, not here like on the site, here as in the raw HTML. Looking for something?
+
+I am by no means a good web developer nor designer, so use anything you find here at your own risk.
+
+This website is open-source at https://github.com/matthewzring/matthewzring.dev !
+
+-->
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="images/favicon.ico">
+    <title>matt</title>
+
+    <!-- Gonna be 100% honest here, these meta tags are just to make the embed in Discord look good. -->
+    <meta property="og:title" content="matt's website">
+    <meta property="og:image" content="https://matthewzring.dev/images/matt.png">
+    <meta property="og:description" content="I like making things.">
+    <meta property="og:site_name" content="matt">
+    <meta property="og:url" content="https://matthewzring.dev">
+    <meta name="theme-color" content="#588bcf">
+
+    <link href="css/aos.css" rel="stylesheet">
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/fa-all.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Raleway:700|Poppins" rel="stylesheet">
+</head>
+
+<body>
+    <section id="hero" class="d-flex flex-column justify-content-center">
+        <div class="container" data-aos="zoom-in">
+            <h1>Matthew Ring</h1>
+            <p>I'm a <span class="typed" data-typed-items="Software Architect, Security Engineer, Gamer"></span></p>
+            <!-- Also, I like hiding things in comments, apparently. -->
+            <div class="social-links">
+                <a href="mailto:[email protected]"                         ><i class="fas fa-envelope"></i></a>
+                <a href="https://github.com/matthewzring/"             ><i class="fab fa-github"></i></a>
+                <a href="https://discord.com/users/349007194768801792" ><i class="fab fa-discord"></i></a>
+                <a href="https://keybase.io/matthewzring"              ><i class="fab fa-keybase"></i></a>
+                <a href="https://www.linkedin.com/in/matthewzring/"    ><i class="fab fa-linkedin-in"></i></a>
+                <a href="https://blog.matthewzring.dev"                ><i class="fas fa-rss"></i></a>
+            </div>
+        </div>
+    </section>
+
+    <script src="js/aos.js"></script>
+    <script src="js/typed.min.js"></script>
+    <script src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/aos.js b/js/aos.js
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,44 @@
+(function() {
+  "use strict";
+
+  /**
+   * Easy selector helper function
+   */
+  const select = (el, all = false) => {
+    el = el.trim()
+    if (all) {
+      return [...document.querySelectorAll(el)]
+    } else {
+      return document.querySelector(el)
+    }
+  }
+
+  /**
+   * Hero type effect
+   */
+  const typed = select('.typed')
+  if (typed) {
+    let typed_strings = typed.getAttribute('data-typed-items')
+    typed_strings = typed_strings.split(',')
+    new Typed('.typed', {
+      strings: typed_strings,
+      loop: true,
+      typeSpeed: 100,
+      backSpeed: 50,
+      backDelay: 2000
+    });
+  }
+
+  /**
+   * Animation on scroll
+   */
+  window.addEventListener('load', () => {
+    AOS.init({
+      duration: 1000,
+      easing: 'ease-in-out',
+      once: true,
+      mirror: false
+    })
+  });
+
+})()