Blog home page

package.json

@@ -16,7 +16,7 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.3.2",
+    "@docusaurus/core": "^3.4.0",
     "@docusaurus/plugin-content-pages": "^3.3.2",
     "@docusaurus/plugin-google-analytics": "^3.3.2",
     "@docusaurus/plugin-google-gtag": "^3.3.2",
@@ -26,6 +26,7 @@
     "@docusaurus/plugin-vercel-analytics": "^3.3.2",
     "@docusaurus/preset-classic": "^3.3.2",
     "@docusaurus/remark-plugin-npm2yarn": "^3.4.0",
+    "@docusaurus/theme-classic": "^3.4.0",
     "@docusaurus/theme-live-codeblock": "^3.3.2",
     "@docusaurus/theme-mermaid": "^3.3.2",
     "@docusaurus/theme-search-algolia": "^3.3.2",

src/database/blogs/index.tsx

@@ -1,54 +1,140 @@
 interface Blog {
-    id: number;
-    title: string;
-    image: string;
-    description: string;
-    slug: string;
-  }
+  id: number;
+  title: string;
+  image: string;
+  description: string;
+  slug: string;
+}
 
-  const blogs: Blog[] = [
-    {
-      id: 1,
-      title: 'Getting started with Microservices',
-      image: '/assets/images/image01-736d71e3db56657987594b3b11459b5d.png',
-      description: 'Microservices are an architectural style that structures an application as a collection of small, loosely coupled services.',
-      slug: 'getting-started-with-microservices'
-    },
-    {
-      id: 2,
-      title: 'Cryptography and Its Use in Cyber Security',
-      image: '/img/blogs/introduction-to-cryptography-and-cyber-security.jpg',
-      description: 'In the realm of cyber security, cryptography stands as a critical tool for protecting information.',
-      slug: 'introduction-to-cryptography-and-cyber-security'
-    },
-    {
-      id: 3,
-      title: 'Blog 3 Title',
-      image: '/img/svg/blogging.svg',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.',
-      slug: '#'
-    },
-    {
-      id: 4,
-      title: 'Blog 4 Title',
-      image: '/img/svg/blogging.svg',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.',
-      slug: '#'
-    },
-    {
-      id: 5,
-      title: 'Blog 5 Title',
-      image: '/img/svg/blogging.svg',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.',
-      slug: '#'
-    },
-    {
-      id: 6,
-      title: 'Blog 6 Title',
-      image: '/img/svg/blogging.svg',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.',
-      slug: '#'
-    }
-  ];
+const blogs: Blog[] = [
+  {
+    id: 1,
+    title: "Building RESTful CRUD API in springboot",
+    image: "img/blogs/image01.png",
+    description:
+      " RESTful APIs have become a cornerstone for building scalable, efficient, and maintainable web applications.",
+    slug: "Building RESTful CRUD API in springboot",
+  },
+  {
+    id: 2,
+    title: "Getting started with Microservices",
+    image: "/assets/images/image01-736d71e3db56657987594b3b11459b5d.png",
+    description:
+      "Microservices are an architectural style that structures an application as a collection of small, loosely coupled services.",
+    slug: "getting-started-with-microservices",
+  },
+  {
+    id: 3,
+    title: "Cryptography and Its Use in Cyber Security",
+    image: "/img/blogs/introduction-to-cryptography-and-cyber-security.jpg",
+    description:
+      "In the realm of cyber security, cryptography stands as a critical tool for protecting information.",
+    slug: "introduction-to-cryptography-and-cyber-security",
+  },
+  {
+    id: 4,
+    title: "Getting started with Mern",
+    image: "/img/blogs/mern.jpg",
+    description:
+      " Learn the basics of the MERN stack, from building an API with Express.js to creating a React app.",
+    slug: "getting-started-with-mern",
+  },
+  {
+    id: 5,
+    title: "Getting started with Vite",
+    image: "/img/blogs/react-and-vite.jpg",
+    description:
+      "Learn how to get started with React by creating a new app using Vite. Follow the steps to set up your development environment",
+    slug: "getting-started-with-vite",
+  },
+  {
+    id: 6,
+    title: "VS Code: Fix Bug in Any Extension by Rebuilding It",
+    image: "/img/blogs/build-done-vsce.png",
+    description:
+      "How to fix a bug in any VS Code extension (.vsix) by rebuilding that extension",
+    slug: "fix-bug-in-vscode-extension",
+  },
+  {
+    id: 7,
+    title: "Dockerizing a Rust application with Multi-Stage Builds",
+    image: "/img/blogs/rust-docker.png",
+    description:
+      "Learn the basics of the MERN stack, from building an API with Express.js to creating a React app.",
+    slug: "dockerizing-a-rust-application-with-multi-stage-builds",
+  },
+  {
+    id: 8,
+    title: "Git Best Practices: Commit Often, Perfect Later, Publish Once",
+    image: "/img/svg/coding.svg",
+    description:
+      "Git is a powerful tool for managing the development of software projects, but it can be challenging to use effectively. ",
+    slug: "git-best-practicies",
+  },
+  {
+    id: 9,
+    title: "Mastering Data Structures in Python",
+    image: "/img/svg/programming.svg",
+    description:
+      "Data structures are essential components in computer science, enabling efficient data storage, manipulation, and retrieval.",
+    slug: "Mastering Data Structures in Python",
+  },
+  {
+    id: 10,
+    title: "Automating Tasks with Python",
+    image: "/img/svg/progress.svg",
+    description:
+      "Automation is a powerful way to boost productivity and efficiency by minimizing manual intervention in repetitive tasks.",
+    slug: "automating-tasks-with-python",
+  },
+  {
+    id: 11,
+    title: "A Beginner’s Guide to the Top 5 React Hooks",
+    image: "/img/svg/react.svg",
+    description:
+      "Since its inception, React has undergone significant evolution, with each new release introducing enhancements and improvements to the framework.",
+    slug: "Beginner’s Guide to the Top 5 React Hooks",
+  },
+  {
+    id: 12,
+    title: "DOM manipulation in JavaScript",
+    image: "/img/svg/javascript_frameworks.svg",
+    description:
+      " This model allows developers to interact with the document programmatically via scripting languages like JavaScript.",
+    slug: "DOM manipulation in JavaScript",
+  },
+  {
+    id: 13,
+    title: "CI evolution: From FTP client to GitHub Action",
+    image: "/img/svg/dev_productivity.svg",
+    description:
+      "In the early days of web development, the most common way to deploy a website was to use an FTP client.",
+    slug: "from-ftp-client-to-github-action",
+  },
+  {
+    id: 14,
+    title: "Getting Started with PostgreSQL",
+    image: "/img/svg/educator.svg",
+    description:
+      "The PostgreSQL language, primarily SQL (Structured Query Language), is the standard language for interacting with the PostgreSQL database.",
+    slug: "Getting started with PostgreSQL",
+  },
+  {
+    id: 15,
+    title: "Getting Started with NextJS",
+    image: "/img/svg/next_js.svg",
+    description:
+      "Next.js is a popular React framework that enables server-side rendering and static site generation, offering an optimized, flexible approach to building modern web applications.",
+    slug: "Getting-started-with-nextJS",
+  },
+  {
+    id: 16,
+    title: "Comprehensive Documentation on Linux Development and Cybersecurity",
+    image: "/img/svg/developer_activity.svg",
+    description:
+      "Renowned for its stability, security, and open-source nature, plays a pivotal role in modern computing environments",
+    slug: "introduction-to-the-Linux-development-and-cyber-security",
+  },
+];
 
-  export default blogs;
+export default blogs;

src/pages/blogs/style.css

@@ -1,18 +1,17 @@
 .blog-page {
   margin: 2rem 1rem;
 }
-.blog-page .blog-header {  
+
+.blog-page .blog-header {
   text-align: center;
   margin: 1rem 0;
 }
 
 .blog-page .blog-header .TitleText {
-  background: linear-gradient(
-    90deg,
-    rgb(152 0 255) 0%,
-    rgb(246 41 41) 50%,
-    rgb(255 169 8) 100%
-  );
+  background: linear-gradient(90deg,
+      rgb(152 0 255) 0%,
+      rgb(246 41 41) 50%,
+      rgb(255 169 8) 100%);
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -65,4 +64,4 @@
 
 .blog-page .card-container .card .read-more {
   padding: 0.5rem;
-}
+}