hub-site/src/views/ProjectsView.vue

<template>
  <div class="projects">
    <h1>Our Projects</h1>

    <!-- Overview Section -->
    <div class="overview">
      <p>
        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>
      <button @click="showFaqModal = true" class="faq-button">FAQ</button>
    </div>

    <!-- Filter Buttons -->
    <div class="filter-bar">
      <button
        v-for="tag in tags"
        :key="tag"
        @click="filterByTag(tag)"
        :class="{ active: selectedTag === tag }"
      >
        {{ tag }}
      </button>
    </div>

    <!-- Projects Grid -->
    <div class="project-grid">
      <div v-for="project in filteredProjects" :key="project.name" class="project-card">
        <h3>{{ project.name }}</h3>
        <p>{{ project.description }}</p>
        <ul class="tags">
          <li v-for="tag in project.tags" :key="tag" class="tag">{{ tag }}</li>
        </ul>
        <div class="links">
          <p v-if="project.links.public">
            <strong>Public:</strong>
            <a :href="project.links.public" target="_blank">{{ project.links.public }}</a>
          </p>
          <p v-if="project.links.local">
            <strong>Local:</strong>
            <a :href="project.links.local" target="_blank">{{ project.links.local }}</a>
          </p>
          <p v-if="project.links.testing">
            <strong>Testing:</strong>
            <a :href="project.links.testing" target="_blank">{{ project.links.testing }}</a>
          </p>
          <p v-if="project.links.wiki">
            <strong>Wiki:</strong>
            <a :href="project.links.wiki" target="_blank">{{ project.links.wiki }}</a>
          </p>
        </div>
      </div>
    </div>

    <!-- FAQ Modal -->
    <div v-if="showFaqModal" class="modal-overlay" @click="closeFaqModal">
      <div class="modal-content" @click.stop>
        <h2>Frequently Asked Questions</h2>
        <hr />
        <ul class="faq-list">
          <li>
            <strong>"Do you need an idea person?"</strong>
            <p>No. Not now, and likely not ever.</p>
          </li>
          <hr />
          <li>
            <strong>"Do you need an asset creator? What would you pay me?"</strong>
            <p>
              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.
            </p>
          </li>
          <hr />
          <li>
            <strong
              >"If I'm hired to work on sound effects, that means I'm the sound director,
              right?"</strong
            >
            <p>
              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.
            </p>
          </li>
          <hr />
          <li>
            <strong>"Well, how much WOULD you pay me?"</strong>
            <p>
              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.
            </p>
          </li>
          <hr />
          <li>
            <strong>On suggesting ideas and claiming ownership</strong>
            <p>
              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.
            </p>
          </li>
          <hr />
          <li>
            <strong>"You guys make games, so I want you to make this concept of mine!"</strong>
            <p>
              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.
            </p>
          </li>
        </ul>

        <hr />
        <button @click="closeFaqModal" class="close-button">Close</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      showFaqModal: false,
      selectedTag: 'All',
      tags: [
        'All',
        'Website',
        'PC',
        'Singleplayer',
        'Multiplayer',
        'ALPHA',
        'Horror',
        'Relaxing',
        'Sim',
        'RPG',
      ],
      projects: [
        {
          name: 'Wildspace',
          description: 'A browser pet game.',
          tags: ['Website', 'Multiplayer', 'ALPHA'],
          links: {
            public: 'https://thewild.space',
            local: null,
            testing: null,
            wiki: 'wiki.smgames.club/wildspace',
          },
        },
        {
          name: 'Ghostbound',
          description: 'A ghost hunting game.',
          tags: ['PC', 'Singleplayer', 'Multiplayer', 'ALPHA', 'Horror', 'Team'],
          links: {
            public: null,
            local: null,
            testing: null,
            wiki: 'wiki.smgames.club/ghostbound',
          },
        },
        {
          name: '"Island"',
          description: 'A cozy play-at-your-pace game.',
          tags: ['PC', 'Singleplayer', 'Multiplayer', 'ALPHA', 'Relaxing', 'Sim'],
          links: {
            public: null,
            local: null,
            testing: null,
            wiki: 'wiki.smgames.club/island',
          },
        },
        {
          name: '"Random RPG"',
          description: 'An RPG game with actions and consequences.',
          tags: ['PC', 'Singleplayer', 'ALPHA', 'RPG'],
          links: {
            public: null,
            local: null,
            testing: null,
            wiki: 'wiki.smgames.club/randomrpg',
          },
        },
      ],
    }
  },
  computed: {
    filteredProjects() {
      if (this.selectedTag === 'All') return this.projects
      return this.projects.filter((project) => project.tags.includes(this.selectedTag))
    },
  },
  methods: {
    filterByTag(tag: string) {
      this.selectedTag = tag
    },
    closeFaqModal() {
      this.showFaqModal = false
    },
  },
}
</script>