Galería completa de mis vacaciones
-
- 
- 
- 
- 
- 
- 
-
-
-
-
-
-
-
-
-
-
-
+
+ Cody
+Estas son mis Vacaciones
-Soy Cody, un aspirante a Dev, en 2019, organicé un viaje para desestresarme del código, y en esta página quiero compartirlo contigo.
-Soy Cody, un aspirante a Dev, en 2019,
organicé un viaje para desestresarme del código,
y en esta página quiero + compartirlo contigo.
+
- organicé un viaje para desestresarme del código,
y en esta página quiero + compartirlo contigo.
Mis vacaciones Frontend
-Durante el verano de 2019, decidí comenzar a aprender desarrollo frontend, por lo que durante mi viaje, estuve aprendiendo HTML, CSS, y JavaScript
-Cada tarde, después de conocer nuevos lugares en mis vacaciones, practicaba mis habilidades en tecnologías frontend, construyendo esta página
+
+
+
Mis vacaciones Frontend
+Durante el verano de 2019, decidí comenzar a aprender desarrollo frontend, por lo que durante mi viaje, estuve + aprendiendo HTML, CSS, y JavaScript
+Cada tarde, después de conocer nuevos lugares en mis vacaciones, practicaba mis habilidades en tecnologías + frontend, construyendo esta página
Estos son los cursos que estuve tomando
@@ -33,68 +58,121 @@
Mis vacaciones Frontend
Curso para crear mi primera página web
Ruta de aprendizaje 2021
-También me propuse aprender nuevas tecnologías durante 2021
- +También me propuse aprender nuevas tecnologías durante 2021
-
-
- Flexbox, y Grid -
- Animaciones con CSS y JavaScript -
- AJAX -
- HTML semántico -
- Entre otros +
- Flexbox, y Grid +
- Animaciones con CSS y JavaScript +
- AJAX +
- HTML semántico +
- Entre otros
Colabora en mi página
-- Como parte de mi formación Frontend, aprendí acerca de Git y GitHub, por lo que decidí subir mi código a GitHub -
-- Puedes ayudarme a mejorar mi página, haciendo un fork de mi página, y enviando un pull request. -
-
- Si nunca antes has colaborado con un repositorio, en Código Facilito hay un tutorial que lo explica
- Ir al tutorial
+
+ Puedes ayudarme a mejorar mi página, haciendo un fork de mi página, y enviando un pull request.
+
+ Si nunca antes has colaborado con un repositorio, en Código Facilito hay un tutorial que lo explica
+ Ir al tutorial
+
+
- Colabora en mi
+
+ Como parte de mi formación Frontend, aprendí acerca de Git y GitHub, por lo que decidí subir mi código a
+ GitHub
+
+
Aquí te comparto algunas fotos de mis vacaciones
+
+
-
+
+
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/js/image.js b/public/js/image.js
new file mode 100644
index 00000000..6619a885
--- /dev/null
+++ b/public/js/image.js
@@ -0,0 +1,51 @@
+var zFondos150 = ["url('./images/1.jpg')","url('./images/2.jpg')","url('./images/3.jpg')","url('./images/4.jpg')","url('./images/5.jpg')","url('./images/6.jpg')"];
+var zFondos600 = ["url('./images/1.jpg')","url('./images/2.jpg')","url('./images/3.jpg')","url('./images/4.jpg')","url('./images/5.jpg')","url('./images/6.jpg')"];
+
+var imagenPrincipal = document.querySelectorAll(".imagen-principal")[0];
+var subImagenes = document.querySelectorAll('[class *= "subImagen-"]');
+
+imagenPrincipal.style.backgroundImage =zFondos600[0];
+subImagenes[0].style.backgroundImage =zFondos150[0];
+subImagenes[0].style.backgroundSize ="100%";
+subImagenes[1].style.backgroundImage =zFondos150[1];
+subImagenes[1].style.backgroundSize ="100%";
+subImagenes[2].style.backgroundImage =zFondos150[2];
+subImagenes[2].style.backgroundSize ="100%";
+subImagenes[3].style.backgroundImage =zFondos150[3];
+subImagenes[3].style.backgroundSize ="100%";
+subImagenes[4].style.backgroundImage =zFondos150[4];
+subImagenes[4].style.backgroundSize ="100%";
+subImagenes[5].style.backgroundImage =zFondos150[5];
+subImagenes[5].style.backgroundSize ="100%";
+
+subImagenes[0].addEventListener("mouseover",accion0);
+subImagenes[1].addEventListener("mouseover",accion1);
+subImagenes[2].addEventListener("mouseover",accion2);
+subImagenes[3].addEventListener("mouseover",accion3);
+subImagenes[4].addEventListener("mouseover",accion4);
+subImagenes[5].addEventListener("mouseover",accion5);
+
+function accion0(){
+ imagenPrincipal.style.backgroundImage =zFondos600[0];
+ imagenPrincipal.style.backgroundSize = "100%"
+}
+function accion1(){
+ imagenPrincipal.style.backgroundImage =zFondos600[1];
+ imagenPrincipal.style.backgroundSize = "100%"
+}
+function accion2(){
+ imagenPrincipal.style.backgroundImage =zFondos600[2];
+ imagenPrincipal.style.backgroundSize = "100%"
+}
+function accion3(){
+ imagenPrincipal.style.backgroundImage =zFondos600[3];
+ imagenPrincipal.style.backgroundSize = "100%"
+}
+function accion4(){
+ imagenPrincipal.style.backgroundImage =zFondos600[4];
+ imagenPrincipal.style.backgroundSize = "100%"
+}
+function accion5(){
+ imagenPrincipal.style.backgroundImage =zFondos600[5];
+ imagenPrincipal.style.backgroundSize = "100%"
+}
diff --git a/public/js/main.js b/public/js/main.js
new file mode 100644
index 00000000..bfcd6f0c
--- /dev/null
+++ b/public/js/main.js
@@ -0,0 +1,66 @@
+let d = document;
+window.addEventListener("DOMContentLoaded", (event) => {
+ let secciones = Array.prototype.slice.apply(d.querySelectorAll("section"));
+ let links = Array.prototype.slice.apply(d.querySelectorAll("header nav ul li"));
+ let tamañoHeader = d.querySelector("header").clientHeight;
+ let tamañoSection = d.querySelector("section:nth-child(1)").offsetHeight;
+ let tamañoVentana =
+ tamañoHeader + tamañoSection * 6 + d.querySelector("footer").clientHeight;
+ let registroScroll;
+ let SumaTamaños;
+ links.map((e, index) => {
+ e.addEventListener("click", () => {
+ links.map((el)=>{
+ el.classList.remove('active')
+ })
+ e.classList.add('active')
+ console.log(index);
+ ir(index);
+ });
+ });
+ function ir(index) {
+ if (index == 0) {
+ scroll({
+ top: 0,
+ behavior: "smooth"
+ });
+
+ } else {
+ SumaTamaños = tamañoSection * index;
+ scroll({
+ top: SumaTamaños,
+ behavior: "smooth"
+ });
+ }
+ }
+ scroll({
+ behavior: "smooth"
+
+ })
+ function Observador(entries) {
+ entries.map((e, index) => {
+
+ if (e.isIntersecting == true &&e.intersectionRatio>0.32 ) {
+ setTimeout(()=>{
+ e.target.classList.remove("animacion");
+ e.target.classList.add("animacion");
+ },100)
+ // observer.unobserve(e.target)
+ }else{
+ setTimeout(()=>{
+ e.target.classList.remove("animacion");
+ },100)
+ }
+ });
+ }
+ let observer = new IntersectionObserver(Observador, { threshold: 0.3 });
+ secciones.map((e) => {
+ observer.observe(e);
+ });
+
+
+
+
+
+
+});
\ No newline at end of file
+
- Aquí te comparto algunas fotos de mis vacaciones
¡Bien! Sé que estás aquí por mis vacaciones, aquí te comparto algunas fotos que tomé:
- - +
+
+
+
+
+
+
+
+
+
+
+ La importancia de las vacaciones
-Aprender a programar y escribir código, puede ser estresante, por eso es muy importante que periódicamente nos desconectemos y descansemos apropiadamente
-Durante mis vacaciones aprendí que existen distintos beneficios de descansar:
--
-
- Mejora la salud mental -
- Incrementa la motivación -
- Reduce el burnout -
- Mejora tu productividad y creatividad -
Aprender a programar y escribir código, puede ser estresante, por eso es muy importante que periódicamente nos + desconectemos y descansemos apropiadamente
+Durante mis vacaciones aprendí que existen distintos beneficios de descansar:
+-
+
- Mejora la salud mental +
- Incrementa la motivación +
- Reduce el burnout +
- Mejora tu productividad y creatividad +