16-04-25
Mejorado el formato de la página
This commit is contained in:
troyale committed
1 parent
aa0d5215ca
commit
b4b474d57c
9 files changed
+226
-115
No files matched your search
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 39 KiB |
@@ -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.
|
||||
@@ -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;
|
||||
}
|
||||
+42
-56
@@ -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 */
|
||||
#techStack {
|
||||
color: yellow;
|
||||
}
|
||||
.puntosTech::first-letter {
|
||||
color: yellow;
|
||||
}
|
||||
#techIcons { /*div donde están los iconos*/
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
/*background-color: #0084ff;*/
|
||||
justify-self: center;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
background-color: #202020;
|
||||
border-radius: 10px; /* Bordes redondeados del lado izquierdo */
|
||||
margin-top: 1.5vh;
|
||||
}
|
||||
.leftBar_icon {
|
||||
width: 3vw;
|
||||
border-width: 3px;
|
||||
border-radius: 10px;
|
||||
flex-grow: 1;
|
||||
.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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
+28
-27
@@ -4,40 +4,42 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>T_Royale</title>
|
||||
<link rel="icon" href="favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="Styles/index.css">
|
||||
<link rel="stylesheet" href="Styles/fonts.css">
|
||||
<link rel="stylesheet" href="/Styles/index.css">
|
||||
<link rel="stylesheet" href="/Styles/fonts.css">
|
||||
<link rel="stylesheet" href="/Styles/sideBar.css">
|
||||
<link rel="stylesheet" href="/Styles/languageSelector.css">
|
||||
<link rel="stylesheet" href="/Styles/generic.css">
|
||||
<script src="/Scripts/index.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="selectLanguage">
|
||||
<a href="/index_en.html">
|
||||
<img src="/Images/Spanish.png" class="flag">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="bigText">¡Hola, mi nombre es Teo!</h1>
|
||||
<h1 class="title">¡Hola, mi nombre es Teo! <span id="hi"> </span></h1>
|
||||
</div>
|
||||
<div id="barraHorizontal"></div>
|
||||
<a href="/index_en.html">
|
||||
<img src="/Images/Spanish.png" class="flag shown">
|
||||
<img src="/Images/English.png" class="flag hidden">
|
||||
</a>
|
||||
<div id="contentDivider"></div>
|
||||
<!--Texto de prueba-->
|
||||
<div id="textoDePrueba">
|
||||
<div id="texto">
|
||||
<p class="apartado" id="sobreMi"> Sobre mí:</p>
|
||||
<p>
|
||||
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.
|
||||
<p class="puntosSobreMi">
|
||||
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.
|
||||
</p>
|
||||
<p class="apartado" id="stack"> Tecnologías:</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.
|
||||
<p class="apartado" id="techStack"> Tecnologías:</p>
|
||||
<p class="puntosTech">
|
||||
Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus.
|
||||
</p>
|
||||
<div id="techDescription">
|
||||
Prueba1: Este es un lenguaje
|
||||
</div>
|
||||
<div id="techIcons">
|
||||
<img src="https://skillicons.dev/icons?i=arduino&theme=dark" class="techIcon" id="inoTechIcon">
|
||||
<img src="https://skillicons.dev/icons?i=c&theme=dark" class="techIcon" id="cTechIcon">
|
||||
<img src="https://skillicons.dev/icons?i=git&theme=dark" class="techIcon" id="gitTechIcon">
|
||||
<img src="https://skillicons.dev/icons?i=linux&theme=light" class="techIcon" id="linuxTechIcon">
|
||||
<img src="https://skillicons.dev/icons?i=raspberrypi&theme=light" class="techIcon" id="rpiTechIcon">
|
||||
</div>
|
||||
</div>
|
||||
<!--/Texto de prueba/-->
|
||||
<!--Barra lateral-->
|
||||
@@ -53,6 +55,5 @@
|
||||
</a>
|
||||
</div>
|
||||
<!--/Barra lateral/-->
|
||||
<script href="Scripts/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+30
-29
@@ -1,43 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>T_Royale</title>
|
||||
<link rel="icon" href="/favicon.png" type="image/png">
|
||||
<link rel="icon" href="favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="/Styles/index.css">
|
||||
<link rel="stylesheet" href="/Styles/fonts.css">
|
||||
<link rel="stylesheet" href="/Styles/sideBar.css">
|
||||
<link rel="stylesheet" href="/Styles/languageSelector.css">
|
||||
<link rel="stylesheet" href="/Styles/generic.css">
|
||||
<script src="/Scripts/index.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="selectLanguage">
|
||||
<a href="/index.html">
|
||||
<img src="/Images/English.png" class="flag">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="bigText">Hi, I'm Teo!</h1>
|
||||
<h1 class="title">Hi, I'm Teo! <span id="hi"> </span></h1>
|
||||
</div>
|
||||
<div id="barraHorizontal"></div>
|
||||
<a href="/index.html">
|
||||
<img src="/Images/Spanish.png" class="flag hidden">
|
||||
<img src="/Images/English.png" class="flag shown">
|
||||
</a>
|
||||
<div id="contentDivider"></div>
|
||||
<!--Texto de prueba-->
|
||||
<div id="textoDePrueba">
|
||||
<p>
|
||||
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.
|
||||
<div id="texto">
|
||||
<p class="apartado" id="sobreMi"> About me:</p>
|
||||
<p class="puntosSobreMi">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.
|
||||
<p class="apartado" id="techStack"> Tech stack:</p>
|
||||
<p class="puntosTech">
|
||||
Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus.
|
||||
</p>
|
||||
<div id="techDescription">
|
||||
Prueba1: Este es un lenguaje
|
||||
</div>
|
||||
<div id="techIcons">
|
||||
<img src="https://skillicons.dev/icons?i=arduino&theme=dark" class="techIcon" id="inoTechIcon">
|
||||
<img src="https://skillicons.dev/icons?i=c&theme=dark" class="techIcon" id="cTechIcon">
|
||||
<img src="https://skillicons.dev/icons?i=git&theme=dark" class="techIcon" id="gitTechIcon">
|
||||
<img src="https://skillicons.dev/icons?i=linux&theme=light" class="techIcon" id="linuxTechIcon">
|
||||
<img src="https://skillicons.dev/icons?i=raspberrypi&theme=light" class="techIcon" id="rpiTechIcon">
|
||||
</div>
|
||||
</div>
|
||||
<!--/Texto de prueba/-->
|
||||
<!--Barra lateral-->
|
||||
@@ -48,11 +50,10 @@
|
||||
<a href="https://github.com/T-Royale">
|
||||
<img src="https://skillicons.dev/icons?i=github&theme=dark" class="leftBar_icon" id="GitHub"/>
|
||||
</a>
|
||||
<a href="mailto:teomoralesvelasco@icloud.com?subject=Hello, I want to contact you">
|
||||
<a href="mailto:teomoralesvelasco@icloud.com?subject=Hola, quiero contactarte">
|
||||
<img src="https://skillicons.dev/icons?i=gmail&theme=dark" class="leftBar_icon" id="Gmail"/>
|
||||
</a>
|
||||
</div>
|
||||
<!--/Barra lateral/-->
|
||||
<script href="/Scripts/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user