troyale/.profile
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Primer lanzamiento

Browse Source 
Sin experiencia y sin foto mía
This commit is contained in:
T-Royale committed 2025-06-16 00:32:10 +02:00
1 parent d9db18d987
commit d23198c96f
8 files changed
+125 -44
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+1 -1
View File
@@ -1,5 +1,5 @@
## [Mi portfolio personal](https://t-royale.github.io/T-Royale/)
### En construcción
### Primer lanzamiento
#### Este proyecto hace uso de los siguientes recursos de acceso público:
+ **[Fuentes Nerd Fonts](https://www.nerdfonts.com/)**: Tipografías e iconos.
Styles/generic.css
+3 -4
View File
@@ -1,10 +1,9 @@
body {
background-color: #181818;
justify-self: center;
text-align: center;
font-family: AgaveNerdFont;
}
.title {
text-align: center;
font-size: 5.75vh;
color: #ffffff;
}
@@ -17,10 +16,10 @@ body {
margin: 2.5vh;
}
#texto {
margin-left: 10vw;
color: #ffffff;
font-size: 3.5vh;
text-align: justify;
line-height: 150%;
padding-left: 3vw;
padding-right: 35vw; /*Padding para la imagen*/
padding-right: 10vw; /*35 cuando ponga la imágen*/
}
Styles/images.css
+2 -1
View File
@@ -1,10 +1,10 @@
/*
#imageTeo {
position: absolute;
left: 70vw;
top: 20vh;
width: 20vw;
height: 40vh;
/*"Insertar Imágen"*/
background-color:dimgrey;
justify-content: center;
display: flex;
@@ -13,3 +13,4 @@
font-size: 5vw;
border-radius: 2.5%;
}
*/
Styles/index.css
+33 -9
View File
@@ -8,6 +8,11 @@
100% { transform: rotate(0deg); }
}
p {
margin-top: 1vh;
margin-bottom: 1vh;
}
#hi {
color: rgb(9, 255, 0);
display: inline-block;
@@ -28,15 +33,30 @@
#sobreMi {
color: #0084ff;
}
.puntosSobreMi{
padding-left: 2vw;
}
.puntosSobreMi::first-letter {
color: #0084ff;
}
#techStack {
.puntosExperiencia {
padding-left: 2vw;
}
#experiencia {
color: yellow;
}
.puntosTech::first-letter {
.puntosExperiencia::first-letter {
color: yellow;
}
#tecnologias{
color: #00ff40;
}
.puntoTecnologías {
margin-left: 2vw;
}
.puntoTecnologías::first-letter{
color: #00ff40;
}
#techIcons { /*div donde están los iconos*/
display: flex;
flex-direction: row;
@@ -46,20 +66,24 @@
justify-self: center;
justify-content: space-evenly;
align-items: center;
margin-top: 1.5vh;
margin-top: 3vh;
}
.techIcon { /*Propiedades para todos los iconos*/
width: 5vw;
.techIcon { /*Propiedades de cada uno de los iconos*/
width: 5.5vw;
transition: all 0.3s ease-in-out;
}
.techIcon:hover{
width: 7.5vw;
}
#techDescription {
display: flex;
height: 10vh;
justify-content: center;
align-items: center;
color: white;
transition: all 0.25s ease-in-out;
/*
align-items: center;
font-size: 5vh;
display: flex;
justify-content: center;
height: 10vh;
*/
}
TypeScript/index.ts
+7 -7
View File
@@ -1,11 +1,11 @@
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' }
{ iconId: 'inoTechIcon', description: 'Arduino: Proyectos de electrónica y prototipos' },
{ iconId: 'cTechIcon', description: 'C: Mi lenguaje de programación principal' },
{ iconId: 'gitTechIcon', description: 'Git: Control de versiones de mis proyectos' },
{ iconId: 'linuxTechIcon', description: 'Linux: Uso diario y administración' },
{ iconId: 'rpiTechIcon', description: 'Raspberry Pi: Servidores caseros y homelabs' }
];
if(!techDescription){
alert('ERROR: No se ha encontrado el elemento "techDescription"')
@@ -22,10 +22,10 @@ if(!techDescription){
techDescription.innerText = tech.description;
switch (tech.iconId) {
case 'inoTechIcon':
techDescription.style.color = 'lightskyblue';
techDescription.style.color = 'aqua';
break;
case 'cTechIcon':
techDescription.style.color = '#0051FF';
techDescription.style.color = '#1578fa';
break;
case 'gitTechIcon':
techDescription.style.color = 'orangered';
TypeScript/index_en.ts
+45
View File
@@ -0,0 +1,45 @@
const techDescription_en = document.getElementById('techDescription');
const techs_en = [
{ iconId: 'inoTechIcon', description: 'Arduino: Electronics projects and prototyping' },
{ iconId: 'cTechIcon', description: 'C: My main programming language' },
{ iconId: 'gitTechIcon', description: 'Git: Version control for all my projects' },
{ iconId: 'linuxTechIcon', description: 'Linux: Daily use and administration' },
{ iconId: 'rpiTechIcon', description: 'Raspberry Pi: Home servers and homelabs' }
];
if(!techDescription_en){
alert('ERROR: No se ha encontrado el elemento "techDescription"')
} else {
techs_en.forEach( tech => {
const icon = document.getElementById(tech.iconId);
if(!icon){
alert('ERROR: elemento con ID ${tech.iconID} no encontrado');
return;
}
icon.addEventListener('mouseenter', () => {
techDescription_en.innerText = tech.description;
switch (tech.iconId) {
case 'inoTechIcon':
techDescription_en.style.color = 'aqua';
break;
case 'cTechIcon':
techDescription_en.style.color = '#1578fa';
break;
case 'gitTechIcon':
techDescription_en.style.color = 'orangered';
break;
case 'linuxTechIcon':
techDescription_en.style.color = 'yellow';
break;
case 'rpiTechIcon':
techDescription_en.style.color = '#FB266A';
break;
default:
break;
}
});
});
}
index.html
+16 -10
View File
@@ -21,19 +21,26 @@
<img src="/Images/English.png" class="flag hidden">
</a>
<div id="contentDivider"></div>
<div id="imageTeo">Insertar imágen</div>
<!-- <div id="imageTeo">Insertar imágen</div>-->
<div id="texto">
<p class="apartado" id="sobreMi"> &nbsp;Sobre mí:</p>
<p class="apartado" id="sobreMi"> &nbsp;Sobre mí:</p>
<p class="puntosSobreMi">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit.
&nbsp;Estudio el grado medio de SMR en Valencia.
</p>
<p class="apartado" id="techStack">&nbsp;Tecnologías:</p>
<p class="puntosTech">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit.
<p class="puntosSobreMi">
&nbsp;Proyectos de electrónica, programación en C y trastear con Linux.
</p>
<p class="puntosSobreMi">
&nbsp;Siempre montando cosas nuevas y aprendiendo por mi cuenta.
</p>
<p class="apartado" id="experiencia">&nbsp;Experiencia:</p>
<p class="puntosExperiencia">
&nbsp;No mucha
</p>
<p class="apartado" id="tecnologias">&nbsp;Tecnologías:</p>
<p class="puntoTecnologías">
&nbsp;<span id="techDescription">Acerca el ratón a los iconos para descubrir</span>
</p>
</div>
<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">
@@ -42,7 +49,6 @@
<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>
<!--/Texto de prueba/-->
<!--Barra lateral-->
<div id="leftBar">
<a href="https://discord.bio/T_Royale">
index_en.html
+18 -12
View File
@@ -10,7 +10,7 @@
<link rel="stylesheet" href="/Styles/languageSelector.css">
<link rel="stylesheet" href="/Styles/generic.css">
<link rel="stylesheet" href="/Styles/images.css">
<script src="/Scripts/index.js" defer></script>
<script src="/Scripts/index_en.js" defer></script>
</head>
<body>
<div>
@@ -21,19 +21,26 @@
<img src="/Images/English.png" class="flag shown">
</a>
<div id="contentDivider"></div>
<div id="imageTeo">Insertar imágen</div>
<!--<div id="imageTeo">Insert Image</div>-->
<div id="texto">
<p class="apartado" id="sobreMi"> &nbsp;About me:</p>
<p class="apartado" id="sobreMi"> &nbsp;About me:</p>
<p class="puntosSobreMi">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit.
&nbsp;I’m studying a vocational degree in Computer Systems (SMR) in Valencia.
</p>
<p class="apartado" id="techStack">&nbsp;Tech stack:</p>
<p class="puntosTech">
 Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus.
<p class="puntosSobreMi">
&nbsp;Working on electronics projects, programming in C, and tinkering with Linux.
</p>
<p class="puntosSobreMi">
&nbsp;Always building new things and learning on my own.
</p>
<p class="apartado" id="experiencia">&nbsp;Experience:</p>
<p class="puntosExperiencia">
&nbsp;Not much yet.
</p>
<p class="apartado" id="tecnologias">&nbsp;Technologies:</p>
<p class="puntoTecnologías">
&nbsp;<span id="techDescription">Hover over the icons to find out more</span>
</p>
</div>
<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">
@@ -42,7 +49,6 @@
<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>
<!--/Texto de prueba/-->
<!--Barra lateral-->
<div id="leftBar">
<a href="https://discord.bio/T_Royale">
@@ -51,7 +57,7 @@
<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=Hola, quiero contactarte">
<a href="mailto:teomoralesvelasco@icloud.com?subject=Hi, I want to contact you">
<img src="https://skillicons.dev/icons?i=gmail&theme=dark" class="leftBar_icon" id="Gmail"/>
</a>
</div>