Project-XR-website/docs/.vuepress/components/Projects.vue

<script setup>
const config1 = {
    dir: 'ttb',  // This makes the carousel vertical
    //   wrapAround: true,
    itemsToShow: 3,
    snapAlign: 'center',
    height: '700px',
   
    wrapAround: true,
    gap: 50,
    // mouseDrag: false,
    breakpoints: {
    // 300px and up
    300: {
      itemsToShow: 1,
      snapAlign: 'center',
    height: '100px',
    gap: 20,


    },
    // 400px and up
    400: {
      itemsToShow: 2,
      snapAlign: 'start',
    height: '200px',
    gap: 20,


    },
    // 500px and up
    500: {
      itemsToShow: 3,
      snapAlign: 'start',
    height: '300px',
    gap: 20,
    },
    600: {
    height: '500px',
     
    },
}
}

</script>

<template>
    <section id="Projects">
        <div class="TextContainer">
            <h1>Projects</h1>
            <p>Nisi anim occaecat aliqua sunt sint elit commodo sit consequat ullamco mollit commodo.</p>
        </div>
        <div class="Container">
            <div class="CarouselContainer">
                <!-- Vue Slick Carousel Integration -->
                <Carousel v-bind="config1" class="Carousel" ref="mainCarousel"  @beforeChange="updateTitleCarousel">
                    <Slide v-for="slide in img" :key="slide" class="slide">
                        <!-- <div class="carousel__item">{{ slide }}</div> -->
                        <img :src="slide" alt="l" class="carousel__item" style="width: 100%;">
                        <!-- <img src="../public/img/Home-Adress - Wit.svg" alt="l" class="carousel__item"> -->

                    </Slide>
                    <template #addons>
                        <Navigation />
                        <!-- <Pagination /> -->
                    </template>
                </Carousel>
            </div>
            <div class="TitleContainer" >
                <div class="ProjectContainer">
                    <div v-for="test in 4" :key="test" class="title" @click="test2(test)" tabindex="0">
                        <img :src="test.image" alt="l" class="carousel__item" style="width: 100%;">

                    </div>
                </div>
                <div class="TitleText">
                    <div v-for="title in Projects" :key="title" class="Text" @click="test2(title)" tabindex="0">
                        <h3>{{title.name}}</h3>
                        <span id="Line"></span>
                        <h3>In cillum veniam dolore in irure amet voluptate.</h3>
                    </div>
                </div>
                <!-- <button @click="Detail()"></button> -->
            </div>
        </div>
    </section>
</template>




<script>
import { Carousel, Slide, Navigation, Pagination } from 'vue3-carousel';
import { ref } from 'vue';
import Data from '../data/Projects.json';
import 'vue3-carousel/dist/carousel.css';

// Detail(0)
export default {
    components: { Carousel, Slide, Navigation, Pagination },

    data() {
        return {
            config: {
                // Your slick config
            },
            currentSlide: 0,
            Projects: Data,
            img: null,
            Detail: null
        };
    },

    methods: {
        test2(p) {
            const id = p - 1;
            console.log(id);

          
            this.img = this.Projects[id]?.image;
        },

        Detail(T) {
            const id = T - 1;
            this.Detail = this.Projects[id]?.text;
            console.log(Detail);
            
        }
    },

};
</script>



<style scoped>
#Projects {
    margin-bottom: 0vw;

}

.carousel .carousel__pagination {
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0;
}

.carousel__pagination-button {
    background-color: aqua;
    width: 0;
}

#Projects>.TextContainer {
    width: 40%;
    padding: 10%;
}

#Line {
    display: block;
    background-color: black;
    width: 40%;
    height: 3px;
    margin-top: 3%;
}

.title {
    border-radius: 5px;
    background-color: var(--light-pink);
    height: 10vw;
    width: 15vw;
    transition: all 0.2s ease-in;

}

.Text {
    border-radius: 5px;
    height: 10vw;
    width: 30vw;
}

.Text #h3 {
    font-size: 1.5vw;
    font-weight: 100;
}

.Container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 60vw;
}

.TitleContainer {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 100%;
    width: 50%;
    gap: 1vw;
}

.title:focus {
    border-bottom: solid 5px;
    /* border: ; */
    border-color: black;
}

.ProjectContainer {
    height: 100%;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    gap: 5%;
    flex-direction: column;
}

.TitleText {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5%;

}

.CarouselContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 50%;
}



.Carousel {
    /* scroll-behavior: smooth; */
    width: 50%;
    height: 100%;
}

.slide {
    background-color: var(--cool-gray);
    width: 100%;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
}
</style>