Posted on by VManuelPM

Curriculum Vitae (CV) en Angular con Flexbox y Grid

miniatura-CV

Da un toque diferente a todos esos curriculum aburridos y marca la diferencia del resto de candidatos! con este proyecto de maquetación de un CV moderno en Angular realizado con Flexbox y Grid.

Demo

Clic en el siguiente icono

Repositorio

En el siguiente link encuentras el repositorio del proyecto

Requerimientos

  • Creación de proyecto con estilos SCSS
  • Conocimientos básicos en Flexbox y Grid
  • Assets que se encuentran abajo

Assets del proyecto

En el siguiente link encuentras los recursos utilizados en este proyecto

Creación de componentes

ng g c components/lateral
ng g c components/centro-superior
ng g c components/centro-inferior

A continuación se aprecia la función de cada componente.

componentes
Explicación de componentes

Instalación de dependecias

npm install --save ngx-stars

ngx-starts es la dependencia que facilita la creación de las estrellas de puntuación

Lo siguiente es colocar en el archivo index.html el cdn de font awesome

<script src="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></script>

Modificación estilo styles.css

Styles.css
/* You can add global styles to this file, and also import other style files */
//Agrega fuente para todo el proyecto
@font-face{
  font-family: 'rubik';
  src: url('assets/fonts/Rubik-VariableFont_wght.ttf');
}

html, body {
    height: 100vh;
    margin: 0;
    font-family: 'rubik';
}

App.component.html

<div class="container">

  <div class="lateral">
    <app-lateral></app-lateral>
  </div>

  <div class="centro">
    <div class="c-superior">
      <app-centro-superior></app-centro-superior>
    </div>

    <div class="c-inferior">
      <app-centro-inferior></app-centro-inferior>
    </div>
  </div>
</div>
<router-outlet></router-outlet>
.container{
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background-color: #FFF;
    justify-content: center;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(199,201,221,1) 35%, rgba(220,223,230,1) 100%); 
}

.lateral{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-basis: 25%;
    text-align: center;
    background-color: #1F497D;  
    color: #FFF;
    border: 1px solid #000;
    border-right: 0;
}

.centro{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-basis: 50%;
    text-align: center;
    border: 1px solid #000;
    border-left: 0;
    background-color: #FFF;
}

@media(max-width: 2560px){
    .lateral{
        flex-basis: 10%;
    }
    .centro{
        flex-basis: 30%;
    }
}

@media(max-width: 1920px){
    .lateral{
        flex-basis: 20%;
    }
    .centro{
        flex-basis: 40%;
    }
}

@media(max-width: 1440px){
    .lateral{
        flex-basis: 25%;
    }
    .centro{
        flex-basis: 50%;
    }
}

@media(max-width: 1024px){
    .lateral{
        flex-basis: 30%;
    }
    .centro{
        flex-basis: 60%;
    }
}

Componente lateral

<div class="titulo">
<h1>Victor Manuel Pedraza Moreno</h1>
</div>

<h2>Full Stack Developer</h2>

<div>
  <img id="foto" src="assets/img/usuario.svg" alt="foto" width="150" height="200">
</div>

<div class="datos">
  <div>
    <i class="fas fa-phone-alt"></i>
    <i class="fas fa-envelope"></i> 
    <i class="fas fa-thumbtack"></i>
  </div>
    <ul>
        <li> 310000000</li>
        <li> vmanuelpm97@gmail.com </li>
        <li> Medellín - Colombia </li>
    </ul>
</div>

<div class="redes">
      <a href="https://www.linkedin.com/in/victor-manuel-pedraza-moreno-212445157/">
        <img src="assets/img/linkedin.png" alt="linkedin" width="38" height="38">
      </a>
      <a href="https://github.com/VManuelPM?tab=repositories">
        <img src="assets/img/github.png" alt="github" width="38" height="38">
      </a>
      <a href="https://amoelcodigo.com">
        <img src="assets/img/www.png" alt="blog" width="38" height="38">
      </a>
      <a href="https://www.youtube.com/channel/UCyXew4kir7vJT7QY2MpM3_Q">
        <img src="assets/img/yotube.png" alt="youtube" width="38" height="38">
      </a>
</div>


<section class="perfil">
  <h2>Perfil</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi minus assumenda repellendus, veritatis sapiente fugiat
    hic labore doloribus rem amet natus, omnis quidem libero, repellat praesentium vel. Maxime, a est.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi minus assumenda repellendus, veritatis sapiente fugiat
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi minus assumenda repellendus, veritatis sapiente fugiat
    hic labore doloribus rem amet natus, omnis quidem libero, repellat praesentium vel. Maxime, a est.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi minus assumenda repellendus, veritatis sapiente fugiat
    hic labore doloribus rem amet natus, omnis quidem libero, repellat praesentium vel. Maxime, a est.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi minus assumenda repellendus, veritatis sapiente fugiat
    hic labore doloribus rem amet natus, omnis quidem libero, repellat praesentium vel. Maxime, a est.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi minus assumenda repellendus, veritatis sapiente fugiat
    hic labore doloribus rem amet natus, omnis quidem libero, repellat praesentium vel. Maxime, a est.
  </p>
</section>
.titulo {
  display: flex;
  justify-content: center;
}

h1 {
  flex-basis: 80%;
}

#foto {
  background-color: white;
}

.datos {
  display: flex;
  justify-content: space-evenly;
  & div {
    display: flex;
    flex-direction: column;
    align-self: center;
    font-size: 22px;
    & i {
      margin-top: 15px;
    }
  }
  & ul {
    list-style: none;
    padding: 0;
    & li {
      margin-top: 15px;
    }
  }
}

.redes {
  display: flex;
  justify-content: space-evenly;
  margin-top: 10px;
}

.perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  & h2 {
    margin-bottom: 0;
  }
  & p {
    width: 90%;
  }
}

Componente centro superior

<div class="banner">Historial de empleo</div>
<div class="experiencia">

    <div>
        <p>
            May, 2019-Present
            <span>(Medellín Colombia)</span>
        </p>
    </div>
    <div>
        <p>
            Empresa XYZ
            <span>Cargo</span>
        </p>
        <span>Cliente: El super cliente</span>
        <ul>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
        </ul>
        <span>Cliente: El super cliente</span>
        <ul>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
        </ul>
        <span>Cliente: El super cliente</span>
        <ul>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
        </ul>
    </div>

    <div>
        <p>
            May, 2019-Present
            <span>(Medellín Colombia)</span>
        </p>
    </div>
    <div>
        <p>
            Empresa XYZ
            <span>Cargo</span>
        </p>
        <ul>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
        </ul>
    </div>

    <div>
        <p>
            May, 2019-Present
            <span>(Medellín Colombia)</span>
        </p>
    </div>
    <div>
        <p>
            Empresa XYZ
            <span>Cargo</span>
        </p>
        <ul>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
            <li>Desarrollador Front-End Angular</li>
        </ul>
    </div>
</div>
@import '../../../assets/styles/shared.scss';

.experiencia{
    display: grid;
    grid-template-rows: repeat(3 , auto);
    grid-template-columns: 0.5fr 1fr;
    align-items: center;
    & div p {
        font-weight: bold;
        & span{
            display: block;
            color: #0e43f0;
        }
    }
}

Componente centro inferior

<div class="wrap-inferior">
    <div class="skills">
        <div class="banner">Skills</div>
        <ul>
            <li>Angular <ngx-stars [readonly]="true" [size]="1.5" [initialStars]="5"  color="#1F497D" ></ngx-stars></li>
            <li>Java <ngx-stars [readonly]="true" [size]="1.5" [initialStars]="4.5"  color="#1F497D" ></ngx-stars></li>
            <li>Azure Devops <ngx-stars [readonly]="true" [size]="1.5" [initialStars]="4"  color="#1F497D" ></ngx-stars></li>
            <li>AWS <ngx-stars [readonly]="true" [size]="1.5" [initialStars]="3"  color="#1F497D" ></ngx-stars></li>
            <li>Javascript <ngx-stars [readonly]="true" [size]="1.5" [initialStars]="4"  color="#1F497D" ></ngx-stars></li>
        </ul>
    </div>
    <div class="idiomas">
        <div class="banner">Idiomas</div>
        <ul>
            <li>Inglés <ngx-stars [readonly]="true" [size]="1.5" [initialStars]="5"  color="#1F497D" ></ngx-stars></li>
            <li>Español <ngx-stars [readonly]="true" [size]="1.5" [initialStars]="5"  color="#1F497D" ></ngx-stars></li>
        </ul>
    </div>
    <div class="educacion">
        <div class="banner">Educación</div>
        <ul>
            <li>
                Universidad de Programadores
                <span>Ingeniero de Sistemas</span>
                <span>19 de Febrero de 2019</span>
            </li>
            <li>
                Oracle Java
                <span>Certificación Java</span>
                <span>19 de Febrero de 2020</span>
            </li>
        </ul>
    </div>  
</div>
@import '../../../assets/styles/shared.scss';

.wrap-inferior{
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(2, 1fr);

    & .skills{
        grid-row: 1 / 3;
        border-right: 2px solid white;
    }
}

.raiting{
    height: 150px;
    background-color: white;
}

ul{
    list-style: none;
    & li {
        display: flex;
        margin-bottom: 5px;
    }
}

.skills ul{
    text-align: left;
    padding-left: 0;
    & li {
        flex-direction: column;
        align-items: center;
        font-weight: bold;
    }
}

.idiomas ul li {
    justify-content: space-between;
    padding-right: 10px;
}

.educacion ul li {
    flex-direction: column;
    align-items: flex-start;
    & span:first-child{
        color: #0e43f0;
        font-weight: bold;
    }
}

Contacto

Leave a Reply

Your email address will not be published.