Bootstrap - Portafolio - 01

Aquí estan dos hojas de código, una en "HTML" y otra en "CSS", y claro que inicialmente se debe tener agregado bootstrap 4. También puedo decir que este es un diseño muy elegante para un portafolio con mucho contenido, claro que lo ideal es tratar de que quede en un tamaño imprimible a hoja tipo carta o un formato en esas dimensiones.

HTML

   <div class="pag-one font-one">
  <div class="row">
   <div class="col-md-4 bg-dark">
    <div class="text-center mt-5">
     <img src="img/alex.png" class="foto" alt="">
    </div>

    <div class="subtitle p-5 text-light">
     <h2>A CERCA DE MI</h2>
     <div class="decor">
      <hr class="decor-two">
     </div>
     
     <p>
      Me describo como Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut sit magnam, nostrum ipsam expedita suscipit commodi quasi id asperiores, perferendis veniam sunt cupiditate architecto nobis dicta hic eligendi quia molestiae..
     </p>
    </div>

    <div class="contact p-5 text-light">
     <h2>CONTACTO</h2>
     <div class="decor">
      <hr class="decor-two">
     </div>
     <p class="mt-4"><strong>Dirección:</strong></p>
     <p>xxxxxxxxxxxx<br>
     (La pradera - parque el triangulo)
     </p>

     <p class="mt-3"><strong>Teléfonos:</strong></p>
     <p>xxxxxxxxxxxxx</p>

     <p class="mt-3"><strong>Email:</strong></p>
     <p>xxxxxxxx@gmail.com</p>

     <p class="mt-3"><strong>Fecha y lugar de nacimiento:</strong></p>
     <p>xxxxxxxxx</p>

     <p class="mt-3"><strong>Blog</strong></p>
     <p>https://maximo2014.blogspot.com/</p>

     <h2 class="mt-5">SKILLS</h2>
     <div class="decor">
      <hr class="decor-two">
     </div>
     
     <div class="skill mt-4">
      <p><strong>HTML</strong></p>
      <div class="decor2">
       <hr width="80%" height="5">
      </div>
     </div>
     <div class="skill mt-3">
      <p><strong>CSS</strong></p>
      <div class="decor2">
       <hr width="70%">
      </div>
     </div>
     <div class="skill mt-3">
      <p><strong>JAVASCRIPT</strong></p>
      <div class="decor2">
       <hr width="40%">
      </div>
     </div>
     <div class="skill mt-3">
      <p><strong>TYPESCRIPT</strong></p>
      <div class="decor2">
       <hr width="30%">
      </div>
     </div>
     <div class="skill mt-3">
      <p><strong>PHP</strong></p>
      <div class="decor2">
       <hr width="60%">
      </div>
     </div>
     <div class="skill mt-3">
      <p><strong>JAVA</strong></p>
      <div class="decor2">
       <hr width="40%">
      </div>
     </div>
     <div class="skill mt-3">
      <p><strong>C#</strong></p>
      <div class="decor2">
       <hr width="20%">
      </div>
     </div>

     <div class="skill mt-3">
      <p><strong>SQL</strong></p>
      <div class="decor2">
       <hr width="50%">
      </div>
     </div>

     <div class="skill mt-3">
      <p>ASP.NET</p>
      <div class="decor2">
       <hr width="30%">
      </div>
     </div>

     <div class="skill mt-3">
      <p>Bootstrapt</p>
      <div class="decor2">
       <hr width="80%">
      </div>
     </div>
     <div class="skill mt-3">
      <p>Ajax</p>
      <div class="decor2">
       <hr width="20%">
      </div>
     </div>
     <div class="skill mt-3">
      <p>jQuery</p>
      <div class="decor2">
       <hr width="20%">
      </div>
     </div>
     <div class="skill mt-3">
      <p>Angular</p>
      <div class="decor2">
       <hr width="40%">
      </div>
     </div>

     <div class="skill mt-3">
      <p>Wordpress</p>
      <div class="decor2">
       <hr width="80%">
      </div>
     </div>
     <div class="skill mt-3">
      <p>Joomla</p>
      <div class="decor2">
       <hr width="20%">
      </div>
     </div>
   
    </div>
    
    
   </div><!-- fin col-4 -->
   <div class="col-md-8 pl-0 pr-0">
    <div class="title-one mt-5 p-5">
     <h1 class="text-light pl-5">ALEX MUÑOZ</h1>
     <h5 class="pl-5">DESARROLLADOR WEB</h5>
     <hr class="decor-one pl-5">
    </div>
    <div class="descriptions p-5">
     <div class="experience ml-5 mr-5 mt-3">
      <h2 class="text-body mb-0">EXPERIENCIA</h2>
      <div class="decor">
       <hr class="decor-two">
      </div>
      <div class="company">
       <h3 class="text-secondary mt-5 mb-0">SIMBOLO INTERACTIVO / 2018 - 2019</h3>
       <h4 class="color-one"><strong>DESARROLLADOR WEB</strong></h4>
       <p class="text-secondary">
        Me desempeñe en la construcción de páginas web con CMS Wordpress, Actualizaciones web con Joomla y Prestashop. Desarrollo con enfasis en PHP y bases de datos SQL.
       </p>
       <div class="d-flex justify-content-between">
        <p><strong class="color-one">Jefe inmediato: </strong> xxxxxxxxxx</p>
        <p><strong class="color-one">Teléfonos: </strong> xxxxxxxxxxxxxxxx</p>
        <p><strong class="color-one">Dirección: </strong> xxxxxxxxxxxxxxx</p>
       </div>
      </div>
      <div class="company">
       <h3 class="text-secondary mt-5 mb-0">ESTRATEGICO DIGITAL / 2017 - 2018</h3>
       <h4 class="color-one"><strong>DESARROLLADOR WEB</strong></h4>
       <p class="text-secondary">
        Desarrollo de páginas web con Wordpress, Actualizaciones con Joomla, Magento y Wix. Desarrollo a través de PHP y bases de datos SQL.
       </p>
       <div class="d-flex justify-content-between">
        <p><strong class="color-one">Jefe inmediato: </strong> xxxxxxx Rocha</p>
        <p><strong class="color-one">Teléfonos: </strong> xxxxxxxxxxxxxx</p>
        <p><strong class="color-one">Dirección: </strong> xxxxxxxxxxxxxxx</p>
       </div>
      </div>

      <div class="company">
       <h3 class="text-secondary mt-5 mb-0">FOTOS DIGITALES / 2016 - 2017</h3>
       <h4 class="color-one"><strong>ADMINISTRADOR</strong></h4>
       <p class="text-secondary">
        Administración general, toma de fotografías y edición, ingreso de datos a la Web del Ejército Colombiano Papelería para tramites INDUMIL
       </p>
       <div class="d-flex justify-content-between">
        <p><strong class="color-one">Jefe inmediato: </strong> xxxxxxxxxxxxxx</p>
        <p><strong class="color-one">Teléfonos: </strong> xxxxxxxxxxxxx </p>
        <p><strong class="color-one">Dirección: </strong> xxxxxxxxxxxx</p>
       </div>
      </div>
     </div><!-- end EXPERIENCIA -->
     <div class="experience m-5">
      <h2 class="text-body mb-0">EDUCACIÓN</h2>
      <div class="decor">
       <hr class="decor-two">
      </div>

      <div class="company">
       <h3 class="text-secondary mt-5 mb-0">TECNOLOGÍA EN DESARROLLO DE SOFTWARE / 2018 - <small>(ACTUALMENTE)</small></h3>
       <h4 class="color-one"><strong>SENA (Centro de gestión empresarial)</strong></h4>
       <p class="text-secondary">
        Trabajamos en Bases de datos SQL-SERVER, con Java, la parte de web que consta de HTML, CSS y Javascript, actualmente estamos desarrollando las primeras instancias del proyecto de grado en ASP.NET (Framework) con C#.
       </p>
      </div>

      <div class="company">
       <h3 class="text-secondary mt-5 mb-0">TÉCNICA EN DESARROLLO DE SOFTWARE / 2016 - 2017</h3>
       <h4 class="color-one"><strong>SENA (Centro de gestión empresarial)</strong></h4>
       <p class="text-secondary">
        Desde los inicios nos basamos en el modo MVC, trabajamos en Java, en Angular y el proyecto de grados se basó en Angular.
       </p>
      </div>
     </div>

     <div class="experience m-5">
      <h2 class="text-body mb-0">PROYECTOS</h2>
      <div class="decor">
       <hr class="decor-two">
      </div>
      <div class="company">
       <h3 class="text-secondary mt-5 mb-0">TIENDA DE LIBROS ONLINE / 2016 - 2017</h3>
       <h4 class="color-one"><strong>Comercio de libros</strong></h4>
       <p class="text-secondary">
        Es un aplicativo web para comercio de libros de varios géneros, con su propio sistema de ventas integrado, desarrollado en conjunto con el salón de clase. Se desarrolló en Angular.
       </p>
      </div>
      <div class="company">
       <h3 class="text-secondary mt-5 mb-0">MEDICSOFT / 2018 - <small>(Actualmente)</small></h3>
       <h4 class="color-one"><strong>Sistema de agendamiento de citas</strong></h4>
       <p class="text-secondary">
        Aplicativo web para gestionar los procesos de registro de pacientes asignación de citas, ventas y gestión de servicios de salud.
       </p>
      </div>
     </div>
     <div class="experience m-5">
      <h2 class="text-body mb-0">REFERENCIAS</h2>
      <div class="decor">
       <hr class="decor-two">
      </div>
     </div>
    </div>
   </div><!-- fin col-8 -->
  </div><!-- fin row -->
 </div><!-- fin pag-one -->
      

TS

   @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700&display=swap');

:root {
--color-one: #cdab4a;
--font-one: 'Open Sans Condensed';
}
.font-one{
 font-family: var(--font-one);
}
.color-one{
 color: var(--color-one);
}
.foto {
 height: 300px;
 width: 300px;
 object-fit: cover;
 border-radius: 50%;
 padding: 15px;
 border: 4px solid var(--color-one);
}
.title-one{
 background: var(--color-one);
}
.title-one h1 {
 font-size: 6rem;
 font-weight: 600;
 margin-bottom: 0;
 line-height: 6rem;
 margin-top: 30px;
}
.decor-one {
    background: white;
    height: 5px;
    width: 30px;
    margin-left: 50px;
    margin-top: 0;
}
.title-one h5 {
    color: white;
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: 2px;
}
.subtitle h2, .contact h2 {
    font-weight: 600;
}
.subtitle p, .contact p {
    text-align: justify;
    margin-bottom: 0;
}
.decor-two {
    background: var(--color-one);
    height: 4px;
    width: 10%;
    margin-left: 0;
}
.decor{
 background: linear-gradient(to bottom, #fff 0%,#fff 0%,#fff 0%,#e0e0e0 28%,#050404 88%);
}
.decor2 {
    background: white;
}
.decor2 hr {
    background: var(--color-one);
    height: 10px;
    margin: 0;
}
.experience h2{
 font-size: 2.5rem;
 font-weight: 600;
}
.experience h3 {
    font-weight: 600;
}