Design + Api

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@heroicons/react": "^2.0.18",
     "autoprefixer": "10.4.15",
+    "axios": "^1.6.2",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.15",
     "framer-motion": "^10.16.1",
@@ -19,6 +20,7 @@
     "react": "18.2.0",
     "react-animated-numbers": "^0.16.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.12.0",
     "react-type-animation": "^3.1.0",
     "resend": "^1.0.0",
     "tailwindcss": "3.3.3"

src/app/api/cv/route.js

@@ -0,0 +1,21 @@
+import fs from "fs";
+import path from "path";
+
+export async function GET(request) {
+  console.log("GET request received");
+
+  const filePath = path.join(process.cwd(), "public", "Cv.pdf");
+  const stat = fs.statSync(filePath);
+
+  // Set response headers
+  const headers = new Headers();
+  headers.append("Content-Type", "application/pdf");
+  headers.append("Content-Length", stat.size);
+  headers.append("Content-Disposition", "attachment; filename=Cv.pdf");
+
+  // Send the file stream as the response
+  return new Response(fs.createReadStream(filePath), {
+    headers,
+    status: 200,
+  });
+}

src/app/components/EmailSection.jsx

@@ -45,7 +45,7 @@ const EmailSection = () => {
       className="grid md:grid-cols-2 my-12 md:my-12 py-24 gap-4 relative"
     >
       <div className="bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary-900 to-transparent rounded-full h-80 w-80 z-0 blur-lg absolute top-3/4 -left-4 transform -translate-x-1/2 -translate-1/2"></div>
-      <div className="z-10">
+      <div>
         <h5 className="text-xl font-bold text-white my-2">
           Let&apos;s Connect
         </h5>
@@ -71,7 +71,7 @@ const EmailSection = () => {
           </p>
         ) : (
           <form className="flex flex-col" onSubmit={handleSubmit}>
-            <div className="mb-6">
+            <div className="mb-4">
               <label
                 htmlFor="email"
                 className="text-white block mb-2 text-sm font-medium"
@@ -87,7 +87,7 @@ const EmailSection = () => {
                 placeholder="[email protected]"
               />
             </div>
-            <div className="mb-6">
+            <div className="mb-4">
               <label
                 htmlFor="subject"
                 className="text-white block text-sm mb-2 font-medium"
@@ -113,6 +113,7 @@ const EmailSection = () => {
               <textarea
                 name="message"
                 id="message"
+                rows="3"
                 className="bg-[#18191E] border border-[#33353F] placeholder-[#9CA2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5"
                 placeholder="Let's talk about..."
               />

src/app/components/Footer.jsx

@@ -1,11 +1,23 @@
 import React from "react";
+import Image from "next/image";
 
 const Footer = () => {
+  const currentYear = new Date().getFullYear();
   return (
-    <footer className="footer border z-10 border-t-[#33353F] border-l-transparent border-r-transparent text-white">
-      <div className="container p-12 flex justify-between">
-        <span>LOGO</span>
-        <p className="text-slate-600">All rights reserved.</p>
+    <footer className="footer border border-t-[#33353F] border-l-transparent border-r-transparent text-white">
+      <div className="container py-12 flex justify-between">
+        {/* <span>LOGO</span> */}
+        <Image
+          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert ml-5 lg:ml-16 md:ml-16 sm:ml-12"
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={120}
+          height={37}
+          priority
+        />
+        <p className="text-[#ADB7BE] text-xs">
+          &copy;{currentYear} All Rights Reserved.
+        </p>
       </div>
     </footer>
   );

src/app/components/HeroSection.jsx

@@ -4,8 +4,26 @@ import Image from "next/image";
 import { TypeAnimation } from "react-type-animation";
 import { motion } from "framer-motion";
 import Link from "next/link";
+import axios from "axios";
 
 const HeroSection = () => {
+  const downloadCV = async () => {
+    try {
+      const response = await axios.get("/api/cv", {
+        responseType: "blob",
+      });
+      const link = document.createElement("a");
+      const blob = new Blob([response.data], { type: "application/pdf" });
+      link.href = window.URL.createObjectURL(blob);
+      link.download = "Cv.pdf";
+      link.click();
+
+      window.URL.revokeObjectURL(link.href);
+    } catch (error) {
+      console.error("Error downloading CV:", error);
+    }
+  };
+
   return (
     <section className="lg:py-16">
       <div className="grid grid-cols-1 sm:grid-cols-12">
@@ -15,8 +33,8 @@ const HeroSection = () => {
           transition={{ duration: 0.5 }}
           className="col-span-8 place-self-center text-center sm:text-left justify-self-start"
         >
-          <h1 className="text-white mb-4 text-4xl sm:text-5xl lg:text-8xl lg:leading-normal font-extrabold">
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-600">
+          <h1 className="text-white mb-4 text-3xl sm:text-3xl lg:text-5xl lg:leading-normal font-extrabold">
+            <span className="text-transparent text-5xl sm:text-6xl lg:text-8xl bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-600">
               Hello, I&apos;m{" "}
             </span>
             <br></br>
@@ -48,7 +66,8 @@ const HeroSection = () => {
               Hire Me
             </Link>
             <Link
-              href="/"
+              href="#"
+              onClick={downloadCV}
               className="px-1 inline-block py-1 w-full sm:w-fit rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 hover:bg-slate-800 text-white mt-3"
             >
               <span className="block bg-[#121212] hover:bg-slate-800 rounded-full px-5 py-2">

src/app/components/MenuOverlay.jsx

@@ -1,3 +1,4 @@
+// This component is useless for time being. I will use it later if needed.
 import React from "react";
 import NavLink from "./NavLink";
 

src/app/components/NavLink.jsx

@@ -1,8 +1,13 @@
 import Link from "next/link";
 
-const NavLink = ({ href, title }) => {
+const NavLink = ({ href, title, setNavbarOpen = () => {} }) => {
+  const handleClick = () => {
+    setNavbarOpen(false);
+  };
   return (
     <Link
+      onClick={handleClick}
+      style={{ fontSize: "1rem" }}
       href={href}
       className="block py-2 pl-3 pr-4 text-[#ADB7BE] sm:text-xl rounded md:p-0 hover:text-white"
     >