feat: add resume and refactor button component

Author: coderGtm

public/resume.pdf

@@ -1,10 +1,20 @@
 ---
-const { link, text } = Astro.props;
+interface Props {
+  link: string;
+  text: string;
+  variant?: 'solid' | 'outline' | 'ghost';
+  target?: string;
+  rel?: string;
+  class?: string;
+}
+const { link, text, variant = 'solid', target, rel, class: extraClass = '' }: Props = Astro.props;
+
+const base = 'inline-flex w-auto px-4 py-2 mt-5 text-xs font-semibold duration-300 ease-out rounded-full';
+const solid = 'border bg-neutral-900 dark:bg-white dark:text-neutral-900 text-neutral-100 hover:border-neutral-700 border-neutral-900 dark:hover:border-neutral-300 hover:bg-white dark:hover:bg-black dark:hover:text-white hover:text-neutral-900';
+const outline = 'border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 hover:bg-neutral-900 hover:text-white dark:hover:bg-white dark:hover:text-neutral-900';
+const ghost = 'text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white';
+const styleMap: Record<string,string> = { solid, outline, ghost };
+const classes = `${base} ${styleMap[variant]} ${extraClass}`.trim();
 ---
 
-<a
-  href={link}
-  class="inline-flex w-auto px-4 py-2 mt-5 text-xs font-semibold duration-300 ease-out border rounded-full bg-neutral-900 dark:bg-white dark:text-neutral-900 text-neutral-100 hover:border-neutral-700 border-neutral-900 dark:hover:border-neutral-300 hover:bg-white dark:hover:bg-black dark:hover:text-white hover:text-neutral-900"
->
-  {text}
-</a>
+<a href={link} class={classes} target={target} rel={rel}>{text}</a>

src/components/button.astro

@@ -71,6 +71,14 @@ import Logo from "../components/logo.astro";
             )
           })
         }
+        <a
+          href="/resume.pdf"
+		  target="_blank"
+		  rel="noopener"
+          class="relative flex items-center justify-center w-full px-3 py-2 font-medium tracking-wide text-center duration-200 ease-out sm:py-0 sm:mb-0 md:w-auto hover:text-neutral-900 dark:hover:text-white"
+        >
+          Resume
+        </a>
       </div>
       <div
         id="darkToggle"

src/components/header.astro

@@ -25,7 +25,7 @@ const feed = (Astro.site ? new URL('/feed.xml', Astro.site).href : '/feed.xml');
         <PostsLoop count="3" />
 
         <div class="flex items-center justify-center w-full py-5">
-          <Button text="View All My Writing" link="/posts" />
+          <Button text="View All My Blogs" link="/posts" />
         </div>
       </div>
       <div class="w-full mt-10 md:w-1/3 md:mt-0">

src/components/home/writings.astro

@@ -6,6 +6,7 @@ import AboutExperience from "../components/about-experience.astro";
 import AboutEducation from "../components/about-education.astro";
 import PageHeading from "../components/page-heading.astro";
 import Layout from "../layouts/main.astro";
+import Button from "../components/button.astro";
 ---
 
 <Layout title="About Me">
@@ -73,6 +74,10 @@ import Layout from "../layouts/main.astro";
 	  }
 	</div>
 
+    <div class="mb-8">
+      <Button link="/resume.pdf" text="View my Resume" variant="outline" target="_blank" rel="noopener" />
+    </div>
+
     <h2 class="mt-5 mb-2 text-2xl font-bold lg:mt-10 sm:mt-6 dark:text-neutral-200">Let's Connect</h2>
     <p
       class="text-sm leading-6 text-gray-600 dark:text-neutral-400 sm:leading-7 lg:leading-8 sm:text-base lg:text-lg"

src/pages/about.astro

@@ -36,7 +36,10 @@ import photo from "../assets/images/about/photo.png";
 		  <li>Planning your next trip</li>
           <li>and more...</li>
         </ul>
-        <Button text="Contact me" link="mailto:gautammehta.connect@gmail.com" />
+        <div class="flex flex-wrap items-center gap-3">
+          <Button text="Contact me" link="mailto:gautammehta.connect@gmail.com" />
+          <Button text="View Resume" link="/resume.pdf" variant="outline" target="_blank" rel="noopener" />
+        </div>
       </div>
       <div
         class="relative justify-end hidden w-full mt-10 md:flex md:pl-10 md:w-1/2 md:mt-0 md:translate-y-4 xl:translate-y-0"