initial commit
This commit is contained in:
Joakim Repomaa
@@ -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>
|
||||
@@ -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}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"institution": "Hochschule RheinMain",
|
||||
"degree": "Bachelor of Science",
|
||||
"field": "Applied Computer Science",
|
||||
"location": "Wiesbaden, Germany",
|
||||
"startDate": "2010",
|
||||
"endDate": "2016",
|
||||
"description": "Bachelor thesis: 'Collaborative Content Creation' - built a scalable CMS with real-time collaboration, hierarchical caching, and JSON-API using Crystal and Redux"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"company": "hundertzehn GmbH",
|
||||
"position": "Senior Software Engineer",
|
||||
"location": "Zürich, Schweiz",
|
||||
"startDate": "2021",
|
||||
"description": "Full-Stack Engineer for MOCO Cloud-ERP-SaaS serving 7'500+ SMEs. Develop Ruby-on-Rails backend, REST/GraphQL APIs, React/TypeScript frontends. Analyze large datasets, evaluate new technologies, integrate external APIs (Paywise), direct customer communication. Leading AI integration including Support Agent and MCP functionality. Key technical figure in SaaS product context ensuring platform stability at 60'000 daily active users.",
|
||||
"technologies": [
|
||||
"Ruby on Rails",
|
||||
"TypeScript",
|
||||
"React",
|
||||
"PostgreSQL",
|
||||
"GraphQL",
|
||||
"REST APIs",
|
||||
"Grafana"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"company": "MESO Digital Services GmbH",
|
||||
"position": "Software Engineer",
|
||||
"location": "Frankfurt, Germany",
|
||||
"startDate": "2014",
|
||||
"endDate": "2021",
|
||||
"description": "Developed software solutions for digital communication, IoT platforms, and cloud services. Key projects: Energybox - high-resolution big data IoT platform processing 1 billion+ data points daily with horizontally scalable sensor cloud backend, API, and frontend. HERE Technologies - experience platform and CMS for CES showcasing location intelligence. HfG Offenbach - database-driven university website with custom CMS for content management.",
|
||||
"technologies": [
|
||||
"Crystal",
|
||||
"Ruby on Rails",
|
||||
"JavaScript",
|
||||
"MongoDB",
|
||||
"REST APIs",
|
||||
"IoT",
|
||||
"Big Data"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import type { CVData, Profile, Experience, Education, Skill } from './types.js';
|
||||
import { readFileSync, readdirSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
|
||||
const CONTENT_DIR = join(process.cwd(), 'src', 'lib', 'content');
|
||||
|
||||
function loadJsonFile<T>(filepath: string): T | null {
|
||||
try {
|
||||
const content = readFileSync(filepath, 'utf-8');
|
||||
return JSON.parse(content) as T;
|
||||
} catch (error) {
|
||||
console.warn(`Could not load ${filepath}:`, error instanceof Error ? error.message : error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function loadJsonFilesFromDir<T>(dirPath: string): T[] {
|
||||
try {
|
||||
const files = readdirSync(dirPath, { withFileTypes: true });
|
||||
const items: T[] = [];
|
||||
|
||||
for (const file of files) {
|
||||
if (file.isFile() && file.name.endsWith('.json')) {
|
||||
const item = loadJsonFile<T>(join(dirPath, file.name));
|
||||
if (item) {
|
||||
items.push(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return items;
|
||||
} catch (error) {
|
||||
console.warn(
|
||||
`Could not read directory ${dirPath}:`,
|
||||
error instanceof Error ? error.message : error
|
||||
);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function decodeBase64Email(email: string): string {
|
||||
try {
|
||||
return Buffer.from(email, 'base64').toString('utf-8');
|
||||
} catch {
|
||||
return email;
|
||||
}
|
||||
}
|
||||
|
||||
export function loadProfile(): Profile {
|
||||
const profile = loadJsonFile<Profile>(join(CONTENT_DIR, 'profile.json')) ?? {
|
||||
name: 'Your Name',
|
||||
title: 'Developer',
|
||||
email: 'email@example.com',
|
||||
phone: undefined,
|
||||
location: 'Location',
|
||||
website: undefined,
|
||||
github: 'username',
|
||||
summary: 'A passionate developer.',
|
||||
};
|
||||
|
||||
return {
|
||||
...profile,
|
||||
email: decodeBase64Email(profile.email),
|
||||
};
|
||||
}
|
||||
|
||||
export function loadExperience(): Experience[] {
|
||||
return loadJsonFilesFromDir<Experience>(join(CONTENT_DIR, 'experience'));
|
||||
}
|
||||
|
||||
export function loadEducation(): Education[] {
|
||||
return loadJsonFilesFromDir<Education>(join(CONTENT_DIR, 'education'));
|
||||
}
|
||||
|
||||
export function loadSkills(): Skill[] {
|
||||
return loadJsonFilesFromDir<Skill>(join(CONTENT_DIR, 'skills'));
|
||||
}
|
||||
|
||||
export function loadAllContent(): CVData {
|
||||
return {
|
||||
profile: loadProfile(),
|
||||
experience: loadExperience(),
|
||||
education: loadEducation(),
|
||||
skills: loadSkills(),
|
||||
projects: [],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "Joakim Repomaa",
|
||||
"title": "Senior Software Engineer",
|
||||
"email": "am9ha2ltQHJlcG9tYWEuY29t",
|
||||
"location": "Espoo - Finnland",
|
||||
"website": "https://joakim.repomaa.com",
|
||||
"github": "repomaa",
|
||||
"summary": "Senior Full-Stack Engineer with deep expertise in Ruby on Rails backends, React/TypeScript frontends, and GraphQL/REST API design. Experienced in AI integration, external API partnerships, and analyzing large-scale data systems. Fluent in German, Finnish, and English. Passionate about system architecture, performance optimization, clean code, and pragmatic technical decision-making in fast-paced product environments."
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"category": "Backend",
|
||||
"items": ["Ruby on Rails", "Node.js", "PostgreSQL", "Redis", "GraphQL", "REST APIs"]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"category": "DevOps & Tools",
|
||||
"items": ["Docker", "Grafana", "CI/CD", "Git", "Linux", "NixOS", "Data Analysis"]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"category": "Frontend",
|
||||
"items": ["React", "TypeScript", "SvelteKit", "Tailwind CSS", "HTML5/CSS3"]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"category": "Languages",
|
||||
"items": ["Ruby", "TypeScript", "JavaScript", "SQL"]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"category": "Practices",
|
||||
"items": [
|
||||
"System Architecture",
|
||||
"API Design",
|
||||
"AI Integration",
|
||||
"Code Review",
|
||||
"Technical Writing",
|
||||
"Mentoring"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"category": "Spoken Languages",
|
||||
"items": ["German (fluent)", "Finnish (fluent)", "English (fluent)", "Swedish (intermediate)"]
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
// Content data types - clean interface definitions
|
||||
|
||||
export interface Profile {
|
||||
name: string;
|
||||
title: string;
|
||||
email: string;
|
||||
phone?: string;
|
||||
location: string;
|
||||
website?: string;
|
||||
github: string;
|
||||
summary: string;
|
||||
}
|
||||
|
||||
export interface Experience {
|
||||
company: string;
|
||||
position: string;
|
||||
location?: string;
|
||||
startDate: string;
|
||||
endDate?: string;
|
||||
current: boolean;
|
||||
description: string;
|
||||
technologies: string[];
|
||||
}
|
||||
|
||||
export interface Education {
|
||||
institution: string;
|
||||
degree: string;
|
||||
field?: string;
|
||||
location?: string;
|
||||
startDate: string;
|
||||
endDate?: string;
|
||||
current: boolean;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface Skill {
|
||||
category: string;
|
||||
items: string[];
|
||||
}
|
||||
|
||||
export interface Project {
|
||||
name: string;
|
||||
description: string;
|
||||
url: string;
|
||||
stars: number;
|
||||
forks: number;
|
||||
language?: string;
|
||||
isFork: boolean;
|
||||
}
|
||||
|
||||
export interface CVData {
|
||||
profile: Profile;
|
||||
experience: Experience[];
|
||||
education: Education[];
|
||||
skills: Skill[];
|
||||
projects: Project[];
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
import type { Project } from './content/types.js';
|
||||
|
||||
const GITHUB_API_BASE = 'https://api.github.com';
|
||||
|
||||
interface SearchIssue {
|
||||
repository_url: string;
|
||||
pull_request?: {
|
||||
merged_at: string | null;
|
||||
url: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface SearchResponse {
|
||||
items: SearchIssue[];
|
||||
total_count: number;
|
||||
}
|
||||
|
||||
interface RepoInfo {
|
||||
full_name: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
html_url: string;
|
||||
stargazers_count: number;
|
||||
forks_count: number;
|
||||
language: string | null;
|
||||
}
|
||||
|
||||
// Retry configuration
|
||||
const MAX_RETRIES = 3;
|
||||
const INITIAL_RETRY_DELAY = 1000; // 1 second
|
||||
const MAX_RETRY_DELAY = 10000; // 10 seconds
|
||||
const RATE_LIMIT_DELAY = 60000; // 1 minute for rate limit (403/429)
|
||||
|
||||
// Owners to exclude from contributed repos
|
||||
const EXCLUDED_REPO_OWNERS = new Set(['everii-Group', 'hundertzehn', 'meso-unimpressed']);
|
||||
|
||||
function getHeaders(): Record<string, string> {
|
||||
const headers: Record<string, string> = {
|
||||
Accept: 'application/vnd.github.v3+json',
|
||||
};
|
||||
|
||||
// Use GitHub token if available (for higher rate limits during build)
|
||||
const token = process.env.GITHUB_TOKEN;
|
||||
if (token) {
|
||||
headers.Authorization = `token ${token}`;
|
||||
}
|
||||
|
||||
return headers;
|
||||
}
|
||||
|
||||
// Exponential backoff retry for fetch
|
||||
async function fetchWithRetry(
|
||||
url: string,
|
||||
options: RequestInit = {},
|
||||
retryCount = 0
|
||||
): Promise<Response> {
|
||||
try {
|
||||
const response = await fetch(url, { ...options, headers: getHeaders() });
|
||||
|
||||
if (response.status === 429) {
|
||||
if (retryCount < MAX_RETRIES) {
|
||||
const retryAfter = response.headers.get('retry-after');
|
||||
const delay = retryAfter
|
||||
? parseInt(retryAfter, 10) * 1000
|
||||
: Math.min(RATE_LIMIT_DELAY, INITIAL_RETRY_DELAY * Math.pow(2, retryCount));
|
||||
|
||||
console.warn(
|
||||
`Rate limited for ${url}, waiting ${delay}ms before retry ${retryCount + 1}/${MAX_RETRIES}`
|
||||
);
|
||||
return new Promise((resolve) =>
|
||||
setTimeout(() => resolve(fetchWithRetry(url, options, retryCount + 1)), delay)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
// Network errors (timeout, connection refused, etc.)
|
||||
if (retryCount < MAX_RETRIES) {
|
||||
const delay = Math.min(MAX_RETRY_DELAY, INITIAL_RETRY_DELAY * Math.pow(2, retryCount));
|
||||
console.warn(
|
||||
`Network error for ${url}, retrying in ${delay}ms (${retryCount + 1}/${MAX_RETRIES}):`,
|
||||
error
|
||||
);
|
||||
return new Promise((resolve) =>
|
||||
setTimeout(() => resolve(fetchWithRetry(url, options, retryCount + 1)), delay)
|
||||
);
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchGitHubProjects(username: string): Promise<Project[]> {
|
||||
try {
|
||||
// Use search API to filter non-forks and sort by stars
|
||||
const response = await fetchWithRetry(
|
||||
`${GITHUB_API_BASE}/search/repositories?q=${encodeURIComponent(`user:${username} fork:false`)}&sort=stars&order=desc&per_page=100`,
|
||||
{}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 403 || response.status === 429) {
|
||||
console.warn(
|
||||
`GitHub API rate limit exceeded for user repos. Set GITHUB_TOKEN env var for higher limits.`
|
||||
);
|
||||
} else {
|
||||
console.error(`GitHub API error: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
const searchData = await response.json();
|
||||
|
||||
return searchData.items.map(
|
||||
(repo: {
|
||||
name: string;
|
||||
description: string | null;
|
||||
html_url: string;
|
||||
stargazers_count: number;
|
||||
forks_count: number;
|
||||
language: string | null;
|
||||
pushed_at: string;
|
||||
}) => ({
|
||||
name: repo.name,
|
||||
description: repo.description ?? '',
|
||||
url: repo.html_url,
|
||||
stars: repo.stargazers_count,
|
||||
forks: repo.forks_count,
|
||||
language: repo.language ?? undefined,
|
||||
isFork: false,
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error fetching GitHub projects:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchContributedRepos(username: string): Promise<Project[]> {
|
||||
try {
|
||||
// Search for merged PRs by this user
|
||||
const searchResponse = await fetchWithRetry(
|
||||
`${GITHUB_API_BASE}/search/issues?q=${encodeURIComponent(`type:pr author:${username} is:merged`)}&per_page=100`,
|
||||
{}
|
||||
);
|
||||
|
||||
if (!searchResponse.ok) {
|
||||
if (searchResponse.status === 403 || searchResponse.status === 429) {
|
||||
console.warn(
|
||||
`GitHub Search API rate limit exceeded. Set GITHUB_TOKEN env var for higher limits.`
|
||||
);
|
||||
} else {
|
||||
console.error(
|
||||
`GitHub Search API error: ${searchResponse.status} ${searchResponse.statusText}`
|
||||
);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
const searchData: SearchResponse = await searchResponse.json();
|
||||
|
||||
if (searchData.total_count === 0 || !searchData.items || searchData.items.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Extract unique repositories from closed PRs
|
||||
const repoData = new Map<string, { owner: string; name: string; stars: number }>();
|
||||
for (const item of searchData.items) {
|
||||
if (item.pull_request?.merged_at && item.repository_url) {
|
||||
const repoUrl = item.repository_url;
|
||||
if (!repoData.has(repoUrl)) {
|
||||
// Parse owner and repo name from API URL: https://api.github.com/repos/owner/name
|
||||
const match = repoUrl.match(/\/repos\/([^\/]+)\/([^\/]+)$/);
|
||||
if (match) {
|
||||
const [, owner, name] = match;
|
||||
// Skip repos from excluded owners
|
||||
if (!EXCLUDED_REPO_OWNERS.has(owner)) {
|
||||
repoData.set(repoUrl, { owner, name, stars: 0 });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (repoData.size === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const repos = await Promise.all(
|
||||
[...repoData.entries()].map(async ([repoUrl, data]) => {
|
||||
try {
|
||||
const repoResponse = await fetchWithRetry(repoUrl, {});
|
||||
|
||||
if (!repoResponse.ok) {
|
||||
console.warn(`Could not fetch repo ${repoUrl}: ${repoResponse.status}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
const repo: RepoInfo = await repoResponse.json();
|
||||
|
||||
// Create URL to user's closed PRs in this repo
|
||||
const prsUrl = `https://github.com/${data.owner}/${data.name}/pulls?q=is:pr+author:${encodeURIComponent(username)}+is:merged`;
|
||||
|
||||
return {
|
||||
name: repo.full_name,
|
||||
description: repo.description ?? '',
|
||||
url: prsUrl,
|
||||
stars: repo.stargazers_count,
|
||||
forks: repo.forks_count,
|
||||
language: repo.language ?? undefined,
|
||||
isFork: false,
|
||||
};
|
||||
} catch (error) {
|
||||
console.warn(`Error fetching repo details for ${repoUrl}:`, error);
|
||||
return null;
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
// Sort by stars descending and take top 5
|
||||
return repos
|
||||
.filter((repo) => repo !== null)
|
||||
.sort((a, b) => b.stars - a.stars)
|
||||
.slice(0, 5);
|
||||
} catch (error) {
|
||||
console.error('Error fetching contributed repos:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Helper to get top projects from array
|
||||
export function getTopProjects(projects: Project[], limit: number): Project[] {
|
||||
return projects.slice(0, limit);
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
// Re-export content types for convenient access
|
||||
export type { Profile, Experience, Education, Skill, Project, CVData } from './content/types.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Format a year-month date string to display just the year
|
||||
* @param dateStr - Date string in YYYY-MM format, or undefined for 'Present'
|
||||
* @returns Formatted year or 'Present'
|
||||
*/
|
||||
export function formatDate(dateStr: string | undefined): string {
|
||||
if (!dateStr) return 'Present';
|
||||
const date = new Date(dateStr + '-01');
|
||||
return date.toLocaleDateString('en-US', { year: 'numeric' });
|
||||
}
|
||||
Reference in New Issue
Block a user