sidebar

src/app/api/sitemap/page.js

@@ -5,10 +5,10 @@ export function generateRandomNumber(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-export default async () => {
+ const Sitemap = async() => {
 
   const response2 = await fetch(
-    `https://dev.to/api/articles?per_page=10000`
+    `https://dev.to/api/articles?per_page=1`
   );
 
   const data22 = await response2.json();
@@ -54,3 +54,4 @@ function ArticleCard({ article }) {
       </a>
   );
 }
+export default  Sitemap;

src/app/components/Card2.js

@@ -0,0 +1,46 @@
+export default function () {
+  return (
+    <article class="p-5 transform duration-300 hover:-translate-y-1 cursor-pointer  hover:shadow-2xl group">
+      <div class="relative max-h-125 overflow-hidden">
+        <img
+          class="absolute rounded-full"
+          src="https://github.com/the-shade-project.png"
+          alt=""
+        />
+        <img
+          class="relative transform duration-500 group-hover:opacity-0"
+          src="https://github.com/fornfun.png"
+          alt=""
+        />
+      </div>
+      <div class="p-4 absolute bg-gray-200 rounded-full top-10 right-10 transform duration-500 opacity-0 group-hover:opacity-100">
+        <a target="_blank" href="https://github.com/sh20raj">
+          <svg
+            class="w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="rgba(0,0,0,0.5)"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            ></path>
+          </svg>
+        </a>
+      </div>
+      <ul class="mt-6 font-semibold text-gray-500">
+        <li class="inline mr-3 pb-1 border-b-2 border-green-500">GitHub</li>
+        {/* <li class="inline mr-3 pb-1 border-b-2 border-green-500">Dev.to</li> */}
+        <a href="https://dev.to/sh20raj" target="_"><li class="inline mr-3 pb-1 border-b-2 border-green-500">Dev.to</li></a>
+        <a href="/sh20raj"><li class="inline mr-3 pb-1 border-b-2 border-green-500">DevArt</li></a>
+      </ul>
+      <p class="mt-6  text-xl leading-relaxed text-gray-700">
+        I'm a passionate developer
+      </p>
+      <p class="text-gray-400 mt-10 font-semibold">{(new Date()).toDateString()}</p>
+    </article>
+  );
+}

src/app/components/Footer.js

@@ -7,7 +7,7 @@ export default () => {
     <b>
       @Blog<span style={{ color: "tomato" }}>X</span>{" "}
     </b>{" "}
-    | Created with ❤️ by <a href="http://github.com/sh20raj">@sh20raj</a>
+    | Created with ❤️ by <a href="http://github.com/sh20raj">@sh20raj</a> | <a href="https://codexdindia.blogspot.com/" target="_">CXDIIN</a>
   </footer>
     )
 }

src/app/globals.css

@@ -288,7 +288,7 @@ footer {
 
 .post {
   width: 100%;
-  background: var(--bbg);
+  /* background: var(--bbg); */
   /* border: 2px solid var(--black); */
   margin: 20px;
   margin-top: 0;
@@ -298,6 +298,7 @@ footer {
   display: block;
   top: 0;
   left: 0;
+  border-radius: 20px;
 }
 
 .postscontainer #load_more {

src/app/page.js

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import Link from "next/link";
 import Nav from "./components/Nav";
 import Footer from "./components/Footer";
+import Card2 from "./components/Card2";
 
 export function generateRandomNumber(min, max) {
   // Math.random() generates a random number between 0 and 1
@@ -70,7 +71,6 @@ export default function ArticlesPage() {
     <>
       <Nav />
       <title>DevArt - Programming Related Articles</title>
-
       <main className="postscontainer">
         <h1 className="rounded-[12px] m-10 text-xl shadow-2xl p-5">
           Latest Posts
@@ -90,6 +90,8 @@ export default function ArticlesPage() {
                 </a>
               </div>
             </div>
+            <Card2/>
+
           </div>
         </div>
       </main>