345 lines
9.4 KiB
Vue
345 lines
9.4 KiB
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>
|
||
|
||
<style scoped>
|
||
.links {
|
||
margin-top: 1rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.links p {
|
||
margin: 0.25rem 0;
|
||
}
|
||
|
||
.links a {
|
||
color: #89b4fa;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.links a:hover {
|
||
color: #b4befe;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.projects {
|
||
padding: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.overview {
|
||
margin-bottom: 2rem;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.filter-bar {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.filter-bar button {
|
||
background: #313244;
|
||
color: #cdd6f4;
|
||
border: none;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.filter-bar button:hover,
|
||
.filter-bar button.active {
|
||
background: #89b4fa;
|
||
color: #1e1e2e;
|
||
}
|
||
|
||
.project-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.project-card {
|
||
background: #313244;
|
||
padding: 1.5rem;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
text-align: left;
|
||
}
|
||
|
||
.project-card h3 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.project-card p {
|
||
font-size: 1rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.tag {
|
||
background: #45475a;
|
||
color: #cdd6f4;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 4px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-content {
|
||
background: #1e1e2e;
|
||
color: #cdd6f4;
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
max-width: 600px;
|
||
width: 90%;
|
||
max-height: 80vh; /* Limits height to 80% of the viewport */
|
||
overflow-y: auto; /* Enables vertical scrolling if content overflows */
|
||
text-align: center;
|
||
}
|
||
|
||
.modal-content h2 {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.faq-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.faq-list li {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.faq-list strong {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.close-button {
|
||
background: #f7768e;
|
||
color: #1e1e2e;
|
||
border: none;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin-top: 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.close-button:hover {
|
||
background: #f38ba8;
|
||
}
|
||
|
||
.faq-button {
|
||
background: #89b4fa;
|
||
color: #1e1e2e;
|
||
border: none;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.faq-button:hover {
|
||
background: #74a8e0;
|
||
}
|
||
</style>
|