feat: make project pretty

components/ProjectCard.vue

@@ -1,45 +1,88 @@
 <script setup lang="ts">
-const props = defineProps<{
-  name: string;
-  href: string;
-  img: string;
+import type { Project } from "@/data/projects";
+const { project, reverse = false } = defineProps<{
+  project: Project;
+  reverse?: boolean;
 }>();
+/*
+name
+description
+language
+license?
+date?
+
+image
+*/
+
+const imgUrl = `url(/assets/images/projects/${project.img ?? ""})`;
 </script>
 
 <template>
-  <a :href="href" class="no-underline">
-    <div class="card flex flex-col items-center justify-around">
-      <img class="m-0" :src="img" />
-      <h3 class="m-0">{{ props.name }}</h3>
-      <p class="desc-text text-gray-600 dark:text-gray-200"><slot /></p>
+  <a :href="project.href" class="no-underline project-anchor">
+    <div class="card flex items-center justify-between">
+      <div class="card-text h-full bg-white p-4 pt-2">
+        <div>
+          <h3 class="m-0">{{ project.name }}</h3>
+          <div class="flex gap-1 items-center">
+            <img
+              class="h-5 w-5 m-0"
+              :src="`/assets/images/langs/${lang}.svg`"
+              v-for="(lang, index) in project.langs"
+              :key="index"
+            />
+            <span class="text-xs text-gray-500"
+              >· {{ project.license ?? "no license" }}</span
+            >
+          </div>
+        </div>
+        <p class="desc-text text-gray-600 dark:text-gray-200">
+          <slot />
+        </p>
+      </div>
+      <div class="card-img h-full p-4 flex" />
     </div>
   </a>
 </template>
 
 <style scoped>
-img {
-  width: 6rem;
+.project-anchor {
+  display: inline-block;
+  width: 100%;
 }
 
 .card {
-  padding: 1rem;
   border: 0.2rem solid pink;
-  background: rgb(255, 237, 241);
-  border-radius: 0.5rem;
-  width: 12rem;
+  background: white;
+  border-radius: 1.5rem 0 1.5rem 0;
   height: 12rem;
   line-height: 1.25;
   transition: all 0.2s ease;
+  box-shadow: 0 0.1rem 0.5rem 0 gray;
 }
 
 html.dark .card {
   border: 0.2rem solid rgb(126, 93, 98);
   background: rgb(110, 90, 92);
+  box-shadow: 0 0.1rem 0.5rem 0 black;
 }
 
 .card:hover,
 .card:active {
-  transform: scale(1.05);
+  transform: scale(1.03);
+}
+
+.card-text {
+  width: 25%;
+  border-radius: 1.5rem 0 0 0;
+}
+
+.card-img {
+  width: 75%;
+  background: v-bind(imgUrl);
+  background-color: rgb(255, 237, 241);
+  background-position: right 90% top 15%;
+  background-size: 100%;
+  border-radius: 0 0 1.5rem 100%;
 }
 
 .desc-text {

components/index/about.vue

@@ -4,7 +4,19 @@ import { projects } from "@/data/projects";
 
 <template>
   <div class="prose dark:prose-invert w-full flex flex-col mt-9">
-    <h1 id="about" class="text-center mb-4">About</h1>
+    <h1 class="text-center mb-0">Fun things</h1>
+    <p class="text-center">(aka my programming projects)</p>
+    <div class="flex flex-col items-center justify-around gap-5 mt-6">
+      <ProjectCard
+        v-for="(proj, index) in projects"
+        :project="proj"
+        :key="index"
+      >
+        {{ proj.description }}
+      </ProjectCard>
+    </div>
+
+    <h1 id="about" class="text-center mb-4 mt-8">About</h1>
 
     <!-- this could be in markdown but eh -->
     <p>
@@ -47,20 +59,6 @@ import { projects } from "@/data/projects";
       <li><strong>Storage:</strong> 300 GB hard drive</li>
       <li><strong>OS:</strong> Arch Linux</li>
     </ul>
-
-    <h1 class="text-center mb-0 mt-8">Fun things</h1>
-    <p class="text-center mb-4">(aka my programming projects)</p>
-    <div class="flex flex-col items-center justify-around gap-5">
-      <ProjectCard
-        v-for="(proj, index) in projects"
-        :name="proj.name"
-        :href="proj.href"
-        img=""
-        :key="index"
-      >
-        {{ proj.description }}
-      </ProjectCard>
-    </div>
   </div>
 </template>