Merge pull request #4 from bradfordjohnson/projects

updated cards and added responsive friendly layouts #3

portfolio/_variables.scss

@@ -264,26 +264,6 @@ th {
   }
 }
 
-// Containers
-
-.list-group-item,
-.card {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .h1,
-  .h2,
-  .h3,
-  .h4,
-  .h5,
-  .h6 {
-    color: inherit;
-  }
-}
-
 /* css styles */
 #chart {
   //text-align: left;
@@ -296,67 +276,6 @@ nav a.nav-link:hover {
   border-bottom: 2px solid #333;
 }
 
-.card {
-  --bs-card-spacer-y: 1rem;
-  --bs-card-spacer-x: 1rem;
-  --bs-card-title-spacer-y: 0.5rem;
-  --bs-card-title-color: ;
-  --bs-card-subtitle-color: ;
-  --bs-card-border-width: 1px;
-  --bs-card-border-color: #fff;
-  --bs-card-border-radius: 0.25rem;
-  --bs-card-box-shadow: ;
-  --bs-card-inner-border-radius: calc(0.25rem - 1px);
-  --bs-card-cap-padding-y: 0.5rem;
-  --bs-card-cap-padding-x: 1rem;
-  --bs-card-cap-bg: rgba(52, 58, 64, 0.25);
-  --bs-card-cap-color: ;
-  --bs-card-height: ;
-  --bs-card-color: ;
-  --bs-card-bg: #fff;
-  --bs-card-img-overlay-padding: 1rem;
-  --bs-card-group-margin: 0.75rem;
-  position: relative;
-  display: flex;
-  display: -webkit-flex;
-  flex-direction: column;
-  -webkit-flex-direction: column;
-  min-width: 0;
-  height: var(--bs-card-height);
-  color: var(--bs-body-color);
-  word-wrap: break-word;
-  background-color: var(--bs-card-bg);
-  background-clip: border-box;
-  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
-}
-
-h4.card-title {
-  color: #1a1a1a;
-}
-
-.card-body.center {
-  // align-items: center;
-  // justify-content: center;
-  // align-content: center;
-  text-align: center;
-}
-
-h1.title.center {
-  text-align: center;
-  align-self: center;
-}
-
-p.subtitle.lead.center {
-  text-align: center;
-}
-
-.description.center {
-  text-align: center;
-}
-
-h4.card-title.center {
-  text-align: center;
-}
 
 .about-contents {
   display: flex;
@@ -401,4 +320,60 @@ h4.card-title.center {
 .bold-text {
   font-weight: bold;
   color:#000
-}
+}
+
+
+/*-- CARDS --*/
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+.card p {
+  text-align: left;
+}
+
+.card {
+  flex: 1 1 calc(45% - 20px); /* Adjust the width to fit two cards per row */
+  max-width: calc(45% - 20px); /* Limiting the maximum width of each card */
+  border: 1px solid rgba(0, 0, 0, .05);
+  padding: 20px;
+  margin: 10px; /* Reduce margin to make more space for content */
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add box-shadow */
+}
+
+@media (max-width: 767px) {
+  .card {
+    flex-basis: 100%; /* Make cards take full width on smaller screens */
+    max-width: 100%; /* Ensure cards occupy full width */
+    margin: 10px 0; /* Adjust margin for smaller screens */
+  }
+}
+
+.gallery-header {
+  text-align: center;
+  // margin-bottom: 5px; /* Add margin bottom for separation from the cards */
+}
+
+.gallery {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  // gap: 20px;
+}
+
+.image-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); /* Adjust the min width as needed */
+  gap: 10px; /* Adjust the gap size as needed */
+}
+
+.image-container img {
+  width: 100%;
+  height: auto;
+}
+

portfolio/docs/index.html

@@ -39,6 +39,9 @@
 <script src="site_libs/bootstrap/bootstrap.min.js"></script>
 <link href="site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
 <link href="site_libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
+<script src="site_libs/quarto-contrib/glightbox/glightbox.min.js"></script>
+<link href="site_libs/quarto-contrib/glightbox/glightbox.min.css" rel="stylesheet">
+<link href="site_libs/quarto-contrib/glightbox/lightbox.css" rel="stylesheet">
 <script id="quarto-search-options" type="application/json">{
   "location": "navbar",
   "copy-button": false,
@@ -159,89 +162,62 @@ <h1>
 </div>
 
 <p><br> <br></p>
-<div class="grid">
-<div class="g-col-1">
-
-</div>
-<div class="g-col-4">
-<div class="hero-2">
-<h1>
+<div class="card-container">
+<div class="card">
+<h2>
 Data Analytics
-</h1>
+</h2>
 <p>
 I specialize in crafting custom visuals and dashboards that not only enhance data comprehension but also empower data-driven decision-making. By seamlessly integrating creativity with analytical precision, I offer a comprehensive data narrative tailored to your specific business objectives.
 </p>
 </div>
-<!-- <small class="text-muted"></small> -->
-</div>
-<div class="g-col-1">
-
-</div>
-<div class="g-col-4">
-<div class="hero-2">
-<h1>
+<div class="card">
+<h2>
 Data Storytelling
-</h1>
+</h2>
 <p>
 Every data narrative is uniquely tailored to your business’s needs. Through close collaboration, I ensure that the visualizations I create not only meet your objectives but also engage your audience. With a personalized approach, I deliver data insights in a clear, compelling, and professional manner.
 </p>
 </div>
 </div>
-</div>
-<div class="grid">
-<div class="g-col-1">
-
-</div>
-<div class="g-col-4">
-<div class="hero-2">
-<h1>
+<div class="card-container">
+<div class="card">
+<h2>
 Data Warehousing &amp; Pipelines
-</h1>
+</h2>
 <p>
 I specialize in exploring data intricacies and providing tailored analysis services. From uncovering hidden insights to identifying trends, my goal is to empower data-driven decision-making by equipping you with the necessary insights and tools to navigate your data effectively.
 </p>
 </div>
-</div>
-<div class="g-col-1">
-
-</div>
-<div class="g-col-4">
-<div class="hero-2">
-<h1>
+<div class="card">
+<h2>
 Ad Hoc Analysis
-</h1>
+</h2>
 <p>
 Specializing in the exploration of data intricacies, I provide tailored analysis services. From uncovering hidden insights to recognizing trends, my focus is on empowering data-driven decision-making. My aim is to equip you with the necessary insights and tools for navigating your data landscape effectively.
 </p>
 </div>
-<!-- <small class="text-muted"></small> -->
-</div>
-</div>
-<div class="grid">
-<div class="g-col-1">
-
 </div>
-<div class="g-col-10">
-<div class="hero-2c">
-<br>
-<h1>
+<div class="gallery-header">
+<h2>
 Gallery
-</h1>
-<div class="gallery">
-<p>
-</p><p><a href="visuals/owid-energy.png" class="lightbox" data-gallery="gallery"><img src="visuals/owid-energy.png" class="img-fluid" style="width:65.0%"></a> <a href="visuals/topgolf.png" class="lightbox" data-gallery="gallery"><img src="visuals/topgolf.png" class="img-fluid" style="width:30.0%"></a></p>
-<a href="visuals/african-languages.png" class="lightbox" data-gallery="gallery"><img src="visuals/african-languages.png" class="img-fluid" style="width:35.0%"></a> <a href="visuals/seinfeld-sentiment.png" class="lightbox" data-gallery="gallery"><img src="visuals/seinfeld-sentiment.png" class="img-fluid" style="width:60.0%"></a>
-<p></p>
+</h2>
 </div>
+<div class="gallery">
+<div class="image-container">
+<p><a href="visuals/owid-energy.png" class="lightbox" data-gallery="my-gallery"><img src="visuals/owid-energy.png" class="img-fluid"></a></p>
+<p><a href="visuals/topgolf.png" class="lightbox" data-gallery="my-gallery"><img src="visuals/topgolf.png" class="img-fluid"></a></p>
+<p><a href="visuals/african-languages.png" class="lightbox" data-gallery="my-gallery"><img src="visuals/african-languages.png" class="img-fluid"></a></p>
+<p><a href="visuals/seinfeld-sentiment.png" class="lightbox" data-gallery="my-gallery"><img src="visuals/seinfeld-sentiment.png" class="img-fluid"></a></p>
 </div>
-<!-- <small class="text-muted"></small> -->
 </div>
 </div>
+</main></div>
 
 
 
 
-</div></main> <!-- /main -->
+ <!-- /main -->
 <script id="quarto-html-after-body" type="application/javascript">
 window.document.addEventListener("DOMContentLoaded", function (event) {
   const toggleBodyColorMode = (bsSheetEl) => {
@@ -640,7 +616,7 @@ <h1>
   }
 });
 </script>
-</div> <!-- /content -->
+ <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
     <div class="nav-footer-left">
@@ -654,6 +630,31 @@ <h1>
     </div>
   </div>
 </footer>
+<script>var lightboxQuarto = GLightbox({"loop":false,"descPosition":"bottom","openEffect":"zoom","selector":".lightbox","closeEffect":"zoom"});
+window.onload = () => {
+  lightboxQuarto.on('slide_before_load', (data) => {
+    const { slideIndex, slideNode, slideConfig, player, trigger } = data;
+    const href = trigger.getAttribute('href');
+    if (href !== null) {
+      const imgEl = window.document.querySelector(`a[href="${href}"] img`);
+      if (imgEl !== null) {
+        const srcAttr = imgEl.getAttribute("src");
+        if (srcAttr && srcAttr.startsWith("data:")) {
+          slideConfig.href = srcAttr;
+        }
+      }
+    } 
+  });
+
+  lightboxQuarto.on('slide_after_load', (data) => {
+    const { slideIndex, slideNode, slideConfig, player, trigger } = data;
+    if (window.Quarto?.typesetMath) {
+      window.Quarto.typesetMath(slideNode);
+    }
+  });
+
+};
+          </script>
 
 
 

portfolio/docs/search.json

@@ -11,6 +11,6 @@
     "href": "index.html",
     "title": "Bradford Johnson",
     "section": "",
-    "text": "LinkedIn\n  \n  \n    \n     Github\n  \n\n  \n  \n\n\nHi, I’m Ford. My specialty lies in data analysis and crafting compelling visualizations.\n\n\n\n\n\n \n\n\n\n\n\n\n\nData Analytics\n\n\nI specialize in crafting custom visuals and dashboards that not only enhance data comprehension but also empower data-driven decision-making. By seamlessly integrating creativity with analytical precision, I offer a comprehensive data narrative tailored to your specific business objectives.\n\n\n\n\n\n\n\n\n\n\nData Storytelling\n\n\nEvery data narrative is uniquely tailored to your business’s needs. Through close collaboration, I ensure that the visualizations I create not only meet your objectives but also engage your audience. With a personalized approach, I deliver data insights in a clear, compelling, and professional manner.\n\n\n\n\n\n\n\n\n\n\n\nData Warehousing & Pipelines\n\n\nI specialize in exploring data intricacies and providing tailored analysis services. From uncovering hidden insights to identifying trends, my goal is to empower data-driven decision-making by equipping you with the necessary insights and tools to navigate your data effectively.\n\n\n\n\n\n\n\n\n\nAd Hoc Analysis\n\n\nSpecializing in the exploration of data intricacies, I provide tailored analysis services. From uncovering hidden insights to recognizing trends, my focus is on empowering data-driven decision-making. My aim is to equip you with the necessary insights and tools for navigating your data landscape effectively.\n\n\n\n\n\n\n\n\n\n\n\n\n\nGallery"
+    "text": "LinkedIn\n  \n  \n    \n     Github\n  \n\n  \n  \n\n\nHi, I’m Ford. My specialty lies in data analysis and crafting compelling visualizations.\n\n\n\n\n\n \n\n\n\nData Analytics\n\n\nI specialize in crafting custom visuals and dashboards that not only enhance data comprehension but also empower data-driven decision-making. By seamlessly integrating creativity with analytical precision, I offer a comprehensive data narrative tailored to your specific business objectives.\n\n\n\n\nData Storytelling\n\n\nEvery data narrative is uniquely tailored to your business’s needs. Through close collaboration, I ensure that the visualizations I create not only meet your objectives but also engage your audience. With a personalized approach, I deliver data insights in a clear, compelling, and professional manner.\n\n\n\n\n\n\nData Warehousing & Pipelines\n\n\nI specialize in exploring data intricacies and providing tailored analysis services. From uncovering hidden insights to identifying trends, my goal is to empower data-driven decision-making by equipping you with the necessary insights and tools to navigate your data effectively.\n\n\n\n\nAd Hoc Analysis\n\n\nSpecializing in the exploration of data intricacies, I provide tailored analysis services. From uncovering hidden insights to recognizing trends, my focus is on empowering data-driven decision-making. My aim is to equip you with the necessary insights and tools for navigating your data landscape effectively.\n\n\n\n\n\nGallery"
   }
 ]