Primer lanzamiento

Sin experiencia y sin foto mía

README.md

@@ -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

@@ -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: 10vw; /*35 cuando ponga la imágen*/
-	padding-right: 35vw; /*Padding para la imagen*/
 }

Styles/images.css

@@ -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

@@ -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*/
+.techIcon {		/*Propiedades de cada uno de los iconos*/
-	width: 5vw;
+	width: 5.5vw;
 	transition: all 0.3s ease-in-out;
 }
 .techIcon:hover{
 	width: 7.5vw;
 }
+
 #techDescription {
-	display: flex;
+	color: white; 
-	height: 10vh;
-	justify-content: center;
-	align-items: center;
 	transition: all 0.25s ease-in-out;
+	/*
+	align-items: center;
 	font-size: 5vh;
+	display: flex;
+	justify-content: center;
+	height: 10vh;
+	*/
 }

TypeScript/index.ts

@@ -1,11 +1,11 @@
 const techDescription = document.getElementById('techDescription');
 
 const techs = [
-	{ iconId: 'inoTechIcon', description: 'Descripción de Arduino (ino)' },
+	{ iconId: 'inoTechIcon', description: 'Arduino: Proyectos de electrónica y prototipos' },
-	{ iconId: 'cTechIcon', description: 'Descripción de C' },
+	{ iconId: 'cTechIcon', description: 'C: Mi lenguaje de programación principal' },
-	{ iconId: 'gitTechIcon', description: 'Descripción de Git' },
+	{ iconId: 'gitTechIcon', description: 'Git: Control de versiones de mis proyectos' },
-	{ iconId: 'linuxTechIcon', description: 'Descripción de Linux' },
+	{ iconId: 'linuxTechIcon', description: 'Linux: Uso diario y administración' },
-	{ iconId: 'rpiTechIcon', description: 'Descripción de Raspberry Pi' }
+	{ 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

@@ -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

@@ -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="puntosSobreMi">
-		<p class="puntosTech">
+			 &nbsp;Proyectos de electrónica, programación en C y trastear con Linux.
-			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit.
+		</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

@@ -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="puntosSobreMi">
-		<p class="puntosTech">
+			 &nbsp;Working on electronics projects, programming in C, and tinkering with Linux.
-			 Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus.
+		</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>