Some new things have happened for me in this world, I can start with that I migrated my work environment to the latest version of ubuntu (24.04), I was investigating and I only read good things about this option, I can confirm it, I am very well programming there now, even so I took care to install two environments in my computers: Windows to play and the before mentioned only for software development, if you are starting in this I would recommend you to do it, I feel it took me too much time to take the step... It is not mandatory, but you will realize with time why so many programmers choose a Linux distribution or similar to work with.
Han pasado algunas cosas nuevas para mi en este mundillo, puedo empezar con que migre mi entorno de trabajo a la última versión de ubuntu (24.04), estuve investigando y solo leí cosas buenas de esta opción, puedo confírmalo, estoy muy bien programando allí ahora, aún así me encargue de instalar dos entornos en mis computadora: Windows para jugar y el antes mencionado únicamente para desarrollo de software, si están empezando en esto les recomendaría hacerlo, siento que me tomo demasiado tiempo dar el paso... No es algo obligatorio, pero te darás cuenta con el tiempo del motivo por el cual tantos programadores eligen una distribución de Linux o similares para trabajar. |
|---|
I've been working with Backend for the last week, I'm really tired of spending so many neurons in problems that look simple... I can get frustrated at times, anyway, the point of this is that I have completely neglected the frontend, the issue of elaborating views I like too much and I wanted to make a personal practice limiting myself to only use HTML, CSS and JS only if it is really necessary, it's amazing the amount of talent I see in tiktok using css, is that basically with this you can do everything as we speak and not to mention frameworks like bootstrap or pre processors like sass.
He estado de lleno con Backend la ultima semana, realmente estoy cansado de gastar tantas neuronas en problemas que se ven sencillos... Puedo llegar a frustrarte en algunos momentos, en fin, el punto de esto es que he descuidado por completo el frontend, el tema de elaborar vistas a mi me gusta demasiado y quise hacer una practica personal limitándome a solo usar HTML, CSS y JS solo en caso de que realmente sea necesario, es increíble la cantidad de talento que veo en tiktok usando css, es que básicamente con esto puedes hacer de todo en cuanto hablamos y ni hablemos de frameworks como bootstrap o pre procesadores como sass. |
|---|
I try to do everything with the same tonality, that looks nice to the eye, a modern style but trying not to be more of the same landing page that you see on the web, I'm not saying it's bad, not at all, but I just want to achieve something different, this that you see in images has taken me 2 whole days since I had to research on the fly .... As any good junior😂 programmer, some things like the "sticky" position I tried them just for the first time, for the responsive theme I used bootstrap, I don't want to re-invent the wheel, the framework exists for a reason and besides editing its classes with sass is not exactly easy.
Intento hacer todo con la misma tonalidad, que se vea agradable a la vista, un estilo moderno pero intentando no se más de los mismos landing page que se ven por web, no digo que este mal, para nada, pero simplemente quiero lograr algo diferente, esto que ven en imágenes me ha tomado 2 días enteros ya que he tenido que investigar sobre la marcha... Como todo buen programador junior😂, algunas cosas como la posición "sticky" las probé apenas por primera vez, para el tema del responsive use bootstrap, no quiero re-inventar la rueda, para algo existe el framework y además editar sus clases con sass no es precisamente sencillo. |
|---|
The view for small devices is not yet completed, well, in fact the portfolio as such is not yet finished but I want to show you what would be halfway through the project, I would also like to leave the code so that any other member of the community can contribute something constructive to continue growing, also if you see something interesting that you could use your code feel free to take it, if you pass to see the code I tell you, I have: catchy menu, parrallax effect in the first section of the page, and a navigation section with tabs ... The rest is nothing that you can't do by handling the grid well or even with flexbox.
La vista para dispositivos pequeños aún no esta completada, bueno, de hecho el portafolio como tal aún no termina pero quiero mostrarles lo que vendría siendo medio camino del proyecto, además quisiera dejar el código para que cualquier otro miembro de la comunidad pueda aportar algo constructivo para seguir creciendo, además si ves algo interesante que podrías usar tú código siéntete libre de tomarlo, si de plano pasas de ver el código te cuento, tengo: Menú pegadizo, efecto parrallax en la primera sección de la pagina, y una sección de navegación con tabs... Lo demás no es nada que no puedas hacer manejando bien el grid o incluso con flexbox. |
|---|
Index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="../css/estilos.css">
<link rel="stylesheet" href="../css/botones.css">
<script src="https://kit.fontawesome.com/f29e25bcf3.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<title>Portafolio</title>
</head>
<header>
<nav class="nav navbar fixed-top navbar-expand-lg bg-dark p-md-3">
<a href="#" class="navbar-brand text-white" id="portafolio">PORTAFOLIO</a>
<button type="button" class="navbar-toggler" data-bs-target="#navbarResponsive" data-bs-toggle="collapse"
aria-controls="navbarNav" aria-expanded="false" aria-lable="Toggle Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="" class="nav-link text-white">Inicio</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text-white">Acerca de mi</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text-white">Sugerencias</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text-white">Contacto</a>
</li>
</ul>
</div>
</nav>
<div class="banner-image w-100 vh-100 d-flex justify-content-center align-items-center">
<div class="content text-center">
<h1 class="text-white">PORTAFOLIO</h1>
</div>
</div>
</header>
<body>
<div class="container-fluid d-flex mx-auto">
<div class="row">
<div class="col-md-9">
<h2 style="margin-left: 20px">¡Hola!</h2>
<p>Un apasionado por el codigo con una gran atracción por el diseño,
disfruto los <br> estilos minimalistas y en base a esto diría que dicho estilo
es mi forma favorita<br> de trabajar. En este espacio quiero hablarte un poco
acerca de mi y de mi<br> participación en el mundo de la programación y el
desarrollo web.</p>
</div>
<div class="col-md-3 justify-content-center align-items-center">
<img class="justify-content-center align-items-center" src="img/80_bWFuYWdlcl92LTAy.jpg">
</div>
</div>
</div>
<div class="container-fluid bg-black">
<div class="row">
<div class="col-md-7 my-auto mx-auto d-flex flex-wrap">
<img style="width: 120px; height: 120px; border-radius: 50%; margin-left: 20px;"
src="img/Captura desde 2022-11-25 02-59-47.png">
<img style="width: 120px; height: 120px; border-radius: 50%; margin-left: 50px"
src="img/Captura desde 2022-11-25 02-59-47.png">
<img style="width: 120px; height: 120px; border-radius: 50%; margin-left: 50px"
src="img/Captura desde 2022-11-25 02-59-47.png">
<img style="width: 120px; height: 120px; border-radius: 50%; margin-left: 50px"
src="img/Captura desde 2022-11-25 02-59-47.png">
</div>
<div class="col-md-5">
<h2 class="text-white text-center">¿Quien soy?</h2>
<section class="text-white mb-5">
Tengo 22 años, egrese como ingeniero en informatica en el año 2021, siento una gran pasion por el
desarrollo web y la tecnología en general, mis areas de especialidad son: HTML, css(scss),
javaScript y java. Diría que mi principal caracteristica es la capacidad de buscar soluciones ante
cualquier adversidad. Actualmente me especializo en el desarrollo de aplicaciones mediantes jsp y
servlets, estos son algunos de mis proyectos recientes:
</section>
</div>
</div>
</div>
<div class="container-tabs">
<div class="container-tabs-2">
<div class="content">
<input type="radio" name="indicador" id="Estudios">
<input type="radio" name="indicador" id="Experiencia">
<input type="radio" name="indicador" id="Objetivos">
<div class="list">
<label for="Estudios" class="Estudios">
<span class="topic">Estudios</span>
</label>
<label for="Experiencia" class="Experiencia">
<span class="topic">Habilidad</span>
</label>
<label for="Objetivos" class="Objetivos">
<span class="topic">Objetivos</span>
</label>
<div class="indicador"></div>
</div>
<div class="text-content">
<div class="estudios text">
<div class="row">
<div class="col-md-9">
<div class="title">Estudios</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia placeat vel quia a
illo
veritatis debitis fuga praesentium ducimus minus, quasi, quis tenetur fugit quaerat
voluptates modi in fugiat cum!</p>
</div>
<div class="col-md-3">
<article>
<label>HTML</label>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-dark progress-bar-animated"
role="progressbar" aria-label="Animated striped example" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 90%">90%</div>
</div>
<label class="mt-4">CSS</label>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-secondary progress-bar-animated"
role="progressbar" aria-label="Animated striped example" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 67%">67%</div>
</div>
<label class="mt-4">JS</label>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-dark progress-bar-animated"
role="progressbar" aria-label="Animated striped example" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 45%">45%</div>
</div>
<label class="mt-4">JAVA</label>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-secondary progress-bar-animated"
role="progressbar" aria-label="Animated striped example" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 75%">75%</div>
</div>
<label class="mt-4">PHP</label>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-dark progress-bar-animated"
role="progressbar" aria-label="Animated striped example" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 60%">60%</div>
</div>
<label class="mt-4">MYSQL</label>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-secondary progress-bar-animated"
role="progressbar" aria-label="Animated striped example" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div>
</div>
</article>
</div>
</div>
</div>
<div class="experiencia text">
<div class="title">Experiencia</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto illum sequi mollitia,
cupiditate modi quod provident sed amet. Aliquid qui, ab quas laborum consequatur saepe officia</p>
<div class="objetivos text">
<div class="title">Objetivos</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</body>
</html>
Estilos.css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Rubik', sans-serif;
}
/* Seccion Header*/
.nav {
position: sticky;
top: 0;
}
.banner-image {
background-image: url(../img/71307-empresa.jpg);
background-size: cover;
background-attachment: fixed;
}
h1 {
font-family: 'Rubik', sans-serif;
font-weight: 600;
}
#portafolio {
font-weight: 700;
}
header,
.a {
font-weight: 500;
}
/* Seccion 1 */
h2 {
font-size: 40px;
font-weight: 700;
margin-top: 50px;
}
img {
width: 400px;
}
p {
text-align: justify;
font-size: 20px;
margin-top: 30px;
margin-bottom: 50px;
}
/* Seccion 2*/
section {
text-align: justify;
}
/* Navegación con tabs - Seccion 3 */
.container-tabs {
min-height: 70vh;
width: 100%;
display: flex;
align-items: center;
justify-content: left;
}
.container-tabs-2 {
max-width: 950px;
width: 100%;
background-color: white;
margin: 0 20px;
padding: 30px 50px 40px 40px;
border-radius: 12px;
}
.container-tabs-2 .main-tittle {
font-size: 30px;
font-weight: 500;
margin-bottom: 2px;
}
.container-tabs-2 .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.container-tabs-2 .content .list {
display: flex;
flex-direction: column;
position: relative;
width: 20%;
margin-right: 50px;
}
.content .list label {
height: 60px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
border-radius: 12px;
line-height: 60px;
color: black;
z-index: 12;
transition: all 0.4s ease;
}
.content .list label:hover {
color: rgb(58, 58, 58);
}
#Estudios:checked~.list .Estudios,
#Experiencia:checked~.list .Experiencia,
#Objetivos:checked~.list .Objetivos {
color: #fff
}
.content .indicador {
position: absolute;
height: 60px;
width: 100%;
top: 0;
left: -20px;
background: black;
border-radius: 12px;
transition: all 0.2s ease;
}
#Estudios:checked~.list .indicador {
top: 0;
}
#Experiencia:checked~.list .indicador {
top: 60px;
}
#Objetivos:checked~.list .indicador {
top: 120px;
}
.container-tabs-2 input[type="radio"] {
display: none;
}
.container-tabs-2 .content .text-content {
width: 80%;
height: 100%;
}
.content .text-content .text {
display: none;
}
.content .text-content .estudios {
display: block;
}
#Estudios:checked~.text-content .estudios,
#Experiencia:checked~.text-content .experiencia,
#Objetivos:checked~.text-content .objetivos {
display: block;
}
#Experiencia:checked~.text-content .estudios,
#Objetivos:checked~.text-content .estudios {
display: none;
}
.content .text-content .title {
font-size: 25px;
font-weight: 500;
margin-bottom: 10px;
}
.content .text-content p {
text-align: justify;
}
article {
width: 300px;
margin-left: 250px;
margin-top: -10px;
background-color: white;
height: 400px;
padding: 20px;
border-radius: 20px;
box-shadow: 1px 1px 5px;
transition: all 2s ease;
}
label {
font-weight: 500;
}
/Tarjeta personal/
.tarjeta img {
width: 120px;
border-radius: 20px;
}
.trasera {
background-color: black;
height: 164px;
border-radius: 20px;
transition: all 0.4s linear;
transform: rotateY(180deg);
}
.delantera,
.trasera {
position: absolute;
backface-visibility: hidden;
top: 0;
left: 0;
width: 120px;
height: 164px;
}
.delantera {
z-index: 2;
transition: all 0.4s linear;
}
.tarjeta {
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
width: 120px;
height: 164px;
border-radius: 20px;
}
/* Hovers*/
.tarjeta:hover .delantera {
transform: rotateY(180deg);
cursor: pointer;
}
.tarjeta:hover .trasera {
transform: rotateY(360deg);
cursor: pointer;
}
br {
background-color: black;
}