diff --git a/README.md b/README.md old mode 100644 new mode 100755 index a52a225..57557b4 --- a/README.md +++ b/README.md @@ -1,2 +1,11 @@ -# basefrontend -Base Front End +# Curriculum Vitae + +Introduction - Frontend | Ticmas Academy + +## GitHub Page + +[https://atorassa.github.io/basefrontend/](https://atorassa.github.io/basefrontend/) + +## Course + +Argentina Programa 4.0 diff --git a/css/style.css b/css/style.css new file mode 100755 index 0000000..3719e8f --- /dev/null +++ b/css/style.css @@ -0,0 +1,491 @@ +* { + font-family: 'Sen', sans-serif; + font-size: 18px; + border: 0; + margin: 0; + padding: 0; + outline: 0; + list-style: none; + text-decoration: none; +} + +body { + color: #d0d0d0; + background-color: #222b3c; +} + +h1 { + font-size: 3rem; + color: #fff; +} + +h2 { + width: 100%; + color: #336699; + font-size: 2rem; + padding-top: 0.96em; + margin-bottom: 0.75em; + text-align: center; +} + +h3 { + width: 100%; + color: #455544; + font-size: 1.2rem; + text-align: left; +} + +.title-h3 { + color: #8fa7cd; + line-height: 1.5em; + margin-top: 0.63em; + margin-bottom: 0.36em; +} + +.sub-title-h3 { + color: #455544; + line-height: 1.5em; + margin-top: 0.36em; + margin-bottom: 0.36em; +} + +.sub-title-span { + color: #455544; + font-size: 1.2rem; + line-height: 1.5em; +} + +p, span { + color: #d0d0d0; + line-height: 1.5em; +} + +/* menu nav */ + +#menu-nav { + width: 100%; + position: fixed; +} + +#menu-ul { + margin: 0; + padding: 0; + float: right; + list-style: none; + text-decoration: none; + background-color: #455544; +} + +/* menu nav colores */ + +#menu-nav a { + color: #fff; + display: block; + padding: 1.2em; + text-decoration: none; + background-color: #455544; +} + +#menu-nav a:hover { + text-decoration: none; + background-color: #333; +} + +/* section main */ + +#main { + color: #fff; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + background-color: #222b3c; +} + +.main-icon-text { + color: #e0e0e0; +} + +/* mi foto */ + +#my-photo { + width: 240px; + margin: 6px; + border: 6px solid rgb(69, 85, 68); + border-radius: 50%; +} + +/* grip section main */ + +#main-grid-container { + display: grid; + padding-top: 4.5em; + grid-template-rows: 258px; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-areas: + "area1 area1 area1 area1 area1 area1" + "area2 area2 area2 area2 area2 area2" + "area3 area3 area3 area3 area3 area3" + "area4 area4 area5 area5 area6 area6" + "area7 area7 area8 area8 area9 area9"; + } + +#main-grid-item1 { + text-align: center; + grid-area: area1; +} + +#main-grid-item2 { + padding-top: 1.5em; + text-align: center; + grid-area: area2; +} + +#main-grid-item3 { + padding-top: 0.75em; + text-align: center; + grid-area: area3; +} + +#main-grid-item4 { + padding-top: 1.8em; + text-align: center; + grid-area: area4; +} + +#main-grid-item5 { + padding-top: 1.8em; + text-align: center; + grid-area: area5; +} + +#main-grid-item6 { + padding-top: 1.8em; + text-align: center; + grid-area: area6; +} + +#main-grid-item7 { + padding-top: 1em; + padding-bottom: 1em; + text-align: center; + grid-area: area7; +} + +#main-grid-item8 { + padding-top: 1em; + padding-bottom: 1em; + padding-left: 1em; + padding-right: 1em; + text-align: center; + grid-area: area8; +} + +#main-grid-item9 { + padding-top: 1em; + padding-bottom: 1em; + text-align: center; + grid-area: area9; +} + +#main-h2 { + font-size: 1.32em; + color: #909090; +} + +.main-icon { + width: 27%; +} + +.main-icon-text { + font-size: 85%; +} + +.main-span-text { + display: none; +} + +/* section experiencia */ + +#experiencia { + color: #fff; + background-color: #222b3c; +} + +.exp-fecha-p { + color: #606060; + margin-top: 0.48em; +} + +.exp-fecha-span { + color: #606060; + font-size: 95%; +} + +/* section habilidades */ + +#habilidades { + color: #fff; + background-color: #222b3c; +} + +.hab-texto-1 { + float: left; +} + +.hab-texto-2 { + float: right; +} + +.hab-texto-alt { + margin-bottom: 0.75em; +} + +/* contenedores */ + +.container { + width: 100%; + display: flex; + flex-wrap: wrap; + text-align: left; + flex-direction: row; + justify-content: center; + margin: 0 auto; +} + +.content { + width: 100%; +} + +/* section sobre mi */ + +#sobre-mi { + width: 100%; + display: flex; + flex-wrap: wrap; + flex-direction: row; + text-align: justify; + justify-content: center; + background-color: #222b3c; + margin: 0 auto; +} + +#title-sobre-mi { + margin-bottom: 1.09em; +} + +/* section contacto */ + +#contacto { + display: flex; + flex-wrap: wrap; + padding-bottom: 0.6em; + justify-content: center; + background-color: #222b3c; +} + +#title-contacto { + margin-bottom: 1.09em; +} + +#form { + width: 100%; + display: flex; + justify-content: center; +} + +#form-div { + width: 100%; + display: grid; +} + +.form-input { + border: none; + outline: none; + margin-top: 0.6em; + padding-top: 0.9em; + padding-left: 0.75em; + padding-bottom: 0.9em; + border-radius: 0.24em; +} + +#form-message { + border: none; + outline: none; + margin-top: 0.6em; + padding-top: 0.9em; + padding-left: 0.75em; + padding-bottom: 0.9em; + border-radius: 0.24em; +} + +#form-submit { + color: #fff; + border: none; + cursor: pointer; + margin-top: 0.6em; + padding-top: 0.9em; + padding-bottom: 0.9em; + background-color: #336699; + border-radius: 0.24em; +} + +#form-submit:hover { + background: #339966; + text-decoration: none; +} + +#form-submit:focus { + outline: none; +} + +/* footer */ + +footer { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #222b3c; +} + +#footer-redes { + width: 100%; + display: flex; + flex-wrap: wrap; + padding: 15px 0; + align-items: center; + margin-bottom: 0.6em; + border-radius: 0.24em; + justify-content: center; + background-color: #222b3c; +} + +.footer-redes-div { + font-size: 1em; +} + +.footer-redes-div a { + color: #222b3c; + text-decoration: none; +} + +.footer-redes-div a:hover { + color: #606060; + text-decoration: none; +} + +/* media queries */ + +@media (min-width: 651px) { + + #menu-span { + display: none; + } + + #menu-ul { + display: flex; + } + + #menu-nav { + background-color: #455544; + } +} + +@media (max-width: 650px) { + + #menu-span { + content:""; + z-index: 120; + background: url('../images/nav-icon.png') no-repeat; + background-position: center; + width: 50px; + height: 50px; + display: inline-block; + position: fixed; + right: 5px; + top: 5px; + } + + #menu-ul { + display: none; + } + + #menu-nav { + background-color: transparent; + } + + #main-grid-container { + padding-top: 1.5em; + } + +} + +@media (max-width: 440px) { + + .main-span-text { + display: block; + } +} + +@media (max-height: 1800px) and (min-height: 560px) and (min-width: 441px) { + + #main { + height: 100vh; + } +} + +@media (max-height: 1800px) and (min-height: 600px) and (max-width: 440px) { + + #main { + height: 100vh; + } +} + +@media (min-width: 900px) { + + .content { + margin: 0 2em; + max-width: 20em; + } + + .section-title { + margin: 0.6em 0; + } + +} + +@media (max-width: 899px) and (min-width: 481px) { + + .content { + margin: 0 4%; + max-width: 40%; + } + + .section-title { + margin: 0.3em 0; + } +} + +@media (max-width: 480px) { + + .content { + margin: 0 4%; + max-width: 90%; + } + + #sobre-mi { + margin: 0 4%; + max-width: 90%; + } + + #form { + margin: 0 4%; + max-width: 90%; + } + + #footer-redes { + margin: 0 4%; + max-width: 90%; + } +} diff --git a/images/favicon.png b/images/favicon.png new file mode 100755 index 0000000..d91ea72 Binary files /dev/null and b/images/favicon.png differ diff --git a/images/graph.png b/images/graph.png new file mode 100755 index 0000000..d1753d5 Binary files /dev/null and b/images/graph.png differ diff --git a/images/mail.svg b/images/mail.svg new file mode 100755 index 0000000..67b48e4 --- /dev/null +++ b/images/mail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/map.svg b/images/map.svg new file mode 100755 index 0000000..f5147b4 --- /dev/null +++ b/images/map.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/my-avatar.png b/images/my-avatar.png new file mode 100755 index 0000000..63a4f61 Binary files /dev/null and b/images/my-avatar.png differ diff --git a/images/my-photo.png b/images/my-photo.png new file mode 100755 index 0000000..48b0e0b Binary files /dev/null and b/images/my-photo.png differ diff --git a/images/nav-icon.png b/images/nav-icon.png new file mode 100755 index 0000000..618d153 Binary files /dev/null and b/images/nav-icon.png differ diff --git a/images/phone.svg b/images/phone.svg new file mode 100755 index 0000000..62d6dc8 --- /dev/null +++ b/images/phone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100755 index 0000000..67ce413 --- /dev/null +++ b/index.html @@ -0,0 +1,219 @@ + + + + + + + + + + + + + + CV Lucas Marino + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+
+
+ mi-foto +
+
+

Lucas Marino

+
+
+

Gerente de Publicidad

+
+
+ icono-lugar +
+
+ icono-telefono +
+
+ icono-correo +
+
+

Caba, Argentina

+
+
+

+54 114346165

+
+
+

marino@mail.com

+
+
+
+ +
+

Experiencia

+
+
+

EDUCACIÓN

+

Universidad de Buenos Aires

+

MBA Administración de Empresas

+

Oct. 2000 - May. 2004

+

CURSOS

+

Publicidad y Marketing BA

+

Facebook e Instagram Ads

+

Ene. 2007 - Feb. 2008

+

Pixel Digital Academy

+

SEO Training Profesional

+

Mar. 2005 - Abr. 2006

+
+
+

LABORAL

+

Supermercado Disco S.A.

+

Gerente de Publicidad

+

Abr. 2022 - Actualidad

+

ANTERIORES

+

Empresa de Créditos S.A.

+

Supervisor de Marketing

+

Jun. 2015 - Oct. 2021

+

Digital Marketing Inc.

+

Analista de Negocio

+

Nov. 2008 - Ene. 2014

+
+
+
+ +
+

Habilidades

+
+
+

PROFESIONALES

+

Google Ads:

+

Experto

+

+

Google Analytics:

+

Experto

+

+

Invest. Mercado:

+

Experto

+

+

HubSpot CRM:

+

Avanzado

+

+

HTML y CSS:

+

Avanzado

+
+
+

IDIOMAS

+

Español:

+

Nativo

+

+

Inglés:

+

Avanzado

+

+

Alemán:

+

Competente

+
+
+
+ +
+

Sobre Mí

+

+ En los últimos 6 años me he centrado en desarrollar campañas + de publicidad exitosas y planes de marketing para diversos clientes y empresas. + En mi puesto actual diseño estrategias creativas con un alcance de más de + 200.000 personas y he logrado incrementar los niveles de engagement con nuestra + comunidad en un 15%. +

+ Mi proyecto consiste en asesorar y minimizar riesgos en + empresas de nueva creación. Mi reto es construir para ellas un + proyecto de gestión económica a medio y largo plazo, que les + permita ser rentables y ampliar mercado. +

+

+ +
+

Contacto

+
+
+ + + + +
+
+
+ +
+ + + + + + + + diff --git a/js/functions.js b/js/functions.js new file mode 100755 index 0000000..2b16c43 --- /dev/null +++ b/js/functions.js @@ -0,0 +1,153 @@ + +let menu = 0; + +// Menu nav span | hecho desde javascript + +document.getElementById("menu-span").onclick = function () { + if (menu === 0) { + document.getElementById("menu-ul").style.display = "block"; + event.stopPropagation(); + menu = 1; + } else { + document.getElementById("menu-ul").style.display = "none"; + menu = 0; + } +}; + +// Menu nav body | cierra el menu nav cuando se hace click fuera de este + +document.body.addEventListener("click", function () { + if (menu === 1) { + document.getElementById("menu-ul").style.display = "none"; + menu = 0; + } +}); + +// Soluciona el conflicto entre media queries y javascript con el menu nav cuando se cambia el tamaño de pantanlla en modo Desarrollador + +window.addEventListener("resize", function() { + let mediaqueryList = window.matchMedia("(min-width: 651px)"); + if(mediaqueryList.matches) { + document.getElementById("menu-ul").style.display = "flex"; + menu = 0; + } +}); + +window.addEventListener("resize", function() { + let mediaqueryList = window.matchMedia("(max-width: 650px)"); + if(mediaqueryList.matches) { + document.getElementById("menu-ul").style.display = "none"; + menu = 0; + } +}); + +// Efecto visual sobre my-photo | sube o baja la foto y aumenta o disminuye el grosor del borde ademas de cambiar de color + +document.getElementById("my-photo").onmouseover = function () { + document.getElementById("my-photo").style.border = "9px solid rgb(236, 236, 236)"; + document.getElementById("my-photo").style.margin = "0px"; +}; + +document.getElementById("my-photo").onmouseout = function () { + document.getElementById("my-photo").style.border = "6px solid rgb(69, 85, 68)"; + document.getElementById("my-photo").style.margin = "6px"; +}; + +// Los valores en la seccion habilidades muestran un numero o una palabra segun el ancho de la pantalla + +if ( window.innerWidth < 651 ) { + small(); +} + +window.addEventListener("resize", function() { + let mediaqueryList = window.matchMedia("(max-width: 650px)"); + if(mediaqueryList.matches) { + small(); + } else { + big(); + } +}); + +function small() { + document.getElementById("habilidad-google-1").innerHTML = "5/5"; + document.getElementById("habilidad-google-2").innerHTML = "5/5"; + document.getElementById("habilidad-mercado").innerHTML = "5/5"; + document.getElementById("habilidad-hubspot").innerHTML = "4/5"; + document.getElementById("habilidad-html-css").innerHTML = "4/5"; + document.getElementById("idioma-es").innerHTML = "5/5"; + document.getElementById("idioma-en").innerHTML = "4/5"; + document.getElementById("idioma-de").innerHTML = "3/5"; +}; + +function big() { + document.getElementById("habilidad-google-1").innerHTML = "Experto"; + document.getElementById("habilidad-google-2").innerHTML = "Experto"; + document.getElementById("habilidad-mercado").innerHTML = "Experto"; + document.getElementById("habilidad-hubspot").innerHTML = "Avanzado"; + document.getElementById("habilidad-html-css").innerHTML = "Avanzado"; + document.getElementById("idioma-es").innerHTML = "Nativo"; + document.getElementById("idioma-en").innerHTML = "Avanzado"; + document.getElementById("idioma-de").innerHTML = "Competente"; +}; + +// Alineacion vertical entre los items de las secciones experiencia, habilidades, sobre mi, contacto y redes sociables + +function ajustar() { + if ( window.innerWidth > 480 ) { + let margin = window.getComputedStyle(document.getElementById('exp-content-2'), null).getPropertyValue('margin-left').match(/\d+/)[0]; + let ancho1 = parseInt(document.getElementById("exp-content-2").offsetWidth); + let ancho2 = parseInt(ancho()); + let maximo = ancho1 + ancho2 + parseInt(margin) + parseInt(margin); + let diff = ancho1 - ancho2; + let dife = diff/2; + document.getElementById("habilidad-google-1").style.paddingRight = diff + "px"; + document.getElementById("habilidad-google-2").style.paddingRight = diff + "px"; + document.getElementById("habilidad-mercado").style.paddingRight = diff + "px"; + document.getElementById("habilidad-hubspot").style.paddingRight = diff + "px"; + document.getElementById("habilidad-html-css").style.paddingRight = diff + "px"; + document.getElementById("idioma-es").style.paddingRight = diff + "px"; + document.getElementById("idioma-en").style.paddingRight = diff + "px"; + document.getElementById("idioma-de").style.paddingRight = diff + "px"; + document.getElementById("exp-content-1").style.marginLeft = dife + "px"; + document.getElementById("hab-content-1").style.marginLeft = dife + "px"; + document.getElementById("exp-content-2").style.marginRight = "-" + dife + "px"; + document.getElementById("hab-content-2").style.marginRight = "-" + dife + "px"; + document.getElementById("sobre-mi-texto").style.maxWidth = maximo + "px"; + document.getElementById("footer-redes").style.maxWidth = maximo + "px"; + document.getElementById("form").style.maxWidth = maximo + "px"; + } else { + document.getElementById("habilidad-google-1").style.paddingRight = 0; + document.getElementById("habilidad-google-2").style.paddingRight = 0; + document.getElementById("habilidad-mercado").style.paddingRight = 0; + document.getElementById("habilidad-hubspot").style.paddingRight = 0; + document.getElementById("habilidad-html-css").style.paddingRight = 0; + document.getElementById("idioma-es").style.paddingRight = 0; + document.getElementById("idioma-en").style.paddingRight = 0; + document.getElementById("idioma-de").style.paddingRight = 0; + document.getElementById("exp-content-1").style.marginLeft = ""; + document.getElementById("hab-content-1").style.marginLeft = ""; + document.getElementById("exp-content-2").style.marginRight = ""; + document.getElementById("hab-content-2").style.marginRight = ""; + document.getElementById("sobre-mi-texto").style.maxWidth = ""; + document.getElementById("footer-redes").style.maxWidth = ""; + document.getElementById("form").style.maxWidth = ""; + } +}; + +function ancho() { + let aWidth = 0; + let aMaximo = 0; + document.querySelectorAll('.ancho').forEach(function(child) { + aWidth = parseInt(child.offsetWidth, 10); + if ( aWidth > aMaximo ) { + aMaximo = aWidth; + } +}); + return aMaximo; +}; + +window.addEventListener("resize", function() { + ajustar(); +}); + +setTimeout(ajustar, 240);