feat: design improvements + create posts component

src/components/about.svelte

@@ -1,8 +1,8 @@
 <section
-  class="prose prose-neutral dark:prose-invert prose-a:font-normal prose-a:decoration-neutral-500 prose-a:decoration-dotted prose-a:underline-offset-[5px] prose-a:opacity-80"
+  class="prose dark:prose-invert prose-a:font-normal prose-a:decoration-neutral-500 prose-a:decoration-dotted prose-a:underline-offset-[5px] prose-a:opacity-80"
 >
   <p class="leading-loose">
-    {`I'm`} <span class="font-bold">Pablo</span>, a fullstack web developer from Canary Islands with
+    {`I'm`} <span class="font-bold tracking-tight">Pablo</span>, a fullstack web developer from Canary Islands with
     +3 years of experience. I'm passionate about databases, UI/UX design, and building open-source
     software.
   </p>

src/components/experience.svelte

@@ -31,10 +31,14 @@
             href={experience.companyUrl}
             target="_blank"
             rel="noopener"
-            class="flex items-center text-pretty text-sm text-neutral-600 transition-colors duration-150 hover:text-black dark:border-neutral-800 dark:text-neutral-400 dark:hover:text-white group"
+            class="group flex w-max items-center text-pretty text-sm text-neutral-600 transition-colors duration-150 hover:text-black dark:border-neutral-800 dark:text-neutral-400 dark:hover:text-white"
           >
             <span>{experience.company}</span>
-            <ArrowUpRight class="ml-1 group-hover:translate-x-[1.5px] duration-150" size={12} strokeWidth={1.5} />
+            <ArrowUpRight
+              class="ml-1 duration-150 group-hover:translate-x-[1.5px]"
+              size={12}
+              strokeWidth={1.5}
+            />
           </a>
         </div>
         <p class="mt-3 text-pretty text-sm dark:text-neutral-400">

src/components/posts.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Post } from '@/types/post.type';
+  import Badge from '@/ui/badge/badge.svelte';
+  import { formatDate } from '@/utils';
+
+  export let postData: Post[] = [];
+</script>
+
+<section class="flex flex-col space-y-4">
+  <h2 class="text-xl font-medium">Posts</h2>
+  {#each postData as post}
+    <div class="w-full rounded-md border border-neutral-300 p-3 dark:border-neutral-800">
+      <div class="mb-3 flex flex-col space-y-1">
+        <a
+          href={`/post/${post.slug}`}
+          class="w-max text-lg font-medium decoration-neutral-500 decoration-dotted underline-offset-[5px] duration-150 hover:underline hover:opacity-80"
+        >
+          {post.title}
+        </a>
+        <p class="text-pretty text-sm dark:text-neutral-400">
+          {post.description}
+        </p>
+      </div>
+      <div class="flex items-center justify-between">
+        <Badge>{post.category}</Badge>
+        <p class="font-mono text-sm text-neutral-500 dark:text-neutral-400">
+          {formatDate(post.date)}
+        </p>
+      </div>
+    </div>
+  {/each}
+</section>

src/routes/+page.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+  import { cn } from '@/utils';
+  import { routeAnimation } from '@/ui/shared';
+  
+  // Sections:
   import About from '@/components/about.svelte';
   import Experience from '@/components/experience.svelte';
   import Projects from '@/components/featuredProjects.svelte';
-  import { routeAnimation } from '@/ui/shared';
-  import { cn, formatDate } from '@/utils';
+  import Posts from '@/components/posts.svelte';
 
   export let data;
 </script>
@@ -12,17 +15,9 @@
   <title>Pablo Hernández</title>
 </svelte:head>
 
-<div class={cn('grid items-center gap-12 py-4 md:py-4', routeAnimation)}>
+<div class={cn('grid items-center gap-14 py-4 md:py-4', routeAnimation)}>
   <About />
   <Projects />
   <Experience />
-  <ul class="posts">
-    {#each data.posts as post}
-      <li class="post">
-        <a href={`post/${post.slug}`} class="title">{post.title}</a>
-        <p class="date">{formatDate(post.date)}</p>
-        <p class="description">{post.description}</p>
-      </li>
-    {/each}
-  </ul>
+  <Posts postData={data.posts} />
 </div>

src/routes/post/[slug]/+page.svelte

@@ -36,7 +36,7 @@
     </div>
     <a
       href={`https://github.com/pheralb/pheralb.dev/blob/main/src/posts/${data.slug}.md`}
-      class="flex items-center space-x-1 text-neutral-800 transition-colors duration-200 ease-in-out hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white"
+      class="flex items-center space-x-1 text-neutral-600 transition-colors duration-200 ease-in-out hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white"
       target="_blank"
       rel="noopener noreferrer"
     >
@@ -55,8 +55,11 @@
   <article
     class={cn(
       'py-5',
-      'prose prose-quoteless w-full max-w-full text-pretty dark:prose-invert',
-      'prose-headings:font-medium'
+      'prose prose-neutral prose-quoteless w-full max-w-full text-pretty dark:prose-invert',
+      'prose-headings:font-medium prose-h2:tracking-tight',
+      'prose-a:decoration-neutral-400 prose-a:decoration-dotted prose-a:decoration-[1.5px] prose-a:underline-offset-[6px] hover:prose-a:opacity-80 dark:prose-a:decoration-neutral-400',
+      'prose-pre:my-3',
+      'prose-ol:mb-3 prose-ul:mb-3'
     )}
   >
     <svelte:component this={data.content} />

src/ui/badge/badge.svelte

@@ -1,5 +1,5 @@
 <span
-  class="cursor-default rounded-md border border-neutral-200 bg-neutral-200/50 px-2 py-1 font-mono text-xs font-medium text-neutral-600 dark:border-neutral-800 dark:bg-neutral-800/60 dark:text-neutral-300"
+  class="cursor-default rounded-md border border-neutral-300 bg-neutral-200/50 px-2 py-1 font-mono text-xs font-medium text-neutral-600 dark:border-neutral-800 dark:bg-neutral-800/60 dark:text-neutral-300"
 >
   <slot />
 </span>