Portfolio - Components

 
{% block paragraph %}

    {% block content %}

{{ content|without('field_team_layout') }}

    {% endblock %}

{% endblock paragraph %}

 
{% set paragraph_parent = paragraph.getParentEntity() %}

{% set field_team_layout = paragraph_parent.field_team_layout.value %}

{% set imgPath = file_url(content.field_team_image['#items'].entity.uri.value) %}

{% set alt = content.field_team_image['#items'].alt %}

{% set theme = paragraph.field_theme_color.value %}

{% set name = paragraph.field_member_name.value %}

{% set pos = paragraph.field_member_position.value %}

{% set title = paragraph.field_member_title.value %}

{% set text = content.field_team_text %}

{% set furl = content.field_facebook_link.0['#url'] %}

{% set turl = content.field_twitter_link.0['#url'] %}

{% set lurl = content.field_linkedin_link.0['#url'] %}
{% block paragraph %}

    {% block content %}

		<div class="row mt-5">

		    <div class="col-md-4 mb-4 mb-lg-0 appear-animation animated fadeInRightShorter appear-animation-visible {% if field_team_layout == "alternate" %}{% if paragraph.index is odd %}order-md-last{% endif %}{% elseif field_team_layout == "right" %}order-md-last{% endif %}" data-appear-animation="fadeInRightShorter" style="animation-delay: 100ms;">

				<img src="{{ imgPath }}" class="img-fluid" alt="{{ alt }}">

			</div>

			<div class="col-md-8">

				<div class="overflow-hidden">

					<h2 class="text-color-{{ theme }} font-weight-bold text-8 mb-0 pt-0 mt-0 appear-animation animated maskUp appear-animation-visible" data-appear-animation="maskUp" data-appear-animation-delay="300" style="animation-delay: 300ms;">{{ name }}</h2>

					{% if pos %}

					<h3>Position: {{ pos }}

					{% endif %}

				</div>

				<div class="overflow-hidden mb-3">

					<p class="font-weight-bold text-{{ theme }} text-uppercase mb-0 appear-animation animated maskUp appear-animation-visible" data-appear-animation="maskUp" data-appear-animation-delay="500" style="animation-delay: 500ms;">{{ title }}</p>

				</div>

				<div class="pb-3 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" style="animation-delay: 800ms;">{{ text }}</div>

				<hr class="solid my-4 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900" style="animation-delay: 900ms;">

				<div class="row align-items-center appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000" style="animation-delay: 1000ms;">

					{# <div class="col-lg-6">

						<a href="#" class="btn btn-modern btn-dark mt-3">Get In Touch</a>

						<a href="#" class="btn btn-modern btn-{{ theme }} mt-3">Hire Me</a>

					</div>  #}

					<div class="col-sm-6 text-lg-end my-4 my-lg-0">

						<strong class="text-uppercase text-1 me-3 text-dark">social media</strong>

						<ul class="social-icons float-lg-end">

							{% if furl %}

							<li class="social-icons-facebook"><a href="{{ furl }}" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>

							{% endif %}

							{% if turl %}

							<li class="social-icons-twitter"><a href="{{ turl }}" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li>

							{% endif %}

							{% if lurl %}

							<li class="social-icons-linkedin"><a href="{{ lurl }}" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>

							{% endif %}

						</ul>

					</div>

				</div>

			</div>

		</div>

     <div class="divider divider-{{ theme }} my-5">

		<i class="fas fa-chevron-down"></i>

	</div>

    {% endblock %}

{% endblock paragraph %}