Projects

2026-06-08 15:36:42 +02:00
parent 33f3260b99
commit 4252965f63
14 changed files with 232 additions and 5 deletions
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -5,17 +5,21 @@ import api from '~/composables/api'

 const { get, post } = api();
 const { locale } = useI18n();
+const { t } = useI18n();

 // Move useAsyncData to top level — NOT inside onMounted
 const { data: markdown } = await useAsyncData(`fixed-root`, async () =>
 await queryCollection(`fixed`).path(`/fixed/${locale.value}/root`).first()
 ,{watch: [locale]})

+const { data: projects } = await useAsyncData(`projects`, async () =>
+ (await queryCollection(`projects`).where('path', 'LIKE', `/projects/${locale.value}/%`).all())
+ .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
+{ watch: [locale] })
+
 onMounted(async () => {
  try {
-    console.log("Getting")
    const response = await get('/test');
-    console.log('API Response:', response);
  } catch (error) {
    console.error('API Error:', error);
  }
@@ -28,7 +32,142 @@ onMounted(async () => {
  <FixedLayout>
    <Container>
      <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
+      
+      <section class="projects-section" v-if="projects && projects.length > 0">
+        <h2 class="section-title">{{ t('pages.projects_heading') }}</h2>
+        <div class="projects-grid">
+          <div 
+            v-for="project in projects" 
+            :key="project.slug"
+            class="project-card"
+          >
+            <span class="project-card-corner tl"></span>
+            <span class="project-card-corner tr"></span>
+            <span class="project-card-corner bl"></span>
+            <span class="project-card-corner br"></span>
+            
+            <a 
+              :href="project.link" 
+              target="_blank"
+              rel="noopener noreferrer"
+              class="project-title"
+            >{{ project.title }}</a>
+            <p class="project-description">{{ project.description }}</p>
+            <div class="project-tech">
+              <span v-for="tech in project.tech" :key="tech" class="tech-tag">{{ tech }}</span>
+            </div>
+          </div>
+        </div>
+      </section>
    </Container>    
  </FixedLayout>
  <Footer></Footer>
 </template>
+
+<style lang="scss" scoped>
+.projects-section {
+  margin-top: 24px;
+}
+
+.section-title {
+  font-family: 'Hurmit', monospace;
+  color: var(--color-text);
+  font-size: 1.3rem;
+  letter-spacing: 0.5px;
+  margin-bottom: 16px;
+  border-left: 3px solid var(--color-link);
+  padding-left: 12px;
+
+  &::after {
+    content: '';
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: var(--color-link);
+    margin-left: 6px;
+    vertical-align: middle;
+    box-shadow: 0 0 6px var(--color-link);
+  }
+}
+
+.projects-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.project-card {
+  position: relative;
+  background: var(--color-background-fore);
+  border: 1px solid var(--color-border-color);
+  box-shadow: 4px -4px 0px 0px var(--color-container-shadow);
+  padding: 12px 16px;
+}
+
+.project-card-corner {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-color: #cfcfcf;
+
+  &.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
+  &.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
+  &.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
+  &.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
+}
+
+.project-title {
+  font-family: 'Hurmit', monospace;
+  color: var(--color-link);
+  text-decoration: none;
+  font-size: 1.05rem;
+  text-shadow: 0 0 6px var(--color-link);
+  display: block;
+
+  &:hover {
+    color: var(--color-link);
+    text-shadow: 0 0 12px var(--color-link), 0 0 4px var(--color-link);
+  }
+}
+
+.project-description {
+  font-family: 'Hurmit', monospace;
+  color: var(--color-text);
+  margin: 6px 0 10px 0;
+  line-height: 1.5;
+  font-size: 0.9rem;
+}
+
+.project-tech {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tech-tag {
+  font-family: 'Hurmit', monospace;
+  font-size: 0.75rem;
+  color: var(--color-background-fore);
+  background-color: var(--color-link);
+  padding: 2px 8px;
+  box-shadow: 2px -2px 0px 0px rgba(0, 0, 0, 0.3);
+}
+
+@media (max-width: 640px) {
+  .section-title {
+    font-size: 1.1rem;
+  }
+  
+  .project-card {
+    padding: 8px 12px;
+  }
+  
+  .project-title {
+    font-size: 0.95rem;
+  }
+  
+  .project-description {
+    font-size: 0.82rem;
+  }
+}
+</style>
--- a/frontend/content.config.ts
+++ b/frontend/content.config.ts
@@ -29,6 +29,18 @@ export default defineContentConfig({
        date: z.string()
      })
    }),
+
+    projects: defineCollection({
+      type: 'page',
+      source: 'projects/**/**.md',
+      schema: z.object({
+        title: z.string(),
+        slug: z.string(),
+        description: z.string(),
+        link: z.string().optional(),
+        tech: z.array(z.string()).default([])
+      })
+    }),
  },
  markdown: {
    tags: {
--- a/frontend/content/projects/ca/codelearn-app.md
+++ b/frontend/content/projects/ca/codelearn-app.md
@@ -0,0 +1,8 @@
+---
+title: App de Codelearn
+slug: codelearn-app
+date: 2026-01-01
+description: Una aplicació full-stack de gestió d'aprenentatge construïda al meu temps a Codelearn. Autenticació d'usuaris, gestió de cursos i seguiment del progrés en temps real.
+link: https://codelearn.cat
+tech: ["Nuxt", "Express", "MongoDB", "TypeScript"]
+---
--- a/frontend/content/projects/ca/ml-pipeline.md
+++ b/frontend/content/projects/ca/ml-pipeline.md
@@ -0,0 +1,7 @@
+---
+title: Eina Pipeline ML
+slug: ml-pipeline
+date: 2026-01-01
+description: Una eina modular de pipeline d'aprenentatge automàtic per al màster d'Aprenentatge Automàtic i Ciberseguretat de la UPC. Automatització del preprocesament, entrenament i avaluació de models.
+tech: ["Python", "PyTorch", "Docker"]
+---
--- a/frontend/content/projects/ca/portfolio-website.md
+++ b/frontend/content/projects/ca/portfolio-website.md
@@ -0,0 +1,8 @@
+---
+title: Portfolio Website
+slug: portfolio-website
+date: 2026-01-01
+description: Aquesta mateixa pàgina web, construïda amb Nuxt 4, Vue 3 i SCSS. Estètica pixel-art, temes fosc/clar, personalització de colors d'accent i suport multilingüe en anglès, castellà i català.
+link: https://aranroig.com
+tech: ["Nuxt 4", "Vue 3", "SCSS", "Node.js", "MongoDB"]
+---
--- a/frontend/content/projects/en/codelearn-app.md
+++ b/frontend/content/projects/en/codelearn-app.md
@@ -0,0 +1,8 @@
+---
+title: Codelearn Full-Stack App
+slug: codelearn-app
+date: 2026-01-01
+description: A full-stack learning management application built during my time at Codelearn. Features user authentication, course management, and real-time progress tracking.
+link: https://codelearn.cat
+tech: ["Nuxt", "Express", "MongoDB", "TypeScript"]
+---
--- a/frontend/content/projects/en/ml-pipeline.md
+++ b/frontend/content/projects/en/ml-pipeline.md
@@ -0,0 +1,7 @@
+---
+title: ML Pipeline Tool
+slug: ml-pipeline
+date: 2026-01-01
+description: A modular machine learning pipeline tool for UPC's Machine Learning and Cybersecurity master's degree. Automates data preprocessing, model training, and evaluation workflows.
+tech: ["Python", "PyTorch", "Docker"]
+---
--- a/frontend/content/projects/en/portfolio-website.md
+++ b/frontend/content/projects/en/portfolio-website.md
@@ -0,0 +1,8 @@
+---
+title: Portfolio Website
+slug: portfolio-website
+date: 2026-01-01
+description: This very website, built with Nuxt 4, Vue 3, and SCSS. Features pixel-art aesthetics, dark/light themes, accent color customization, and multilingual support across English, Spanish, and Catalan.
+link: https://aranroig.com
+tech: ["Nuxt 4", "Vue 3", "SCSS", "Node.js", "MongoDB"]
+---
--- a/frontend/content/projects/es/codelearn-app.md
+++ b/frontend/content/projects/es/codelearn-app.md
@@ -0,0 +1,8 @@
+---
+title: App de Codelearn
+slug: codelearn-app
+date: 2026-01-01
+description: Una aplicación full-stack de gestión de aprendizaje construida en mi tiempo en Codelearn. Autenticación de usuarios, gestión de cursos y seguimiento de progreso en tiempo real.
+link: https://codelearn.cat
+tech: ["Nuxt", "Express", "MongoDB", "TypeScript"]
+---
--- a/frontend/content/projects/es/ml-pipeline.md
+++ b/frontend/content/projects/es/ml-pipeline.md
@@ -0,0 +1,7 @@
+---
+title: Herramienta Pipeline ML
+slug: ml-pipeline
+date: 2026-01-01
+description: Una herramienta modular de pipeline de aprendizaje automático para el máster de Aprendizaje Automático y Ciberseguridad de la UPC. Automatiza preprocesamiento, entrenamiento y evaluación de modelos.
+tech: ["Python", "PyTorch", "Docker"]
+---
--- a/frontend/content/projects/es/portfolio-website.md
+++ b/frontend/content/projects/es/portfolio-website.md
@@ -0,0 +1,8 @@
+---
+title: Portfolio Website
+slug: portfolio-website
+date: 2026-01-01
+description: Esta página web, construida con Nuxt 4, Vue 3 y SCSS. Con estética pixel-art, temas oscuro/claro, personalización de colores de acento y soporte multilingue en inglés, español y catalán.
+link: https://aranroig.com
+tech: ["Nuxt 4", "Vue 3", "SCSS", "Node.js", "MongoDB"]
+---
--- a/frontend/i18n/locales/ca.json
+++ b/frontend/i18n/locales/ca.json
@@ -27,6 +27,9 @@
            "art": "art"
        }
    },
+    "pages": {
+        "projects_heading": "Projectes"
+    },
    "prefooter": "Aquesta pàgina web ha sigut construida per un humà.",
    "footer": "(C) 2026 Aran Roig. Tots els drets no sé que."
 }
--- a/frontend/i18n/locales/en.json
+++ b/frontend/i18n/locales/en.json
@@ -28,7 +28,8 @@
        }
    },
    "pages": {
-        "root": ""
+        "root": "",
+        "projects_heading": "Projects"
    },
    "prefooter": "This webpage has been made by a human.",
    "footer": "(C) 2026 Aran Roig. All rights whatever."
--- a/frontend/i18n/locales/es.json
+++ b/frontend/i18n/locales/es.json
@@ -27,6 +27,9 @@
            "art": "arte"
        }
    },
+    "pages": {
+        "projects_heading": "Proyectos"
+    },
    "prefooter": "Esta página web ha sido construida por un humano.",
    "footer": "(C) 2026 Aran Roig. Todos los derechos no se que."
 }