Add theme

src/Components/Intro/Introduction.jsx

@@ -6,6 +6,7 @@ import { useContext } from 'react';
 import ResumeContext from '../../Context/ResumeContext';
 import ThemeTemplateData from '../../db/ThemeTemplateData';
 import { Helmet } from 'react-helmet';
+// import a from "../../Assets/image5.png"
 
 export default function Introduction() {
     const { selectBtn, setSelectBtn, setCurrentTheme, showComponent, setShowComponent } = useContext(ResumeContext);

src/Context/ResumeState.js

@@ -53,7 +53,7 @@ const ResumeState = (props) => {
     const [showComponent, setShowComponent] = useState(false);
     const [currentTheme, setCurrentTheme] = useState('Theme1');
     const [selectBtn, setSelectBtn] = useState(true)
-
+    
 
     return (
         <ResumeContext.Provider value={{ initialData, selectBtn, setSelectBtn, checkAward, setCheckAward, componentRef, handlePrint, currentTheme, setCurrentTheme, showComponent, setShowComponent, loading, setLoading, themeData, setThemeData, checkProj, checkWork, setCheckProj, setCheckWork }}>

src/Pages/BuilderArea.jsx

@@ -19,7 +19,7 @@ const BuilderArea = (props) => {
 
             <div id='main-box' className="d-flex justify-content-between flex-wrap mt-4 mx-2">
                 <UserDataCollect />
-                <div id='theme-box-border'>
+                <div id='theme-box-border flex-1'>
                     {props.theme}
                 </div>
             </div>

src/Pages/Home/Home.jsx

@@ -6,29 +6,61 @@ import Theme1 from './../../Theme/Theme1/Theme1'
 import Theme2 from '../../Theme/Theme2/Theme2';
 import Theme3 from '../../Theme/Theme3/Theme3';
 import ErrorPage from '../Error/ErrorPage';
+import Theme4 from '../../Theme/Theme4/Theme4';
+import Theme5 from '../../Theme/Theme5/Theme5';
+import Theme6 from '../../Theme/Theme6/Theme6';
+import Theme7 from '../../Theme/Theme7/Theme7';
+import Theme8 from '../../Theme/Them8/Theme8';
 
 const Home = () => {
     const { currentTheme, showComponent, themeData, componentRef } = useContext(ResumeContext);
 
     return (
-        <>
-            {
-                !showComponent && <Introduction />
-            }
-            {
-                (showComponent && currentTheme === 'Theme1') && <BuilderArea theme={<Theme1 componentRef={componentRef} themeData={themeData} />} />
-            }
-            {
-                (showComponent && currentTheme === 'Theme2') && <BuilderArea theme={<Theme2 componentRef={componentRef} themeData={themeData} />} />
-            }
-            {
-                (showComponent && currentTheme === 'Theme3') && <BuilderArea theme={<Theme3 componentRef={componentRef} themeData={themeData} />} />
-            }
-            {
-                (showComponent && currentTheme === 'Theme4') && <ErrorPage />
-            }
-        </>
-    )
+      <>
+        {!showComponent && <Introduction />}
+        {showComponent && currentTheme === "Theme1" && (
+          <BuilderArea
+            theme={<Theme1 componentRef={componentRef} themeData={themeData} />}
+          />
+        )}
+        {showComponent && currentTheme === "Theme2" && (
+          <BuilderArea
+            theme={<Theme2 componentRef={componentRef} themeData={themeData} />}
+          />
+        )}
+        {showComponent && currentTheme === "Theme3" && (
+          <BuilderArea
+            theme={<Theme3 componentRef={componentRef} themeData={themeData} />}
+          />
+        )}
+        {showComponent && currentTheme === "Theme4" && (
+          <BuilderArea
+            theme={<Theme4 componentRef={componentRef} themeData={themeData} />}
+          />
+        )}
+        {showComponent && currentTheme === "Theme5" && (
+          <BuilderArea
+            theme={<Theme5 componentRef={componentRef} themeData={themeData} />}
+          />
+        )}
+        {showComponent && currentTheme === "Theme6" && (
+          <BuilderArea
+            theme={<Theme6 componentRef={componentRef} themeData={themeData} />}
+          />
+        )}
+        {showComponent && currentTheme === "Theme7" && (
+          <BuilderArea
+            theme={<Theme7 componentRef={componentRef} themeData={themeData} />}
+          />
+        )}
+        {showComponent && currentTheme === "Theme8" && (
+          <BuilderArea
+            theme={<Theme8 componentRef={componentRef} themeData={themeData} />}
+          />
+        )}
+        {showComponent && currentTheme === "Theme9" && <ErrorPage />}
+      </>
+    );
 }
 
 export default Home

src/Theme/Them8/Theme8.css

@@ -0,0 +1,72 @@
+/* theme8.css */
+
+#theme8 {
+  background-color: #f8f9fa;
+  color: #343a40;
+  font-family: 'Roboto', sans-serif;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+#info {
+  border-bottom: 2px solid #007bff;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.info-text h2 {
+  color: #007bff;
+  margin-bottom: 10px;
+}
+
+.info-text p {
+  margin: 5px 0;
+  color: #6c757d;
+}
+
+.summary-text {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.border {
+  border-bottom: 1px solid #dee2e6;
+  margin: 20px 0;
+}
+
+.partition-1,
+.partition-2 {
+  width: 48%;
+}
+
+.bottom-part {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bottom-part .sub-details {
+  margin-left: 20px;
+}
+
+.sub-details li {
+  margin-bottom: 5px;
+}
+
+.badge {
+  display: inline-block;
+  background-color: #007bff;
+  color: #fff;
+  border-radius: 10px;
+  padding: 5px 10px;
+  margin: 5px 0;
+  font-size: 0.9em;
+}
+
+@media print {
+  #theme8 {
+    box-shadow: none;
+  }
+}

src/Theme/Them8/Theme8.jsx

@@ -0,0 +1,170 @@
+import React, { useContext } from "react";
+import { Box, Text, Image, Heading, Badge } from "@chakra-ui/react";
+import "./Theme8.css";
+import ResumeContext from "../../Context/ResumeContext";
+
+const Theme8 = (props) => {
+  const { componentRef, themeData } = props;
+  const { name, address, phone, email, profile, profileImage, summary, skill } =
+    themeData.personalData;
+
+  const { checkProj, checkWork, checkAward } = useContext(ResumeContext);
+  const { projectTitles, projectDesc } = themeData.projectData;
+  const { educationTitles, educationDesc } = themeData.educationData;
+  const { workTitles, workDesc } = themeData.workData;
+  const { awards } = themeData.awardData;
+
+  return (
+    <Box id="section-to-print" ref={componentRef}>
+      <Box id="theme8">
+        <header id="info">
+          <Box className="info-text">
+            <Heading as="h2" size="xl" className="mb-2">
+              {name}
+            </Heading>
+            <Text fontWeight="500" fontSize="xl" className="mt-1 mb-2">
+              {profile}
+            </Text>
+            <Text fontSize="sm" className="summary-text">
+              {summary}
+            </Text>
+          </Box>
+          <Box>
+            <Image
+              id="resume-avatar"
+              borderRadius="full"
+              boxSize="150px"
+              src={profileImage}
+              alt="Profile Picture"
+            />
+          </Box>
+        </header>
+
+        <div className="w-100 border m-auto"></div>
+
+        <section className="bottom-part mt-3">
+          <section className="partition-1">
+            <Box>
+              <Heading fontSize="2xl" className="my-2">
+                Contact
+              </Heading>
+              <Box className="mt-3">
+                <Heading fontSize="md" className="my-2">
+                  Phone
+                </Heading>
+                <Text fontSize="sm">{phone}</Text>
+                <Heading fontSize="md" className="my-2">
+                  Email
+                </Heading>
+                <Text fontSize="sm">{email}</Text>
+                <Heading fontSize="md" className="my-2">
+                  Address
+                </Heading>
+                <Text fontSize="sm">{address}</Text>
+              </Box>
+            </Box>
+
+            <Box className="mt-5">
+              <Heading fontSize="2xl" className="my-2">
+                Skills
+              </Heading>
+              <Box className="mt-3">
+                {skill.split(",").map((item, index) => (
+                  <Badge className="badge" key={index}>
+                    {item}
+                  </Badge>
+                ))}
+              </Box>
+            </Box>
+          </section>
+
+          <div
+            style={{ height: "536px" }}
+            className="border border-dark mx-4"
+          ></div>
+
+          <section className="partition-2">
+            <Box id="education-area">
+              <Heading fontSize="2xl" className="my-2">
+                Education
+              </Heading>
+              {Object.entries(educationTitles).map((element, index) => (
+                <Box key={index} className="mt-3">
+                  <Heading fontSize="md" className="my-2">
+                    {element[1]}
+                  </Heading>
+                  <Box className="sub-details">
+                    {Object.entries(educationDesc)
+                      [index]?.[1].split(",")
+                      .map((desc, idx) => (
+                        <li key={idx}>{desc}</li>
+                      ))}
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+
+            {!checkProj && (
+              <Box id="project-area">
+                <Heading fontSize="2xl" className="mt-4">
+                  Projects
+                </Heading>
+                {Object.entries(projectTitles).map((element, index) => (
+                  <Box key={index} className="mt-1">
+                    <Heading fontSize="md" className="my-2">
+                      {element[1]}
+                    </Heading>
+                    <Box className="sub-details">
+                      {Object.entries(projectDesc)
+                        [index]?.[1].split(",")
+                        .map((desc, idx) => (
+                          <li key={idx}>{desc}</li>
+                        ))}
+                    </Box>
+                  </Box>
+                ))}
+              </Box>
+            )}
+
+            {!checkWork && (
+              <Box id="experience-area">
+                <Heading fontSize="2xl" className="mt-4">
+                  Work Experience
+                </Heading>
+                {Object.entries(workTitles).map((element, index) => (
+                  <Box key={index} className="mt-1">
+                    <Heading fontSize="md" className="my-2">
+                      {element[1]}
+                    </Heading>
+                    <Box className="sub-details">
+                      {Object.entries(workDesc)
+                        [index]?.[1].split(",")
+                        .map((desc, idx) => (
+                          <li key={idx}>{desc}</li>
+                        ))}
+                    </Box>
+                  </Box>
+                ))}
+              </Box>
+            )}
+
+            {!checkAward && (
+              <Box id="award-area">
+                <Heading fontSize="2xl" className="mt-4">
+                  Awards & Achievements
+                </Heading>
+                <Box className="mt-1">
+                  {awards.split(",").map((element, index) => (
+                    <li key={index}>{element}</li>
+                  ))}
+                </Box>
+              </Box>
+            )}
+          </section>
+        </section>
+      </Box>
+    </Box>
+  );
+};
+
+export default Theme8;