feat: adicionado download curriculo

GuilhaoF · Jun 28, 2023 · 737405e · 737405e
1 parent ba08e56
commit 737405e
Show file tree

Hide file tree

Showing 6 changed files with 2,660 additions and 40 deletions.
diff --git a/next.config.js b/next.config.js
@@ -3,4 +3,26 @@ const nextConfig = {
   reactStrictMode: true,
 }
 
-module.exports = nextConfig
+module.exports = {
+  nextConfig,
+  webpack: (config, { isServer }) => {
+    // Configuração do loader para arquivos PDF
+    config.module.rules.push({
+      test: /\.pdf$/,
+      use: {
+        loader: 'file-loader',
+        options: {
+          publicPath: '/_next',
+          name: 'static/media/[name].[hash].[ext]',
+        },
+      },
+    });
+
+    // Mantém a configuração existente do webpack, se houver
+    if (!isServer) {
+      config.resolve.fallback.fs = false;
+    }
+
+    return config;
+  },
+}
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@types/react-dom": "18.2.6",
     "eslint": "8.43.0",
     "eslint-config-next": "13.4.6",
+    "file-loader": "^6.2.0",
     "next": "13.4.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/public/curriculo/Luis.pdf b/public/curriculo/Luis.pdf
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -13,9 +13,9 @@ export function NavbarComponent() {
     <div>
       <div
         className={`flex items-center justify-center fixed z-[1] bg-ocean-blue-900 h-full w-full ${isOpenMenu ? "translate-x-0" : "translate-x-full"
-          } transition  duration-150`}
+          } transition duration-150`}
       >
-        <div className=" absolute top-10 right-16">
+        <div className="absolute top-10 right-16">
           <XCircle
             className="text-gray-100 h-12 w-12 cursor-pointer transition-all hover:text-orange-300"
             size={28}
@@ -24,34 +24,35 @@ export function NavbarComponent() {
           />
         </div>
 
-        <div className=" text-4xl " onClick={() => setIsOpenMenu(false)}>
+        <div className="text-4xl " onClick={() => setIsOpenMenu(false)}>
           <NavigationComponent
             direction="col"
             gap="8"
             color="gray-100"
-            borderColor="border-ocean-blue"
+            borderColor="border-ocean-blue-900"
           />
         </div>
 
         {/* Navbar */}
         <header className=" py-4 px-6 bg-gray-300 drop-shadow-md md:px-20">
-          <nav className="flex items-center justify-between py-3 px-4">
+          <nav className="flex items-center justify-between py-2 px-4">
             <h3>Luis Felipe</h3>
 
             {/* Icone Mobile */}
             <div className="md:hidden">
               <CaretRight
                 size={28}
                 weight="bold"
-                className="h-8 w-7 text-ocean-blue cursor-pointer transition-all hover:text-orange-300"
+                className="h-8 w-8 text-ocean-blue-700 cursor-pointer transition-all hover:text-orange-300"
+                onClick={() => setIsOpenMenu(true)}
               />
             </div>
 
             {/* Navbar Desktop */}
-            <div className=" hidden md:block">
+            <div className="hidden md:block">
               <NavigationComponent
-                direction="row"
-                gap="8"
+                direction='row'
+                gap='8'
                 color="ocean-blue-700"
                 borderColor="border-gray-300"
               />

diff --git a/src/components/ProfileHero.tsx b/src/components/ProfileHero.tsx
@@ -1,45 +1,65 @@
+import React from "react";
 import Image from "next/image";
 import ProfileImage from '../assets/Hero.jpg';
-import Link from "next/link";
 import { ContactLinks } from "./ContactLinks";
-import { DiscordLogo, GithubLogo, LinkedinLogo } from "@phosphor-icons/react";
+import { DiscordLogo, DownloadSimple, GithubLogo, LinkedinLogo } from "@phosphor-icons/react";
+
 
 export function ProfileHeroComponent() {
+
+  function handleDownloadCvPdf() {
+    const url = '../../public/curriculo/Luis.pdf'
+    const path = document.createElement('a')
+    path.href = url;
+    path.download = 'luis.pdf';
+    path.click();
+  }
+
   return (
-    <div className="bg-neutral-50">
-      <div className="flex flex-col gap-8 min-h-[calc(100vh-80px)] items-center justify-center py-16 px-12 my-0 mx-auto text-center lg:flex-row lg:text-left md:max-w-6xl lg:gap-40">
+    <>
+      <div className="bg-slate-200">
+
+        <div className="flex flex-col gap-8 min-h-[calc(100vh-80px)] items-center justify-center py-16 px-12 my-0 mx-auto text-center lg:flex-row lg:text-left md:max-w-6xl lg:gap-40">
+
 
+          {/* Card Info */}
+          <div className="flex flex-col gap-3 order-2 lg:order-1 md:max-w-lg md:gap-16">
+            <div className="flex flex-col gap-4">
 
-        {/* Card Info */}
-        <div className="flex flex-col gap-3 order-2 lg:order-1 md:max-w-lg md:gap-16">
-          <div className="flex flex-col gap-4">
-            <h1 className="font-alt text-ocean-blue-700 text-3xl md:text-5xl lg:text-6xl">
-              Desenvolvedor Front-End e Mobile
-            </h1>
+              <h1 className="font-alt text-ocean-blue-700 text-3xl md:text-5xl lg:text-6xl">
+                Desenvolvedor Front-End e Mobile
+              </h1>
 
-            <p className=" text-ocean-blue-700 text-sm md:text-base">
-              Olá! me chamo Luís Felipe e sou desenvolvedor front-end e mobile, a baixo você irá ver minhas tecnologias e projetos que desenvolvi.
-            </p>
+              <p className="text-ocean-blue-700 text-sm md:text-base">
+                Olá! me chamo Luís Felipe e sou desenvolvedor front-end e mobile, a baixo você irá ver minhas tecnologias e projetos que desenvolvi.
+              </p>
+              <button onClick={handleDownloadCvPdf} className="flex items-center justify-center border-[1px] border-[#113657] px-8 py-2 rounded-lg gap-2 font-bold transition text-[#000] text-lg bg-ocean-blue-700 hover:bg-ocean-blue-300">
+                <DownloadSimple size={44} className="text-green-700" />
+                Download Currículo
+              </button>
+            </div>
           </div>
-        </div>
 
-        {/* Card Contact Links e Image */}
-        <div className='flex flex-col items-center justify-center gap-4 order-1 lg:order-2' >
-          <Image className="rounded-full  border-4 border-[#113657]" src={ProfileImage} alt='Profile' height={350} quality={80} priority />
+          {/* Card Contact Links e Image */}
+          <div className='flex flex-col items-center justify-center gap-4 order-1 lg:order-2' >
+            <Image className="rounded-full  border-4 border-[#113657]" src={ProfileImage} alt='Profile' height={350} quality={80} priority />
+
+            <div className='flex gap-4 items-center'>
+
+              <ContactLinks pathName="https://www.linkedin.com/in/luis-felipe-silv/">
+                <LinkedinLogo size={56} className='cursor-pointer text-ocean-blue-700 transition-all duration-200 hover:text-navy-blue-300' />
+              </ContactLinks>
 
-          <div className='flex gap-4 items-center'>
+              <ContactLinks pathName="https://github.com/GuilhaoF">
+                <GithubLogo size={56} className='cursor-pointer text-ocean-blue-700 transition-all duration-200 hover:text-navy-blue-300' />
+              </ContactLinks>
 
-            <ContactLinks pathName="https://www.linkedin.com/in/luis-felipe-silv/">
-              <LinkedinLogo size={56} className='cursor-pointer text-ocean-blue-700 transition-all duration-200 hover:text-navy-blue-300' />
-            </ContactLinks>
+              <ContactLinks pathName="/">
+                <DiscordLogo size={56} className='cursor-pointer text-ocean-blue-700 transition-all duration-200 hover:text-navy-blue-300' />
+              </ContactLinks>
 
-            <ContactLinks pathName="https://github.com/GuilhaoF">
-              <GithubLogo size={56} className='cursor-pointer text-ocean-blue-700 transition-all duration-200 hover:text-navy-blue-300' />
-            </ContactLinks>
+            </div>
 
-            <ContactLinks pathName="/">
-              <DiscordLogo size={56} className='cursor-pointer text-ocean-blue-700 transition-all duration-200 hover:text-navy-blue-300' />
-            </ContactLinks>
 
           </div>
 
@@ -48,8 +68,6 @@ export function ProfileHeroComponent() {
 
 
       </div>
-
-
-    </div>
+    </>
   );
 }