starting GitHub .io page

jfobrycki · Apr 19, 2020 · 4060566 · 4060566
1 parent 16dc5c5
commit 4060566
Show file tree

Hide file tree

Showing 16 changed files with 199 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/starter-template.css b/css/starter-template.css
@@ -0,0 +1,3 @@
+body {
+  padding-top: 5rem;
+}
diff --git a/images/SOCfig.jpeg b/images/SOCfig.jpeg
diff --git a/images/bangladeshfacilities.jpeg b/images/bangladeshfacilities.jpeg
diff --git a/images/bdsurv.jpeg b/images/bdsurv.jpeg
diff --git a/images/iowacrop.jpeg b/images/iowacrop.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+
+    <!-- My custom CSS -->
+    <link rel="stylesheet" href="starter-template.css">
+
+
+    <title>John F Obrycki Project Page
+    </title>
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+      <a class="navbar-brand" href="#">Home</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item active">
+            <!--Adding a CV copy soon-->
+            <a class="nav-link" href="#">CV</a>
+          </li>
+          <li class="nav-item active">
+            <a class="nav-link" href="https://scholar.google.com/citations?user=-U-DYZ8AAAAJ" target="_blank">Papers</a>
+          </li>
+          <li class="nav-item active">
+            <a class="nav-link" href="https://www.linkedin.com/in/john-f-obrycki-1a3b032b" target="_blank">LinkedIn</a>
+          </li>
+          <li class="nav-item active">
+            <a class="nav-link" href="https://github.com/jfobrycki" target="_blank">GitHub</a>
+          </li>
+          <!--Keep the menu code as an option-->
+          <!--
+          <li class="nav-item active dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Projects</a>
+            <div class="dropdown-menu" aria-labelledby="dropdown01">
+              <a class="dropdown-item" href="#"></a>
+              <a class="dropdown-item" href="#">Another action</a>
+              <a class="dropdown-item" href="#">Something else here</a>
+            </div>
+          </li>
+          -->
+        </ul>
+
+        <form class="form-inline my-2 my-lg-0">
+          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
+          <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
+        </form>
+
+      </div>
+    </nav>
+
+    <main role="main" class="container">
+
+      <div class="starter-template">
+        <h1>Bootstrap starter template</h1>
+        <p class="lead"><br>Mapping and research portfolio for John F. Obrycki</p>
+      </div>
+
+      <div class="row mb-2">
+        <div class="col-md-6">
+          <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+            <div class="col p-4 d-flex flex-column position-static">
+              <strong class="d-inline-block mb-2 text-primary">Global Health</strong>
+              <h3 class="mb-0">Bangladesh Health Facilities Map</h3>
+              <div class="mb-1 text-muted">----------</div>
+              <p class="card-text mb-auto">Interactive map displaying health facility data at the district level in Bangladesh.</p>
+              <a href="https://jfobrycki.github.io/bangladesh-healthfacilities/" class="stretched-link" target="_blank">Visit the map</a>
+            <!-- stretched link seems to make the link appear over the entire div?-->
+            </div>
+            <div class="col-auto d-none d-lg-block">
+              <img width="250" height="250" src="images/bangladeshfacilities.jpeg">
+            <!--Adding in a border around the image: https://www.w3schools.com/tags/att_img_border.asp-->
+            <!--But this command shows up red within Visual Studio Code and doesn't apply a border-->
+            <!--Potential design downside from this approach is that the image size sets the overall size of this whole div, it's not that the image is bounded by the div-->
+          </div>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+            <div class="col p-4 d-flex flex-column position-static">
+              <strong class="d-inline-block mb-2 text-primary">Global Health</strong>
+              <h3 class="mb-0">Neural Tube Defect Surveillance</h3>
+              <div class="mb-1 text-muted">----------</div>
+              <p class="mb-auto">Static maps showing locations of surveillance programs.</p>
+              <a href="https://jfobrycki.github.io/birthdefectdata/" class="stretched-link" target="_blank">Visit the map</a>
+            </div>
+            <div class="col-auto d-none d-lg-block">
+              <img width="250" height="250" src="images/bdsurv.jpeg">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row mb-2">
+      <div class="col-md-6">
+        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+          <div class="col p-4 d-flex flex-column position-static">
+            <strong class="d-inline-block mb-2 text-secondary">Agricultural History</strong>
+            <h3 class="mb-0">Crop Rotations in Iowa</h3>
+            <div class="mb-1 text-muted">----------</div>
+            <p class="card-text mb-auto">Historical look at crop rotations in Iowa during the 1930s.</p>
+            <a href="https://www.jswconline.org/content/73/6/693" class="stretched-link" target="_blank">Read the paper in JSWC</a>
+          </div>
+          <div class="col-auto d-none d-lg-block">
+            <img width="250" height="250" src="images/iowacrop.jpeg">
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6">
+        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+          <div class="col p-4 d-flex flex-column position-static">
+            <strong class="d-inline-block mb-2 text-success">Soil Science</strong>
+            <h3 class="mb-0">Crop Rotations and Soil Carbon</h3>
+            <div class="mb-1 text-muted">----------</div>
+            <p class="mb-auto">Measuring soil properties following long-term manure management.</p>
+            <a href="https://acsess.onlinelibrary.wiley.com/doi/full/10.2134/agronj2018.02.0113" class="stretched-link" target="_blank">Read the paper in Agronomy</a>
+          </div>
+          <div class="col-auto d-none d-lg-block">
+            <img width="250" height="250" src="images/SOCfig.jpeg">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+    </main>
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    <script>
+        console.log("Console log test script")
+    </script>
+    </body>
+</html>
diff --git a/js/scrolling-nav.js b/js/scrolling-nav.js
@@ -0,0 +1,30 @@
+// script from https://github.com/BlackrockDigital/startbootstrap-scrolling-nav
+(function($) {
+    "use strict"; // Start of use strict
+
+    // Smooth scrolling using jQuery easing
+    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
+      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+        var target = $(this.hash);
+        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+        if (target.length) {
+          $('html, body').animate({
+            scrollTop: (target.offset().top - 54)
+          }, 1000, "easeInOutExpo");
+          return false;
+        }
+      }
+    });
+
+    // Closes responsive menu when a scroll trigger link is clicked
+    $('.js-scroll-trigger').click(function() {
+      $('.navbar-collapse').collapse('hide');
+    });
+
+    // Activate scrollspy to add active class to navbar items on scroll
+    $('body').scrollspy({
+      target: '#mainNav',
+      offset: 54
+    });
+
+  })(jQuery); // End of use strict
diff --git a/vendor/.DS_Store b/vendor/.DS_Store
diff --git a/vendor/bootstrap/.DS_Store b/vendor/bootstrap/.DS_Store
diff --git a/vendor/bootstrap/css/bootstrap.min.css b/vendor/bootstrap/css/bootstrap.min.css
diff --git a/vendor/bootstrap/css/bootstrap.min.css.map b/vendor/bootstrap/css/bootstrap.min.css.map
diff --git a/vendor/bootstrap/js/bootstrap.bundle.min.js b/vendor/bootstrap/js/bootstrap.bundle.min.js
diff --git a/vendor/bootstrap/js/bootstrap.bundle.min.js.map b/vendor/bootstrap/js/bootstrap.bundle.min.js.map
diff --git a/vendor/jquery-easing/jquery.easing.min.js b/vendor/jquery-easing/jquery.easing.min.js
diff --git a/vendor/jquery/jquery.min.js b/vendor/jquery/jquery.min.js