hat

frontend/app/pages/index.vue

@@ -29,6 +29,19 @@ const { data: contactMarkdown } = await useAsyncData(`fixed-contact`, async () =
 
 const localePath = useLocalePath();
 
+function resolveProjectLink(project) {
+  if (project.link) return project.link;
+  const slugToProjectMap = {
+    'dragonroll': 'https://dragonroll.aranroig.com',
+  };
+  return slugToProjectMap[project.slug] || null;
+}
+
+function navigateToProject(project) {
+  const link = resolveProjectLink(project);
+  if (link) window.open(link, '_blank', 'noopener,noreferrer');
+}
+
 const artPosts = useState<any[]>('art-posts', () => null as any);
 if (!artPosts.value?.length) {
   const currentLocale = locale.value;
@@ -125,33 +138,37 @@ const sectionTargets = {
     <section class="projects-section" id="scroll-projects" v-if="projects && projects.length > 0">
       <Container>
         <h2 class="section-title">{{ t('pages.projects_heading') }}</h2>
-        <!--
+        
         <div class="projects-grid">
           <div 
-            v-for="project in projects" 
+             v-for="project in projects" 
+
             :key="project.slug"
-            class="project-card"
+            class="project-card-wrapper"
           >
-            <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 
+              class="project-card" 
+              @click="navigateToProject(project)" 
+            >
+              <div class="project-layout">
+                <img 
+                  v-if="project.preview" 
+                  :src="project.preview" 
+                  :alt="`Preview of ${project.title}`" 
+                  class="project-preview"
+                />
+                <div class="project-info">
+                  <p class="project-title">{{ project.title }}</p>
+                  <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>
             </div>
           </div>
         </div>
 
-        -->
-        (Under construction...)
       </Container>
     </section>
 
@@ -388,11 +405,6 @@ const sectionTargets = {
   padding: 12px 16px;
   transition: all 0.1s steps(2, end);
 
-  &:hover {
-    border-color: var(--color-link);
-    box-shadow: 4px -4px 0px 0px var(--color-link);
-  }
-
   &::before {
     content: "[ PROJECT ]";
     position: absolute;
@@ -404,6 +416,28 @@ const sectionTargets = {
     color: var(--color-link);
     letter-spacing: 2px;
   }
+
+  .project-layout {
+    display: flex;
+    gap: 16px;
+  }
+
+  .project-preview {
+    width: 140px;
+    min-width: 140px;
+    height: 85px;
+    object-fit: cover;
+    border: 1px solid var(--color-border-color);
+    image-rendering: auto;
+    transition: border-color 0.1s steps(2, end);
+  }
+
+  .project-info {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+  }
 }
 
 .project-card-corner {
@@ -420,18 +454,29 @@ const sectionTargets = {
 
 .project-title {
   font-family: 'Hurmit', monospace;
-  color: var(--color-link);
+  color: inherit;
   text-decoration: none;
   font-size: 1.05rem;
-  text-shadow: 0 0 4px var(--color-link);
-  display: block;
+  text-shadow: inherit;
 
   &:hover {
     color: var(--color-link);
-    text-shadow: 0 0 12px var(--color-link), 0 0 4px var(--color-link);
   }
 }
 
+.project-card {
+  cursor: pointer;
+}
+
+.project-card-wrapper:hover .project-card {
+  border-color: var(--color-link);
+  box-shadow: 4px -4px 0px 0px var(--color-link);
+}
+
+.project-info {
+  cursor: pointer;
+}
+
 .project-description {
   font-family: 'Hurmit', monospace;
   color: var(--color-text);
@@ -762,6 +807,16 @@ const sectionTargets = {
   .project-card {
     padding: 8px 12px;
   }
+
+  .project-layout {
+    flex-direction: column !important;
+  }
+
+  .project-preview {
+    width: 100% !important;
+    min-width: auto !important;
+    height: 160px !important;
+  }
   
   .project-title {
     font-size: 0.95rem;