feat(resume): add resume

Currently doesn't work with smaller screens for some reason. There is a bug with the embedded

app/page.tsx

@@ -3,6 +3,7 @@ import Contact from "@/components/contact";
 import Hero from "@/components/hero";
 import Navbar from "@/components/navbar";
 import Projects from "@/components/projects";
+import Resume from "@/components/resume";
 
 const Home: React.FC = () => {
   return (
@@ -16,6 +17,8 @@ const Home: React.FC = () => {
       <Projects />
       {/* Contacts Section */}
       {/* <Contact /> */}
+      {/* Resume Section */}
+      <Resume />
     </main>
   );
 };

components/navbar.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Resume from "./resume";
 
 const Navbar: React.FC = () => {
   return (
@@ -33,6 +34,13 @@ const Navbar: React.FC = () => {
             {/* > */}
             {/*   Contact */}
             {/* </Link> */}
+            {/* Resume */}
+            <Link
+              href="#resume"
+              className="text-gray-800 hover:text-catppuccin_blue"
+            >
+              Resume
+            </Link>
           </div>
         </div>
       </nav>

components/resume.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import Background from "./background";
+
+const Resume: React.FC = () => {
+  return (
+    <main id="resume" className="animate-fadeIn">
+      <Background styles="h-max w-max">
+        <p className="text-5xl items-center text-center text-black">Resume</p>
+        <div className="grid grid-cols-1 lg:grid-cols-2">
+          <div className="hidden lg:flex">
+            <embed
+              src="Resume.pdf#zoom=100"
+              width={window.innerWidth / 2}
+              height={window.innerHeight * 0.8}
+              type="application/pdf"
+            />
+          </div>
+          <div className="flex items-center justify-center">
+            <a href="/Resume.pdf" download="Resume.pdf">
+              <button
+                type="button"
+                className="text-2xl bg-catppuccin_red text-white py-2 px-4 rounded-md hover:bg-red-400 transition duration-300"
+              >
+                Download Resume
+              </button>
+            </a>
+          </div>
+        </div>
+      </Background>
+    </main>
+  );
+};
+
+export default Resume;