From e07364882c44002e872578557ab779fd10cf4505 Mon Sep 17 00:00:00 2001
From: C-NikhilKarthik <nikhilkarthik241103@gmail.com>
Date: Tue, 21 Nov 2023 10:54:03 +0530
Subject: [PATCH] feat: requirements.txt added

---
 src/app/archive/page.tsx   |  2 +-
 src/components/Archive.tsx | 51 +++++++++++++++++++-------------------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/app/archive/page.tsx b/src/app/archive/page.tsx
index bd1069b..de1e93e 100644
--- a/src/app/archive/page.tsx
+++ b/src/app/archive/page.tsx
@@ -55,7 +55,7 @@ function Home() {
       <div className="relative z-30">
         <Navbar show={show} setShow={setShow} />
         <div className="flex-col h-full items-center flex">
-          <div className="w-full px-12 pt-28 flex h-fit justify-center">
+          <div className="w-full md:px-12 md:pr-28 pt-28 flex h-fit justify-center">
             <div className="flex md:mx-8 mx-4 flex-col items-center ">
               <BsCode className="text-2xl drop-shadow-[0_6px_10px_rgba(192_132_250)] mb-4 text-gray-400" />
               <div className="h-full w-[3px] rounded bg-[#64ffdba1] relative">
diff --git a/src/components/Archive.tsx b/src/components/Archive.tsx
index 3b574c2..9afa6ee 100644
--- a/src/components/Archive.tsx
+++ b/src/components/Archive.tsx
@@ -24,21 +24,23 @@ function Archive() {
       <h2 className="whitespace-nowrap flex items-center text-[clamp(40px,8vw,72px)] font-semibold">
         Archive
       </h2>
-      <h3 className="text-[#64ffda] text-lg">List of things I&apos;ve worked on</h3>
+      <h3 className="text-[#64ffda] text-lg">
+        List of things I&apos;ve worked on
+      </h3>
       <div className="my-24 w-full">
-        <table className="table-auto text-sm text-left text-gray-500 dark:text-gray-400">
+        <table className="table-auto w-full text-sm text-left text-gray-500 dark:text-gray-400">
           <thead className="text-gray-700 uppercase dark:text-gray-400">
             <tr>
-              <th scope="col" className="px-6 py-3">
+              <th scope="col" className="md:px-6 md:py-3 p-2">
                 Year
               </th>
-              <th scope="col" className="px-6 py-3">
+              <th scope="col" className="md:px-6 md:py-3 p-2">
                 Title
               </th>
-              <th scope="col" className="px-6 py-3">
+              <th scope="col" className="hidden lg:flex px-6 py-3">
                 Built on
               </th>
-              <th scope="col" className="px-6 py-3">
+              <th scope="col" className="md:px-6 md:py-3 p-2">
                 Link
               </th>
             </tr>
@@ -49,15 +51,12 @@ function Archive() {
                 key={proj.key}
                 className="odd:bg-[#08192ef0]/50 hover:text-[#64ffda] even:bg-[#cacacaf0]/20 border-b dark:border-gray-700"
               >
-                <td className="px-6 py-4">{proj.Year}</td>
-                <th
-                  scope="row"
-                  className="px-6 py-4 font-medium whitespace text-white group-hover:text-[#64ffda]"
-                >
+                <td className="md:px-6 md:py-3 p-4">{proj.Year}</td>
+                <td className="md:px-6 md:py-3 p-4 font-medium whitespace text-white group-hover:text-[#64ffda]">
                   {proj.heading}
-                </th>
-                <td className="px-6 py-4">
-                  <div className="flex flex-wrap max-w-[400px]">
+                </td>
+                <td className="hidden lg:flex md:px-6 md:py-3 p-4">
+                  <div className="flex flex-wrap w-full max-w-[400px]">
                     {proj.techStack?.length > 0 &&
                       proj.techStack.map((item, i) => (
                         <span key={i}>
@@ -69,17 +68,19 @@ function Archive() {
                       ))}
                   </div>
                 </td>
-                <td className="flex px-6 py-4 gap-2 items-center text-lg">
-                  {proj?.Link && (
-                    <a href={proj?.Link} aria-label="External Link">
-                      <FiExternalLink />
-                    </a>
-                  )}
-                  {proj?.GitHubLink && (
-                    <a href={proj?.GitHubLink} aria-label="GitHub Link">
-                      <FiGithub />
-                    </a>
-                  )}
+                <td className="md:px-6 md:py-3 p-4 text-lg">
+                  <div className="flex items-center gap-2">
+                    {proj?.Link && (
+                      <a href={proj?.Link} aria-label="External Link">
+                        <FiExternalLink />
+                      </a>
+                    )}
+                    {proj?.GitHubLink && (
+                      <a href={proj?.GitHubLink} aria-label="GitHub Link">
+                        <FiGithub />
+                      </a>
+                    )}
+                  </div>
                 </td>
               </tr>
             ))}