Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Y4ELX
Y4ELX authored Jun 1, 2024
1 parent c59c7f6 commit 356567f
Show file tree
Hide file tree
Showing 6 changed files with 177 additions and 49 deletions.
Binary file added img/CSSlogo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/HTMLlogo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/JSlogo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/THREEJSlogo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 54 additions & 46 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@
<button onclick="window.open('https://wa.link/lq502m')" onmouseover="cursorCH()" onmouseout="cursorNM()" class="otros">
Contacto
</button>
<button onmouseover="cursorCH()" onmouseout="cursorNM()" id="tocar4" class="proy">
<button onclick="window.open('https://github.com/Y4ELX')" onmouseover="cursorCH()" onmouseout="cursorNM()" id="tocar4" class="proy">
Proyectos
</button>
</div>

<!--HAMB------------------------------------------------------------------------------------->
<div class="hambMenu">
<div class="menuItems" id="menuItems">
<button>Holaaa</button>
<button style="display: none;">Holaaa</button>
</div>
</div>

Expand All @@ -53,40 +53,60 @@
</div>


<div>
<div style="position: relative; left: 25vh; width: 40%; height: 100vh;">
<p id="Acerca" style=" margin: 0; margin-bottom: 30px; padding-top: 16%; color: #c4c8de; font-family: sailec; font-weight: bold; font-size: 6vh; ">
<div id="Acerca" class="containerIn1">
<div class="containerIn4">
<p class="acercaTitulo">
Acerca de mí
</p>
<p style="margin: 0px; margin-right: 20%; color: #7d8191; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 1.5em;">
Tengo <span id="edadYael"></span> años, soy técnico en programación y actualmente estudio Ingeniería en Sistemas Computacionales y Electrónicos en <span onclick="window.open('https://www.une.edu.mx/')" style="cursor: pointer; font-weight: bold; color: #51e153;">Universidad del Noreste</span>, me especializo en desarrollo frontend.
<p class="acercade">
Tengo <span id="edadYael"></span> años, soy técnico en programación y actualmente estudio Ingeniería en Sistemas Computacionales y Electrónicos en la <span onclick="window.open('https://www.une.edu.mx/')" style="cursor: pointer; font-weight: bold; color: #51e153;">Universidad del Noreste</span>, me especializo en desarrollo frontend. Algunas de mis habilidades son:
<!-- <br><br>He completado mi educación en el nivel de preparatoria, obteniendo el título técnico en programación.
<br><br>-->
<br><br><br>
</p>
<button onclick="scrollToHabilidades()" class="botonindex">
Habilidades
</button>
<div style="flex-direction: column; display: flex; justify-content: center; align-items: center; width: 100%;">
<button onclick="scrollToHabilidades()" class="botonindex">
Ver mis habilidades
</button>
</div>
</div>
</div>


<div>
<div style="padding-left: 20%; height: 100vh; ">
<p id="Habilidades" style=" margin: 0; margin-bottom: 30px; padding-top: 10%; color: #c4c8de; font-family: sailec; font-weight: bold; font-size: 4em; ">
<div id="Habilidades" class="containerIn1">
<div class="containerIn5">
<p class="habilidadesTitulo">
Habilidades
</p>
<p style="margin: 0px; margin-right: 20%; color: #7d8191; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 1.5em;">
Algunas de mis habilidades son:
<br>
<br>
HTML<br>CSS<br>JavaScript<br>Android Studio<br>C#<br>Java<br>
<!-- <br><br>He completado mi educación en el nivel de preparatoria, obteniendo el título técnico en programación.
<br><br>-->
<br><br><br>
</p>
<div>
e

<div class="containerHab">

<div class="card" onmouseover="cursorCH()" onmouseout="cursorNM()">
<img src="img/HTMLlogo.png" alt="" class="imgClass">
<div>
<p class="text" >HTML</p>
</div>
</div>

<div class="card" onmouseover="cursorCH()" onmouseout="cursorNM()">
<img src="img/CSSlogo.png" alt="" class="imgClass">
<p class="text" >CSS</p>
</div>

<div class="card" onmouseover="cursorCH()" onmouseout="cursorNM()">
<img src="img/JSlogo.png" alt="" class="imgClass">
<div>
<p class="text" >JavaScript</p>
</div>
</div>

<div class="card" onmouseover="cursorCH()" onmouseout="cursorNM()">
<img src="img/THREEJSlogo.png" alt="" class="imgClass" style="border-radius: 0;">
<div>
<p class="text" >Three.js</p>
</div>
</div>

</div>
</div>
</div>
Expand Down Expand Up @@ -206,11 +226,6 @@
const acercaElement = document.getElementById('Habilidades');
acercaElement.scrollIntoView({ behavior: 'smooth' });
}

function scrollToContacto() {
const acercaElement = document.getElementById('Acerca');
acercaElement.scrollIntoView({ behavior: 'smooth' });
}
</script>

<script>
Expand All @@ -234,28 +249,21 @@
document.addEventListener('DOMContentLoaded', function () {
let edad = document.getElementById("edadYael");

const currentDate = new Date();
const fechaNacimiento = new Date(2005, 3, 23); // Año, mes (0-11), día

const ano = currentDate.getFullYear();
const mes = currentDate.getMonth() + 1;
const dia = currentDate.getDate();

console.log("año: " + ano);
console.log("mes: " + mes);
console.log("dia: " + dia);
const currentDate = new Date();
const anoActual = currentDate.getFullYear();
const mesActual = currentDate.getMonth() + 1;
const diaActual = currentDate.getDate();

let yM = false;
let edadYael = anoActual - fechaNacimiento.getFullYear();

if(mes>=4){
if(dia>=23){
yM=true;
}
// Verificar si ya ha pasado su cumpleaños de este año
if (mesActual < fechaNacimiento.getMonth() + 1 || (mesActual === fechaNacimiento.getMonth() + 1 && diaActual < fechaNacimiento.getDate())) {
edadYael--;
}

console.log(yM? ano - 2005 : ano - 2006)

let numEdad = yM ? ano - 2005 : ano - 2006;

edad.innerHTML = edadYael;
});
</script>
</html>
126 changes: 123 additions & 3 deletions public/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@
}

.botonindex {
width: 30%;
margin-left: 0px;
color: #51e153;
border: 2px solid #51e153;
Expand Down Expand Up @@ -274,7 +275,7 @@
visibility: hidden;
}

.sobre{
.sobre {
color: #7d8191;
text-align: justify;
text-justify: inter-word;
Expand All @@ -286,6 +287,16 @@
margin: 0px;
}

.acercade {
color: #7d8191;
text-align: justify;
text-justify: inter-word;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 3.5vh;
font-weight: 400;
margin: 0px;
}

.nombrevisible {
visibility: visible;
opacity: 1;
Expand All @@ -303,12 +314,96 @@
align-items: center;
}

.containerIn2{
.containerIn2 {
position: relative;
left: 25vh;
width: 40%;
}

.containerHab{
width: 100%;
height: 70vh;
gap: 4vh;
justify-content: center;
margin-bottom: 10vh;
display: flex;
flex-wrap: wrap;
}

.card{
width: 45vh;
display: flex;
padding: 3vh;
height: 29vh;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.3s ease-in-out;
border-radius: 3vh;
background-color: #0e101888;
}

.card:hover{
transform: scale(1.08);
transition: 0.3s ease-in-out;
}

.imgClass{
padding: 2vh;
border-radius: 5vh;
width: 20vh;
height: fit-content;
}

.containerIn4 {
position: relative;
left: 25vh;
width: 78%;
}

.containerIn5 {
position: relative;
left: 25vh;
width: 78%;
}

.acercaTitulo{
font-size: 9.5vh;
margin-bottom: 25px;
color: #c4c8de;
font-family: sailec;
font-weight: bold;
}

.habilidadesTitulo {
font-size: 9.5vh;
margin-bottom: 25px;
color: #c4c8de;
font-family: sailec;
font-weight: bold;
}


@media only screen and (max-width: 1100px) {
.containerHab {
padding-top: 7vh;
gap: 4vh;
margin-bottom: 0px;
}

.card {
height: 15vh;
width: 10vh;
}

.card:hover {
transform: scale(1);
}

.imgClass {
border-radius: 3vh;
width: 10vh;
}

.hambMenu{
display: flex;
Expand All @@ -332,11 +427,22 @@
align-items: flex-start;
}

.containerIn2{
.containerIn2 {
top: 15vh;
left: 3vh;
width: 86vw;
}

.containerIn4 {
left: 3vh;
width: 86vw;
}

.containerIn5{
left: 3vh;
width: 86vw;
}

.normalMenu {
display: none;
}
Expand All @@ -350,10 +456,24 @@
margin-bottom: 1vh;
}

.acercaTitulo{
font-size: 3vh;
margin-bottom: 1vh;
}

.habilidadesTitulo{
font-size: 3vh;
margin-top: 2vh;
}

.sobre {
font-size: 2vh;
}

.acercade {
font-size: 2vh;
}

.navbar {
height: 120px;
padding: 20px 2vh 20px 2vh;
Expand Down

0 comments on commit 356567f

Please sign in to comment.