initial commit

src/lib/components/Education.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Education } from '$lib/types.js';
+  import Section from './Section.svelte';
+  import TimelineItem from './TimelineItem.svelte';
+
+  let { education }: { education: Education[] } = $props();
+</script>
+
+<Section title="education">
+  <div class="space-y-6">
+    {#each education as edu}
+      <TimelineItem
+        title={edu.degree}
+        subtitle={edu.field}
+        location={edu.location}
+        startDate={edu.startDate}
+        endDate={edu.endDate}
+        current={edu.current}
+        description={edu.description}
+      />
+    {/each}
+  </div>
+</Section>

src/lib/components/EncodedEmail.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  interface Props {
+    email: string;
+    class?: string;
+    label?: string;
+  }
+
+  let { email, class: className = '', label }: Props = $props();
+
+  let encodedEmail = $state('');
+  let isEncoding = $state(true);
+
+  $effect(() => {
+    if (typeof window !== 'undefined') {
+      try {
+        encodedEmail = btoa(email);
+      } catch {
+        encodedEmail = '';
+      }
+      isEncoding = false;
+    }
+  });
+
+  function decodeEmail(): string {
+    try {
+      return atob(encodedEmail);
+    } catch {
+      return '';
+    }
+  }
+</script>
+
+{#if !isEncoding && encodedEmail}
+  <a href="mailto:{decodeEmail()}" class={className}>
+    {label || decodeEmail()}
+  </a>
+{:else}
+  <span class={className}>{label || '[email]'}</span>
+{/if}

src/lib/components/Experience.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Experience } from '$lib/types.js';
+  import Section from './Section.svelte';
+  import TimelineItem from './TimelineItem.svelte';
+
+  let { experience }: { experience: Experience[] } = $props();
+</script>
+
+<Section title="experience">
+  <div class="space-y-8">
+    {#each experience as job}
+      <TimelineItem
+        title={job.position}
+        subtitle={job.company}
+        location={job.location}
+        startDate={job.startDate}
+        endDate={job.endDate}
+        current={job.current}
+        description={job.description}
+        tags={job.technologies}
+      />
+    {/each}
+  </div>
+</Section>

src/lib/components/Header.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Profile } from '$lib/types.js';
+  import EncodedEmail from './EncodedEmail.svelte';
+
+  let { profile }: { profile: Profile } = $props();
+</script>
+
+<header class="border-b-2 border-fg/10 pb-8 mb-8">
+  <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">
+    <div class="flex-1">
+      <h1 class="text-4xl font-bold mb-2 tracking-tight text-fg">
+        {profile.name}
+      </h1>
+      <p class="text-xl text-muted mb-4 font-medium">
+        {profile.title}
+      </p>
+      <p class="text-muted leading-relaxed max-w-2xl">
+        {profile.summary}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2 text-sm">
+      <div class="flex items-center gap-2 text-muted hover:text-accent transition-colors">
+        <span class="text-accent">[E]</span>
+        <EncodedEmail email={profile.email} class="hover:text-accent transition-colors" />
+      </div>
+
+      <div class="flex items-center gap-2 text-muted">
+        <span class="text-accent">[L]</span>
+        {profile.location}
+      </div>
+
+      <a
+        href="https://github.com/{profile.github}"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center gap-2 text-muted hover:text-accent transition-colors"
+      >
+        <span class="text-accent">[G]</span>
+        github.com/{profile.github}
+      </a>
+
+      {#if profile.website}
+        <a
+          href={profile.website}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center gap-2 text-muted hover:text-accent transition-colors"
+        >
+          <span class="text-accent">[W]</span>
+          {profile.website.replace(/^https?:\/\//, '')}
+        </a>
+      {/if}
+    </div>
+  </div>
+</header>

src/lib/components/PDFContent.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import type { Profile, Experience, Education, Skill, Project } from '$lib/types.js';
+  import PDFProjectItem from './PDFProjectItem.svelte';
+  import PDFSection from './PDFSection.svelte';
+  import PDFTags from './PDFTags.svelte';
+  import PDFTimelineItem from './PDFTimelineItem.svelte';
+
+  let {
+    profile,
+    experience,
+    education,
+    skills,
+    ownProjects,
+    contributions,
+  }: {
+    profile: Profile;
+    experience: Experience[];
+    education: Education[];
+    skills: Skill[];
+    ownProjects: Project[];
+    contributions: Project[];
+  } = $props();
+</script>
+
+<div
+  class="font-sans max-w-[210mm] mx-auto px-[20mm] py-[18mm] bg-pdf-bg text-pdf-fg leading-relaxed text-sm"
+>
+  <!-- Header -->
+  <header class="text-center mb-6 pb-4 border-b-2 border-pdf-fg">
+    <div>
+      <h1 class="text-3xl font-extrabold tracking-tight text-pdf-fg leading-tight m-0">
+        {profile.name}
+      </h1>
+      <p class="text-base font-medium text-pdf-muted mt-1.5 mb-3">{profile.title}</p>
+    </div>
+    <div class="flex justify-center flex-wrap gap-x-6 gap-y-3 text-xs mb-2">
+      {#if profile.email}
+        <a class="inline-flex items-center gap-1.5 text-pdf-accent" href="mailto:{profile.email}">
+          <svg
+            class="w-3.5 h-3.5 text-pdf-accent"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+            <polyline points="22,6 12,13 2,6" />
+          </svg>
+          {profile.email}
+        </a>
+      {/if}
+      <span class="inline-flex items-center gap-1.5 text-pdf-muted">
+        <svg
+          class="w-3.5 h-3.5 text-pdf-accent"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+          <circle cx="12" cy="10" r="3" />
+        </svg>
+        {profile.location}
+      </span>
+    </div>
+    <div class="flex justify-center flex-wrap gap-x-5 gap-y-2 text-xs text-pdf-accent">
+      {#if profile.github}
+        <a href="https://github.com/{profile.github}" class="no-underline"
+          >github.com/{profile.github}</a
+        >
+      {/if}
+      {#if profile.website}
+        <a href={profile.website} class="no-underline"
+          >{profile.website.replace(/^https?:\/\//, '')}</a
+        >
+      {/if}
+    </div>
+  </header>
+
+  <!-- Summary -->
+  <section class="mb-6 pb-3 text-sm leading-relaxed text-pdf-muted border-b border-pdf-muted/30">
+    <p>{profile.summary}</p>
+  </section>
+
+  <!-- Experience -->
+  <PDFSection title="Professional Experience">
+    <div class="flex flex-col gap-4">
+      {#each experience as job}
+        <PDFTimelineItem
+          title={job.position}
+          subtitle={job.company}
+          location={job.location}
+          startDate={job.startDate}
+          endDate={job.endDate}
+          description={job.description}
+          tags={job.technologies}
+        />
+      {/each}
+    </div>
+  </PDFSection>
+
+  <!-- Education -->
+  <PDFSection title="Education">
+    <div class="flex flex-col gap-4">
+      {#each education as edu}
+        <PDFTimelineItem
+          title={edu.degree}
+          subtitle={edu.field}
+          location={edu.institution}
+          startDate={edu.startDate}
+          endDate={edu.endDate}
+          description={edu.description}
+        />
+      {/each}
+    </div>
+  </PDFSection>
+
+  <!-- Skills -->
+  <PDFSection title="Skills & Technologies">
+    <div class="flex flex-col gap-2.5">
+      {#each skills as skillCategory}
+        <div class="grid items-baseline gap-3" style="grid-template-columns: 130px 1fr;">
+          <span class="text-xs font-semibold text-pdf-fg text-left">{skillCategory.category}</span>
+          <PDFTags tags={skillCategory.items} />
+        </div>
+      {/each}
+    </div>
+  </PDFSection>
+
+  <!-- Projects -->
+  {#if ownProjects.length > 0}
+    <PDFSection title="Original Projects">
+      <div class="flex flex-col gap-2.5">
+        {#each ownProjects as project}
+          <PDFProjectItem {project} />
+        {/each}
+      </div>
+    </PDFSection>
+  {/if}
+
+  <!-- Contributions -->
+  {#if contributions.length > 0}
+    <PDFSection title="Contributions">
+      <div class="flex flex-col gap-2.5">
+        {#each contributions as project}
+          <PDFProjectItem {project} />
+        {/each}
+      </div>
+    </PDFSection>
+  {/if}
+</div>

src/lib/components/PDFProjectItem.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Project } from '$lib/types.js';
+
+  interface Props {
+    project: Project;
+  }
+
+  let { project }: Props = $props();
+</script>
+
+<div class="flex justify-between">
+  <div class="break-inside-avoid">
+    <a href={project.url} class="font-bold text-pdf-accent no-underline">
+      {project.name}
+    </a>
+    <p class="text-pdf-muted leading-snug text-xs">{project.description}</p>
+  </div>
+  <div class="flex flex-col items-end text-xs">
+    <span class="text-pdf-fg font-medium">★ {project.stars}</span>
+    {#if project.language}
+      <span class="bg-pdf-fg/5 text-pdf-muted px-1 py-0.5 rounded font-medium">
+        {project.language}
+      </span>
+    {/if}
+  </div>
+</div>

src/lib/components/PDFSection.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    children: Snippet;
+  }
+
+  let { title, children }: Props = $props();
+</script>
+
+<section class="mb-6 pb-3 border-b border-pdf-muted/30 last:border-b-0">
+  <h2 class="text-sm font-bold text-pdf-fg flex items-center uppercase tracking-wide">
+    {title}
+  </h2>
+  <div class="mt-3">
+    {@render children()}
+  </div>
+</section>

src/lib/components/PDFTags.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  interface Props {
+    tags: string[];
+  }
+
+  let { tags }: Props = $props();
+</script>
+
+{#if tags.length > 0}
+  <div class="text-xs text-pdf-muted">
+    {#each tags as tag}
+      <span class="first:before:content-[''] before:content-['_•_']">{tag}</span>
+    {/each}
+  </div>
+{/if}

src/lib/components/PDFTimelineItem.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { formatDate } from '$lib/utils/date.js';
+  import PDFTags from './PDFTags.svelte';
+
+  interface Props {
+    title: string;
+    subtitle?: string;
+    location?: string;
+    startDate: string;
+    endDate?: string;
+    description?: string;
+    tags?: string[];
+  }
+
+  let { title, subtitle, location, startDate, endDate, description, tags = [] }: Props = $props();
+</script>
+
+<div class="break-inside-avoid">
+  <div class="flex justify-between items-start mb-1 gap-4">
+    <div class="flex flex-wrap items-baseline gap-1.5">
+      <h3 class="text-sm font-bold text-pdf-fg m-0">{title}</h3>
+      {#if subtitle}
+        <span class="text-xs font-medium text-pdf-muted">{subtitle}</span>
+      {/if}
+      {#if location}
+        <span class="text-xs text-pdf-muted italic">• {location}</span>
+      {/if}
+    </div>
+    <div class="text-xs text-pdf-muted whitespace-nowrap tabular-nums">
+      {formatDate(startDate)} — {endDate ? formatDate(endDate) : 'Present'}
+    </div>
+  </div>
+  {#if description}
+    <p class="my-1 text-xs leading-relaxed text-pdf-muted">
+      {description}
+    </p>
+  {/if}
+  <div class="mt-1.5">
+    <PDFTags {tags} />
+  </div>
+</div>

src/lib/components/ProjectCard.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Project } from '$lib/types.js';
+
+  interface Props {
+    project: Project;
+  }
+
+  let { project }: Props = $props();
+</script>
+
+<a
+  href={project.url}
+  target="_blank"
+  rel="noopener noreferrer"
+  class="block p-4 border border-accent rounded-lg transition-shadow hover:shadow-glow"
+>
+  <article class="flex flex-col justify-between h-full">
+    <div>
+      <div class="flex items-start justify-between gap-4 mb-2">
+        <span class="text-lg font-semibold text-fg">
+          {project.name}
+        </span>
+        <div class="flex items-center gap-3 text-sm text-hot">
+          <span class="flex items-center gap-1" aria-label="{project.stars} stars">
+            <span class="text-xl">★</span>
+            {project.stars}
+          </span>
+        </div>
+      </div>
+
+      <p class="text-muted text-sm mb-3 line-clamp-2">
+        {project.description}
+      </p>
+    </div>
+
+    <div class="flex items-center justify-between text-xs">
+      {#if project.language}
+        <span class="font-mono text-muted">
+          <span class="inline-block w-2 h-2 rounded-full bg-accent mr-1"></span>
+          {project.language}
+        </span>
+      {:else}
+        <span></span>
+      {/if}
+    </div>
+  </article>
+</a>

src/lib/components/ProjectList.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Project } from '$lib/types.js';
+  import ProjectCard from './ProjectCard.svelte';
+
+  interface Props {
+    title: string;
+    projects: Project[];
+    seeAllLink: string;
+  }
+
+  let { title, projects, seeAllLink }: Props = $props();
+  $effect(() => console.log({ seeAllLink }));
+</script>
+
+{#if projects.length > 0}
+  <div class="mb-8 last:mb-0">
+    <h3 class="font-semibold mb-4 text-fg/70 text-2xl">
+      {title}
+    </h3>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
+      {#each projects as project}
+        <ProjectCard {project} />
+      {/each}
+    </div>
+
+    <a
+      class="text-accent hover:text-accent/80 transition-colors cursor-pointer"
+      href={seeAllLink}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      See all
+    </a>
+  </div>
+{/if}

src/lib/components/Projects.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Project } from '$lib/types.js';
+  import ProjectList from './ProjectList.svelte';
+  import Section from './Section.svelte';
+
+  let {
+    ownProjects,
+    contributions,
+    username,
+  }: { ownProjects: Project[]; contributions: Project[]; username: string } = $props();
+</script>
+
+<Section title="projects">
+  <ProjectList
+    title="Original Projects"
+    projects={ownProjects}
+    seeAllLink="https://github.com/{username}?tab=repositories&type=source&sort=stargazers"
+  />
+  <ProjectList
+    title="Contributions"
+    projects={contributions}
+    seeAllLink="https://github.com/{username}?tab=repositories&type=fork"
+  />
+</Section>

src/lib/components/Section.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  interface Props {
+    title: string;
+    id?: string;
+    children: import('svelte').Snippet;
+  }
+
+  let { title, id, children }: Props = $props();
+
+  const headingId = $derived(id ?? `${title.toLowerCase().replace(/\s+/g, '-')}-heading`);
+</script>
+
+<section class="pb-8 mb-10 border-b border-fg/20 last:border-b-0" aria-labelledby={headingId}>
+  <h2 id={headingId} class="text-3xl font-bold mb-6 pb-2 text-fg">
+    <span class="text-accent">$></span>
+    {title}
+  </h2>
+
+  {@render children()}
+</section>

src/lib/components/Skills.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Skill } from '$lib/types.js';
+  import Section from './Section.svelte';
+  import Tags from './Tags.svelte';
+
+  let { skills }: { skills: Skill[] } = $props();
+</script>
+
+<Section title="skills">
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+    {#each skills as skillCategory}
+      <div>
+        <h3 class="text-sm font-semibold text-accent uppercase tracking-wider mb-3">
+          {skillCategory.category}
+        </h3>
+        <Tags tags={skillCategory.items} />
+      </div>
+    {/each}
+  </div>
+</Section>

src/lib/components/Tags.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  interface Props {
+    tags: string[];
+  }
+
+  let { tags }: Props = $props();
+</script>
+
+{#if tags.length > 0}
+  <div class="flex flex-wrap gap-2">
+    {#each tags as tag}
+      <span class="px-2 py-1 text-xs font-mono bg-fg/5 text-fg/70 rounded border border-fg/10">
+        {tag}
+      </span>
+    {/each}
+  </div>
+{/if}

src/lib/components/TimelineItem.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { formatDate } from '$lib/utils/date.js';
+  import Tags from './Tags.svelte';
+
+  interface Props {
+    title: string;
+    subtitle?: string;
+    location?: string;
+    startDate: string;
+    endDate?: string;
+    current?: boolean;
+    description?: string;
+    tags?: string[];
+  }
+
+  let {
+    title,
+    subtitle,
+    location,
+    startDate,
+    endDate,
+    current = false,
+    description,
+    tags = [],
+  }: Props = $props();
+</script>
+
+<article>
+  <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 mb-2">
+    <div class="flex flex-col">
+      <h3 class="text-xl font-semibold text-fg">{title}</h3>
+      {#if subtitle || location}
+        <p class="text-fg font-medium">
+          {subtitle}
+          {#if subtitle && location}
+            <span class="text-muted font-normal">• {location}</span>
+          {:else if location}
+            {location}
+          {/if}
+        </p>
+      {/if}
+    </div>
+    <time class="text-sm text-muted font-mono whitespace-nowrap">
+      {formatDate(startDate)} — {current || !endDate ? 'Present' : formatDate(endDate)}
+    </time>
+  </div>
+
+  {#if description}
+    <p class="text-muted leading-relaxed mb-3">
+      {description}
+    </p>
+  {/if}
+
+  <Tags {tags} />
+</article>