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

<script setup>
const config1 = {
    dir: 'ttb',  // This makes the carousel vertical
    itemsToShow: 4,
    snapAlign: 'center',
    height: '600px',
    wrapAround: true,
    // touchDrag: false,
    gap: 50,
    breakpoints: {
        300: {
            itemsToShow: 2,
            snapAlign: 'center',
            height: '200px',
            gap: 20,
        },
        419: {
            itemsToShow: 3,
            snapAlign: 'start',
            height: '400px',
            gap: 20,
        },
        768: {
            itemsToShow: 4,
            snapAlign: 'center',
            height: '800px',
            gap: 100,
        },
        1440: {
            itemsToShow: 4,
            snapAlign: 'center',
            height: '1000px',
            gap: 100,
        },

    }
}
</script>

<template>
    <section id="projects">
        <div class="text-container">
            <h1>Projects</h1>
            <p>Nisi anim occaecat aliqua sunt sint elit commodo sit consequat ullamco mollit commodo.</p>
        </div>
        <div class="grid-container">
            <div class="carousel-container">
                <Carousel v-bind="config1" class="carousel" ref="mainCarousel" @beforeChange="updateTitleCarousel">
                    <Slide v-for="slide in img" :key="slide" class="slide">
                        <img :src="slide" alt="l" class="carousel-item" style="width: 100%;">
                    </Slide>
                    <template #addons>
                        <Navigation />
                    </template>
                </Carousel>
            </div>
            <div class="title-container">
                <div class="project-container">
                    <div v-for="test in projects" :key="test" class="title" @click="test2(1)" tabindex="0">
                        <div class="img-container">
                            <img :src="test.image[0]" alt="l" class="carousel-item">
                        </div>
                        <div class="title-text">
                            <h1>{{ test.name }}</h1>
                            <!-- <h3>zzzz</h3> -->
                            <span id="line"></span>
                            <p>{{ test.text[0] }}</p>
                            <!-- <h3>lllll</h3> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

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

export default {
    components: { Carousel, Slide, Navigation },
    data() {
        return {
            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(this.detail);
        }
    },
};
</script>

<style scoped>
.projects {
    margin-bottom: 800px;
}

#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>.text-container {
    width: 40%;
    padding: 10%;
}

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

.title {
    border-radius: 5px;
  
    display: grid;
    grid-template-columns: 1fr 1fr;

    /* height: 15%; */
    /* width: 100%; */
    transition: all 0.2s ease-in;
    gap: 5%;
}

.text {
    border-radius: 5px;
    width: 100%;
    height: 15%;
}

.text h3 {
    font-size: 16px;
    font-weight: 100;
}

.grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    /* height: 60vw; */
    gap: 5px;
}

.title-container {
    cursor: pointer;
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */

    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 100%;
    /* max-width: 70%; */
    gap: 1vw;
}

.title:focus {
    border-bottom: solid 5px;
    border-color: black;
    border-radius: 0;
}

.project-container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5%;
    flex-direction: column;
}


.title-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: start;
    gap: 5%;
}

.carousel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
}

.carousel {
    width: 50%;
    min-width: 50%;
    height: 100%;
}

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

.img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: var(--light-pink);
}

.carousel-item {
    max-width: 80%;
    overflow: hidden;
    /* height: 100%; */
}

@media (max-width: 425px) { 

    .title { 
        /* background-color: aqua; */
        grid-template-rows: 1fr 1fr;
        grid-template-columns: none;
    }

    .carousel-item {
    max-width: 50%;
}
}
</style>