<template>
    <!-- Portfolio Grid-->
    <section class="page-section bg-light" id="portfolio">
        <div class="container">
            <div class="text-center">
                <h2 class="section-heading text-uppercase">Portfolio</h2>
                <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
            </div>
            <div class="row">
                <div class="col-lg-4 col-sm-6 mb-4" v-for="(obj, key) in portfolioJSON" :key="key">
                    <div class="portfolio-item">
                        <a class="portfolio-link" data-toggle="modal" v-bind:href="'#' + obj.modal">
                            <div class="portfolio-hover">
                                <div class="portfolio-hover-content">
                                    <i class="fas fa-plus fa-3x"></i>
                                </div>
                            </div>
                            <img class="img-fluid" v-bind:src="obj.img" alt />
                        </a>
                        <div class="portfolio-caption">
                            <div class="portfolio-caption-heading">{{ obj.heading }}</div>
                            <div
                                class="portfolio-caption-subheading text-muted"
                            >{{ obj.subheading }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>



<script>
export default {
    name: "Portfolio",
    data: () => ({
        portfolioJSON: [
            {
                img: "img/portfolio/01-thumbnail.jpg",
                modal: "portfolioModal1",
                heading: "Threads",
                subheading: "Illustration",
            },
            {
                img: "img/portfolio/02-thumbnail.jpg",
                modal: "portfolioModal2",
                heading: "Explore",
                subheading: "Graphic Design",
            },
            {
                img: "img/portfolio/03-thumbnail.jpg",
                modal: "portfolioModal3",
                heading: "Finish",
                subheading: "Identity",
            },
            {
                img: "img/portfolio/04-thumbnail.jpg",
                modal: "portfolioModal4",
                heading: "Lines",
                subheading: "Branding",
            },
            {
                img: "img/portfolio/05-thumbnail.jpg",
                modal: "portfolioModal5",
                heading: "Southwest",
                subheading: "Website Design",
            },
            {
                img: "img/portfolio/06-thumbnail.jpg",
                modal: "portfolioModal6",
                heading: "Window",
                subheading: "Photography",
            },
        ],
    }),
};
</script>


<style lang="sass">
</style> 