Mini CV

This section is meant to be used at the top of the personal page of each team member.

Code

<!--Mini CV-->
<section class="page-section alternate-bg">
    <div class="heading-container text-center">
        <h2 class="section-heading text-uppercase">Dr John Smith</h2>
        <!--<h3 class="section-subheading text-muted">You can add a comment here</h3>-->
    </div>
    <div class="container">
        <div class="mini-cv row justify-content-center align-items-center">
            <div class="col-lg-3 col-md-4 col-10 img-container">
                <img src="/assets/img/team/default.png" alt="Profile photo">
            </div>
            <div class="col-md-8 col-12 details-container">
                <div>
                    <div><i class="fas fa-lg fa-user" title="Role"></i></div>
                    <div>
                        Manager of leisure activities @ Lincoln Agri-Robotic
                    </div>
                </div>
                <hr/>
                <div>
                    <div><i class="fas fa-lg fa-calendar" title="Duration"></i></div>
                    <div>
                        2019 - current
                    </div>
                </div>
                <hr/>
                <div>
                    <div><i class="fas fa-lg fa-graduation-cap" title="Education"></i></div>
                    <div>PhD from the University of Neverland</div>
                </div>
                <hr/>
                <div>
                    <div><i class="fas fa-lg fa-star" title="Interests"></i></div>
                    <div>
                        Control systems, Computer vision, Machine learning.
                    </div>
                </div>
                <hr/>
                <div>
                    <div><i class="fas fa-lg fa-at" title="E-mail"></i></div>
                    <div><a href="mailto:email@email.com">email@email.com</a></div>
                </div>
                <hr/>
                <div>
                    <div><i class="fas fa-lg fa-phone" title="Telephone"></i></div>
                    <div><a href="tel:+441234567890">+44 123 456 7890</a></div>
                </div>
                <hr/>
                <div>
                    <div><i class="fab fa-lg fa-linkedin" title="Linkedin"></i></div>
                    <div><a href="https://linkedin.com/john-smith-12345678">Linkedin Profile</a></div>
                </div>
                <hr/>
                <div>
                    <div><i class="fab fa-lg fa-github" title="GitHub"></i></div>
                    <div><a href="https://github.com/JohnSmith">@JohnSmith</a></div>
                </div>
                <hr/>
                <div>
                    <div><i class="fas fa-lg fa-globe" title="Personal website"></i></div>
                    <div><a href="https://www.johnsmith.com">Personal website</a></div>
                </div>
            </div>
        </div>
    </div>
</section>

Output

Customization

This example includes lots of fields: you might want to remove some or add others just for you. Doing so is quite easy: just consider that each field has the following structure.

<hr/>
<div>
    <div><i class="fas fa-lg fa-user" title="Role"></i></div>
    <div>Manager of leisure activities @ Lincoln Agri-Robotic</div>
</div>

<hr/> is the horizontal line that separates the field from the previous one.

<i class="fab fa-lg fa-linkedin" title="Linkedin"></i> is the icon. You can find more about icons here

Manager of leisure activities @ Lincoln Agri-Robotic is the content of the field. It can be any HTML content, but keep it short and compact otherwise it will ruin the layout on smaller screens.