shortcode

//about me shortcode
add_shortcode('about-me', 'about_me');
function about_me($attr, $content = null){
    $attributes = extract(  shortcode_atts(array(
        'image'             => '<?php echo get_template_directory_uri(); ?>/img/logos/kazi-ramjan.jpg',
        'name'              => 'Kazi Ramjan',
        'tagline'           => 'Web Developer',
        'nationality'       => 'Bangladeshi',
        'date_of_birth'     => '21-01-1995',
        'e_mail'            => 'kaziramjana@gmail.com',
        'website'           => 'http://www.kazi-ramjan.com',
        'phone'             => '+8801686809581',
        'skype'             => '1686809581',
        'about_me_content'  => 'Hello, <br> I am Kazi Ramjan, Front-End Developer with 3 years of experience rapidiously productize wireless results.',

        'why_me_content'    => 'Assertively target cooperative experiences whereas tactical total linkage. Intrinsicly transition end-to-end synergy via low-risk high-yield internal or "organic" sources. Assertively synergize dynamic scenarios through user friendly services. Seamlessly communicate.',

        'vision_content'    => 'Seamlessly administrate team building opportunities after sustainable portals. Phosfluorescently incentivize cost effective action items without innovative meta-services. Globally monetize backward-compatible portals and performance based bandwidth. Distinctively underwhelm cost effective.'
        ),$attr));

ob_start(); ?>

    <!-- Start About Me Section -->
    <section id="about" class="section">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="profile-intro text-center">
                        <div class="profile-img-wrapper wow fadeInUp" data-wow-duration="1s" data-wow-offset="200">
                        <img class="img-responsive img-circle" src="<?php echo $image; ?>" alt="profile">
                    </div>
                    <h2><?php echo $name; ?></h2>
                    <div class="separator centered"></div>
                    <p class="title"><?php echo $tagline; ?></p>
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- My Personal Info -->
                <div class="profile text-center col-sm-5 col-sm-push-7">
                    <div class="wow fadeInRight" data-wow-duration="1s" data-wow-offset="200">
                        <h4>Personal Info</h4>
                        <div class="separator centered"></div>
                        <p class="para"><span class="highlight">My Name:</span> <?php echo $name; ?></p>
                        <p class="para"><span class="highlight">Nationality:</span> <?php echo $nationality; ?></p>
                        <p class="para"><span class="highlight">Date Of Birth:</span> <?php echo $date_of_birth; ?></p>
                        <p class="para"><span class="highlight">E-mail:</span> <a href="mailto:admin@prema.com"><?php echo $e_mail; ?></a></p>
                        <p class="para"><span class="highlight">Website:</span> <a href="<?php echo $website; ?>"><?php echo $website; ?></a></p>
                        <p class="para"><span class="highlight">My Phone:</span> <a href="tel:<?php echo $phone; ?>"><?php echo $phone; ?></a></p>
                        <p class="para"><span class="highlight">Skype:</span> <a href="tel:<?php echo $skype; ?>"><?php echo $skype; ?></a></p>
                    </div>
                </div>
                <div class="info-tabs col-sm-7 col-sm-pull-5 wow fadeInLeft" data-wow-duration="1s" data-wow-offset="200">
                    <!-- Tabs Nav -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#about-me-panel" aria-controls="about-me-panel" role="tab" data-toggle="tab">About Me</a>
                        </li>
                        <li role="presentation">
                            <a href="#why-me-panel" aria-controls="why-me-panel" role="tab" data-toggle="tab">Why Me</a>
                        </li>
                        <li role="presentation">
                            <a href="#my-vision-panel" aria-controls="my-vision-panel" role="tab" data-toggle="tab">My Vision</a>
                        </li>
                    </ul>
                    <!-- Tabs Panel -->
                    <div class="tab-content">
                        <!-- About Me Panel -->
                        <div role="tabpanel" class="tab-pane fade in active" id="about-me-panel">
                            <h4>About Me</h4>
                            <div class="separator"></div>
                            <p class="para"><span></span></p>
                            <p class="para"><?php echo $about_me_content; ?></p>
                        </div>
                        <!-- Why Me Panel -->
                        <div role="tabpanel" class="tab-pane fade" id="why-me-panel">
                            <h4>Why to choose me</h4>
                            <div class="separator"></div>
                            <p class="para"><?php echo $why_me_content; ?></p>
                            </p>
                        </div>
                        <!-- My Vision Panel -->
                        <div role="tabpanel" class="tab-pane fade" id="my-vision-panel">
                            <h4>Here is My Vision</h4>
                            <div class="separator"></div>
                            <p class="para"><?php echo $vision_content; ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End About Me Section -->



    <?php return ob_get_clean();
}