diff --git a/Images/English.png b/Images/English.png index 2dd6c69..a9a4ae0 100644 Binary files a/Images/English.png and b/Images/English.png differ diff --git a/README.md b/README.md index 8e87f21..48389fd 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ -# Mi portfolio personal -## En construcción -[URL](https://t-royale.github.io/T-Royale/) +## [Mi portfolio personal](https://t-royale.github.io/T-Royale/) +### En construcción + +#### Este proyecto hace uso de los siguientes recursos de acceso público: ++ **[Fuentes Nerd Fonts](https://www.nerdfonts.com/)**: Tipografías e iconos. ++ **[Imágenes de Wikipedia](https://www.wikipedia.org/)**: Imágenes de dominio público como banderas. ++ **[Iconos de skillicons.dev](https://skillicons.dev/)**: Logotipos de tecnologías y medios de contacto. diff --git a/Styles/generic.css b/Styles/generic.css new file mode 100644 index 0000000..2401e19 --- /dev/null +++ b/Styles/generic.css @@ -0,0 +1,26 @@ +body { + background-color: #181818; + justify-self: center; + text-align: center; + font-family: AgaveNerdFont; +} +.title { + font-size: 5.75vh; + color: #ffffff; +} +#contentDivider { + background-color: gray; + border-radius: 3rem; + width: 60vw; + height: 0.5vh; + justify-self: center; + margin: 2.5vh; +} +#texto { + color: #ffffff; + font-size: 3.5vh; + text-align: justify; + line-height: 150%; + padding-left: 3vw; + padding-right: 6vw; +} \ No newline at end of file diff --git a/Styles/index.css b/Styles/index.css index 8c7c87e..e794739 100644 --- a/Styles/index.css +++ b/Styles/index.css @@ -1,37 +1,21 @@ -body { - background-color: #181818; - justify-self: center; - text-align: center; - font-family: AgaveNerdFont; +@keyframes handWave { + 0% { transform: rotate(0deg); } + 15% { transform: rotate(30deg); } + 30% { transform: rotate(0deg); } + 45% { transform: rotate(25deg); } + 60% { transform: rotate(0deg); } + 75% { transform: rotate(15deg); } + 100% { transform: rotate(0deg); } } -.selectLanguage { - position: absolute; - top: 2vh; - right: 1vw; + +#hi { + color: rgb(9, 255, 0); + display: inline-block; + transform-origin: bottom left; } -.flag { - height: 6vh; - width: 5vw; -} -#textoDePrueba { - color: #ffffff; - font-size: 32px; - text-align: justify; - line-height: 150%; - padding-left: 3vw; - padding-right: 6vw; -} -.bigText { - font-size: 300%; - color: #ffffff; -} -#barraHorizontal { - background-color: gray; - border-radius: 3px; - width: 60vw; - height: 5px; - justify-self: center; - margin: 25px; + +#hi:hover { + animation: handWave 1.5s ease-in-out; } .apartado { font-family: AgaveNerdFont; @@ -44,36 +28,38 @@ body { #sobreMi { color: #0084ff; } -#stack { - color: yellow +.puntosSobreMi::first-letter { + color: #0084ff; } -#leftBar { - position: fixed; - top: 50%; - right: 1vw; - transform: translateY(-50%); - width: 4vw; /* Ajusta el ancho según necesites */ - height: 60vh; /* Ajusta la altura que quieras que tenga la barra */ - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background-color: #202020; - border-radius: 10px; /* Bordes redondeados del lado izquierdo */ +#techStack { + color: yellow; } -.leftBar_icon { - width: 3vw; - border-width: 3px; - border-radius: 10px; - flex-grow: 1; +.puntosTech::first-letter { + color: yellow; +} +#techIcons { /*div donde están los iconos*/ + display: flex; + flex-direction: row; + width: 100%; + height: 15vh; + /*background-color: #0084ff;*/ + justify-self: center; + justify-content: space-evenly; + align-items: center; + margin-top: 1.5vh; +} +.techIcon { /*Propiedades para todos los iconos*/ + width: 5vw; transition: all 0.3s ease-in-out; } -#GitHub:hover { - box-shadow: 0px 0px 20px rgb(195, 0, 255); +.techIcon:hover{ + width: 7.5vw; } -#Discord:hover { - box-shadow: 0px 0px 20px rgb(0, 132, 255); -} -#Gmail:hover { - box-shadow: 0px 0px 20px rgb(255, 0, 0); +#techDescription { + display: flex; + height: 10vh; + justify-content: center; + align-items: center; + transition: all 0.25s ease-in-out; + font-size: 5vh; } \ No newline at end of file diff --git a/Styles/languageSelector.css b/Styles/languageSelector.css new file mode 100644 index 0000000..8f90b51 --- /dev/null +++ b/Styles/languageSelector.css @@ -0,0 +1,18 @@ +.flag { + position: absolute; + top: 4vh; + right: 2vw; + height: 7.5vh; + width: auto; + border-radius: 0.5vh; +} +.hidden { + z-index: 0; +} +.shown { + z-index: 1; + transition: all 1s ease; +} +.shown:hover { + opacity: 0; +} \ No newline at end of file diff --git a/Styles/sideBar.css b/Styles/sideBar.css new file mode 100644 index 0000000..ddab608 --- /dev/null +++ b/Styles/sideBar.css @@ -0,0 +1,30 @@ +#leftBar { + position: fixed; + top: 50%; + right: 1vw; + transform: translateY(-50%); + width: 4vw; + height: 60vh; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background-color: #202020; + border-radius: 0.5vw; +} +.leftBar_icon { + width: 3vw; + border-width: 2vw; + border-radius: 0.80vw; + flex-grow: 1; + transition: all 0.3s ease-in-out; +} +#GitHub:hover { + box-shadow: 0vw 0vw 2vw rgb(195, 0, 255); +} +#Discord:hover { + box-shadow: 0vw 0vw 2vw rgb(0, 132, 255); +} +#Gmail:hover { + box-shadow: 0vw 0vw 2vw rgb(255, 0, 0); +} \ No newline at end of file diff --git a/TypeScript/index.ts b/TypeScript/index.ts index e69de29..d87ef14 100644 --- a/TypeScript/index.ts +++ b/TypeScript/index.ts @@ -0,0 +1,45 @@ +const techDescription = document.getElementById('techDescription'); + +const techs = [ + { iconId: 'inoTechIcon', description: 'Descripción de Arduino (ino)' }, + { iconId: 'cTechIcon', description: 'Descripción de C' }, + { iconId: 'gitTechIcon', description: 'Descripción de Git' }, + { iconId: 'linuxTechIcon', description: 'Descripción de Linux' }, + { iconId: 'rpiTechIcon', description: 'Descripción de Raspberry Pi' } +]; +if(!techDescription){ + alert('ERROR: No se ha encontrado el elemento "techDescription"') +} else { + techs.forEach( tech => { + const icon = document.getElementById(tech.iconId); + + if(!icon){ + alert('ERROR: elemento con ID ${tech.iconID} no encontrado'); + return; + } + + icon.addEventListener('mouseenter', () => { + techDescription.innerText = tech.description; + switch (tech.iconId) { + case 'inoTechIcon': + techDescription.style.color = 'lightskyblue'; + break; + case 'cTechIcon': + techDescription.style.color = '#0051FF'; + break; + case 'gitTechIcon': + techDescription.style.color = 'orangered'; + break; + case 'linuxTechIcon': + techDescription.style.color = 'yellow'; + break; + case 'rpiTechIcon': + techDescription.style.color = '#FB266A'; + break; + default: + break; + } + }); + + }); +} \ No newline at end of file diff --git a/index.html b/index.html index d565722..b8afda0 100644 --- a/index.html +++ b/index.html @@ -4,40 +4,42 @@ T_Royale - - + + + + + + -
- - - -
-

¡Hola, mi nombre es Teo!

+

¡Hola, mi nombre es Teo! 󱠢  

-
+ + + + +
-
+

  Sobre mí:

-

-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. Quisque vestibulum, leo nec cursus aliquet, velit magna varius nisi, a tincidunt mi ligula id lorem. Morbi aliquet nulla sit amet urna gravida, et tincidunt ante viverra. Fusce sed orci a metus convallis ullamcorper. Nulla facilisi. Vivamus id arcu non arcu luctus facilisis sit amet vel felis. Integer et nulla orci. Nulla posuere orci at risus congue malesuada. Donec sit amet vestibulum ipsum. +

+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. Quisque vestibulum, leo nec cursus aliquet, velit magna varius nisi, a tincidunt mi ligula id lorem. Morbi aliquet nulla sit amet urna gravida, et tincidunt ante viverra. Fusce sed orci a metus convallis ullamcorper.

-

  Tecnologías:

-

-  Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus. Nam auctor lectus ac nulla euismod, a pretium nisi faucibus. Fusce dictum lorem nec mi interdum, vel venenatis urna tristique. Nulla at libero sit amet lorem luctus vestibulum a ac eros. Cras ac posuere ligula. Ut non risus a purus dictum scelerisque sit amet id sapien. Nunc id ante nulla. Nam porttitor libero et risus fermentum, eget varius ante iaculis. Fusce suscipit turpis et lacus dapibus, eget euismod nulla feugiat. Nulla consectetur est in erat vehicula feugiat. -

-

-  Integer vel ante a urna pharetra dignissim vel ac lacus. Aliquam feugiat massa non feugiat vulputate. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean at tincidunt erat. Morbi auctor turpis felis, non aliquet tortor euismod sed. Phasellus ultricies auctor erat, sed vestibulum ante volutpat ut. Curabitur in magna vitae nisi convallis hendrerit. Donec dictum velit vel mi interdum maximus. Etiam lacinia ligula sapien, ac rutrum leo lobortis id. Ut ut lectus ut libero maximus egestas. -

- -

-  Quisque non bibendum augue. Donec ullamcorper lectus neque, a ultricies lectus iaculis ac. Sed pretium leo non libero tincidunt, at maximus odio congue. Nunc gravida, enim id varius vulputate, arcu dui tincidunt risus, et iaculis nulla velit a velit. Aenean in neque quis neque dapibus elementum. Curabitur non sem felis. Vivamus ornare, neque in rutrum viverra, magna urna rutrum odio, id placerat justo lorem nec libero. Donec nec sem eget dui lacinia hendrerit sit amet at nunc. Integer sit amet augue eu purus facilisis maximus. In a gravida mi. -

- -

-  Nam lacinia nunc ac nisi pharetra, vel dictum mi egestas. Nulla fermentum felis et arcu hendrerit, sed condimentum libero facilisis. Vivamus malesuada tincidunt ipsum, in volutpat leo ultricies sit amet. Aliquam lobortis tristique quam, sit amet dapibus sapien tempus eu. Suspendisse eu metus sit amet dui lobortis posuere vel a nulla. Cras mollis, libero ac malesuada convallis, purus eros posuere magna, sed pharetra odio augue eu risus. Integer condimentum, justo ac venenatis feugiat, odio risus ultricies augue, nec auctor sapien dui vel ligula. +

  Tecnologías:

+

+  Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus.

+
+ Prueba1: Este es un lenguaje +
+
+ + + + + +
@@ -53,6 +55,5 @@
- \ No newline at end of file diff --git a/index_en.html b/index_en.html index 744a3ce..bd7d0ad 100644 --- a/index_en.html +++ b/index_en.html @@ -1,43 +1,45 @@ - + T_Royale - + + + + + -
- - - -
-

Hi, I'm Teo!

+

Hi, I'm Teo! 󱠢  

-
+ + + + +
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. Quisque vestibulum, leo nec cursus aliquet, velit magna varius nisi, a tincidunt mi ligula id lorem. Morbi aliquet nulla sit amet urna gravida, et tincidunt ante viverra. Fusce sed orci a metus convallis ullamcorper. Nulla facilisi. Vivamus id arcu non arcu luctus facilisis sit amet vel felis. Integer et nulla orci. Nulla posuere orci at risus congue malesuada. Donec sit amet vestibulum ipsum. +

+

  About me:

+

+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. Quisque vestibulum, leo nec cursus aliquet, velit magna varius nisi, a tincidunt mi ligula id lorem. Morbi aliquet nulla sit amet urna gravida, et tincidunt ante viverra. Fusce sed orci a metus convallis ullamcorper.

- -

- Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus. Nam auctor lectus ac nulla euismod, a pretium nisi faucibus. Fusce dictum lorem nec mi interdum, vel venenatis urna tristique. Nulla at libero sit amet lorem luctus vestibulum a ac eros. Cras ac posuere ligula. Ut non risus a purus dictum scelerisque sit amet id sapien. Nunc id ante nulla. Nam porttitor libero et risus fermentum, eget varius ante iaculis. Fusce suscipit turpis et lacus dapibus, eget euismod nulla feugiat. Nulla consectetur est in erat vehicula feugiat. -

- -

- Integer vel ante a urna pharetra dignissim vel ac lacus. Aliquam feugiat massa non feugiat vulputate. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean at tincidunt erat. Morbi auctor turpis felis, non aliquet tortor euismod sed. Phasellus ultricies auctor erat, sed vestibulum ante volutpat ut. Curabitur in magna vitae nisi convallis hendrerit. Donec dictum velit vel mi interdum maximus. Etiam lacinia ligula sapien, ac rutrum leo lobortis id. Ut ut lectus ut libero maximus egestas. -

- -

- Quisque non bibendum augue. Donec ullamcorper lectus neque, a ultricies lectus iaculis ac. Sed pretium leo non libero tincidunt, at maximus odio congue. Nunc gravida, enim id varius vulputate, arcu dui tincidunt risus, et iaculis nulla velit a velit. Aenean in neque quis neque dapibus elementum. Curabitur non sem felis. Vivamus ornare, neque in rutrum viverra, magna urna rutrum odio, id placerat justo lorem nec libero. Donec nec sem eget dui lacinia hendrerit sit amet at nunc. Integer sit amet augue eu purus facilisis maximus. In a gravida mi. -

- -

- Nam lacinia nunc ac nisi pharetra, vel dictum mi egestas. Nulla fermentum felis et arcu hendrerit, sed condimentum libero facilisis. Vivamus malesuada tincidunt ipsum, in volutpat leo ultricies sit amet. Aliquam lobortis tristique quam, sit amet dapibus sapien tempus eu. Suspendisse eu metus sit amet dui lobortis posuere vel a nulla. Cras mollis, libero ac malesuada convallis, purus eros posuere magna, sed pharetra odio augue eu risus. Integer condimentum, justo ac venenatis feugiat, odio risus ultricies augue, nec auctor sapien dui vel ligula. +

  Tech stack:

+

+  Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus.

+
+ Prueba1: Este es un lenguaje +
+
+ + + + + +
@@ -48,11 +50,10 @@ - +
- \ No newline at end of file