Merge pull request #15 from ireneelizabethsabu/downloadbutton

added download btn
ireneelizabethsabu · Sep 15, 2022 · fd40272 · fd40272
2 parents 0715e14 + a0d8d4a
commit fd40272
Show file tree

Hide file tree

Showing 14 changed files with 22,761 additions and 243 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,8 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.2",
     "bootstrap": "^4.6.0",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",

diff --git a/src/App.css b/src/App.css
@@ -15,11 +15,14 @@
     font-size: 28px !important;
 }
 .font_m{
-    font-size: 24px !important;
+    font-size: 22px !important;
 }
 .font_s{
-    font-size: 20px !important;
+    font-size: 18px !important;
 }
 .font_xs{
-    font-size: 14px !important;
+    font-size: 12px !important;
+}
+.font_xxs{
+    font-size: 9px !important;
 }
diff --git a/src/assets/printer.svg b/src/assets/printer.svg
diff --git a/src/components/CV/cv.css b/src/components/CV/cv.css
@@ -0,0 +1,14 @@
+.my-3{
+    height: 0.2cm;
+}
+.resume{
+    border: 0.1px solid rgba(0, 0, 0, 0.434);
+    padding: 0cm !important;
+    padding-bottom: 2cm !important;
+    height: 20cm;
+}
+.ptr-btn{
+    margin-top: 70cm;
+}
+
+
diff --git a/src/components/CV/cv.js b/src/components/CV/cv.js
@@ -1,29 +1,66 @@
 import React from "react";
-import { Col, Container,Row } from "react-bootstrap";
+import { Col, Container,Row,Button,Image } from "react-bootstrap";
 import { useParams } from "react-router-dom";
 import { useData } from "../../hooks/useData";
 import Header from "../Header/header";
 import Language from "../Languages/Language";
 import Organisation from '../Organisation/Organisation'
 import Projects from "../Projects/Projects";
+import picon from "../../assets/printer.svg"
+import html2canvas from "html2canvas";
+import { jsPDF } from "jspdf";
+import "./cv.css"
 
 const CV=() => {
     const {id} = useParams();
     const {data} = useData(id)
+
+    const createPDF = async () => {   
+        const pdf = new jsPDF("portrait", "pt", "a4"); 
+        html2canvas(document.querySelector("#pdf"), {useCORS: true}).then(function(data) {
+        const img = data.toDataURL("image/png");
+        const imgProperties = pdf.getImageProperties(img);
+        const pdfWidth = pdf.internal.pageSize.getWidth();
+        const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width;
+        pdf.addImage(img, "PNG", 0, 0, pdfWidth, pdfHeight);
+        pdf.save("resume.pdf");
+        console.log("hii");
+        })
+      };
 
     return(
-        data && <Container  className="my-3">
-            <Header data={data}/>
-            <Row>
-                <Col>
-                    <Language id={id}/>
-                    <Organisation id={id}/>
+        data && (<Container className="ml-5 my-4">
+
+
+            <Row  >
+                <Col className="resume">
+                    <div id="pdf">
+                        <Header data={data}/>
+                        <Row >
+                        <Col >
+                            <Language id={id}/>
+                            <Organisation id={id}/>
+                        </Col>
+                        <Col>
+                            <Projects id={id}/>
+                        </Col>
+                        </Row>
+
+                     </div>
                 </Col>
                 <Col>
-                    <Projects id={id}/>
+                    <Button variant=" " onClick={createPDF} type="button" > 
+                    <Image
+                    className="ptr-button" 
+                src={picon}
+                width="30px"
+                height="31px"
+                />
+                    </Button>
                 </Col>
-            </Row>            
-        </Container>
+
+            </Row>          
+        </Container>)
     )
 }
 

diff --git a/src/components/Header/header.js b/src/components/Header/header.js
@@ -11,50 +11,59 @@ const Header = ({ data }) => {
   const style = {
     color: "#fff",
   };
-
+  const imgstyle = {
+    color: "#fff",
+    width: "0.35cm",
+
+  }
+
   return (
     data && (
-      <Jumbotron className="px-5 py-5" style={{ backgroundColor: "#000000" }}>
+      <Jumbotron className="px-4 pt-3" style={{ backgroundColor: "#000000", width: "18cm", height: "3cm" }}>
         <Row>
-            <span className="mx-3 my-auto">
-                <Image
-                src={data.avatar_url || ""}
-                width="180px"
-                height="171px"
-                roundedCircle
-                />
-            </span>
-            <Col>
-            <div className={`font_xxl mx-1 text-color ${data.avatar_url === null ? "text-center" : ""}`}
-              style={style} >
-              {data.name || data.login}
-            </div>
-            <Col className={`pt-2 px-0 ${data.avatar_url === null ? "justify-content-center" : ""}`}>
-              {data.twitter_username && (
-                <span className="my-1 " style={style}>
-                  <Twitter />
-                  <span className="ml-2">{data.twitter_username}</span>
-                </span>
-              )}
-              <br/>
-              <span className="my-1" style={style}>
-                <Github />
-                <span className="ml-2">{data.login}</span>
-              </span>
-              <br/>
-              {data.blog && (
-                  <span className="my-1" style={style}>
-                    <Link />
+          <span className="mx-4 mt-2">
+            <Image
+              src={data.avatar_url || ""}
+              width="70px"
+              height="61px"
+              roundedCircle
+            />
+          </span>
+
+          <Col>
+            <Row>
+              <div className={`font_m mt-2 ml-2 mb-1 text-color ${data.avatar_url === null ? "text-center" : ""}`}
+                style={style} >
+                {data.name || data.login}
+              </div>
+            </Row>
+            <Row>
+                {data.login && (
+                  <span className="ml-2 font_xs" style={style}>
+                    <Github style={imgstyle} />
+                    <span className="ml-2">{data.login}</span>
+                  </span>
+                )}
+
+                {data.twitter_username && (
+                  <span className="ml-1 font_xs " style={style}>
+                    <Twitter style={imgstyle}  />
+                    <span className="ml-2">{data.twitter_username}</span>
+                  </span>
+                )}
+
+                {data.blog && (
+                  <span className=" font_xs" style={style}>
+                    <Link style={imgstyle} />
                     <span className="ml-2">{data.blog}</span>
                   </span>
-              )}
-              <br/>
-              {data.location && (
-                <span className="my-1" style={style}>
-                  <Location /><span className="ml-2"> {data.location}{" "}</span>
-                </span>
-              )}
-            </Col>
+                )}
+                {data.location && (
+                  <span className=" ml-2 font_xs" style={style}>
+                    <Location style={imgstyle} /><span > {data.location}{" "}</span>
+                  </span>
+                )}
+            </Row>
           </Col>
         </Row>
       </Jumbotron>

diff --git a/src/components/Home.js b/src/components/Home.js
@@ -27,9 +27,7 @@ export const Home = () => {
                         value={id} 
                         onChange={handleChange} required/>
 
-                    {/* <Form.Group>
-                        <Form.Check type="checkbox" label="Include github avatar"/>
-                    </Form.Group> */}
+
                     <Button variant="outline-dark gradient-font generate-btn my-4" type="submit" onClick={() => { history.push(`/cv/${id}`)}}>
                         Generate CV
                     </Button>

diff --git a/src/components/Languages/Language.css b/src/components/Languages/Language.css
@@ -1,3 +1,7 @@
 .progress{
-    height: 20px !important;
+    height: 7px !important; 
+    margin-top: 0.2cm;
+}
+.pbar{
+    width: 70px;
 }
diff --git a/src/components/Languages/Language.js b/src/components/Languages/Language.js
@@ -8,21 +8,21 @@ const Language = ({ id }) => {
   const { skills, total } = usePercent(id);
 
   return (
-    <Col className="mb-4 pr-0">
-      <div className="font_m mb-3">SKILLS</div>
-      <Col className="px-0">
+    <Col className="mb-4 pr-0 pl-5">
+      <div className=" font_xs mb-3"><strong>SKILLS</strong></div>
+      <Col className="px-0 font_xxs">
         {skills.length !== 0 &&
           Object.keys(skills)
             .filter(
               (key) => Math.round((skills[key].percent * 100) / total) > 0
             )
             .map((key) => (
-              <Row key={key} className="align-items-center my-3">
-                <Col xs="4">
-                  <div className="text-right"> {skills[key].lang} </div>
+              <Row key={key} className=" my-3">
+                <Col xs="3">
+                  <div className="text-left"> {skills[key].lang} </div>
                 </Col>
                 <Col>
-                  <ProgressBar
+                  <ProgressBar className="pbar"
                     now={Math.round((skills[key].percent * 100) / total)}
                     max={Math.round((maxPercent(skills) * 100) / total)}
                   />

diff --git a/src/components/Organisation/Organisation.js b/src/components/Organisation/Organisation.js
@@ -7,16 +7,16 @@ const Organisation = ({id}) => {
 
   return (
     org.length !== 0 && (<Col>
-      <div className="font_m mb-3">
-        ORGANISATIONS{" "}
+      <div className="font_xs ml-4 pt-2 mb-2">
+        <strong>ORGANISATIONS</strong>{" "}
       </div>
       <Row className="my-4" sm={8} >
             {org.map((element,index) => 
                 (<Col key={index}>
                     <div className="d-flex justify-content-center">
-                      <Image src={element.avatar_url || ''} width="50" height="50" roundedCircle />
+                      <Image src={element.avatar_url || ''} width="25cm" roundedCircle />
                     </div>
-                    <div className="text-center my-2">{element.login.charAt(0).toUpperCase() + element.login.slice(1)}</div>
+                    <div className="text-center font_xxs my-2">{element.login.charAt(0).toUpperCase() + element.login.slice(1)}</div>
                 </Col>)
             )}
       </Row>

diff --git a/src/components/Projects/Projects.css b/src/components/Projects/Projects.css
@@ -1,12 +1,13 @@
 .card {
     height: fit-content;
-    width : 550px;
-    border-radius: 15px !important; 
+    width : 340px;
+    border-radius: 4px !important; 
     transition: 0.4s ease-out;
-    box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
-    margin: 20px;
+    box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.2);
+    margin: 1px;
+    margin-right: 15px;
   }
 
-.card-img{
-    width: 30px !important;
+.projicon{
+  width: 0.4cm !important;
 }
diff --git a/src/components/Projects/Projects.js b/src/components/Projects/Projects.js
@@ -9,13 +9,13 @@ const Projects = ({id}) => {
 
     return(
         <>
-        <div className="font_m mb-3 ml-3">PROJECTS</div>
+        <div className="font_xs mb-3 ml-2"><strong>PROJECTS</strong></div>
         {repo.map((project, index) => (
             <Card key={index}>
             {/* <Card.Img variant="top" src={icon} /> */}
-            <Card.Body>
-              <Card.Title> <Card.Img  src={icon} /> {project.name || 'Repo-1'}</Card.Title>
-              <Card.Text>
+            <Card.Body className="p-2">
+              <Card.Title className="font_xxs p-0 m-0"> <Card.Img className="projicon" src={icon} /> {project.name || 'Repo-1'}</Card.Title>
+              <Card.Text className="font_xxs p-0 m-0">
               {project.description && <div>{project.description}</div>}
               {project.homepage && <div><a  href = {project.homepage}> Project Link : {project.homepage}</a></div>}
               {project.html_url && <div><a  href = {project.html_url}> Link to Code: {project.html_url}</a></div>}

diff --git a/src/hooks/useData.js b/src/hooks/useData.js
@@ -7,6 +7,7 @@ export const useData = (id) => {
     useEffect(() => {
         getUsers(id).then(res => {
             setData(res.data)
+            console.log(res.data);
         }).catch(err => console.log(err))
     }, [id])