Skip to content

T
tarea-cv-react
Commit 213f7a50 by Nahuel Mereles Rodriguez
Options

Agregando html y css

parent dda48d40
Showing with 416 additions and 50 deletions
package-lock.json
......@@ -16,7 +16,7 @@
"pdfjs": "^2.4.7",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
}
},
package.json
......@@ -11,7 +11,7 @@
"pdfjs": "^2.4.7",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
......
public/index.html
......@@ -15,15 +15,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>React App</title>
</head>
<body>
......
src/App.css
.App {
text-align: center;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* font-family: 'Montserrat', sans-serif; */
}
.App-logo {
height: 40vmin;
pointer-events: none;
h1 {
padding: 0;
margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
h3 {
padding: 0;
margin: 0;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
p {
padding: 0;
margin: 0;
}
.father-container{
width: 98.7vw;
height: 200vh;
}
/* Section Del Curriculum */
#curriculum {
height: 100vh;
}
.curriculum-container {
width: 100%;
height: 100%;
}
.nameImage-container {
width: 100%;
height: 15%;
background-color: #303846;
display: flex;
color: aliceblue;
}
.mainPersonalInfo-Container {
width: 90%;
height: 100%;
}
.name {
width: 70%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.mini-info-Container {
width: 80%;
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.mini-info-Container div {
display: flex;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
align-items: center;
}
.mini-info-Container div div {
background-color: white;
border-radius: 15px;
margin-right: 3px;
}
.mini-info-Container div div img {
margin-right: 5px;
margin: 2px;
}
.image-container {
width: 10%;
height: 100%;
}
.image-container img {
width: 100%;
height: 100%;
}
.container-col {
margin: 2% 0 2% 0;
display: flex;
width: 100%;
height: 79%;
}
.left-column {
width: 70%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #dfd7d7;
}
.left-column div {
width: 95%;
}
.formacion-container {
border-top: 1px solid #dfd7d7;
}
.cursos-container {
border-top: 1px solid #dfd7d7;
}
/* Columna Derecha */
.right-column {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.competencias-container {
border-top: 1px solid #dfd7d7 ;
}
.barraEntera {
width: 90%;
height: 5%;
background-color: #EAEBEC;
}
.barraMedia {
width: 60%;
height: 100%;
background-color: #303846;
}
.barraAlta {
width: 80%;
height: 100%;
background-color: #303846;
}
.barraBaja {
width: 40%;
height: 100%;
background-color: #303846;
}
.App-link {
color: #61dafb;
.colorcito {
color: #888888;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
.negrita {
font-weight: bold;
}
\ No newline at end of file
src/App.js
import './App.css';
import { jsPDF } from "jspdf";
import React from 'react';
import $ from "jquery";
import './App.css';
import Telefono from './assets/images/telefono.png';
import Mail from './assets/images/email.png';
import Map from './assets/images/map.png';
// import $ from "jquery";
function App () {
const previsualizacionPdf = () => {
// Objeto jsPDF para utilizar los metodos de la libreria inicializado con los sig. args
// p : Hoja vertical
// pt: medicion en puntos de la hoja
// letter: Tipo de papel a utilizar carta
var pdf = new jsPDF('p', 'pt', 'letter');
// --------- Configuracion del PDF -----------
var margin = 10; // Margin que se le dara en todos los lados del pdf
// Scala nos permitira que la info de la pagina este ajustada al papel
// le asignamos el ancho interno del HTML. Este calculo contempla el html con su margin
var scale = (pdf.internal.pageSize.width - margin * 2) / document.body.scrollWidth;
pdf.html(document.getElementById("curriculum"), {
x: margin,
y: margin,
html2canvas: {
scale: scale, // Aqui le asignamos la escala con la que se ajustara el html
},
callback: function(pdf){
var iframe = document.createElement('iframe');
iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
document.getElementById("curriculum").appendChild(iframe);
iframe.src = pdf.output('datauristring');
}
});
}
const generarPdf = () => {
// const doc = new jsPDF();
// doc.html($('curriculum').get(0),15,15);
// doc.save("h1.pdf");
// Utilizamos la misma configuracion PDF que en la funcion "PrevisualizacionPdf"
var pdf = new jsPDF('p', 'pt', 'letter');
var margin = 5;
var scale = (pdf.internal.pageSize.width - margin * 2) / document.body.scrollWidth;
pdf.html(document.getElementById("curriculum"), {
callback: function (pdf) {
// var iframe = document.createElement('iframe');
// iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
// document.body.appendChild(iframe);
// iframe.src = pdf.output('datauristring');
pdf.save("Cv.pdf");
x: margin,
y: margin,
html2canvas: {
scale: scale,
},
callback: function(pdf){
// Utilizamos el metodo save para descargar el pdf y le asignamos un nombre
pdf.save("curriculum.pdf");
}
});
}
return(
<div>
<div className='father-container'>
<div id='curriculum'>
<h1>
Curriculum
</h1>
{/* Section Cabezera */}
<div className="curriculum-container">
<div className="nameImage-container">
<div className="mainPersonalInfo-Container">
<div className="name">
<h2>
Nahuel Mereles Rodriguez
</h2>
</div>
<div className="mini-info-Container">
<div>
<div>
<img src={Mail} alt="correo electronico" />
</div>
<p>
nahuelmereles1@gmail.com
</p>
</div>
<div>
<div>
<img src={Telefono} alt="correo electronico" />
</div>
<p>
+595 0991265189
</p>
</div>
<div>
<div>
<img src={Map} alt="correo electronico" />
</div>
<p>
FUNCIONA HIJOS DE PUTAAA
Barrio San Marcos - Limpio
</p>
</div>
</div>
</div>
<div className="image-container">
<img className="img-fluid" src="https://secure.gravatar.com/avatar/2235f28530b4eca9077774c5f39eceb4?s=125&d=mm&r=g" alt="Foto de perfil" />
</div>
</div>
<div>
</div>
<div className='container-col'>
<div className='left-column'>
<div>
<div className='perfil-container'>
<h3>
Perfil
</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis unde nesciunt ut dolor quidem ipsa architecto illo, molestias dolorum deserunt odit itaque, eum accusamus ea ipsam voluptatem nobis maxime.
Labore vero repellat aspernatur beatae voluptatem?
</p>
</div>
<div className='formacion-container mt-3'>
<h3 className='mt-3'>
Formacion
</h3>
<div className='d-flex justify-content-between'>
<p className='negrita'>
Ingenieria Informatica
</p>
<p>
mar 2022 - presente
</p>
</div>
<p>
Universidad Americana, Asuncion, Paraguay
</p>
</div>
<div className='cursos-container mt-3'>
<h3 className='mt-3'>
Cursos
</h3>
<div className='d-flex justify-content-between mt-3'>
<p className='negrita'>
Full Stack Web Developer
</p>
<p>
mar 2021 - presente
</p>
</div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora, quaerat quo dolor tempore beatae dignissimos quasi quia sint id.
</p>
<div className='d-flex justify-content-between mt-3'>
<p className='negrita'>
Bootcamp Java
</p>
<p>
abril 2022 - presente
</p>
</div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora, quaerat quo dolor tempore beatae dignissimos quasi quia sint id.
</p>
</div>
</div>
</div>
<div className='right-column'>
<div>
<div className='datosPersonales-container'>
<h3>
Datos Personales
</h3>
<p className='colorcito'>
Fecha de Nacimiento
</p>
<p>
4 de agosto de 2001
</p>
<p className='mt-2 colorcito'>
Lugar de Nacimiento
</p>
<p>
Argentina, Buenos Aires
</p>
<p className='mt-2 colorcito'>
Sitio Web
</p>
<p>
https://brave-ride-e0d05f.netlify.app/
</p>
<p className='mt-2 colorcito'>
Linkedin
</p>
<p>
@NAHUELMERELESRORIGUEZ
</p>
</div>
<div className='competencias-container mt-3'>
<h3 className='mt-3'>
Competencias
</h3>
<p className='mt-2'>
Javascript Vanilla
</p>
<div className='barraEntera'>
<div className='barraMedia'>
<p>.</p>
</div>
</div>
<p>
React Js
</p>
<div className='barraEntera'>
<div className='barraAlta'>
<p>.</p>
</div>
</div>
<p>
Java
</p>
<div className='barraEntera'>
<div className='barraBaja'>
<p>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Secciones Principales */}
</div>
<button onClick={ previsualizacionPdf }>
Previsualizacion del Pdf
</button>
<button onClick={ generarPdf }>
Generar Pdf
</button>
</div>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment