Team Member Profile Multi-Card Layout

<div class="row">
    <div class="col">
        <div class="card-deck">
            <div class="card bg-dark text-white">
                <!-- Heading Area (name/title) -->
                <div class="card-body">
                    <div class="row">
                        <div class="col text-center">
                            <h2 class="display-4">John Doe</h2>                    
                            <p>Position or Title</p>
                        </div>
                    </div>                
                </div>
                <!-- Description Area (skills and social links) -->
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            Skill 1 / Skill 2 / Skill 3 / Skill 4
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>                                               
                        </div>
                    </div>                
                </div>
                <div class="card-body text-center">
                    <strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
                </div>
            </div>
            <div class="card bg-dark text-white">
                <!-- Heading Area (name/title) -->
                <div class="card-body">
                    <div class="row">
                        <div class="col text-center">
                            <h2 class="display-4">John Doe</h2>                    
                            <p>Position or Title</p>
                        </div>
                    </div>                
                </div>
                <!-- Description Area (skills and social links) -->
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            Skill 1
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>                                               
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            Skill 2
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>                                               
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            Skill 3
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>                                               
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            Skill 4
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>                                               
                        </div>
                    </div>
                </div>
                <div class="card-body text-center">
                    <strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
                </div>
            </div>
            <div class="card bg-dark text-white">
                <!-- Heading Area (image and name/title) -->
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <img src="http://placekitten.com/201/201" alt="user team member profile image" class="img-fluid rounded-circle mx-auto d-block">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-center">
                            <h2 class="display-4">John Doe</h2>                    
                            <p>Position or Title</p>
                        </div>
                    </div>                
                </div>
                <!-- Description Area (skills and social links) -->
                <div class="card-body">
                    <div class="row">
                        <div class="col text-center">
                            <p>Skill 1 / Skill 2 / Skill 3 / Skill 4</p>
                            <strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>                
    </div>
</div>