diff --git a/assets/Styles/Dividers/divider-tools.css b/assets/Styles/Dividers/divider-tools.css
new file mode 100644
index 0000000..7178e50
--- /dev/null
+++ b/assets/Styles/Dividers/divider-tools.css
@@ -0,0 +1,27 @@
+.wraper__tools{
+ position: relative;
+ height: 35vh;
+}
+.dark-mode .wraper__tools {
+ background: black;
+}
+.custom-shape-divider-top-1699780157 {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+ transform: rotate(180deg);
+}
+
+.custom-shape-divider-top-1699780157 svg {
+ position: relative;
+ display: block;
+ width: calc(131% + 1.3px);
+ height: 170px;
+}
+
+.custom-shape-divider-top-1699780157 .shape-fill {
+ fill: #000000;
+}
\ No newline at end of file
diff --git a/assets/Styles/Dividers/divider.css b/assets/Styles/Dividers/divider.css
index 9707bb7..e29c7d2 100644
--- a/assets/Styles/Dividers/divider.css
+++ b/assets/Styles/Dividers/divider.css
@@ -1,6 +1,5 @@
.wrapper {
box-sizing: border-box;
- scroll-behavior: smooth;
position: relative;
}
@@ -23,6 +22,9 @@
.custom-shape-divider-bottom-1685513857 .shape-fill {
fill: rgb(228, 228, 228);
}
+.dark-mode .custom-shape-divider-bottom-1685513857 .shape-fill {
+ fill: var(--pure-black);
+}
@media (min-width: 768px) {
.custom-shape-divider-bottom-1685513857 {
diff --git a/assets/Styles/Dividers/dividerSkillsTools.css b/assets/Styles/Dividers/dividerSkillsTools.css
index 2879c76..b27dde8 100644
--- a/assets/Styles/Dividers/dividerSkillsTools.css
+++ b/assets/Styles/Dividers/dividerSkillsTools.css
@@ -1,63 +1,33 @@
+.wraper__skills {
+ position: relative;
+}
.custom-shape-divider-top-1697134839 {
position: absolute;
- top: -38px;
+ top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
+ background-color: black;
}
-
.custom-shape-divider-top-1697134839 svg {
position: relative;
display: block;
- width: calc(101% + 60.3px);
- height: 119px;
+ width: calc(100% + 581.3px);
+ height: 190px;
}
.custom-shape-divider-top-1697134839 .shape-fill {
- fill: transparent;
+ fill: var(--seccond-color);
}
.dark-mode .custom-shape-divider-top-1697134839 .shape-fill {
- fill: #2e016c ;
+ fill: #2e016c;
}
.dark-mode .custom-shape-divider-top-1697134839 {
- background-color: black
+ background-color: black;
}
-@media (min-width:678px) {
- .custom-shape-divider-top-1697134839 {
- position: absolute;
- top: -164px;
- left: 0;
- width: 100%;
- overflow: hidden;
- line-height: 0;
- }
-
- .custom-shape-divider-top-1697134839 svg {
- position: relative;
- display: block;
- width: calc(107% + 141.3px);
- height: 241px;
-}
-}
-@media (min-width:1200px) {
- .custom-shape-divider-top-1697134839 {
- position: absolute;
- top: -164px;
- left: 0;
- width: 100%;
- overflow: hidden;
- line-height: 0;
- }
-
- .custom-shape-divider-top-1697134839 svg {
- position: relative;
- display: block;
- width: calc(107% + 704.3px);
- height: 287px;
- }
-}
\ No newline at end of file
+
diff --git a/assets/Styles/Dividers/divierBlack.css b/assets/Styles/Dividers/divierBlack.css
index a0fc3ab..096dca0 100644
--- a/assets/Styles/Dividers/divierBlack.css
+++ b/assets/Styles/Dividers/divierBlack.css
@@ -3,7 +3,9 @@
display: block;
position: relative;
height: 28vh;
-
+}
+.dark-mode .wrapper__black {
+ background-color: #2e006e;
}
.custom-shape-divider-bottom-1693539436 {
position: absolute;
diff --git a/assets/Styles/dark-mode/darkmode.css b/assets/Styles/dark-mode/darkmode.css
index 0b78028..a623e4e 100644
--- a/assets/Styles/dark-mode/darkmode.css
+++ b/assets/Styles/dark-mode/darkmode.css
@@ -125,15 +125,6 @@
justify-content: flex-start;
background: linear-gradient(var(--gradient));
}
-/* DIVIDERS */
-.dark-mode .custom-shape-divider-bottom-1685513857 .shape-fill {
- fill: var(--pure-black);
-}
-
- .dark-mode .wrapper__black {
- background-color: #2e006e;
-}
-
/* Carrusel */
.dark-mode .tools__caja__slider {
diff --git a/assets/Styles/dark-mode/short-circuit.css b/assets/Styles/dark-mode/short-circuit.css
new file mode 100644
index 0000000..a38fc91
--- /dev/null
+++ b/assets/Styles/dark-mode/short-circuit.css
@@ -0,0 +1,221 @@
+.short-circuit body{
+ background: rgb(13, 13, 13);
+ color: white;
+}
+@keyframes flicker-in-infinite {
+ 0% {
+ opacity: 0;
+ }
+ 10% {
+ opacity: 0;
+ }
+ 10.1% {
+ opacity: 1;
+ }
+ 10.2% {
+ opacity: 0;
+ }
+ 20% {
+ opacity: 0;
+ }
+ 20.1% {
+ opacity: 1;
+ color: var(--glow-blue);
+ filter: drop-shadow(0 0 12px var(--blue));
+ }
+ 20.6% {
+ opacity: 0;
+ }
+ 30% {
+ opacity: 0;
+ }
+ 30.5% {
+ opacity: 1;
+ color: var(--glow-blue);
+ filter: drop-shadow(0 0 12px var(--blue));
+ }
+ 30.5% {
+ opacity: 1;
+ color: var(--glow-blue);
+ filter: drop-shadow(0 0 12px var(--blue));
+ }
+ 30.6% {
+ opacity: 0;
+ }
+ 45% {
+ opacity: 0;
+ }
+ 45.5% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 1;
+ color: var(--glow-blue);
+ filter: drop-shadow(0 0 12px var(--blue));
+ }
+ 55% {
+ opacity: 1;
+ color: var(--glow-blue);
+ filter: drop-shadow(0 0 12px var(--blue));
+ }
+ 55.1% {
+ opacity: 0;
+ color: var(--glow-blue);
+ filter: drop-shadow(0 0 12px var(--blue));
+ }
+ 57% {
+ opacity: 0;
+ }
+ 57.1% {
+ opacity: 1;
+ }
+ 60% {
+ opacity: 1;
+ }
+ 60.1% {
+ opacity: 0;
+ }
+ 65% {
+ opacity: 0;
+ }
+ 65.5% {
+ opacity: 1;
+ color: var(--glow-blue);
+ filter: drop-shadow(0 0 12px var(--blue));
+ }
+ 75% {
+ opacity: 1;
+ }
+ 75.1% {
+ opacity: 0;
+ }
+ 77% {
+ opacity: 0;
+ }
+ 77.1% {
+ opacity: 1;
+ color: var(--glow-blue);
+ filter: drop-shadow(0 0 12px var(--blue));
+ }
+ 85% {
+ opacity: 1;
+ }
+ 85.1% {
+ opacity: 0;
+ color: var(--glow-blue);
+ filter: drop-shadow(0 0 12px var(--blue));
+ }
+ 86% {
+ opacity: 0;
+ }
+ 86.1% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+.short-circuit .titulo{
+ animation: flicker-in-infinite 2s linear 0.5s both infinite;
+ transform: rotate(339deg);
+ overflow: hidden;
+
+}
+
+
+
+
+/* hero section */
+.short-circuit .hero{
+ background: rgb(13, 13, 13);
+}
+.short-circuit .hero__titulo span{
+ transform: rotate(-90deg);
+ animation: flicker-in-infinite 2s linear 0.5s both infinite;
+ color: var(--seccond-color);
+}
+.short-circuit .img__damage{
+ display: block;
+ transform: rotate(359deg);
+}
+.short-circuit .img__ligth{
+ display: none;
+}
+.short-circuit .platzi, .short-circuit .alura, .short-circuit .linkedin, .short-circuit .github, .short-circuit .youtube {
+ filter: invert(95%) sepia(9%) saturate(6%) hue-rotate(348deg) brightness(87%) contrast(81%);
+}
+
+
+
+
+/* Dividers */
+.short-circuit .custom-shape-divider-bottom-1685513857 .shape-fill {
+ fill: none;
+}
+/* Divider 2 */
+.short-circuit .custom-shape-divider-top-1697134839 svg{
+ background-color:transparent
+}
+.short-circuit .custom-shape-divider-top-1697134839 .shape-fill{
+ fill: none;
+}
+
+/* Section Skills */
+.short-circuit .img{
+ filter: saturate(0);
+}
+
+.short-circuit .slider{
+ animation: flicker-in-infinite 22s linear 3.9s both infinite
+}
+
+
+
+/* caja terminal */
+.short-circuit .caja__cristal{
+ background-color: rgb(37, 24, 8);
+}
+
+.short-circuit .terminal__content {
+ color: rgb(210, 30, 60);
+ line-height: 3rem;
+
+}
+
+.short-circuit .terminal__content span{
+ color: gray;
+}
+
+/* Section about */
+
+.short-circuit .about__img--src{
+ filter: saturate(0);
+ transform: rotate(11deg);
+}
+
+
+.short-circuit .portafolio__tarjeta .faceA{
+ background-color: rgb(26, 26, 26);
+}
+.short-circuit .portafolio__img{
+ filter: saturate(0);
+}
+
+.short-circuit .portafolio__tarjeta:hover .faceB{
+ background-color: rgb(26, 26, 26);
+}
+
+/* Youtube section */
+.short-circuit .ytchannel{
+ overflow: hidden;
+}
+.short-circuit .ytchannel__titulo{
+ z-index: 20;
+
+}
+
+
+/* Form section */
+.short-circuit .form__img{
+ filter: invert();
+}
\ No newline at end of file
diff --git a/assets/Styles/formulario.css b/assets/Styles/formulario.css
index afe09ca..a1ed436 100644
--- a/assets/Styles/formulario.css
+++ b/assets/Styles/formulario.css
@@ -38,14 +38,6 @@
color: var(--seccond-color);
}
-.formulario__submit {
- padding: 7px 10px;
- font-size: 1.7rem;
- font-weight: 600;
- width: 100%;
- max-width: 18rem;
-}
-
.form__content {
display: flex;
align-items: stretch;
diff --git a/assets/Styles/global.css b/assets/Styles/global.css
index 0d23fcf..60cc51b 100644
--- a/assets/Styles/global.css
+++ b/assets/Styles/global.css
@@ -6,14 +6,17 @@
html{
font-size: 62.5%;
}
-
+img {
+ height: auto;
+ width: 100%;
+}
:root{
--main-color: #181818;
--seccond-color: rgb(228, 228, 228);
--purple: #2e016c;
--dark-purple: rgb(22 0 54);
- --purple-bg: rgb(25, 0, 60);
+ --purple-bg: #19003c;
--ligth-purple: #610094;
--blue: #58ecff;
--gradient: 181deg, #000000 35%, #2e006e 100%;
diff --git a/assets/Styles/header/header.css b/assets/Styles/header/header.css
index bd6d0d0..5474457 100644
--- a/assets/Styles/header/header.css
+++ b/assets/Styles/header/header.css
@@ -202,7 +202,6 @@
.menu__link {
text-decoration: none;
font-size: 1.8rem;
- margin-left:2rem;
font-weight: 500;
color: var(--seccond-color);
}
@@ -232,4 +231,7 @@
.menu__list {
padding: 0.6rem 1rem;
}
+ .menu__link{
+ margin-left:2rem;
+ }
}
diff --git a/assets/Styles/hero/hero.css b/assets/Styles/hero/hero.css
index d191737..cef8c52 100644
--- a/assets/Styles/hero/hero.css
+++ b/assets/Styles/hero/hero.css
@@ -36,8 +36,8 @@
.flicker-in-1 {
animation: flicker-in-1 2s linear 0.5s both;
color: var(--seccond-color);
-
}
+
@keyframes flicker-in-1 {
0% {
@@ -184,7 +184,7 @@
position: relative;
max-width: 29rem;
}
-.img__dark {
+.img__dark, .img__damage {
display: none;
}
diff --git a/assets/Styles/tools.css b/assets/Styles/tools.css
index f36cf64..36b8ea0 100644
--- a/assets/Styles/tools.css
+++ b/assets/Styles/tools.css
@@ -2,7 +2,7 @@
display: flex;
position: relative;
flex-direction: column;
- height: 40vh;
+ background-color: black;
justify-content: flex-end;
margin-top: 35px;
@@ -13,6 +13,8 @@
display: flex;
justify-content: center;
margin: 0;
+ color: var(--green-terminal);
+
}
.tools__caja__slider{
display: flex;
@@ -84,6 +86,7 @@
display: flex;
text-align: center;
align-items:13px;
+ color: var(--green-terminal);
}
/*TABLET VIEW */
@@ -93,7 +96,6 @@
font-size: 4rem;
}
.tools{
- height: unset;
margin-top: 163px;
}
.slider{
diff --git a/assets/img/IA_BW.webp b/assets/img/IA_BW.webp
new file mode 100644
index 0000000..0219562
Binary files /dev/null and b/assets/img/IA_BW.webp differ
diff --git a/assets/img/IA_coca.webp b/assets/img/IA_coca.webp
new file mode 100644
index 0000000..14220b5
Binary files /dev/null and b/assets/img/IA_coca.webp differ
diff --git a/assets/img/IA_damage.webp b/assets/img/IA_damage.webp
new file mode 100644
index 0000000..ba0af8c
Binary files /dev/null and b/assets/img/IA_damage.webp differ
diff --git a/assets/img/PortfolioImg/SASS.webp b/assets/img/PortfolioImg/SASS.webp
new file mode 100644
index 0000000..ecd6341
Binary files /dev/null and b/assets/img/PortfolioImg/SASS.webp differ
diff --git a/assets/img/PortfolioImg/alura_flix.webp b/assets/img/PortfolioImg/alura_flix.webp
new file mode 100644
index 0000000..fdd160f
Binary files /dev/null and b/assets/img/PortfolioImg/alura_flix.webp differ
diff --git a/assets/img/PortfolioImg/alura_geek.webp b/assets/img/PortfolioImg/alura_geek.webp
new file mode 100644
index 0000000..7ef0339
Binary files /dev/null and b/assets/img/PortfolioImg/alura_geek.webp differ
diff --git a/assets/img/PortfolioImg/encriptador_mensajes_dark.webp b/assets/img/PortfolioImg/encriptador_mensajes_dark.webp
new file mode 100644
index 0000000..90f8f2e
Binary files /dev/null and b/assets/img/PortfolioImg/encriptador_mensajes_dark.webp differ
diff --git a/assets/img/PortfolioImg/portfolio.webp b/assets/img/PortfolioImg/portfolio.webp
new file mode 100644
index 0000000..32d958a
Binary files /dev/null and b/assets/img/PortfolioImg/portfolio.webp differ
diff --git a/assets/img/PortfolioImg/react_org.webp b/assets/img/PortfolioImg/react_org.webp
new file mode 100644
index 0000000..c2b1c90
Binary files /dev/null and b/assets/img/PortfolioImg/react_org.webp differ
diff --git a/assets/img/avatar-black.webp b/assets/img/avatar-black.webp
new file mode 100644
index 0000000..4e6e685
Binary files /dev/null and b/assets/img/avatar-black.webp differ
diff --git a/assets/img/avatar_pink.webp b/assets/img/avatar_pink.webp
new file mode 100644
index 0000000..fba24d6
Binary files /dev/null and b/assets/img/avatar_pink.webp differ
diff --git a/assets/img/sofi4.webp b/assets/img/sofi4.webp
new file mode 100644
index 0000000..4ced95e
Binary files /dev/null and b/assets/img/sofi4.webp differ
diff --git a/assets/sounds/LOKI_Opening.mp3 b/assets/sounds/LOKI_Opening.mp3
new file mode 100644
index 0000000..22eda9d
Binary files /dev/null and b/assets/sounds/LOKI_Opening.mp3 differ
diff --git a/assets/sounds/short_circuit.mp3 b/assets/sounds/short_circuit.mp3
new file mode 100644
index 0000000..fc2ce0f
Binary files /dev/null and b/assets/sounds/short_circuit.mp3 differ
diff --git a/components/CardsPortafolio.js b/components/CardsPortafolio.js
index 1be7c3d..0b26700 100644
--- a/components/CardsPortafolio.js
+++ b/components/CardsPortafolio.js
@@ -1,7 +1,7 @@
export default function CardsPortafolio(){
const portafolioData = [
{
- imgSrc: "https://github.com/SofiDevO/alura-flix/raw/sofidev/image-1.png",
+ imgSrc: "../assets/img/PortfolioImg/alura_flix.webp",
titulo: "Alura Flix",
skills: ["React", "styledComponents"],
descripcion: "Final project for the One Oracle Next Education Program. Educational programming video website demonstrating CRUD requests.",
@@ -9,7 +9,7 @@ export default function CardsPortafolio(){
repoURL: "https://github.com/SofiDevO/alura-flix"
},
{
- imgSrc: "https://user-images.githubusercontent.com/102200061/276017828-4983348b-bdc7-40ff-af28-0765d45a387a.png",
+ imgSrc: "../assets/img/PortfolioImg/react_org.webp",
titulo: "React ORG",
skills: ["React"],
descripcion: "React application to manage your team members.",
@@ -17,7 +17,7 @@ export default function CardsPortafolio(){
repoURL: "https://github.com/SofiDevO/react-org"
},
{
- imgSrc: "https://github.com/SofiDevO/alura-geek/raw/sofidev/image-1.png",
+ imgSrc: "../assets/img/PortfolioImg/alura_geek.webp",
titulo: "Alura Geek",
skills: ["JavaScript"],
descripcion: " CRUD operations using HTTP requests.",
@@ -25,7 +25,7 @@ export default function CardsPortafolio(){
repoURL: "https://github.com/SofiDevO/react-org"
},
{
- imgSrc: "./assets/img/PortfolioImg/sass_portada.png",
+ imgSrc: "../assets/img/PortfolioImg/SASS.webp",
titulo: "Eco Store",
skills: ["Sass", "JavaScript"],
descripcion: "Made with sass for the,Sass fundamentals course",
@@ -33,7 +33,7 @@ export default function CardsPortafolio(){
repoURL: "https://github.com/SofiDevO/eco-store-sass"
},
{
- imgSrc: "./assets/img/PortfolioImg/portada_portafolio.png",
+ imgSrc: "../assets/img/PortfolioImg/portfolio.webp",
titulo: "My Portfolio",
skills: ["JavaScript"],
descripcion: "Just the repository of my portfolio on GitHub.",
@@ -41,7 +41,7 @@ export default function CardsPortafolio(){
repoURL: "https://github.com/SofiDevO/portafolio-sofidev"
},
{
- imgSrc: "./assets/img/PortfolioImg/encriptador_mensajes_dark.png",
+ imgSrc: "../assets/img/PortfolioImg/encriptador_mensajes_dark.webp",
titulo: "Message Encryptor",
skills: ["JavaScript"],
descripcion: "Message Encryptor for the first Alura Latam Challenge: Programming Logic.",
diff --git a/controllers/darkTheme.js b/controllers/darkTheme.js
index 1eca31c..e225941 100644
--- a/controllers/darkTheme.js
+++ b/controllers/darkTheme.js
@@ -1,33 +1,24 @@
const d = document;
-
-
-let darkModeState = true;
-
-const toogleDarkMode = d.querySelectorAll("[data-toogle]");
-
+export let darkModeState = false;
+const toogleDarkMode = d.querySelector("[data-toogle]");
// MediaQueryList object
const useDark = window.matchMedia("(prefers-color-scheme: dark)");
+const useCircuit = window.matchMedia("(prefers-color-scheme: short-circuit)");
// Toggles the "dark-mode" class
export default function toggleDarkMode(state) {
d.documentElement.classList.toggle("dark-mode", state);
darkModeState = state;
if(d.documentElement.classList.contains("dark-mode")){
- toogleDarkMode.forEach(darkMode => {
- darkMode.classList.remove("bi-lightning-charge");
- darkMode.classList.add("bi-lightning-charge-fill");
- });
+ toogleDarkMode.classList.remove("bi-lightning-charge");
+ toogleDarkMode.classList.add("bi-lightning-charge-fill");
}else{
- toogleDarkMode.forEach(darkMode => {
- darkMode.classList.remove("bi-lightning-charge-fill");
- darkMode.classList.add("bi-lightning-charge");
- });
+ toogleDarkMode.classList.remove("bi-lightning-charge-fill");
+ toogleDarkMode.classList.add("bi-lightning-charge");
}
-
}
-
// Sets localStorage state
function setDarkModeLocalStorage(state) {
localStorage.setItem("dark-mode", state);
@@ -35,23 +26,26 @@ function setDarkModeLocalStorage(state) {
// Initial setting
toggleDarkMode(localStorage.getItem("dark-mode") == "true");
+let botonShortCut = 0;
// Listen for changes in the OS settings.
-// Note: the arrow function shorthand works only in modern browsers,
-// for older browsers define the function using the function keyword.
useDark.addEventListener('state',(evt) => toggleDarkMode(evt.matches));
-
// Toggles the "dark-mode" class on click and sets localStorage state
-
-
-
-toogleDarkMode.forEach(toogle => {
- toogle.addEventListener("click", (event) => {
- darkModeState = !darkModeState;
-
+toogleDarkMode.addEventListener("click", (clickHandler)=>{
+ darkModeState = !darkModeState;
+})
+function clickHandler() {
+ botonShortCut++;
+ console.log(botonShortCut)
+ if (botonShortCut <= 8) {
toggleDarkMode(darkModeState);
setDarkModeLocalStorage(darkModeState);
- });
-});
-
-
+ } else if (botonShortCut <= 15) {
+ document.documentElement.classList.add("short-circuit");
+ document.documentElement.classList.remove("dark-mode");
+ } else {
+ alert("You messed up. Click here to reload");
+ location.reload();
+ }
+}
+toogleDarkMode.addEventListener("click", clickHandler);
\ No newline at end of file
diff --git a/controllers/electricSound.js b/controllers/electricSound.js
index 5e1683e..f0d8214 100644
--- a/controllers/electricSound.js
+++ b/controllers/electricSound.js
@@ -1,34 +1,34 @@
-import toggleDarkMode from "../controllers/darkTheme.js"
const d = document;
-const btnDarkMode = d.querySelectorAll("[data-toogle]")
+const btnDarkMode = d.querySelector("[data-toogle]");
-
-function playIntro(time_in_milisec_volume, time_in_milisec){
- let audio = new Audio();
- audio.src = "../assets/sounds/LOKI Opening Theme.mp3";
- audio.volume -= 0.6;
- audio.play()
- setTimeout(() => {audio.volume -= 0.2;}, time_in_milisec_volume);
- setTimeout(() => { audio.pause() ;}, time_in_milisec);
+function shortCircuit(set_in_milisec) {
+ let audio = new Audio();
+ audio.src = "../assets/sounds/short_circuit.mp3";
+ audio.volume -= 0.6;
+ audio.play();
+ setTimeout(() => { audio.pause(); }, 1900);
}
-function playSound(){
- let audio = new Audio();
- audio.src = "../assets/sounds/franks-electricity.mp3";
- audio.volume -=0.7;
- audio.play()
-}
-export default btnDarkMode.forEach(boton => {
- boton.addEventListener('click', ()=>{
- if(d.documentElement.classList.contains("dark-mode")){
- playIntro(7000, 11000);
- }else{
- playSound()
- }
- })
-});
-
+export default function playSound() {
+ let audio = new Audio();
+ audio.src = "../assets/sounds/franks-electricity.mp3";
+ audio.volume -= 0.7;
+ audio.play();
+}
+
+let botonRayo = 0;
+
+function clickSoun() {
+ console.log(botonRayo)
+ botonRayo++;
+ if (botonRayo <= 8) {
+ playSound();
+ } else if (botonRayo <= 18) {
+ shortCircuit();
+ }
+}
+btnDarkMode.addEventListener("click", clickSoun);
diff --git a/controllers/latestYTVideos.js b/controllers/latestYTVideos.js
index 05e79b4..9f44403 100644
--- a/controllers/latestYTVideos.js
+++ b/controllers/latestYTVideos.js
@@ -15,7 +15,9 @@ export const loadVideo = (iframe) => {
.catch(error => console.log('error', error));
}
+document.addEventListener("DOMContentLoaded", (e)=> {
const iframes = document.getElementsByClassName('latestVideoEmbed');
for (let i = 0, len = iframes.length; i < len; i++) {
loadVideo(iframes[i]);
-}
\ No newline at end of file
+}
+})
\ No newline at end of file
diff --git a/index.html b/index.html
index 83ec671..7a521b2 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
-
+
@@ -9,8 +9,11 @@
+
+
+
SofiDev
-
+
SofiDev (Angela Sofía Osorio)
@@ -41,13 +44,15 @@
rel="stylesheet">
+
-
+
@@ -70,6 +75,7 @@
+
@@ -82,6 +88,7 @@
+
@@ -94,7 +101,7 @@