Merge pull request #7 from milan-codes/develop

Develop

Author: milan-codes

src/components/BlogPostCard.svelte

@@ -10,8 +10,6 @@
         <a
             class="inline-flex items-center rounded-lg text-gray-900 dark:text-gray-100 hover:underline"
             href={post.url}
-            target="_blank"
-            rel="noreferrer"
         >
             {post.frontmatter.title}
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-1 h-4 w-4"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>

src/components/ProjectCard.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-    export let projectName: string;
-    export let projectDescription: string;
-    export let projectLink: string;
-    export let projectTags: string[];
+    export let name: string;
+    export let description: string;
+    export let link: string;
+    export let tags: string[];
 </script>
 
 <div class="grid grid-cols-2 items-start my-8">
-    <a class="inline-flex items-center rounded-lg text-gray-900 dark:text-gray-100 hover:underline" href={projectLink} target="_blank" rel="noreferrer">
-        {projectName}
+    <a class="inline-flex items-center rounded-lg text-gray-900 dark:text-gray-100 hover:underline" href={link} target="_blank" rel="noreferrer">
+        {name}
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-1 h-4 w-4"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
     </a>
     <div>
-        <p class="text-gray-600 dark:text-gray-400">{projectDescription}</p>
+        <p class="text-gray-600 dark:text-gray-400">{description}</p>
         <ul class="flex flex-wrap">
-            {#each projectTags as tag}
+            {#each tags as tag}
                 <li class="text-gray-400 dark:text-gray-600 text-sm font-medium">{tag + "/"}</li>
             {/each}
         </ul>

src/components/Projects.svelte

@@ -1,12 +1,44 @@
 <script>
   import ProjectCard from "./ProjectCard.svelte";
+
+  const projects = [
+    {
+      name: "Personal blog",
+      description: "The source code of this site",
+      link: "https://github.com/milan-codes/milan-codes.github.io",
+      tags: ["Astro", "Svelte", "Tailwind"]
+    },
+    {
+      name: "The Briefing Room",
+      description: "Access and visualize Formula 1 telemetry data",
+      link: "https://github.com/milan-codes/the-briefing-room",
+      tags: ["Next", "React.ts", "Tailwind"]
+    },
+    {
+      name: "The Briefing Room API",
+      description: "Simple Flask API to serve The Briefing Room's frontend",
+      link: "https://github.com/milan-codes/the-briefing-room-api",
+      tags: ["Flask"]
+    },
+    {
+      name: "Studician",
+      description: "Android app for students to digitalize their timetable and tasks",
+      link: "https://github.com/milan-codes/studician-android-client",
+      tags: ["Kotlin"]
+    },
+    {
+      name: "Studician API",
+      description: "Express API to make information available for Studician users",
+      link: "https://github.com/milan-codes/studician-api",
+      tags: ["Node.js", "Express", "Firebase"]
+    },
+  ]
+    
 </script>
 
 <div class="my-16">
   <h1 class="text-gray-900 dark:text-gray-100 mb-2 tracking-wider">Projects</h1>
-  <ProjectCard projectName="Personal blog" projectDescription="The source code of this site" projectLink="https://github.com/milan-codes/milan-codes.github.io" projectTags={["Astro", "Svelte", "Tailwind"]}/>
-  <ProjectCard projectName="The Briefing Room" projectDescription="Access and visualize Formula 1 telemetry data" projectLink="https://github.com/milan-codes/the-briefing-room" projectTags={["Next", "React.ts", "Tailwind"]}/>
-  <ProjectCard projectName="The Briefing Room API" projectDescription="Simple Flask API to serve the frontend" projectLink="https://github.com/milan-codes/the-briefing-room-api" projectTags={["Flask"]}/>
-  <ProjectCard projectName="Studician" projectDescription="Android app for students to digitalize their timetable and tasks" projectLink="https://github.com/milan-codes/studician-android-client" projectTags={["Kotlin"]}/>
-  <ProjectCard projectName="Studician API" projectDescription="Express API to make information available for users" projectLink="https://github.com/milan-codes/studician-api" projectTags={["Node.js", "Express", "Firebase"]}/>
+    {#each projects as project, index}
+      <ProjectCard key={index} {...project} />
+    {/each}
 </div>