Version 1.0.0

.github/workflows/main.yml

@@ -21,6 +21,7 @@ jobs:
           aws-region: ${{ env.AWS_REGION }}
       - name: Install dependencies and build
         run: |
+          VITE_CV_PATH=${{secrets.VITE_CV_PATH}} 
           npm install
           npm run build
       - name: Deploy static site to S3 bucket

.gitignore

@@ -1,4 +1,5 @@
 # Logs
+.env
 logs
 *.log
 npm-debug.log*

README.md

@@ -12,14 +12,14 @@ This repository contains code for Portfolio website created using React.
 
 ## Demo 🎥
 
-Check live demonstration <a href="https://main.d235v2ghujwmr7.amplifyapp.com/"><strong>here</strong></a>
+Check live demonstration <a href="https://portfolio.enikosoft.com/"><strong>here</strong></a>
 
 
 ## Images of The Portfolio Website:
 ![React Portfolio Website](https://github.com/enikosoft/portfolio/blob/main/images/Screen1.png)
 ![React Portfolio Website](https://github.com/enikosoft/portfolio/blob/main/images/Screen2.png)
-![React Portfolio Website](https://github.com/enikosoft/portfolio/blob/main/images/Mob1.jpg)
-![React Portfolio Website](https://github.com/enikosoft/portfolio/blob/main/images/Mob2.jpg)
+![React Portfolio Website](https://github.com/enikosoft/portfolio/blob/main/images/Mob1.png)
+![React Portfolio Website](https://github.com/enikosoft/portfolio/blob/main/images/Mob2.png)
 
 ## Sections :bookmark:
 

index.html

@@ -8,7 +8,7 @@
     <link
       rel="preload"
       as="image"
-      href="https://eniko-portfolio.s3.eu-west-2.amazonaws.com/photoe.webp"
+      href="https://evgennikolenko-data.s3.eu-west-2.amazonaws.com/photo.webp"
     />
     <title>Portfolio</title>
   </head>

src/hooks/useDownloadPdf.tsx

@@ -0,0 +1,29 @@
+import {useEffect, useState} from 'react';
+
+export const useDownloadPdf = (pdfUrl: string, name?: string) => {
+  const [pdf, setPdf] = useState<Blob | null>(null);
+
+  useEffect(() => {
+    fetch(pdfUrl)
+      .then((response) => response.blob())
+      .then((blob) => setPdf(blob))
+      .catch((error) => console.error('Error loading PDF:', error));
+  }, []);
+
+  const handleDownload = () => {
+    if (pdf) {
+      const url = URL.createObjectURL(pdf);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = name || 'file.pdf';
+
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      URL.revokeObjectURL(url);
+    }
+  };
+
+  return [handleDownload];
+};

src/index.css

@@ -38,7 +38,7 @@
 
 @layer utilities {
   .page-wrapper {
-    height: calc(100svh - 124px);
+    height: calc(100svh - 121px);
     overflow: auto;
     padding-bottom: 24px;
     overflow-x: hidden;

src/screens/Layout.tsx

@@ -27,7 +27,7 @@ export const Layout = () => {
             <TabBar mobileAndTablet={mobileAndTablet} />
 
             <main className="page-wrapper px-4 pt-4 sm:px-8">
-              <Suspense fallback={<div>loading...</div>}>
+              <Suspense fallback={<div></div>}>
                 <Outlet />
               </Suspense>
             </main>

src/screens/contact/Contact.tsx

@@ -63,9 +63,6 @@ export const Contact = () => {
             </p>
           ))}
           <p className="line-contact text-xl text-primaryColor">{'}'}</p>
-          <button title="send email" className="btn mt-8 block lg:m-auto">
-            Send Email
-          </button>
         </div>
       </div>
     </div>

src/screens/home/Home.tsx

@@ -1,23 +1,23 @@
+import {useDownloadPdf} from 'hooks/useDownloadPdf';
 import {AppContext, AppContextInterface} from 'providers/application';
 import {useContext} from 'react';
-import {Link, useLocation, useNavigate} from 'react-router-dom';
+import {useLocation, useNavigate} from 'react-router-dom';
 import {TypeAnimation} from 'react-type-animation';
 
-import pdf from 'assets/EvgenNikolenko-JSdev.pdf';
-
 export const Home = () => {
   const navigate = useNavigate();
   const {pathname} = useLocation();
-
   const {setPdfPreviewerOpen} = useContext(AppContext) as AppContextInterface;
 
   const handleShowCV = () => {
     setPdfPreviewerOpen(true);
     navigate('/cv', {state: {historyPath: pathname}});
   };
 
+  const [handleDownload] = useDownloadPdf(import.meta.env.VITE_CV_PATH, 'Evgen-Nikolenko-FullStack-CV.pdf');
+
   return (
-    <div className="flex flex-col-reverse items-center justify-center sm:px-20 lg:pb-40 xl:flex-row xl:pb-0 xl:pt-20">
+    <div className="flex flex-col-reverse items-center justify-center sm:px-10 lg:pb-40 xl:flex-row xl:pb-0 xl:pt-20">
       <div className="flex w-full flex-col items-center py-10 text-xl xl:w-1/2 xl:items-end">
         <div className="w-fit">
           <p className="text-xl text-themePrimaryColor">
@@ -41,9 +41,13 @@ export const Home = () => {
             repeat={Infinity}
           />
           <div className="mt-10 flex w-full flex-col sm:flex-row">
-            <Link title="download cv" to={pdf} target="_blank" download>
-              <button className="btn mb-8 mr-10 w-full rounded px-12 py-4 sm:mb-0 sm:w-fit">Download CV</button>
-            </Link>
+            <button
+              title="download cv"
+              onClick={handleDownload}
+              className="btn mb-8 mr-10 w-full rounded px-12 py-4 sm:mb-0 sm:w-fit"
+            >
+              Download CV
+            </button>
 
             <button
               title="open cv"
@@ -59,7 +63,7 @@ export const Home = () => {
         <img
           className="h-[300px] w-[215px] md:h-[400px] md:w-[286px] xl:h-[500px] xl:w-[358px]"
           loading="lazy"
-          src="https://eniko-portfolio.s3.eu-west-2.amazonaws.com/photoe.webp"
+          src="https://evgennikolenko-data.s3.eu-west-2.amazonaws.com/photo.webp"
           alt="myPhoto"
         />
       </div>

src/screens/pdfPreviewer/PdfPreviewer.tsx

@@ -6,9 +6,9 @@ import {BsArrowsFullscreen} from 'react-icons/bs';
 import {LuZoomIn, LuZoomOut} from 'react-icons/lu';
 
 import pdf from 'assets/EvgenNikolenko-JSdev.pdf';
+import {useDownloadPdf} from 'hooks/useDownloadPdf';
 import {IoMdDownload} from 'react-icons/io';
 import {useMediaQuery} from 'react-responsive';
-import {Link} from 'react-router-dom';
 import {mediaBreakpoints} from 'responsive';
 
 export const PdfPriever = () => {
@@ -23,6 +23,7 @@ export const PdfPriever = () => {
     query: `(max-width: ${mediaBreakpoints.sm}px)`,
   });
 
+  const [handleDownload] = useDownloadPdf(import.meta.env.VITE_CV_PATH, 'Evgen-Nikolenko-FullStack-CV.pdf');
   return (
     <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
       <div className="h-full overflow-hidden p-2">
@@ -31,11 +32,9 @@ export const PdfPriever = () => {
             {(props: RenderEnterFullScreenProps) => (
               <>
                 {mobile ? (
-                  <Link to={pdf} target="_blank" download>
-                    <button title="download" className="btn mb-2 mr-2 h-8">
-                      <IoMdDownload />{' '}
-                    </button>
-                  </Link>
+                  <button onClick={handleDownload} title="download" className="btn mb-2 mr-2 h-8">
+                    <IoMdDownload />{' '}
+                  </button>
                 ) : (
                   <button title="fullscreen" className="btn mb-2 mr-2 h-8" onClick={props.onClick}>
                     <BsArrowsFullscreen />

src/screens/projects/Projects.tsx

@@ -2,8 +2,7 @@ import {useState} from 'react';
 import ProjectCard from './ProjectCard';
 import {comerciaProjects, customProjects} from './utils';
 
-import pdf from 'assets/EvgenNikolenko-JSdev.pdf';
-import {Link} from 'react-router-dom';
+import {useDownloadPdf} from 'hooks/useDownloadPdf';
 
 export const Projects = () => {
   const data = [
@@ -18,6 +17,8 @@ export const Projects = () => {
   ];
   const [activeTab, setActiveTab] = useState(data[0].value);
 
+  const [handleDownload] = useDownloadPdf(import.meta.env.VITE_CV_PATH, 'Evgen-Nikolenko-FullStack-CV.pdf');
+
   return (
     <>
       <div className="flex w-full flex-col items-center justify-center sm:px-1">
@@ -62,11 +63,9 @@ export const Projects = () => {
       </>
       <div className="mt-12 w-full">
         <i className="fond-light pr-4 text-lg text-primaryColor">More information</i>
-        <Link to={pdf} target="_blank" download>
-          <button title="Download cv" className="btn">
-            Download CV
-          </button>
-        </Link>{' '}
+        <button onClick={handleDownload} title="Download cv" className="btn">
+          Download CV
+        </button>
       </div>
     </>
   );

src/screens/technologies/Technologies.tsx

@@ -1,9 +1,10 @@
-import {Link} from 'react-router-dom';
 import {skillset} from './utils';
 
-import pdf from 'assets/EvgenNikolenko-JSdev.pdf';
+import {useDownloadPdf} from 'hooks/useDownloadPdf';
 
 export const Technologies = () => {
+  const [handleDownload] = useDownloadPdf(import.meta.env.VITE_CV_PATH, 'Evgen-Nikolenko-FullStack-CV.pdf');
+
   return (
     <div className="flex w-full flex-col items-center justify-center sm:px-1">
       <div className="flex flex-row items-center pb-6 pt-4 align-middle">
@@ -50,11 +51,9 @@ export const Technologies = () => {
 
       <div className="mt-12 w-full">
         <i className="fond-light pr-4 text-lg text-primaryColor">More information</i>
-        <Link to={pdf} target="_blank" download>
-          <button title="Download cv" className="btn">
-            Download CV
-          </button>
-        </Link>
+        <button onClick={handleDownload} title="Download cv" className="btn">
+          Download CV
+        </button>
       </div>
     </div>
   );