hub-site/wip-refactor/pages/projects.vue

<script setup lang="ts">
import { ref, TransitionGroup } from 'vue';
import { projects, tags } from '@/assets/projects';

const activeTags: Ref<string[]> = ref([]);
const showFaq: Ref<boolean> = ref(false);

function toggleTag(tag: string) {
    if (activeTags.value.includes(tag)) {
        activeTags.value = activeTags.value.filter((t) => t !== tag);
    } else {
        activeTags.value.push(tag);
    }
}
</script>

<template>
    <div class="flex justify-center">
        <h1>Projects</h1>
    </div>

    <!-- Information -->
    <div class="flex justify-center mb-5">
        <div class="flex flex-col justify-center text-pretty max-w-[60rem]">
            <p class="text-center">
                Welcome to our projects page! We create <strong>websites</strong>, <strong>video games</strong>,
                <strong>addons for games</strong>, <strong>avatars and worlds for VRChat</strong>, and
                <strong>game assets</strong>. Explore our ongoing projects below.
            </p>
        </div>
    </div>

    <!-- FAQ Button -->
    <div class="flex justify-center">
        <button @click="showFaq = true" class="border-none bg-accent text-black rounded-full hover:bg-accent-over">
            Frequently Asked Questions
        </button>
    </div>

    <!-- Filter Buttons -->
    <div class="flex justify-center">
        <div v-for="tag in tags" :key="tag">
            <button v-if="!activeTags.includes(tag)" @click="toggleTag(tag)" class="border-none">
                {{ tag }}
            </button>
            <button v-else :key="tag" @click="toggleTag(tag)" class="border border-accent bg-surface-2">
                {{ tag }}
            </button>
        </div>
    </div>

    <!-- Projects Grid -->
    <div class="flex justify-center">
        <div class="flex justify-center text-pretty max-w-[60rem]">
            <TransitionGroup name="list" mode="out-in" class="flex flex-wrap justify-center">
                <div v-for="project in
                activeTags.length === 0 ?
                projects :
                projects.filter((project) => project.tags.some((tag) => activeTags.includes(tag)))
                " :key="project">
                    <Card class="w-60 min-h-60">
                        <div>
                            <h3>{{ project.name }}</h3>
                            <p>{{ project.description }}</p>
                            <div class="flex flex-wrap">
                                <div v-for="tag in project.tags">
                                    <p class="bg-surface-2 p-1 m-[1px] rounded-md">{{ tag }}</p>
                                </div>
                            </div>
                        </div>
                    </Card>
                </div>
            </TransitionGroup>
        </div>
    </div>

    <!-- Modal -->
    <Transition name="fade">
        <div v-if="showFaq" class="modal-overlay" @click="showFaq = false">
            <Modal>
                <h2>Frequently Asked Questions</h2>
                <hr>
                <ul class="faq-list">
            <li>
            <strong>"Do you need an idea person?"</strong>
                    <blockquote>No. Not now, and likely not ever.</blockquote>
                </li>
                <li>
                    <strong>"Do you need an asset creator? What would you pay me?"</strong>
                    <blockquote>
                    This applies to graphics, models, sounds, music, and similar work. Suggesting random ideas and demanding payment isn't how this works.
                    Provide a portfolio and clear price sheets. We offer fair indie rates based on quality. If your work is lower quality, understand that others
                    may carry more of the creative load.
                    </blockquote>
                </li>
                <li>
                    <strong>"If I'm hired to work on sound effects, that means I'm the sound director, right?"</strong>
                    <blockquote>
                    No, it doesn't. Roles like "director" require experience, leadership skills, and a proven track record. Freelance roles are just that—freelance.
                    Don't expect a salary or profit share from such a position. Additionally, if we hire you to create assets, <b>we</b> decide what's needed,
                    unless creative freedom is explicitly granted. Thank you for understanding.
                    </blockquote>
                </li>
                <li>
                    <strong>"Well, how much WOULD you pay me?"</strong>
                    <blockquote>
                    Provide your portfolio and rates. If you don't have one, we'll evaluate your work against indie standards to make a fair offer. We're not presently hiring.
                    </blockquote>
                </li>
                <li>
                    <strong>On suggesting ideas and claiming ownership</strong>
                    <blockquote>
                    Ideas, concepts, and words alone are not copyrightable—only tangible creations such as art, sound effects, or completed works can be protected by copyright.
                    Claiming ownership of an idea without contributing to its execution is not recognized in the professional world. That said, we value constructive suggestions and
                    may acknowledge meaningful contributions with in-game benefits or recognition. However, we maintain a zero-tolerance policy for unfounded claims or disruptive behavior,
                    to ensure a fair and respectful environment for everyone.
                    </blockquote>
                </li>
                <li>
                    <strong>"You guys make games, so I want you to make this concept of mine!"</strong>
                    <blockquote>
                    Not for free. We have our own projects to focus on, and <u>we are not for hire at this time</u>. Additionally, being an "idea person" is not a paid position in the game
                    development industry. Successful game creation requires collaboration, execution, and tangible contributions.
                    </blockquote>
                </li>
                </ul>
            </Modal>
        </div>
    </Transition>
</template>

<style>
/* Transition for the cards */
.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

blockquote {
    @apply border-l-4 border-border pl-2
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
}
</style>