Skip to content

Commit

Permalink
Responsive & Styles Updated v1
Browse files Browse the repository at this point in the history
  • Loading branch information
Alberto Ambriz authored and Alberto Ambriz committed Apr 18, 2024
2 parents 9a76df0 + 31f75ea commit c138ae7
Show file tree
Hide file tree
Showing 7 changed files with 225 additions and 195 deletions.
6 changes: 6 additions & 0 deletions app/components/navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,10 @@
.navbar{
display: none;
}
}

@media screen and (max-width: 480px){
.navbar{
display: none;
}
}
30 changes: 30 additions & 0 deletions app/components/projects.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@

import Image from 'next/image';

export default function (Proyectos) {
return (
<div className='projects'>
<h2>PROYECTOS</h2>
<div className="grid-containerprj">
<button className="container-project">
<div className="nameprj">Harmony & Heaven</div>
<div className="categorie">Grupal</div>
<div className="photoprj">
<Image src="" alt="" width={40} height={40} />
</div>
<div className="descriptionprj">
<h4>Tienda de instrumentos con CRUD, Inicio de sesión y Punto de venta.</h4>
</div>
<div className="lenguajesprj">
<Image src="https://static-00.iconduck.com/assets.00/node-js-icon-454x512-nztofx17.png" width={40} height={40} alt="" />
<Image src="https://cdn-icons-png.flaticon.com/512/5968/5968313.png" width={40} height={40} alt="" />
</div>
<div className="github">
<i className="bi bi-github"></i>Ver Repositorio
</div>
</button>
</div>
</div>
);
}

68 changes: 68 additions & 0 deletions app/components/tecnologies.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import Image from 'next/image';

export default function (Tecnologias) {
return (
<div className="lenguajes">
<h2>TECNOLOGIAS</h2>

<div class="grid-containertec">
<div class="grid-itemtec">
<h2>Frontend</h2>
<div className="tecnologias">
<div class="image-with-text">
<Image src="https://cdn-icons-png.flaticon.com/512/732/732212.png" width={40} height={40} alt="" />
<p>HTML</p>
</div>
<div class="image-with-text">
<Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/2048px-CSS3_logo.svg.png" width={40} height={40} alt="" />
<p>CSS</p>
</div>
<div class="image-with-text">
<Image src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" width={40} height={40} alt="" />
<p>JavaScript</p>
</div>
</div>
</div>
<div class="grid-itemtec">
<h2>Backend</h2>
<div className="tecnologias">
<div class="image-with-text">
<Image src="https://camo.githubusercontent.com/57849c6a718458e32ed51527a073b72d8f1737ee515ab6f80d5a9107a485f40c/68747470733a2f2f7777772e6461746f636d732d6173736574732e636f6d2f37353934312f313635373730373837382d6e6578746a735f6c6f676f2e706e67" width={40} height={40} alt="" />
<p>NextJS</p>
</div>
<div class="image-with-text">
<Image src="https://cdn-icons-png.flaticon.com/512/5968/5968313.png" width={40} height={40} alt="" />
<p>MySQL</p>
</div>
<div class="image-with-text">
<Image src="https://static-00.iconduck.com/assets.00/node-js-icon-454x512-nztofx17.png" width={40} height={40} alt="" />
<p>NodeJS</p>
</div>
</div>

</div>
<div class="grid-itemtec">
<h2>Aprendiendo</h2>
<div className="tecnologias">
<div class="image-with-text">
<Image src="https://cdn4.iconfinder.com/data/icons/logos-3/504/Swift-2-512.png" width={40} height={40} alt="" />
<p>Swift</p>
</div>
<div class="image-with-text">
<Image src="https://cdn.iconscout.com/icon/free/png-256/free-python-3521655-2945099.png?f=webp" width={40} height={40} alt="" />
<p>Python</p>
</div>
</div>

</div>
<div class="grid-itemtec">
<h2>Herramientas</h2>

</div>

</div>

</div>
)
}

77 changes: 67 additions & 10 deletions app/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,74 @@
transform: translateY(0);
}
}


div.arrow {
margin: auto;
margin-top: 7%;
width: 6vmin;
height: 6vmin;
box-sizing: border-box;
position: flex;
left: 50%;
top: 50%;
transform: rotate(-45deg);

&::before {
content: '';
width: 100%;
height: 100%;
border-width: .8vmin .8vmin 0 0;
border-style: solid;
border-color: #fafafa78;
transition: .2s ease;
display: block;
transform-origin: 100% 0;
}


&:after {
content: '';
float: left;
position: relative;
top: -100%;
width: 100%;
height: 100%;
border-width: 0 .8vmin 0 0;
border-style: solid;
border-color: #fafafa;
transform-origin: 100% 0;
transition:.2s ease;
}

&:hover::after {
transform: rotate(45deg);
border-color: orange;
height: 120%;
}
&:hover::before {
border-color: orange;
transform: scale(.8);

}

}
html{
background-image: linear-gradient(to bottom, #ff7e5f 15%, #ff7f5f 16%, #31405f 30%, #31405f 83%, #000000 89%, #000000 97%);
background-image: linear-gradient(to bottom, #ff7e5f 15%, #ff7f5f 14%, #31405f 28%, #31405f 84%, #000000 90%, #000000 97%);
font-family: 'Roboto', sans-serif;
height: auto;
overflow-x: hidden;
width: 100%;
transition: 700ms;
}

body{
overflow-y: hidden;
width: 100%;
}

.main{
overflow-y: auto; /* Permitir desplazamiento vertical cuando sea necesario */
margin-left: 5%;
width: 90%;
overflow-y: hidden;
margin-left: 0%;
width: 80%;
height: 100%;
color: rgb(255, 0, 0);
padding: 2%;
Expand Down Expand Up @@ -158,7 +214,6 @@ button{
grid-gap: 30px;
transition: 500ms;
}

.grid-itemtec {
margin-top: 5%;
border-radius: 30px;
Expand Down Expand Up @@ -211,7 +266,7 @@ button{

/* PROYECTOS */
.grid-containerprj{
margin-left: 6%;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(410px, 1fr)); /* Establece columnas con un mínimo de 200px y se ajustan automáticamente */
gap: 40px 20px; /* Espacio entre los elementos */
Expand Down Expand Up @@ -258,8 +313,8 @@ button{
}

.container-project:hover .lenguajesprj{
background-color: rgb(176, 176, 176);
transition: 500ms;
background-color: rgba(255, 255, 255, 0.601);
transition: 1500ms;
}

.container-project .lenguajesprj img{
Expand Down Expand Up @@ -296,6 +351,8 @@ button{
transition: 500ms;
}


/* CONTACT ME */
.contactme{
margin: auto;
margin-top: 20%;
Expand Down
123 changes: 34 additions & 89 deletions app/css/mainrespons.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* Estilos para tabletas */
@media screen and (max-width: 768px) {
@media screen and (max-width: 1024px) {
html{
background-image: linear-gradient(to bottom, #ff7e5f 5%, #ff7f5f 20%, #31405fe7 31%, #31405f 87%, #000000 91%);
overflow-y: auto
Expand Down Expand Up @@ -105,116 +105,61 @@
.contactme .correotxt{
font-size: 170%;
}
}



}







/* Estilos para teléfonos celulares */
@media screen and (max-width: 480px) {
html{
background-image: linear-gradient(to bottom, #ff7e5f 5%, #ff7f5f 13%, #31405fe7 20%, #31405f 90%, #000000 93%);
background-image: linear-gradient(to bottom, #ff7e5f 15%, #ff7f5f 14%, #31405f 28%, #31405f 84%, #000000 95%, #000000 100%);
overflow-x: hidden;
font-size: 50%;
}
.personaldata{
body{
width: 100%;
}
.main{
width: 90%;
}.personaldata{
margin-top: 10%;
flex-wrap: wrap;
text-align: left;
}
.datos1{
text-align: center;
padding-top: 15%;
padding-top: 10%;
margin-left: -15%;
width: 100%;
font-size: 200%;
}
.datos2{
margin-top: 10%;
margin-left: 5%;
width: 100%;
font-size: 200%;
margin-left: 2%;
width: 90%;
}
.lenguajes{
margin-top: 40%;
margin-left: -4%;

.grid-itemtec {
margin: auto;
width: 260px;
height: 200px;
}
.lenguajes h2{
margin-bottom: -15%;
margin-top: 10%;
font-size: 200%;
height: 100px;
.image-with-text img {
width: 40px; /* Ajusta el ancho según sea necesario */
height: 40px; /* Esto permite que la imagen se ajuste proporcionalmente */
}
.projects{
margin-bottom: 1%;
font-size: 200%;
width: 100%;
}
.projects h2{
height: 5%;
margin-left: 4%;
font-size: 150%;
.grid-containerprj{
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Establece columnas con un mínimo de 200px y se ajustan automáticamente */
padding: 0%;
width: 100%;
border: 1px solid red;
}
.grid-containertec {
display: flex;
justify-content: center; /* Para centrar horizontalmente */
align-items: center; /* Para centrar verticalmente */
margin: auto;
display: grid;
grid-template-columns: (auto-fill, minmax(95px, 0fr));
grid-gap: 30px;
}
.grid-itemtec {
margin-top: 5%;
margin-left: 15%;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.343);
background-color: rgba(55, 55, 55, 0.243);
padding: 15px;
width: 270px;
height: 270px;
}.grid-containertec h2{
margin-left: 5%;
font-size: 150%;
margin-bottom: -35%;
margin: auto;
color: rgba(255, 255, 255, 0.56);
}
.grid-itemtec .tecnologias{
font-size: 150%;
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columnas con igual ancho */
gap: 10px; /* Espacio entre los elementos */
}
.image-with-text {
margin: auto;
font-size: 50%;
}

.image-with-text img {
width: 50px; /* Ajusta el ancho según sea necesario */
height: 50px; /* Esto permite que la imagen se ajuste proporcionalmente */
}

.image-with-text p {
color: rgba(255, 255, 255, 0.349);
margin-top: 5px; /* Espacio entre la imagen y el texto */
}
.container-project{
margin-top: -5%;
margin-bottom: -5%;
font-size: 50%;
}
.container-project .nameprj{
font-size: 150%;
}
.contactme{
margin-top: 50%;
font-size: 30%;
}
.contactme .correotxt{
font-size: 170%;
border: 1px solid black;
margin: 0;
margin: auto;
width: 90%;
}

}
Loading

0 comments on commit c138ae7

Please sign in to comment.