Skip to content

Commit

Permalink
Improve about page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jackreimers
jackreimers committed Feb 17, 2024
1 parent 95ab77e commit a82eb07
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 153 deletions.
22 changes: 13 additions & 9 deletions src/lib/components/layout/blog-header.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,27 @@
import PageHeader from '$lib/components/layout/page-header.svelte';
import Button from '$lib/components/buttons/button.svelte';
import Icon from '$lib/components/text/icon.svelte';
export let data: BlogPost;
</script>

<PageHeader>
<div class="text-center">
<div class="flex flex-col gap-2.5 sm:gap-3.5">
<h1 class="text-3xl font-bold sm:text-5xl lg:text-6xl">
{data.metadata.title}
</h1>
<div
class="mb-4 flex flex-col gap-2.5 border-b-2 border-gray-200 pb-4 text-center sm:mb-8 sm:gap-3.5 sm:pb-8"
class="flex items-center gap-2 text-sm font-semibold leading-none sm:gap-2.5 sm:text-base"
>
<p class="mb-0.5 text-sm leading-none sm:text-base">
{getDateString(data.metadata.date)}
</p>
<h1 class="text-3xl font-bold sm:text-5xl lg:text-6xl">
{data.metadata.title}
</h1>
<Icon
icon="calendar_month"
weight={400}
classes="rounded bg-gradient-to-br from-blue-600 to-blue-800 p-1 text-white sm:p-1.5"
/>
<p>{getDateString(data.metadata.date)}</p>
</div>
<div class="mx-auto flex flex-wrap justify-center gap-2">
<div class="flex flex-wrap gap-2">
{#each data.metadata.categories as category}
<Button
onClick={() => {}}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/layout/header.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
</div>
</header>

<div class="h-28 sm:h-32 md:h-36 lg:h-64" />
<div class="h-[150px] md:h-[200px] lg:h-64" />

<div
class:w-0={!open}
Expand Down
154 changes: 14 additions & 140 deletions src/routes/about/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@
import PageHeader from '$lib/components/layout/page-header.svelte';
import Button from '$lib/components/buttons/button.svelte';
import { page } from '$app/stores';
import Icon from '$lib/components/text/icon.svelte';
</script>

<svelte:head>
<title>Jack Reimers | About</title>
</svelte:head>

<PageHeader>
<h1 class="text-center text-3xl font-bold sm:text-5xl lg:text-6xl">About</h1>
<h1 class="text-3xl font-bold sm:text-5xl lg:text-6xl">About</h1>
</PageHeader>

<div class="flex flex-col gap-5">
<div class="mb-8 flex flex-col gap-4">
<div class="flex gap-3 sm:gap-4">
<div class="flex flex-1 overflow-hidden rounded bg-gray-100">
<div class="mx-auto w-[200px] xl:w-[300px]">
Expand Down Expand Up @@ -47,147 +47,21 @@
</Button>
</div>
</div>
<div class="flex">
<span class="w-[4px] rounded-full bg-gradient-to-b from-blue-600 to-blue-800" />
<div class="py-1 pl-3">
<p class="text-2xl font-bold md:text-4xl">Jack Reimers</p>
<p class="font-medium text-gray-500">Software Engineer</p>
<div>
<div
class="flex items-center gap-2 text-sm font-semibold leading-none sm:gap-2.5 sm:text-base"
>
<Icon
icon="work"
weight={400}
classes="rounded bg-gradient-to-br from-blue-600 to-blue-800 p-1 text-white sm:p-1.5"
/>
<p>Software Engineer at SSW</p>
</div>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Posuere urna nec tincidunt praesent semper feugiat nibh.
</p>
</div>
<!--
<div class="flex flex-col gap-8 md:flex-row">
<div class="mx-auto flex flex-col gap-3 bg-gray-100">
<div class="text-center">
<p class="text-2xl font-semibold">Jack Reimers</p>
<p class="font-medium text-gray-500">Software Engineer</p>
</div>
<div class="mx-auto">
<div class="flex gap-3">
<Button classes="rounded-full bg-gray-100 p-4 hover:bg-gray-200">
<Mail />
</Button>
<Button
href="https://www.linkedin.com/in/jackreimers"
target="_blank"
classes="rounded-full bg-gray-100 p-4 hover:bg-gray-200"
>
<Linkedin />
</Button>
<Button
href="https://github.com/jackreimers"
target="_blank"
classes="rounded-full bg-gray-100 p-4 hover:bg-gray-200"
>
<Github />
</Button>
</div>
</div>
</div>
<div class="flex-1">
<p
class="mb-1 bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-4xl font-bold leading-none text-transparent"
>
Jack Reimers
</p>
<p class="mb-3 font-semibold text-gray-500">Full Stack Software Engineer</p>
<p class="mb-4 font-medium">SSW Consulting</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Posuere urna nec tincidunt praesent semper
feugiat nibh.
</p>
</div>
</div>
<div class="mt-6">
<div>
<div class="flex gap-4 text-center">
<div class="">
<div class="inline-block rounded bg-gray-100 p-4">
<img src="/images/csharp.png" alt="C# Logo" width="64" />
</div>
<p class="text-sm font-medium">C#</p>
</div>
<div>
<div class="inline-block rounded bg-gray-100 p-4">
<img src="/images/javascript.png" alt="JavaScript Logo" width="64" class="rounded" />
</div>
<p class="text-sm font-medium">JavaScript</p>
</div>
<div>
<div class="inline-block rounded bg-gray-100 p-4">
<img src="/images/typescript.svg" alt="TypeScript Logo" width="64" class="rounded" />
</div>
<p class="text-sm font-medium">TypeScript</p>
</div>
</div>
</div>
</div>
<div class="mb-6 flex gap-4">
<span class="w-[4px] rounded-full bg-gradient-to-b from-blue-600 to-blue-800" />
<div>
<p class="mb-4 text-gray-500">Frontend</p>
<div class="flex gap-8 text-center">
<div>
<div class="inline-block rounded bg-gray-100 p-4">
<img src="/images/blazor.png" alt="C#" width="100" />
</div>
<p class="font-medium">Blazor</p>
</div>
<div>
<div class="inline-block rounded bg-gray-100 p-4">
<img src="/images/angular.svg" alt="C#" width="100" class="rounded" />
</div>
<p class="font-medium">Angular</p>
</div>
</div>
</div>
</div>
<div class="">
<h2 class="text-3xl font-semibold">Jack Reimers</h2>
<p class="font-medium text-gray-500">Full Stack Software Engineer</p>
</div>
<PageHeader border={false}>
<p class="font-semibold text-[#CC4141]">SSW</p>
<div class="flex flex-col gap-4">
<div class="flex w-full justify-center gap-3">
<Button classes="rounded-full bg-gray-100 p-4 hover:bg-gray-200">
<Mail />
</Button>
<Button
href="https://www.linkedin.com/in/jackreimers"
target="_blank"
classes="rounded-full bg-gray-100 p-4 hover:bg-gray-200"
>
<Linkedin />
</Button>
<Button
href="https://github.com/jackreimers"
target="_blank"
classes="rounded-full bg-gray-100 p-4 hover:bg-gray-200"
>
<Github />
</Button>
</div>
</div>
</PageHeader>
<div class="rounded md:flex-1">
<p class="mb-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Posuere urna nec tincidunt praesent semper feugiat nibh.
</p>
<p>
In vitae turpis massa sed elementum tempus. Laoreet id donec ultrices tincidunt arcu non
sodales neque sodales. Velit laoreet id donec ultrices. Pulvinar neque laoreet suspendisse
interdum consectetur libero id. Mi bibendum neque egestas congue.
</p>
</div>
-->
2 changes: 1 addition & 1 deletion src/routes/blog/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</svelte:head>

<PageHeader>
<h1 class="text-center text-3xl font-bold sm:text-5xl lg:text-6xl">Blog Posts</h1>
<h1 class="text-3xl font-bold sm:text-5xl lg:text-6xl">Blog Posts</h1>
</PageHeader>

<div class="grid gap-5">
Expand Down
4 changes: 2 additions & 2 deletions src/routes/projects/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</svelte:head>

<PageHeader>
<h1 class="text-center text-3xl font-bold sm:text-5xl lg:text-6xl">Projects</h1>
<h1 class="text-3xl font-bold sm:text-5xl lg:text-6xl">Projects</h1>
</PageHeader>

<p class="text-center">This page is still under construction.</p>
<p class="">This page is still under construction.</p>

0 comments on commit a82eb07

Please sign in to comment.