adding links to Medium posts

_includes/footer.html

@@ -1,14 +1,18 @@
 <footer class="footer">
-    <div class="footer-icons">
-        <!-- Smaller Social Icons -->
+    <div class="footer-content">
+      <!-- Home Link -->
+      <a class="link" href="{{ site.baseurl }}/">Home</a>
+
+      <!-- Username -->
+      <span>&copy; {{ site.username }}</span>
+
+      <!-- Social Icons -->
+      <div class="footer-icons">
         <a aria-label="Send email" href="mailto:{{ site.social.email }}"><i class="icon fa fa-envelope"></i></a>
         <a aria-label="My LinkedIn" target="_blank" href="{{ site.social.linkedin }}"><i class="icon fa fa-linkedin" aria-hidden="true"></i></a>
         <a aria-label="My Github" target="_blank" href="{{ site.social.github }}"><i class="icon fa fa-github-alt" aria-hidden="true"></i></a>
       </div>
-
-      <!-- Username and Home link in a line below -->
-      <p>&copy; {{ site.username }}</p>
-      <p><a class="link" href="{{ site.baseurl }}/">Home</a></p>
+    </div>
 </footer>
 <script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
 <script src="{{ "/assets/js/sweet-scroll.min.js" | prepend: site.baseurl }}"></script>

_includes/posts.html

@@ -11,7 +11,11 @@ <h1 class="posts-header">Blog Posts</h1>
     <div class="post-content">
       <h3>{{ post.title }}</h3>
       <p>{{ post.excerpt }}</p>
-      <a class="project-link" href="{{ post.url | prepend: site.baseurl }}">Check it out</a>
+      {{% if post.link %}}
+        <a class="project-link" href="{{ post.link }}">Check it out</a>
+      {% else %}
+        <a class="project-link" href="{{ post.url | prepend: site.baseurl }}">Check it out</a>
+      {% endif %}
     </div>
   </div>
   {% endfor %}

_posts/2024-05-25-webscraping-datajobs.md

@@ -0,0 +1,11 @@
+---
+title: Web Scraping Data Jobs with Selenium
+date: 2024-05-25 12:00:00 +/-0800
+categories: [Data Science, Web Scraping]
+tags: [data visualization, webscraping, data analysis]
+image: assets/img/posts/webscrape-datajobs/blog_image.png #https://unsplash.com/photos/o4-YyGi5JBc
+excerpt: Ever wondered how to use selenium to scrape information from websites? Well this is a great place to start! I used the power of Selenium to scrape information about data jobs from popular jobs boards and I wrote about the process.
+layout: post
+image_alt: A screen containing code
+link: https://medium.com/@c.bradley.do/web-scraping-data-jobs-with-selenium-9984dc61f176
+---

assets/css/main.css

@@ -5107,23 +5107,6 @@ body {
     transition: color .3s ease-in, background-color .3s ease-in, border-color .3s ease-in
 }
 
-.footer {
-    background: #1a222c;
-    padding: 10px 0;
-    margin-top: 100px;
-    text-align: center;
-    color: #fff
-}
-
-.footer .love {
-    color: red
-}
-
-.footer a {
-    text-decoration: none;
-    margin: 0;
-    color: #fff
-}
 
 /* Grid Layout for Posts */
 #posts {
@@ -5227,12 +5210,50 @@ body {
   }
 
 /*footer icons*/
-  .footer-icons {
+.footer {
+    background: #1a222c;
+    padding: 10px 0;
+    margin-top: 100px;
     text-align: center;
-    margin-bottom: 15px;
+    color: #fff
 }
 
-.footer-icons .icon {
+.footer .love {
+    color: red
+}
+
+.footer a {
+    text-decoration: none;
+    margin: 0;
+    color: #fff
+}
+
+.footer-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px; /* Space between the items */
+    padding: 15px 0;
+    flex-wrap: wrap; /* Allows wrapping on smaller screens */
+    text-align: center;
+}
+
+.footer-content .link {
+    text-decoration: none;
+    color: #fff;
+    transition: color 0.3s ease;
+}
+
+.footer-content .link:hover {
+    color: #ddd;
+}
+
+.footer-content .footer-icons {
+    display: flex;
+    justify-content: center;
+}
+
+.footer-content .footer-icons .icon {
     height: 20px;
     width: 20px;
     padding: 10px;
@@ -5243,22 +5264,12 @@ body {
     margin: 5px;
 }
 
-.footer-icons .icon:hover {
+.footer-content .footer-icons .icon:hover {
     color: #1a222c;
     background: #fff;
 }
 
 .footer p {
     text-align: center;
     margin: 5px 0;
-}
-
-.footer a.link {
-    text-decoration: none;
-    color: #fff;
-    transition: color 0.3s ease;
-}
-
-.footer a.link:hover {
-    color: #ddd;
 }