website/pages/projects.vue

<template>
    <div>
        <Navbar />
	    <Header>
		    <label class="glitch">ls -la</label> projects
	    </Header>
        <div class="projects">
            <ProjectList v-for="project in projects" :key="project.id">
                <Project v-if="logged" v-for="p in project.list" :key="p.name" :name="`${p.name} (${p.click})`" :desc="p.desc" :url="p.url"/>
<Project v-if="!logged" v-for="p in project.list" :key="p.desc" :name="p.name" :desc="p.desc" :url="p.url"/>
            </ProjectList>
	    </div>
        <NewProject v-if="logged"/>
    </div>
</template>

<script>
import ProjectList from "../components/ProjectList.vue";
import Project from "../components/Project.vue";
import NewProject from "../components/NewProject.vue";
import axios from "axios";

export default {
    head() {
        return {
            title: "[ngn] | projects",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: "check out my projects"
                }
            ]
        }
    },
    data() {
		return {
		    logged: false,
        projects: []
		}
	},
    mounted: async function(){
		    if(localStorage.getItem("token"))
          this.logged = true

        const res = await axios.get("/api/projects/get")

        let all = res.data["projects"]
        let pcounter = 0
        let projects = []
        let project = {
          id: pcounter,
          list: []
        }
        for(let i = 0; i<all.length; i++){
          if(project["list"].length===3){
            projects.push(project)
            pcounter += 1
            project = {
              id: pcounter,
              list: []
            }
          }

          project["list"].push({
            name: all[i]["name"],
            desc: all[i]["desc"],
            click: all[i]["click"],
            url: `/l/${all[i]["name"]
              .toLowerCase()
              .replaceAll(" ", "")}`
          })

          if(i===all.length-1){
            projects.push(project)
          }
        }

        this.projects = projects
  }
}
</script>

<style>
.projects{
    padding: 50px;
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 1121px) {
    .projects {
        padding: 50px;
    }
}
</style>