Merge pull request #26 from reedoooo/webWorks

.eslintrc.json

@@ -20,7 +20,7 @@
     "sourceType": "module",
     "ecmaVersion": 2018
   },
-  "plugins": ["react", "@typescript-eslint", "prettier", "prettier-eslint"],
+  "plugins": ["react", "@typescript-eslint", "prettier"],
   "rules": {
     "no-console": "off",
     "indent": ["error", 2],

package.json

@@ -75,7 +75,8 @@
     "eject": "react-scripts eject",
     "postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css",
     "predeploy": "npm runrun build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "lint": "eslint src/**/*.{js,jsx}"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -98,13 +99,16 @@
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "@iconify/icons-logos": "^1.2.33",
     "@iconify/react": "^4.1.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^3.4.1",
     "gh-pages": "^5.0.0",
     "mini-css-extract-plugin": "^2.7.6",
     "prettier": "^2.3.2",
+    "prettier-eslint": "^15.0.1",
     "purgecss": "^5.0.0",
     "sass": "^1.63.6",
     "tailwindcss": "^3.3.2"

src/__tests__/Main.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen, act, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Main from '../containers/Main';
+
+describe('<Main />', () => {
+  afterEach(cleanup);
+
+  it('should render Splash component while loading', () => {
+    jest.useFakeTimers();
+    render(<Main onLogin={() => {}} />);
+    expect(
+      screen.getByText(/Loading text from Splash component/),
+    ).toBeInTheDocument(); // Replace with actual text or element from Splash component
+    jest.runAllTimers();
+  });
+
+  it('should render NavBar and routing after loading', async () => {
+    jest.useFakeTimers();
+    render(<Main onLogin={() => {}} />);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(screen.getByText(/Text or element from NavBar/)).toBeInTheDocument(); // Replace with actual text or element from NavBar
+  });
+
+  // More tests can be added as necessary, for example, testing specific routes, or specific behaviors.
+});

src/assets/theme.js

@@ -143,4 +143,6 @@ const theme = extendTheme({
   },
 });
 
+export { theme };
+
 export default theme;

src/components/modals/Modal_ProjectDetails.js

@@ -1,103 +1,144 @@
-import React from 'react';
-import { Modal } from 'react-bootstrap';
+import React, { useContext } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  Box,
+  Link,
+  Text,
+  List,
+  ListItem,
+  Badge,
+  VStack,
+  Image,
+  HStack,
+  Center,
+  Flex,
+} from '@chakra-ui/react';
+import { FaGithub, FaExternalLinkAlt } from 'react-icons/fa';
+import * as FaIcons from 'react-icons/fa';
+import * as MdIcons from 'react-icons/md';
+import { ProjectContext } from '../../context/ProjectContext';
+import { useResumeContext } from '../../context/ResumeContext';
 
-const ProjectDetailsModal = ({ onHide, profileData, projects }) => {
-  console.log(profileData);
+const getIconComponent = (iconName) => {
+  if (FaIcons[iconName]) {
+    return FaIcons[iconName];
+  }
+  if (MdIcons[iconName]) {
+    return MdIcons[iconName];
+  }
+  return null;
+};
 
-  let technologies, title, description, url, tech;
+const ProjectDetailsModal = () => {
+  const { detailsModalShow, closeDetailsModal, detailsModalData } =
+    useContext(ProjectContext);
+  const { allIcons } = useResumeContext();
 
-  if (projects) {
-    technologies = projects.technologies;
-    title = projects.title;
-    description = projects.description;
-    url = projects.url;
+  const tech = detailsModalData?.technologies?.map((iconDetail, i) => {
+    // Get the actual React component from our mapping using the class field
+    const IconComponent = allIcons[iconDetail.class];
 
-    if (projects.technologies) {
-      tech = technologies.map((icons, i) => (
-        <li className="list-inline-item mx-3" key={i}>
-          <span>
-            <div className="text-center">
-              <i className={icons.class} style={{ fontSize: '300%' }}>
-                <p className="text-center" style={{ fontSize: '30%' }}>
-                  {icons.name}
-                </p>
-              </i>
-            </div>
-          </span>
-        </li>
-      ));
-    }
-  }
+    return (
+      <ListItem key={i} mx={3} textAlign="center">
+        {IconComponent && <Box as={IconComponent} boxSize={12} />}
+        <Text fontSize="xs" mt={2}>
+          {iconDetail.name}
+        </Text>
+      </ListItem>
+    );
+  });
 
   return (
     <Modal
-      onHide={onHide}
+      isOpen={detailsModalShow}
+      onClose={closeDetailsModal}
       size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      className="modal-inside"
-      zIndex={9999}
+      isCentered
     >
-      <span onClick={onHide} className="modal-close">
-        <i className="fas fa-times fa-3x close-icon"></i>
-      </span>
-      <div className="col-md-12">
-        <div className="col-md-10 mx-auto" style={{ paddingBottom: '50px' }}>
-          <div className="slider-tab">
-            <span
-              className="iconify slider-iconfiy"
-              data-icon="emojione:red-circle"
-              data-inline="false"
-              style={{ marginLeft: '5px' }}
-            ></span>{' '}
-            &nbsp;{' '}
-            <span
-              className="iconify slider-iconfiy"
-              data-icon="twemoji:yellow-circle"
-              data-inline="false"
-            ></span>{' '}
-            &nbsp;{' '}
-            <span
-              className="iconify slider-iconfiy"
-              data-icon="twemoji:green-circle"
-              data-inline="false"
-            ></span>
-          </div>
-        </div>
-        <div className="col-md-10 mx-auto">
-          <h3 style={{ padding: '5px 5px 0 5px' }}>
-            {title}
-            {url ? (
-              <a
-                href={url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="link-href"
-              >
-                <i
-                  className="fas fa-external-link-alt"
-                  style={{ marginLeft: '10px' }}
-                ></i>
-              </a>
-            ) : null}
-          </h3>
-          <p
-            className="modal-description"
-            style={{
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              display: '-webkit-box',
-              WebkitLineClamp: 3,
-              WebkitBoxOrient: 'vertical',
-            }}
+      <ModalOverlay />
+      <ModalContent bg="gray.800" color="white" borderRadius="2xl">
+        <ModalCloseButton />
+        <ModalHeader fontFamily="'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">
+          <Flex justify="center" align="start" direction="column">
+            <Badge colorScheme="blue">{detailsModalData?.startDate}</Badge>
+            <Text
+              fontSize="2xl"
+              fontWeight="bold"
+              borderBottom="2px solid"
+              borderColor="blue.400"
+              pb={2}
+            >
+              {detailsModalData?.title}
+            </Text>
+          </Flex>
+          <Center mt={4}>
+            <HStack spacing={4}>
+              {detailsModalData?.url && (
+                <Link href={detailsModalData.url} isExternal color="blue.400">
+                  <HStack spacing={2}>
+                    <FaExternalLinkAlt size={24} />
+                    <Text>View Live</Text>
+                  </HStack>
+                </Link>
+              )}
+              {detailsModalData?.readmeurl && (
+                <Link
+                  href={detailsModalData.readmeurl}
+                  isExternal
+                  color="green.400"
+                >
+                  <HStack spacing={2}>
+                    <FaGithub size={24} />
+                    <Text>View on GitHub</Text>
+                  </HStack>
+                </Link>
+              )}
+            </HStack>
+          </Center>
+        </ModalHeader>
+
+        <Box p={6}>
+          <Text
+            mb={6}
+            fontSize="md"
+            isTruncated
+            noOfLines={5}
+            borderBottom="1px solid"
+            borderColor="gray.600"
+            pb={4}
+          >
+            {detailsModalData?.description}
+          </Text>
+          <Box mb={6}>
+            {detailsModalData?.images?.map((imgSrc, idx) => (
+              <Image
+                key={idx}
+                src={imgSrc + '.png'}
+                alt={`Project image ${idx}`}
+                borderRadius="md"
+                my={2}
+                boxShadow="xl"
+              />
+            ))}
+          </Box>
+          <Box
+            textAlign="center"
+            mt={4}
+            borderBottom="1px solid"
+            borderColor="gray.600"
+            pb={4}
           >
-            {description}
-          </p>{' '}
-          <div className="col-md-12 text-center">
-            <ul className="list-inline mx-auto">{tech}</ul>
-          </div>
-        </div>
-      </div>
+            <Text fontSize="lg" mb={4}>
+              Technologies Used:
+            </Text>
+            <List display="inline-flex">{tech}</List>
+          </Box>
+        </Box>
+      </ModalContent>
     </Modal>
   );
 };

src/components/paragraph/ProfileDescription.js

@@ -18,7 +18,7 @@ const ProfileDescription = () => {
       zIndex={'100'}
       textAlign={'center'}
       justifyContent={'center'}
-      lineHeight="1.2" // Increased line spacing
+      lineHeight="1.2"
     >
       <Heading as="h2" size="xl" textAlign={'center'}>
         <Text fontStyle="italic" textAlign={'center'}>
@@ -33,12 +33,12 @@ const ProfileDescription = () => {
             onClick={redirectToLinkedIn}
             color="teal.500"
             fontWeight="bold"
-            fontSize="1.2em" // Increased font size
-            textDecoration="none" // Removed underline
+            fontSize="1.2em"
+            textDecoration="none"
             _hover={{
               color: 'blue.500',
-              transform: 'scale(1.2)', // Added a zoom effect on hover
-              transition: 'all 0.3s ease', // Smooth transition effect
+              transform: 'scale(1.2)',
+              transition: 'all 0.3s ease',
             }}
           >
             let&apos;s connect <Icon as={BsLinkedin} boxSize={8} ml={2} p={1} />{' '}