adddd

.eslintrc.js

@@ -9,7 +9,6 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'prettier',
   ],

.eslintrc.json

@@ -28,18 +28,18 @@
       "error",
       2,
       {
-          "CallExpression": {
-              "arguments": "first"
-          },
-          "FunctionDeclaration": {
-              "parameters": "first"
-          },
-          "FunctionExpression": {
-              "parameters": "first"
-          },
-          "offsetTernaryExpressions": true
+        "CallExpression": {
+          "arguments": "first"
+        },
+        "FunctionDeclaration": {
+          "parameters": "first"
+        },
+        "FunctionExpression": {
+          "parameters": "first"
+        },
+        "offsetTernaryExpressions": true
       }
-  ],
+    ],
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "single", { "avoidEscape": true }],
     "semi": ["error", "always"],

.gitignore

@@ -247,4 +247,6 @@ node_modules
 node_modules/
 portfolio-prep.git/
 portfolio-prep.git.bfg-report/
+.vscode/
+dist/
 

README.md

@@ -10,6 +10,8 @@ I developed it using React.js as the main framework, applying its powerful featu
 
 For handling user authentication and data protection, I employed the Auth0 authentication service, ensuring that user data remains secure. All these technologies come together to create a dynamic, responsive, and user-friendly portfolio website that effectively highlights my skills and experiences as a software developer.
 
+<img src="public/home.png" width="33%" alt="Homepage">
+
 ## Features
 
 This portfolio project encompasses a wide array of features, offering visitors an in-depth look at my experience and skills. These features include:
@@ -36,20 +38,20 @@ This portfolio project encompasses a wide array of features, offering visitors a
 
 By exploring the portfolio, visitors gain a comprehensive understanding of my abilities as a software developer and the quality of my work. The portfolio's diverse range of features ensures an engaging, interactive, and user-friendly experience for all users.
 
-Apologies for the confusion earlier. The code blocks should indeed have a specified language for better syntax highlighting and readability. Here's the corrected version:
-
 ## Installation
 
 Before you can run this project locally, you'll need to have Node.js and npm (which comes with Node.js) installed on your computer. After you've confirmed that you have Node and npm installed, you can take the following steps to install and run this project:
 
 1. **Clone the Repository**
+
    - Open your terminal and use `git clone` to clone this repository. Run the command:
 
      ```bash
      git clone https://github.com/reedoooo/portfolio-prep
      ```
 
 2. **Navigate to the Project Directory**
+
    - After cloning the repository, navigate to the project directory by running:
 
      ```bash
@@ -67,6 +69,7 @@ Before you can run this project locally, you'll need to have Node.js and npm (wh
      This command will install all the dependencies listed in the `package.json` file.
 
 4. **Run the Project**
+
    - After you've installed all of the dependencies, you can run the project locally by using the following command:
 
      ```bash
@@ -79,7 +82,7 @@ The following scripts are available to help with the project's development:
 
 - `npm run build`: Builds the app for production to the `build` folder.
 - `npm run test`: Launches the test runner in the interactive watch mode.
-- `npm run eject`: This command will remove the single build dependency from your project. Note: this is a one-way operation. Once you `eject`, you can’t go back!
+- `npm run eject`: This command will remove the single build dependency from your project. Note: this is a one-way operation. Once you `eject`, you can’t go back!
 - `npm run predeploy`: Run the build script before deploying.
 - `npm run deploy`: Deploys the app to GitHub pages.
 
@@ -101,6 +104,10 @@ While this project is primarily a personal portfolio project, I welcome bug repo
 4. Push to the Branch (`git push origin feature/AmazingFeature`)
 5. Open a Pull Request
 
+# Attributions
+
+- Background Image: [https://unsplash.com/photos/iIJrUoeRoCQ?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink](https://unsplash.com/photos/iIJrUoeRoCQ?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink)
+
 ## License
 
 Distributed under the MIT License. See `LICENSE` for more information.

_redirects

@@ -0,0 +1 @@
+/*  /home  200

package.json

@@ -44,6 +44,7 @@
     "jwt-decode": "^3.1.2",
     "mongoose": "^7.3.1",
     "node-sass": "^9.0.0",
+    "pdfjs-dist": "^3.9.179",
     "postcss": "^8.4.25",
     "react": "^18.2.0",
     "react-awesome-slider": "^4.1.0",

src/assets/styles/App.scss

@@ -1,5 +1,7 @@
 @import '~react-pdf/dist/esm/Page/AnnotationLayer.css';
 @import '~react-pdf/dist/esm/Page/TextLayer.css';
+// <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap" rel="stylesheet">
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap');
 
 html {
   z-index: 1;
@@ -13,7 +15,7 @@ main {
 }
 
 .bg {
-  background: url('../images/bg2.jpg') no-repeat;
+  background: url('../images/bg4.jpg') no-repeat;
   background-size: cover;
   height: 100%;
   width: 100%;
@@ -624,7 +626,7 @@ button:focus {
 .home-section {
   position: relative;
   z-index: -1;
-  background-image: var(--image-gradient), url('../images/bg2.jpg');
+  background-image: var(--image-gradient), url('../images/bg4.jpg');
   background-position: top center;
   background-repeat: no-repeat;
   padding-bottom: 30px !important;
@@ -812,7 +814,7 @@ button:focus {
 /* Projects */
 /* --------- */
 .project-section {
-  // background: url('../images/bg2.jpg') no-repeat;
+  // background: url('../images/bg4.jpg') no-repeat;
   position: relative !important;
   padding-top: 150px !important;
   padding-bottom: 30px !important;
@@ -923,12 +925,12 @@ button:focus {
   margin: 15px !important;
   padding: 10px !important;
   opacity: 0.93 !important;
-  border: 1.7px solid rgba(200, 137, 230, 0.637) !important;
+  border: 1.7px solid rgba(49, 151, 149, 0.673) !important;
   vertical-align: middle !important;
   text-align: center !important;
   border-radius: 5px !important;
   display: table !important;
-  box-shadow: 4px 5px 4px 3px rgba(89, 4, 168, 0.137) !important;
+  box-shadow: 4px 5px 4px 3px rgba(49, 151, 149, 0.173) !important;
   overflow: hidden !important;
   transition: all 0.4s ease 0s !important;
 }
@@ -942,8 +944,11 @@ button:focus {
 .tech-icons:hover {
   transform: scale(1.05) !important;
   overflow: hidden !important;
-  border: 2.2px solid rgba(197, 115, 230, 0.883) !important;
+  border: 1.7px solid rgba(79, 183, 179, 0.673) !important;
+  box-shadow: 0 0 15px rgba(79, 183, 179, 0.8), 0 0 25px rgba(79, 183, 179, 0.8),
+    0 0 35px rgba(79, 183, 179, 0.8), 0 0 45px rgba(79, 183, 179, 1);
 }
+
 .tech-icon-images {
   padding: 20px !important;
   line-height: 1.6 !important;
@@ -1199,7 +1204,7 @@ button:focus {
   height: 100%;
   width: 100%;
   background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(5px);
+  // backdrop-filter: blur(5px);
   border-radius: 10px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transition: width 0.3s ease;

src/assets/styles/Colors.js

@@ -0,0 +1,50 @@
+module.exports = {
+  brand: {
+    50: '#f2f8ff',
+    100: '#c7e2fe',
+    200: '#9ecbfe',
+    300: '#71a9fe',
+    400: '#4294fe',
+    500: '#0080fe',
+    600: '#0064c7',
+    700: '#004899',
+    800: '#002c66',
+    900: '#001342',
+  },
+  secondary: {
+    50: '#f2f2f2',
+    100: '#d9d9d9',
+    200: '#bfbfbf',
+    300: '#a6a6a6',
+    400: '#8c8c8c',
+    500: '#737373',
+    600: '#595959',
+    700: '#404040',
+    800: '#262626',
+    900: '#0d0d0d',
+  },
+  tertiary: {
+    50: '#FFF5F2',
+    100: '#FFE4D9',
+    200: '#FFD1BF',
+    300: '#FFBFA5',
+    400: '#FFAC8C',
+    500: '#FF9972',
+    600: '#CC7A5A',
+    700: '#995C42',
+    800: '#663D2A',
+    900: '#332013',
+  },
+  quaternary: {
+    50: '#319795',
+    100: '#2C878B',
+    200: '#267A7E',
+    300: '#206D70',
+    400: '#1A6063',
+    500: '#145356',
+    600: '#0E4649',
+    700: '#08393C',
+    800: '#022C2F',
+    900: '#001F22',
+  },
+};

src/assets/styles/Variables.scss

@@ -0,0 +1,45 @@
+:root {
+  --brand-50: #f2f8ff;
+  --brand-100: #c7e2fe;
+  --brand-200: #9ecbfe;
+  --brand-300: #71a9fe;
+  --brand-400: #4294fe;
+  --brand-500: #0080fe;
+  --brand-600: #0064c7;
+  --brand-700: #004899;
+  --brand-800: #002c66;
+  --brand-900: #001342;
+
+  --secondary-50: #f2f2f2;
+  --secondary-100: #d9d9d9;
+  --secondary-200: #bfbfbf;
+  --secondary-300: #a6a6a6;
+  --secondary-400: #8c8c8c;
+  --secondary-500: #737373;
+  --secondary-600: #595959;
+  --secondary-700: #404040;
+  --secondary-800: #262626;
+  --secondary-900: #0d0d0d;
+
+  --tertiary-50: #FFF5F2;
+  --tertiary-100: #FFE4D9;
+  --tertiary-200: #FFD1BF;
+  --tertiary-300: #FFBFA5;
+  --tertiary-400: #FFAC8C;
+  --tertiary-500: #FF9972;
+  --tertiary-600: #CC7A5A;
+  --tertiary-700: #995C42;
+  --tertiary-800: #663D2A;
+  --tertiary-900: #332013;
+
+  --quaternary-50: #319795;
+  --quaternary-100: #2C878B;
+  --quaternary-200: #267A7E;
+  --quaternary-300: #206D70;
+  --quaternary-400: #1A6063;
+  --quaternary-500: #145356;
+  --quaternary-600: #0E4649;
+  --quaternary-700: #08393C;
+  --quaternary-800: #022C2F;
+  --quaternary-900: #001F22;
+}

src/assets/theme.js

@@ -26,6 +26,43 @@ const theme = extendTheme({
       800: '#262626',
       900: '#0d0d0d',
     },
+    // tertiary: {
+    //   50: '#FFF5F2',
+    //   100: '#FFE4D9',
+    //   200: '#FFD1BF',
+    //   300: '#FFBFA5',
+    //   400: '#FFAC8C',
+    //   500: '#FF9972',
+    //   600: '#CC7A5A',
+    //   700: '#995C42',
+    //   800: '#663D2A',
+    //   900: '#332013',
+    // },
+    tertiary: {
+      50: '#66d3cf', // Light cyan
+      100: '#57c9c6', // Light cyan 2
+      200: '#47bfbf', // Light Caribbean current
+      300: '#37b5b8', // Light Caribbean current 2
+      400: '#28abaf', // Light Midnight green
+      500: '#18a1a6', // Light Indigo dye
+      600: '#08968f', // Light Berkeley blue
+      700: '#008c79', // Light Oxford blue
+      800: '#008163', // Light Penn blue
+      900: '#00774e', // Light greenish-blue
+    },
+
+    quaternary: {
+      50: '#319795', // Dark cyan
+      100: '#2C878B', // Dark cyan 2
+      200: '#267A7E', // Adjusted Caribbean current
+      300: '#206D70', // Adjusted Caribbean current 2
+      400: '#1A6063', // Adjusted Midnight green
+      500: '#145356', // Adjusted Indigo dye
+      600: '#0E4649', // Adjusted Berkeley blue
+      700: '#08393C', // Adjusted Oxford blue
+      800: '#022C2F', // Adjusted Penn blue
+      900: '#001F22', // Very dark greenish-blue
+    },
   },
   styles: {
     global: {

src/components/Loader/Loading.js

@@ -0,0 +1,5 @@
+import { Spinner } from '@chakra-ui/react';
+
+const Loading = () => <Spinner size="xl" />;
+
+export default Loading;

src/components/PDFViewer.js

@@ -0,0 +1,16 @@
+// PdfViewer.js
+import React from 'react';
+import { Document, Page } from 'react-pdf';
+import { Box } from '@chakra-ui/react';
+
+const PDFViewer = ({ file, scale }) => (
+  <Box display="flex" justifyContent="center">
+    {file && (
+      <Document file={file}>
+        <Page pageNumber={1} scale={scale} />
+      </Document>
+    )}
+  </Box>
+);
+
+export default PDFViewer;

src/components/buttons/ButtonContainer.js

@@ -0,0 +1,21 @@
+// ButtonContainer.js
+import React from 'react';
+import { Button, Box, Link } from '@chakra-ui/react';
+import { AiOutlineDownload } from 'react-icons/ai';
+
+const ButtonContainer = ({ resumeLink, buttonText }) => (
+  <Box textAlign="center" my={5}>
+    <Link href={resumeLink} isExternal>
+      <Button
+        colorScheme="quaternary"
+        leftIcon={<AiOutlineDownload />}
+        variant="solid"
+        size="lg"
+      >
+        {buttonText}
+      </Button>
+    </Link>
+  </Box>
+);
+
+export default ButtonContainer;

src/components/buttons/ResumeButtonContainer.js

@@ -0,0 +1,21 @@
+// ButtonContainer.js
+import React from 'react';
+import { Button, Box, Link } from '@chakra-ui/react';
+import { AiOutlineDownload } from 'react-icons/ai';
+
+const ResumeButtonContainer = ({ resumeLink }) => (
+  <Box textAlign="center" my={5}>
+    <Link href={resumeLink} isExternal>
+      <Button
+        colorScheme="quaternary"
+        leftIcon={<AiOutlineDownload />}
+        variant="solid"
+        size="lg"
+      >
+        Download CV
+      </Button>
+    </Link>
+  </Box>
+);
+
+export default ResumeButtonContainer;