Merge pull request #113 from ajogseneca/issue-95-blogpage

Added files for blog page
computerclubkec · Oct 16, 2024 · bacaef9 · bacaef9
2 parents 4c5d7fb + b3f8f38
commit bacaef9
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 33 deletions.
diff --git a/_config.yml b/_config.yml
@@ -85,4 +85,4 @@ text-colors:
   white: "#FFFFFF"
   base-white: "#FAFAFA"
   neutral-200: "#CCCBCB"
-  blue: "#3328BF"
+  blue: "#3328BF"
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -6,7 +6,7 @@
   <div class="m-4 w-12 h-12 sm:w-8 sm:h-8 md:w-12 md:h-12 lg:w-16 lg:h-16 relative">
     <a href="{{ '/' }}">
       <img
-        src="../assets/images/logo.png"
+        src="{{ site.baseurl }}/assets/images/logo.png"
         alt="logo"
         class="absolute w-full h-full object-contain"
       />

diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% include header.html %}
+    <style>
+      /* Blog card styling */
+      .blog-card {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 450px; /* consistent height */
+        max-height: 500px; 
+        transition: box-shadow 0.3s ease;
+      }
+      .blog-card:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+      /* Blog image styling */
+      .blog-card img {
+        height: 200px; /* Consistent image height */
+        object-fit: cover; /* Ensures image is not distorted */
+      }
+      .blog-content {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+
+      /* blog container style for smaller screens */
+      @media (max-width: 640px) {
+        .blog-card {
+          min-height: 400px; /* Adjust height*/
+        }
+        .blog-card img {
+          height: 180px; /* Smaller image size*/
+        }
+      }
+
+      /* Ensure consistent size on larger screens */
+      @media (min-width: 1024px) {
+        .blog-card {
+          min-height: 480px; 
+        }
+        .blog-card img {
+          height: 220px; 
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    {% include nav.html %}
+
+    <div class="container py-10 px-2 md:mx-auto">
+      <div class="blog-hero flex flex-col items-center justify-center">
+        <div class="title text-4xl sm:text-4xl md:text-4xl lg:text-5xl font-bold pb-5 text-center text-[{{site.text-colors.darkblue}}]">
+          Our Latest Blogs
+        </div>
+
+        <div class="blog-container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {% assign sorted_posts = site.posts | sort: 'date' | reverse %}
+          {% for post in sorted_posts %}
+          <a href="{{ post.url }}" class="block blog-card-link">
+            <div class="blog-card w-full m-2 p-4 border border-gray-300 rounded-lg shadow-lg bg-white cursor-pointer">
+              <img src="{{ post.image | default: '/assets/images/default-image.jpg' }}" 
+                   alt="{{ post.title }}" 
+                   class="w-full object-cover rounded-lg mb-4">
+              <div class="blog-content">
+                <p class="text-sm text-gray-500">{{ post.reading_time }} min read</p>
+                <p class="text-sm text-gray-500">{{ post.date | date: "%d %B, %Y" }}</p>
+                <h2 class="text-xl font-semibold my-2">{{ post.title }}</h2>
+                <!-- Truncate the excerpt to the first 10 words so cards can maintain uniform size-->
+                <p class="text-base text-gray-700 mb-3">
+                  {{ post.excerpt | truncatewords: 10 }}
+                </p>
+              </div>
+              <span class="text-blue-500 font-bold hover:underline">Read More →</span>
+            </div>
+          </a>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+
+    {% include footer.html %}
+  </body>
+</html>
diff --git a/_posts/2024-10-01-welcome-to-jekyll.markdown b/_posts/2024-10-01-welcome-to-jekyll.markdown
diff --git a/_posts/2024-10-14-blog_2.markdown b/_posts/2024-10-14-blog_2.markdown
@@ -0,0 +1,12 @@
+---
+layout: default
+title: "The Future of Remote Work Technology"
+date: 2024-10-14
+image: ../assets/images/blog/blog2.png
+reading_time: 2
+excerpt: "The shift to remote work has accelerated the development of innovative technologies designed to enhance productivity and collaboration."
+---
+
+<!-- Full blog content starts here -->
+The shift to remote work has accelerated the development of innovative technologies designed to enhance productivity and collaboration. Tools like Zoom, Slack, and Asana have become household names, enabling seamless communication and project management from anywhere in the world.As organizations embrace hybrid work models, emerging technologies such as virtual reality (VR) meetings and AI-powered collaboration platforms are set to redefine how teams interact. The future of remote work technology is not just about staying connected; it’s about creating immersive, engaging environments that foster creativity and teamwork, regardless of physical location.
+In the near future, we can expect more advancements in tools that facilitate global teamwork. Artificial intelligence and automation will play a huge role in helping remote teams operate efficiently. With VR spaces, team members will collaborate as though they were in the same room, adding a new dimension to communication and productivity. Companies that embrace this wave of innovation will thrive in a borderless work environment.
diff --git a/_posts/2024-10-15-blog_3.markdown b/_posts/2024-10-15-blog_3.markdown
@@ -0,0 +1,13 @@
+---
+layout: default
+title: "The Importance of Cybersecurity in the Digital Age"
+date: 2024-10-15
+image: ../assets/images/blog/blog1.png
+reading_time: 1
+excerpt: "As our world becomes increasingly digital, the importance of cybersecurity cannot be overstated."
+---
+
+<!-- Full blog content starts here -->
+As our world becomes increasingly digital, the importance of cybersecurity cannot be overstated. With more personal data online than ever before, individuals and organizations face constant threats from cybercriminals.
+Implementing robust security measures, such as strong passwords, two-factor authentication, and regular software updates, is crucial to safeguarding sensitive information. Furthermore, educating employees about phishing attacks and safe browsing practices can significantly reduce vulnerabilities.
+In an age where data breaches can have devastating consequences, prioritizing cybersecurity is essential for protecting our digital lives.
diff --git a/_posts/2024-10-16-blog_1.markdown b/_posts/2024-10-16-blog_1.markdown
@@ -0,0 +1,15 @@
+---
+layout: default
+title: "The Rise of AI in Everyday Life"
+date: 2024-10-16
+image: ../assets/images/blog/blog3.png
+reading_time: 2
+excerpt: "Artificial Intelligence (AI) is transforming the way we live, work, and interact."
+---
+
+<!-- Full blog content starts here -->
+Artificial Intelligence (AI) is transforming the way we live, work, and interact. From virtual assistants like Siri and Alexa to smart home devices that optimize energy usage, AI is seamlessly integrating into our daily routines.
+
+Businesses are leveraging AI for customer service chatbots, predictive analytics, and even product recommendations, enhancing user experiences. As AI technology continues to evolve, its potential to streamline tasks and improve decision-making will reshape industries and elevate our quality of life.
+
+Embracing AI today means preparing for a smarter, more efficient tomorrow.
diff --git a/assets/images/blog/blog1.png b/assets/images/blog/blog1.png
diff --git a/assets/images/blog/blog2.png b/assets/images/blog/blog2.png
diff --git a/assets/images/blog/blog3.png b/assets/images/blog/blog3.png
diff --git a/blog.markdown b/blog.markdown
@@ -1,7 +1,8 @@
 ---
-layout: home
+layout: blog
 title: Blog
 permalink: /blog/
 ---
 
-This is a blog page.
+
+