From d23198c96f414bfb6273a14e0c56da051b6b1b25 Mon Sep 17 00:00:00 2001 From: T-Royale <141929186+T-Royale@users.noreply.github.com> Date: Mon, 16 Jun 2025 00:32:10 +0200 Subject: [PATCH] Primer lanzamiento MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sin experiencia y sin foto mía --- README.md | 2 +- Styles/generic.css | 7 +++---- Styles/images.css | 7 ++++--- Styles/index.css | 44 +++++++++++++++++++++++++++++++---------- TypeScript/index.ts | 14 ++++++------- TypeScript/index_en.ts | 45 ++++++++++++++++++++++++++++++++++++++++++ index.html | 26 ++++++++++++++---------- index_en.html | 30 +++++++++++++++++----------- 8 files changed, 128 insertions(+), 47 deletions(-) create mode 100644 TypeScript/index_en.ts diff --git a/README.md b/README.md index 48389fd..a9f9b43 100644 --- a/README.md +++ b/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. diff --git a/Styles/generic.css b/Styles/generic.css index da445da..6dcd9bc 100644 --- a/Styles/generic.css +++ b/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: 35vw; /*Padding para la imagen*/ + padding-right: 10vw; /*35 cuando ponga la imágen*/ } \ No newline at end of file diff --git a/Styles/images.css b/Styles/images.css index 3ee7a1b..1a4eb15 100644 --- a/Styles/images.css +++ b/Styles/images.css @@ -1,10 +1,10 @@ -#imageTeo { +/* + #imageTeo { position: absolute; left: 70vw; top: 20vh; width: 20vw; height: 40vh; - /*"Insertar Imágen"*/ background-color:dimgrey; justify-content: center; display: flex; @@ -12,4 +12,5 @@ align-items: center; font-size: 5vw; border-radius: 2.5%; -} \ No newline at end of file +} +*/ \ No newline at end of file diff --git a/Styles/index.css b/Styles/index.css index e794739..2c365b9 100644 --- a/Styles/index.css +++ b/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*/ - 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; + +#techDescription { + color: white; transition: all 0.25s ease-in-out; + /* + align-items: center; font-size: 5vh; + display: flex; + justify-content: center; + height: 10vh; + */ } \ No newline at end of file diff --git a/TypeScript/index.ts b/TypeScript/index.ts index d87ef14..defb26c 100644 --- a/TypeScript/index.ts +++ b/TypeScript/index.ts @@ -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'; diff --git a/TypeScript/index_en.ts b/TypeScript/index_en.ts new file mode 100644 index 0000000..6816d15 --- /dev/null +++ b/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; + } + }); + + }); +} \ No newline at end of file diff --git a/index.html b/index.html index 218dce1..a94c8b4 100644 --- a/index.html +++ b/index.html @@ -21,19 +21,26 @@
-
Insertar imágen
+
-

  Sobre mí:

+

  Sobre mí:

-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. +   Estudio el grado medio de SMR en Valencia.

-

  Tecnologías:

-

-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. +

+   Proyectos de electrónica, programación en C y trastear con Linux. +

+

+   Siempre montando cosas nuevas y aprendiendo por mi cuenta. +

+

  Experiencia:

+

+   No mucha +

+

  Tecnologías:

+

+   Acerca el ratón a los iconos para descubrir

-
-
- Prueba1: Este es un lenguaje
@@ -42,7 +49,6 @@
-
diff --git a/index_en.html b/index_en.html index 444437a..95b355f 100644 --- a/index_en.html +++ b/index_en.html @@ -10,7 +10,7 @@ - +
@@ -21,19 +21,26 @@
-
Insertar imágen
+
-

  About me:

+

  About me:

-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. +   I’m studying a vocational degree in Computer Systems (SMR) in Valencia.

-

  Tech stack:

-

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

+   Working on electronics projects, programming in C, and tinkering with Linux. +

+

+   Always building new things and learning on my own. +

+

  Experience:

+

+   Not much yet. +

+

  Technologies:

+

+   Hover over the icons to find out more

-
-
- Prueba1: Este es un lenguaje
@@ -42,7 +49,6 @@
-